import React , { useState , useEffect } from 'react' ; import classNames from 'classnames' ; import TodoForm from './TodoForm' ; import axios from '../api/axios' ; import '../styles/App.css' ; type Todo = { id : number ; name : string ; done : boolean ; } ; type Todos = Todo [ ] ; const App = ( ) => { const [ todos , setTodos ] = useState < Todos > ( [ ] ) ; const refreshTodos = ( ) => { axios < Todos > ( '/api/todos' ) . then ( setTodos ) ; } ; useEffect ( ( ) => { refreshTodos ( ) ; } , [ ] ) ; const onToggleTodo = async ( todo ) => { await axios ( '/api/toggle' , todo . id ) ; refreshTodos ( ) ; } ; return ( < div className = "App" > < header className = "App-header" > < ul > < TodoForm refreshTodos = { refreshTodos } /> { todos . map ( ( todo , index ) => { return ( < li onClick = { ( ) => onToggleTodo ( todo ) } key = { index } className = { classNames ( { done : todo . done } ) } > { todo . name } < /li>); } ) } < /ul> < /header> < /div>); } ; export default App ;