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,
};
});