Finished Project

frontend/components/App.js

@@ -1,9 +1,90 @@
-import React from 'react'
-
-const URL = 'http://localhost:9000/api/todos'
+import React from "react";
+import Form from "./Form";
+import TodoList from "./TodoList";
+import axios from "axios";
+const URL = "http://localhost:9000/api/todos";
 
 export default class App extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      todos: [],
+      error: "",
+    };
+  }
+
+  handleAdd = (input) => {
+    const newTask = {
+      name: input,
+      id: Date.now(),
+      completd: false,
+    };
+    this.setState({
+      ...this.state,
+      todos: [...this.state.todos, newTask],
+      error: "",
+    });
+  };
+
+  handleCompleted = () => {
+    this.setState({
+      ...this.state,
+      todos: this.state.todos.filter((todo) => {
+        return todo.completed === false;
+      }),
+    });
+  };
+
+  toggleCompleted = (itemId) => {
+    this.setState({
+      ...this.state,
+      todos: this.state.todos.map((todo) => {
+        if (itemId === todo.id) {
+          return {
+            ...todo,
+            completed: !todo.completed,
+          };
+        }
+        return todo;
+      }),
+    });
+  };
+
+  setAxiosErrors = (err) =>
+    this.setState({ ...this.state, error: err.response.data.message });
+
+  getToDos = () => {
+    axios
+      .get(`${URL}`)
+      .then((res) => {
+        console.log(res);
+        this.setState({ ...this.state, todos: res.data.data });
+      })
+      .catch(this.setAxiosErrors);
+  };
+
+  componentDidMount = () => {
+    this.getToDos();
+  };
+
+  postToDo = (input) => {
+    axios
+      .post(URL, { name: input })
+      .then((res) => {
+        this.handleAdd(input);
+      })
+      .catch(this.setAxiosErrors);
+  };
+
   render() {
-    return null
+    const { todos } = this.state;
+    console.log(this.state.input);
+    return (
+      <div>
+        <h3>Error : {this.state.error}</h3>
+        <TodoList toggleCompleted={this.toggleCompleted} todos={todos} />
+        <Form postToDo={this.postToDo} handleCompleted={this.handleCompleted} />
+      </div>
+    );
   }
 }

frontend/components/Form.js

@@ -1,7 +1,44 @@
-import React from 'react'
+import React from "react";
+import axios from "axios";
 
 export default class Form extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      newTask: "",
+    };
+  }
+
+  completedTask = (evt) => {
+    evt.preventDefault();
+    this.props.handleCompleted();
+  };
+
+  handleChange = (evt) => {
+    evt.preventDefault();
+    this.setState({ ...this.state, newTask: evt.target.value });
+  };
+
+  handlePost = (evt) => {
+    evt.preventDefault();
+    this.props.postToDo(this.state.newTask);
+
+    this.setState({ ...this.state, newTask: "" });
+  };
   render() {
-    return null
+    return (
+      <form onSubmit={this.handlePost}>
+        <div>
+          <input
+            type="text"
+            placeholder="Add to list"
+            onChange={this.handleChange}
+            value={this.state.newTask}
+          />
+          <button onClick={this.handlePost}>Add</button>
+        </div>
+        <button onClick={this.completedTask}>Remove Completed</button>
+      </form>
+    );
   }
 }

frontend/components/Todo.js

@@ -1,7 +1,19 @@
-import React from 'react'
+import React from "react";
 
 export default class Todo extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  toggle = (evt) => {
+    evt.preventDefault();
+    this.props.toggleCompleted(this.props.todo.id);
+  };
   render() {
-    return null
+    return (
+      <li onClick={this.toggle}>
+        {this.props.todo.name}{" "}
+        {this.props.todo.completed ? <span>&#10003;</span> : <span></span>}
+      </li>
+    );
   }
 }

frontend/components/TodoList.js

@@ -1,7 +1,26 @@
-import React from 'react'
+import React from "react";
+import Todo from "./Todo";
 
 export default class TodoList extends React.Component {
+  constructor(props) {
+    super(props);
+  }
   render() {
-    return null
+    return (
+      <div>
+        <h2 style={{ textDecoration: "underline" }}>Todo List: </h2>
+        <ul>
+          {this.props.todos.map((todo) => {
+            return (
+              <Todo
+                key={todo.id}
+                todo={todo}
+                toggleCompleted={this.props.toggleCompleted}
+              />
+            );
+          })}
+        </ul>
+      </div>
+    );
   }
 }