import React, { useReducer } from 'react';
import { Input } from './components/Input'

const initialState = { todos: [] }

const reducer = (state, action) => {
    switch (action.type) {
        case 'addTodo': return {
            ...state,
            todos: [
                ...state.todos,
                { task: action.payload, completed: false }
            ]
        }
    }
}

const App = () => {
    const [state, dispatch] = useReducer(reducer, initialState);

    return (
        <>
            <h1>Oli's funky to-do list</h1>
            <Input addTodoDispatch={ dispatch } />

            <ul>
                {state.todos.map((todo, i) =>
                    <li key={`${i}`}>{todo.task}</li>)}
            </ul>
        </>
    )
}

export default App;