dashboard page refacto

src/components/dashboard/DashboardPage.js

@@ -5,14 +5,19 @@ import { bindActionCreators } from "redux";
 import { connect } from "react-redux";
 import * as taskActions from "../../redux/actions/taskAction";
 import PropTypes from "prop-types";
+import TaskList from "./TaskList";
 
 class DashboardPage extends Component {
   state = {
     task: {
       title: "",
     },
+    test: "hello there",
   };
 
+  componentDidMount() {
+    console.log("ComponentDidMount called!");
+  }
   handleChange = (event) => {
     const task = { ...this.state.task, title: event.target.value };
     this.setState({ task });
@@ -21,28 +26,21 @@ class DashboardPage extends Component {
   handleSubmit = (event) => {
     event.preventDefault();
     this.props.actions.createTask(this.state.task);
+    const task = { ...this.state.task, title: "" };
+    this.setState({ task });
   };
   render() {
     return (
       <div className="container px-0 mt-1 ml-0 px-0">
         <Pomodoro />
         <div className="row">
           <ProjectList />
-          <div className="col">
-            <form onSubmit={this.handleSubmit}>
-              <input
-                className="form-control mb-4"
-                id="taskInput"
-                type="text"
-                placeholder="Add a task"
-                value={this.state.task.title}
-                onChange={this.handleChange}
-              />
-            </form>
-            {this.props.tasks.map((task) => (
-              <li key={task.title}>{task.title}</li>
-            ))}
-          </div>
+          <TaskList
+            onFormSubmit={this.handleSubmit}
+            tasks={this.props.tasks}
+            onInputChange={this.handleChange}
+            value={this.state.task.title}
+          />
         </div>
       </div>
     );

src/components/dashboard/TaskList.js

@@ -1,16 +1,35 @@
 import React from "react";
+import PropTypes from "prop-types";
 
-const TaskList = () => {
+const TaskList = (props) => {
   return (
     <div className="col">
-      <input
-        className="form-control mb-4"
-        id="tableSearch"
-        type="text"
-        placeholder="Type something to search list items"
-      />
+      <form onSubmit={props.onFormSubmit}>
+        <input
+          className="form-control mb-4"
+          id="taskInput"
+          type="text"
+          placeholder="Add a task"
+          value={props.value}
+          onChange={props.onInputChange}
+        />
+      </form>
+      <ul className="list-group">
+        {props.tasks.map((task) => (
+          <li className="list-group-item" key={task.title}>
+            {task.title}
+          </li>
+        ))}
+      </ul>
     </div>
   );
 };
 
+TaskList.propTypes = {
+  tasks: PropTypes.array.isRequired,
+  onFormSubmit: PropTypes.func.isRequired,
+  onInputChange: PropTypes.func.isRequired,
+  value: PropTypes.string.isRequired,
+};
+
 export default TaskList;