part 12 done

Pt12/part12-containers-applications/todo-app/todo-frontend/src/Todos/TodoView.jsx

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react'
+import axios from '../util/apiClient'
+
+import List from './List'
+import Form from './Form'
+
+const TodoView = () => {
+  const [todos, setTodos] = useState([])
+
+  const refreshTodos = async () => {
+    const { data } = await axios.get('/todos')
+    setTodos(data)
+  }
+
+  useEffect(() => {
+    refreshTodos()
+  }, [])
+
+  const createTodo = async (todo) => {
+    const { data } = await axios.post('/todos', todo)
+    setTodos([...todos, data])
+  }
+
+  const deleteTodo = async (todo) => {
+    await axios.delete(`/todos/${todo._id}`)
+    refreshTodos()
+  }
+
+  const completeTodo = async (todo) => {
+    await axios.put(`/todos/${todo._id}`, {
+      text: todo.text,
+      done: true
+    })
+    refreshTodos()
+  }
+
+  return (
+    <>
+      <h1>Todos</h1>
+      <Form createTodo={createTodo} />
+      <List todos={todos} deleteTodo={deleteTodo} completeTodo={completeTodo} />
+    </>
+  )
+}
+
+export default TodoView