async requests for addTask + deleteTask

src/App.js

@@ -77,23 +77,50 @@ class App extends React.Component {
     this.setState({ search: '' })
   }
 
-  addTask(e) {
+  async addTask(e) {
     e.preventDefault()
-    if (this.state.newTask === '') {
+    const newTask = {
-      console.log('Not adding empty task.')
+      desc: this.state.newTask,
+      projectName: this.state.selectedProject,
+      // the backend expects projectName because it creates the project on the fly if none exists with that name
+      // this feature comes at the price that there can't be two independent projects with the same name
+      // which could be handy if users want to have private projects
+    }
+    if (newTask.desc === '') {
+      alert('Task description is empty.')
+      return
+    } else if (!newTask.projectName) {
+      alert('Select a project for new task.')
       return
     }
-    this.setState({
+    try {
-      tasks: this.state.tasks.concat({
+      console.log('Adding task: ', newTask)
-        id: this.state.tasks.length,
+      const { data, error } = await axios.post(api + '/api/tasks', newTask)
-        desc: this.state.newTask,
+      if (error) {
-        project: this.state.project,
+        alert('Received error when adding task: ', error)
-      }),
+      } else if (data.desc && data.projectId) {
-      newTask: '',
+        console.log('Successfully added task:', data)
-    })
+        this.setState({ tasks: this.state.tasks.concat(data), newTask: '' })
+      } else {
+        console.log('Received malformed data for added task: ', data)
+      }
+    } catch (e) {
+      alert('Failed to add task: ', e)
+    }
   }
-  deleteTask(id) {
+  async deleteTask(id) {
     this.setState({ tasks: this.state.tasks.filter(t => t.id !== id) })
+    try {
+      const { data, error } = await axios.post(api + `/api/tasks/${id}/delete`)
+      if (error) {
+        alert('Received error when deleting task: ', error)
+      } else {
+        console.log('Successfully deleted task: ', data)
+        this.setState({ tasks: this.state.tasks.filter(t => t.id !== data.id), newTask: '' })
+      }
+    } catch (e) {
+      alert('Failed to delete task: ', e)
+    }
   }
   completeTask(id) {
     const otherTasks = this.state.tasks.filter(t => t.id !== id)
@@ -183,7 +210,7 @@ class App extends React.Component {
     const filtered = this.state.tasks.filter(
       task =>
         task.completed !== true &&
-        this.state.search === task.desc.slice(0, this.state.search.length)
+        this.state.search === task.desc.slice(0, this.state.search.length),
     )
 
     const renderComponent = () =>
@@ -203,11 +230,7 @@ class App extends React.Component {
 
     return (
       <div>
-        <Navbar
+        <Navbar handleChange={this.handleChange} navigate={this.navigate} {...this.state} />
-          handleChange={this.handleChange}
-          navigate={this.navigate}
-          {...this.state}
-        />
         {renderComponent()}
       </div>
     )

src/components/add-task.js

@@ -14,17 +14,19 @@ function FilterTask(props) {
         {props.component === 'project' ? null : (
           <select
             className="form-control custom-select col"
-            name="project"
+            name="selectedProject"
-            value={props.project}
+            value={props.project.name}
             onChange={props.handleChange}
-          >
+            >
+	    <option value='' defaultValue>select project</option>
             {props.projects.map(p => (
-              <option key={p.id} value={p.id}>
+              <option key={p.id} value={p.name}>
                 {p.name}
               </option>
             ))}
           </select>
         )}
+      <button className="form-control col-sm-1 btn" type="submit" onClick={props.addTask}>Add</button>
       </form>
     </li>
   )

src/components/task-row.js

@@ -6,27 +6,22 @@ const TaskRow = props => {
   const projectName = project.name || 'None'
   return (
     <li className="list-group-item" key={task.id} onClick={props.editTask}>
-      <button
+      <button className="btn btn-outline-danger mr-1" onClick={() => props.deleteTask(task.id)}>
-        className="btn btn-outline-danger mr-1"
-        onClick={() => props.deleteTask(task.id)}
-      >
         X
       </button>
 
       <span>{task.desc}</span>
-      {props.selectedProjectId ? null :
+      {props.selectedProjectId ? null : (
         <button
           className="btn btn-outline-dark ml-5"
           onClick={() => props.selectProject(task.projectId)}
         >
           {projectName}
         </button>
-      }
+      )}
 
       <button
-        className={`btn btn-${
+        className={`btn btn-${task.completed ? 'secondary' : 'outline-success'} float-right`}
-          task.completed ? 'secondary' : 'outline-success'
-        } float-right`}
         onClick={() => props.completeTask(task.id)}
       >
         &#10004;