solution #1057
solution #1057
Conversation
src/utils/LocalStorage.ts
Outdated
| @@ -0,0 +1,28 @@ | |||
| import { Todo } from '../types/Todo'; | |||
|
|
|||
| export const LocalStorage = { | |||
There was a problem hiding this comment.
| export const LocalStorage = { | |
| export const localStorage = { |
We use PascalCase for components, types, classes only
src/utils/GlobalContext.tsx
Outdated
|
|
||
| useEffect(() => { | ||
| dispatch({ type: 'getTodos' }); | ||
| dispatch({ type: 'getFilteredTodos' }); |
There was a problem hiding this comment.
it's a bit uncommon and better to remove filteredTodos from the reducer. General rule - no need to store value in the state if it can be computed from other state values. Compute filtered todos in place you need it based on todos and filter
So you will get rid of dispatching this action here
src/utils/GlobalContext.tsx
Outdated
| children: React.ReactNode; | ||
| }; | ||
|
|
||
| export const GlobalProvider: React.FC<Props> = ({ children }) => { |
There was a problem hiding this comment.
it's also component, so it should be in components folder
src/Components/TodoItem/TodoItem.tsx
Outdated
| }; | ||
|
|
||
| const handleKeyEvent = (event: React.KeyboardEvent<HTMLInputElement>) => { | ||
| if (event.type === 'keyup') { |
There was a problem hiding this comment.
you add it only to this listener - redundant check
src/Components/TodoItem/TodoItem.tsx
Outdated
| type Props = { | ||
| todo: Todo; | ||
| }; | ||
| type SubmitProps = |
There was a problem hiding this comment.
Use correct event type in each case or just use SyntheticEvent
src/Components/TodoItem/TodoItem.tsx
Outdated
| event.preventDefault(); | ||
| setEditing(false); | ||
|
|
||
| if (newTitle.length === 0) { |
There was a problem hiding this comment.
| if (newTitle.length === 0) { | |
| if (!newTitle.length) { |
shorter form
Alos, trim value to avoid adding spaces only
|
|
||
| return ( | ||
| <> | ||
| {todos.length > 0 && ( |
There was a problem hiding this comment.
makes sense to add if and return null in this case
And here get rid of check and React.fragment
DEMO LINK