split src/tasks.js into multiple components

src/components/add-task.js

@@ -0,0 +1,33 @@
+import React from 'react'
+
+function FilterTask(props) {
+  return (
+    <li className="list-group-item">
+      <form className="row" onSubmit={props.addTask}>
+        <input
+          className="col form-control input-sm"
+          placeholder="Add task"
+          name="newTask"
+          value={props.newTask}
+          onChange={props.handleChange}
+        />
+        {props.component === 'project' ? null : (
+          <select
+            className="form-control custom-select col"
+            name="project"
+            value={props.project}
+            onChange={props.handleChange}
+          >
+            {props.projects.map(p => (
+              <option key={p.id} value={p.id}>
+                {p.name}
+              </option>
+            ))}
+          </select>
+        )}
+      </form>
+    </li>
+  )
+}
+
+export default FilterTask

src/components/filter-task.js

@@ -0,0 +1,25 @@
+import React from 'react'
+
+function FilterTask(props) {
+  return (
+    <form className="form-inline my-2 my-lg-0">
+      <input
+        className="form-control input-sm mr-sm-2"
+        type="search"
+        value={props.search}
+        name="search"
+        placeholder="Filter"
+        onChange={e => props.handleChange(e)}
+      />
+      <button
+        className="btn btn-outline-secondary my-2 my-sm-0"
+        type="submit"
+        onClick={e => props.handleSubmit(e)}
+      >
+        Show all
+      </button>
+    </form>
+  )
+}
+
+export default FilterTask

src/components/task-list.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import TaskRow from './task-row'
+
+function TaskList(props) {
+  const { displayedTasks } = props
+  return (
+    <ul className="list-group">
+      {displayedTasks.map(task => (
+        <TaskRow key={task.id} task={task} {...props} />
+      ))}
+    </ul>
+  )
+}
+
+export default TaskList

src/components/task-row.js

@@ -0,0 +1,37 @@
+import React from 'react'
+
+const TaskRow = props => {
+  const { task } = props
+  const project = props.projects.find(p => p.id === task.projectId) || 'None'
+  const projectName = project.name || 'None'
+  return (
+    <li className="list-group-item" key={task.id} onClick={props.editTask}>
+      <button
+        className="btn btn-outline-danger mr-1"
+        onClick={() => props.deleteTask(task.id)}
+      >
+        X
+      </button>
+
+      <span>{task.desc}</span>
+      {!props.selectedProjectId ? (
+        <button
+          className="btn btn-outline-dark ml-5"
+          onClick={() => props.editProject(task.projectId)}
+        >
+          {projectName}
+        </button>
+      ) : null}
+
+      <button
+        className={`btn btn-${
+          task.completed ? 'secondary' : 'outline-success'
+        } float-right`}
+        onClick={() => props.completeTask(task.id)}
+      >
+        &#10004;
+      </button>
+    </li>
+  )
+}
+export default TaskRow

src/components/tasks.js

@@ -1,100 +1,21 @@
 import React from 'react'
+import AddTask from './add-task'
+import FilterTask from './filter-task'
+import TaskList from './task-list'
 
 function Tasks(props) {
-  // props are passed from App as {...this.state}
+  const { tasks } = props
   const filtered = props.filtered || []
   const completed = props.completed || []
+
   return (
     <div>
-      <h3 className="mt-4">Your open tasks</h3>
+      {tasks.length === 0 ? null : <h3 className="mt-4">Your Open Tasks</h3>}
-      <form className="form-inline my-2 my-lg-0">
+      <FilterTask {...props} />
-        <input
+      <TaskList displayedTasks={filtered} {...props} />
-          className="form-control input-sm mr-sm-2"
+      <AddTask {...props} />
-          type="search"
-          value={props.search}
-          name="search"
-          placeholder="Filter"
-          onChange={e => props.handleChange(e)}
-        />
-        <button
-          className="btn btn-outline-secondary my-2 my-sm-0"
-          type="submit"
-          onClick={e => props.handleSubmit(e)}
-        >
-          Show all
-        </button>
-      </form>
-      <ul className="list-group">
-        {filtered.map(task => (
-          <li className="list-group-item" key={task.id} onClick={props.editTask}>
-            <button
-              className="btn btn-outline-danger mr-1"
-              onClick={() => props.deleteTask(task.id)}
-            >
-              X
-            </button>
-            {task.desc}
-            {props.component === 'project' ? null : (
-              <span className="" onClick={() => props.editProject(task.project)}>
-                {' '}
-                ({props.projects[task.project].name})
-              </span>
-            )}
-            <button
-              className={`btn btn-${task.completed ? 'secondary' : 'outline-success'} float-right`}
-              onClick={() => props.completeTask(task.id)}
-            >
-              &#10004;
-            </button>
-          </li>
-        ))}
-        <li className="list-group-item">
-          <form className="row" onSubmit={props.addTask}>
-            <input
-              className="col form-control input-sm"
-              placeholder="Add task"
-              name="newTask"
-              value={props.newTask}
-              onChange={props.handleChange}
-            />
-            {props.component === 'project' ? null : (
-              <select
-                className="form-control custom-select col"
-                name="project"
-                value={props.project}
-                onChange={props.handleChange}
-              >
-                {props.projects.map(p => (
-                  <option key={p.id} value={p.id}>
-                    {p.name}
-                  </option>
-                ))}
-              </select>
-            )}
-          </form>
-        </li>
-      </ul>
-
       {completed.length === 0 ? null : <h3 className="mt-4">Completed</h3>}
-      <ul className="list-group">
+      <TaskList displayedTasks={completed} {...props} />
-        {completed.map(task => (
-          <li className="list-group-item" key={task.id} onClick={props.editTask}>
-            <button
-              className="btn btn-outline-danger mr-1"
-              onClick={() => props.deleteTask(task.id)}
-            >
-              X
-            </button>
-            {task.desc}
-            <button
-              className={`btn btn-${task.completed ? 'secondary' : 'outline-success'} float-right`}
-              onClick={() => props.completeTask(task.id)}
-            >
-              &#10004;
-            </button>
-          </li>
-        ))}
-      </ul>
     </div>
   )
 }