diff --git a/src/App.tsx b/src/App.tsx index 1464660df..1d88b0ef9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -14,11 +14,13 @@ export const App: React.FC = () => { setFilterParam(param); }; + const souldRenderList = Boolean(state.length); + return (
- {state.length > 0 + {souldRenderList && ( <>
diff --git a/src/components/TodoItem/TodoItem.tsx b/src/components/TodoItem/TodoItem.tsx index f09639236..0a3d1a1d0 100644 --- a/src/components/TodoItem/TodoItem.tsx +++ b/src/components/TodoItem/TodoItem.tsx @@ -16,7 +16,6 @@ interface Props { } export const TodoItem: React.FC = ({ todo, toggleStatus }) => { - // const state = useContext(TodosContext); const { dispatch } = useContext(TodosContext); const [titleCurrent, setTitleCurrent] = useState(''); const [updatedTitle, setUpdatedTitle] = useState(''); @@ -71,6 +70,7 @@ export const TodoItem: React.FC = ({ todo, toggleStatus }) => { setTitleCurrent(title); setUpdatedTitle(title); setStatus(completed); + if (completed && checkbox.current) { checkbox.current.checked = true; } diff --git a/src/components/TodosFilter/TodosFilter.tsx b/src/components/TodosFilter/TodosFilter.tsx index 05bc1334e..3c3ca18f1 100644 --- a/src/components/TodosFilter/TodosFilter.tsx +++ b/src/components/TodosFilter/TodosFilter.tsx @@ -26,6 +26,10 @@ export const TodoFilter: React.FC = ({ const { state } = useContext(TodosContext); const { dispatch } = useContext(TodosContext); + const handleDeleteComplited = () => { + dispatch({ type: Dispatchers.DeleteComplited }); + }; + const count = state.filter(todo => !todo.completed).length; const shouldClearButtonRender = shouldRenderButton(count, state.length); @@ -77,7 +81,7 @@ export const TodoFilter: React.FC = ({ className={cn( 'clear-completed', )} - onClick={() => dispatch({ type: Dispatchers.DeleteComplited })} + onClick={handleDeleteComplited} > Clear completed diff --git a/src/hooks/useLocalStorage.tsx b/src/hooks/useLocalStorage.tsx index 53a290d1d..b0f54402e 100644 --- a/src/hooks/useLocalStorage.tsx +++ b/src/hooks/useLocalStorage.tsx @@ -26,5 +26,4 @@ export function useLocalStorage( }; return { value, save }; - // return [value, save]; } diff --git a/src/store/store.tsx b/src/store/store.tsx index a3731ae12..7e2085352 100644 --- a/src/store/store.tsx +++ b/src/store/store.tsx @@ -19,43 +19,43 @@ const reducer = (state: Todo[], action: Actions) => { ]; case Dispatchers.DeleteComplited: - return [...state].filter(elem => !elem.completed); + return [...state].filter(todo => !todo.completed); case Dispatchers.DeleteWithId: - return [...state].filter(elem => elem.id !== action.payload); + return [...state].filter(todo => todo.id !== action.payload); case Dispatchers.ChangeStatus: { - return [...state].map(elem => { - if (elem.id === action.payload) { + return [...state].map(todo => { + if (todo.id === action.payload) { return { - ...elem, - completed: !elem.completed, + ...todo, + completed: !todo.completed, }; } - return elem; + return todo; }); } case Dispatchers.UpdateTitle: { const { title, id } = action.payload; - return [...state].map(elem => { - if (elem.id === id) { + return [...state].map(todo => { + if (todo.id === id) { return { - ...elem, + ...todo, title, }; } - return elem; + return todo; }); } case Dispatchers.ChangeAllStatuses: { - return [...state].map(elem => { + return [...state].map(todo => { return { - ...elem, + ...todo, completed: action.payload, }; });