QkoSad
47 lines
951 B
React
Executable File
47 lines
951 B
React
Executable File
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
|