completed coursework

frontend/components/App.js

@@ -1,9 +1,64 @@
 import React from 'react'
+import axios from 'axios'
+import Form from './Form'
+import TodoList from './TodoList'
 
 const URL = 'http://localhost:9000/api/todos'
 
+
 export default class App extends React.Component {
+  constructor() {
+    super();
+    this.state= {
+      todo: [],
+      showCompleted: true,
+      shownTodo: []
+    }
+  }
+
+
+  fetchData =() => {
+    axios.get(URL)
+      .then(({data}) => this.setState({...this.state, todo: data.data,shownTodo: data.data.filter(task => {return task.completed === false})}))
+  }
+
+  postData = (newTask) => {
+    axios.post(URL, newTask)
+      .then(res => {this.fetchData()})
+  }
+
+ addTask =(task) => {
+      const newTask = {
+        name: task,
+        completed: false
+      }
+      this.postData(newTask)
+    }
+
+  componentDidMount = () => {
+      this.fetchData()
+   }
+
+   toggleCompleted = (taskId) => {
+    console.log(taskId)
+    axios.patch(`${URL}/${taskId}`)
+      .then(res => {this.fetchData()})
+   }
+
+   toggleView = () => {
+    this.setState({showCompleted: !this.state.showCompleted})
+   }
+
+
+
+
   render() {
-    return null
+    const stateToUse = this.state.showCompleted ? this.state.todo : this.state.shownTodo
+    return (
+      <>
+        <TodoList todo={stateToUse} toggleCompleted={this.toggleCompleted} />
+        <Form submit={this.addTask} showCompleted={this.state.showCompleted} toggleView={this.toggleView}/>
+      </>
+    )
   }
 }

frontend/components/Form.js

@@ -1,7 +1,33 @@
 import React from 'react'
 
 export default class Form extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      formValue: ''
+    }
+  }
+
+  handleChanges = (e) => this.setState({formValue: e.target.value})
+
+  handleSubmit = (event) => {
+    event.preventDefault();
+    if(this.state.formValue){
+      this.props.submit(this.state.formValue);
+      this.setState({formValue: ""})
+    }
+  }
+
+
   render() {
-    return null
+    return (
+      <>
+        <form onSubmit={this.handleSubmit}>
+          <input value={this.state.formValue} onChange={this.handleChanges}/>
+          <button>Submit</button>
+        </form>
+        <button onClick={this.props.toggleView}>{this.props.showCompleted ? 'Hide' : 'Show'} Completed</button>
+      </>
+    )
   }
 }

frontend/components/Todo.js

@@ -1,7 +1,17 @@
 import React from 'react'
 
 export default class Todo extends React.Component {
+
+
   render() {
-    return null
+    return (
+      <>
+        <div className={`task${this.props.task.completed ? 'completed' : ''} `} 
+        onClick={() => this.props.toggleCompleted(this.props.task.id)}>
+          <p>{this.props.task.name}</p>
+        </div>
+
+      </>
+    )
   }
 }

frontend/components/TodoList.js

@@ -1,7 +1,17 @@
 import React from 'react'
+import Todo from './Todo'
 
 export default class TodoList extends React.Component {
+
+
   render() {
-    return null
+    return (
+      <>
+        {this.props.todo.map((task) => {
+          return <Todo task={task} key={task.id} toggleCompleted={this.props.toggleCompleted}/>
+
+        })}
+      </>
+    )
   }
 }

frontend/styles/styles.css

@@ -76,10 +76,19 @@ ul, form {
   margin: 1rem 0 1rem 0;
 }
 
-.todo {
+.task {
   padding: 0.15rem;
 }
 
-.todo:hover {
+.task:hover {
+  cursor: pointer;
+}
+
+.taskcompleted {
+  text-decoration: line-through;
+  padding: 0.15rem;
+}
+
+.taskcompleted:hover {
   cursor: pointer;
 }