task

Author: alacret

.env.development

@@ -1,2 +1,2 @@
-REACT_APP_8BASE_API_ENDPOINT=https://api.8base.com/cjterxd0h000a01rolnskm4tg
+REACT_APP_8BASE_API_ENDPOINT=https://api.8base.com/cjtexiyn2000101s9ogtvjomb
 NODE_PATH=src

.env.production

@@ -1,2 +1,2 @@
-REACT_APP_8BASE_API_ENDPOINT=https://api.8base.com/cjterxd0h000a01rolnskm4tg
+REACT_APP_8BASE_API_ENDPOINT=https://api.8base.com/cjtexiyn2000101s9ogtvjomb
 NODE_PATH=src

src/App.js

@@ -14,8 +14,8 @@ import Menu from './components/Menu';
 
 const { REACT_APP_8BASE_API_ENDPOINT } = process.env;
 
-const AUTH_CLIENT_ID = 'qGHZVu5CxY5klivm28OPLjopvsYp0baD';
 const AUTH_DOMAIN = 'auth.8base.com';
+const AUTH_CLIENT_ID = 'qGHZVu5CxY5klivm28OPLjopvsYp0baD';
 
 const auth0WebClient = new Auth0WebClient({
   domain: AUTH_DOMAIN,

src/modules/dashboard/Dashboard.js

@@ -1,22 +1,31 @@
 import React, { Component } from 'react';
-import { Card, Heading } from '@8base/boost';
+import { Button, Card, Heading, TextAreaField } from '@8base/boost';
 import gql from 'graphql-tag';
 import { withApollo } from 'react-apollo';
 
 const TASKS_QUERY = gql`
-  query {
-    tasksList {
-      count
-      items {
+query{
+  tasksList{
+    count
+    items{
+      id
+      name
+      createdBy{
         id
-        name
-        done
-        user{
-          firstName
-        }
+        firstName
+        lastName
       }
     }
   }
+}
+`;
+
+const TASK_CREATE = gql`
+  mutation($data: TaskCreateInput!){
+    taskCreate(data: $data){
+      id
+    }
+  }
 `;
 
 
@@ -26,21 +35,48 @@ class Dashboard extends Component {
     super(props);
     this.state = {
       tasks: [],
+      text: '',
     };
   }
 
   componentDidMount(): void {
     console.log(this.props);
     this.props.client.query({ query: TASKS_QUERY, fetchPolicy: 'network-only' }).then((data) => {
-      console.log(data);
+      console.log(data.data);
+      console.log(data.data.tasksList);
+      this.setState({
+        tasks: data.data.tasksList.items,
+      });
     });
   }
 
+  createTask = () => {
+    const data = { name: this.state.text } ;
+    this.props.client.mutate({ mutation: TASK_CREATE, variables: {data} }).then((data) => {
+      this.props.client.query({ query: TASKS_QUERY, fetchPolicy: 'network-only' }).then((data) => {
+        console.log(data.data);
+        console.log(data.data.tasksList);
+        this.setState({
+          tasks: data.data.tasksList.items,
+        });
+      });
+    });
+  };
+
   render() {
 
     return (
       <Card.Plate style={{ marginLeft: '2rem' }}>
-        {this.state.tasks.map((task) => <Card.Header><Heading key={task.id} type="h4" text={task.name}/></Card.Header>)}
+        {this.state.tasks.map((task, i) => <Card.Header key={i}><Heading key={task.id} type="h4"
+                                                                         text={task.name}/></Card.Header>)}
+
+        <TextAreaField value={this.state.text} input={{
+          name: '',
+          onChange: (event) => this.setState({ text: event.target.value }),
+        }}>
+
+        </TextAreaField>
+        <Button text={'NEW '} onClick={this.createTask}/>
       </Card.Plate>
     );
   }