diff --git a/src/App.jsx b/src/App.jsx index 6bf3ac6..eece882 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,11 +1,67 @@ -// удаляем все, оставляя лишь пустую функцию App ниже +import React, { useState, useReducer, useRef, memo } from 'react' + +function tasksReducer(state, action) { + switch(action.type) { + case 'ADD_TASK': + return [...state, action.payload] + case 'TOGGLE_TASK': + return state.map(task => task.id === action.payload ? {...task, complite: !task.complite} : task) + case 'REMOVE_TASK': + return state.filter(task => task.id !== action.payload) + default: + return state + } +} + +const TaskList = memo(function TaskList({tasks, onToggle, onRemove}) { + console.log("Rendred") + return ( + + ) +}) function App() { + const [tasks, dispatch] = useReducer(tasksReducer,[]) + const [input,setInput] = useState('') + const [error,setError] = useState('') + const inputRef = useRef(null) + + const addTask = () => { + if (input.trim() === '') { + setError('Пустой текст задачи') + return + } + setError('') + dispatch({ + type: 'ADD_TASK', + payload: {id: Date.now(), text: input.trim(), complite: false } + }) + setInput('') + inputRef.current.focus() + } + return ( - <> - {/* Добавьте тестовый контент для проверки */} -

Hello, React!

- +
+

Список дел

+ setInput(e.target.value)} /> + + {error &&

{error}

} + + dispatch({type: 'TOGGLE_TASK', payload: id})} + onRemove={id => dispatch({type: 'REMOVE_TASK', payload: id})} /> +
) }