add Task

src/App.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import axios from 'axios'
 
-import { About, Tasks, Profile, Projects, Project, Navbar } from './components'
+import { About, Tasks, Task, Profile, Projects, Project, Navbar } from './components'
 
 const api = process.env.REACT_APP_API || 'http://localhost:1337'
 //console.log(process.env)
@@ -31,6 +31,8 @@ class App extends React.Component {
     this.completeTask = this.completeTask.bind(this)
     this.createProject = this.createProject.bind(this)
     this.selectProject = this.selectProject.bind(this)
+    this.selectTask = this.selectTask.bind(this)
+    this.updateTask = this.updateTask.bind(this)
     this.deleteProject = this.deleteProject.bind(this)
   }
 
@@ -108,6 +110,28 @@ class App extends React.Component {
       alert(`Failed to add task: ${e}`)
     }
   }
+
+  async updateTask(e) {
+    e.preventDefault()
+    const task = this.state.tasks.find(t => t.id === this.state.selectedTaskId)
+    // TODO update properties from form
+    console.log(e.target)
+    try {
+      const { data, error } = await axios.put(api + `/api/tasks/${task.id}`, task)
+      console.log('Tried to update task.')
+      if (error) {
+        alert('Received error when updating task: ', error)
+      } else if (data.desc && data.projectId) {
+        console.log('Successfully updated task:', data)
+        // TODO        this.setState({ tasks: this.state.tasks.concat(data), newTask: '' })
+      } else {
+        console.log('Received malformed data when updating task: ', data)
+      }
+    } catch (e) {
+      alert(`Updating task failed: ${e}`)
+    }
+  }
+
   async deleteTask(id) {
     this.setState({ tasks: this.state.tasks.filter(t => t.id !== id) })
     try {
@@ -144,6 +168,10 @@ class App extends React.Component {
       alert(`Failed to complete task ${task.desc}: ${e}`)
     }
   }
+  selectTask(id) {
+    this.setState({ selectedTaskId: id })
+    this.navigate('task')
+  }
 
   async createProject(e) {
     e.preventDefault()
@@ -228,6 +256,7 @@ class App extends React.Component {
         handleChange={this.handleChange}
         createProject={this.createProject}
         selectProject={this.selectProject}
+        selectTask={this.selectTask}
         deleteProject={this.deleteProject}
         addTask={this.addTask}
         completeTask={this.completeTask}
@@ -250,11 +279,22 @@ class App extends React.Component {
         deleteTask={this.deleteTask}
         filtered={filtered}
         completed={completed}
+        selectTask={this.selectTask}
         selectProject={this.selectProject}
         {...this.state}
       />
     )
   }
+  renderTask() {
+    return (
+      <Task
+        handleChange={this.handleChange}
+        updateTask={this.updateTask}
+        navigate={this.navigate}
+        {...this.state}
+      />
+    )
+  }
   render() {
     //console.log(this.state)
     // TODO refactor task filtering
@@ -274,6 +314,8 @@ class App extends React.Component {
         ? this.renderLoading()
         : this.state.component === 'tasks'
         ? this.renderTasks(filtered, completed)
+        : this.state.component === 'task'
+        ? this.renderTask()
         : this.state.component === 'about'
         ? this.renderAbout()
         : this.state.component === 'profile'

src/components/index.js

@@ -1,6 +1,7 @@
 export { default as Navbar } from './navbar'
 export { default as About } from './about'
 export { default as Tasks } from './tasks'
+export { default as Task } from './task'
 export { default as Profile } from './profile'
 export { default as Projects } from './projects'
 export { default as Project } from './project'

src/components/project.js

@@ -6,10 +6,7 @@ function Project(props) {
     props.navigate('projects')
     return null
   }
-  // TODO re-fetch project list if no project name is found instead of setting 'Default'
-  const projectName =
-    props.projects.find(p => p.id === props.selectedProjectId)['name'] || 'Default'
-
+  const project = props.projects.find(p => p.id === props.selectedProjectId)
   const filtered = props.tasks.filter(t => t.projectId === props.selectedProjectId && !t.completed)
   const completed = props.tasks.filter(
     t => (t.projectId === props.selectedProjectId && t.completed === true) || null,
@@ -17,7 +14,7 @@ function Project(props) {
 
   return (
     <div>
-      <h2>{projectName}</h2>
+      <h2>{project.name}</h2>
       <Tasks filtered={filtered} completed={completed} {...props} />
     </div>
   )

src/components/task-row.js

@@ -10,7 +10,7 @@ const TaskRow = props => {
         X
       </button>
 
-      <span>{task.desc}</span>
+      <span onClick={() => props.selectTask(task.id)}>{task.desc}</span>
       {props.component === 'project' ? null : (
         <button
           className="btn btn-outline-dark ml-5"

src/components/task.js

@@ -0,0 +1,61 @@
+import React from 'react'
+
+function Task(props) {
+  if (!props.selectedTaskId) {
+    props.navigate('tasks')
+    return null
+  }
+  const task = props.tasks.find(t => t.id === props.selectedTaskId)
+  console.log(task)
+
+  return (
+    <div>
+      <h2>Task: {task.desc}</h2>
+      <form className="form-group" name="task">
+        <ul className="list-group">
+          <li className="list-group-item row">
+            <span className="col">completed:</span>
+            <input
+              className="col"
+              type="checkbox"
+              name="completed"
+              value={task.completed}
+              onChange={props.handleChange}
+            />
+          </li>
+          <li className="list-group-item row">
+            <span className="col">created:</span>
+            <span className="col">{task.createdAt}</span>
+          </li>
+          <li className="list-group-item row">
+            <span className="col-sm-1">project:</span>
+            <select
+              className="col-sm-6"
+              name="taskNewProjectId"
+              onChange={props.handleChange}
+              defaultValue={task.projectId}
+            >
+              {props.projects.map(p => {
+                return (
+                  <option key={p.id} value={p.id} onChange={props.handleChange}>
+                    {p.name}
+                  </option>
+                )
+              })}
+            </select>
+          </li>
+          <li className="list-group-item row">
+            <input
+              className="btn btn-outline-success col"
+              type="submit"
+              onClick={props.updateTask}
+              value="Save"
+            />
+          </li>
+        </ul>
+      </form>
+    </div>
+  )
+}
+
+export default Task