add task solution #758
add task solution #758
Conversation
src/contexts/TodosContext.tsx
Outdated
| // eslint-disable-next-line | ||
| export const TodoProvider = ({ children }: { children: React.ReactNode }) => { | ||
| const [todos, setTodos] = useLocalStorage('todos', []); | ||
| // eslint-disable-next-line |
There was a problem hiding this comment.
why did you disable eslint here? Don't do it w/o good reason - try to figure out with the problem instead
There was a problem hiding this comment.
but it's mean about line 22. that I was fixed.
src/contexts/TodosContext.tsx
Outdated
| }); | ||
|
|
||
| // eslint-disable-next-line | ||
| export const TodoProvider = ({ children }: { children: React.ReactNode }) => { |
There was a problem hiding this comment.
You may use PropsWithChildren<{}> type (import from 'react')
src/contexts/TodosContext.tsx
Outdated
| case TodoActions.Completed: | ||
| return todo.completed; | ||
| default: | ||
| return todo; |
There was a problem hiding this comment.
explicitly return boolean value - true
also, join TodoActions.All and default cases
src/components/TodosFilter.tsx
Outdated
| export const TodosFilter: React.FC = () => { | ||
| const { selectedFilter, setSelectedFilter } = useContext(TodosContext); | ||
|
|
||
| const TodoActionsToArr = useCallback((data: typeof TodoActions): string[] => { |
There was a problem hiding this comment.
| const TodoActionsToArr = useCallback((data: typeof TodoActions): string[] => { | |
| const todoActionsToArr = useCallback((data: typeof TodoActions): string[] => { |
camelCase for function names
but you don't need it at all - just use Object.values(TodoActions) w/o memorization (this process also need some resources etc.) or at least return Object.values(TodoActions) from useMemo callback
src/components/TodosFilter.tsx
Outdated
| const TodoActionsToArr = useCallback((data: typeof TodoActions): string[] => { | ||
| return Object.values(data); | ||
| }, []); | ||
| // eslint-disable-next-line |
src/components/TodoItem.tsx
Outdated
| setIsEditing(false); | ||
| }; | ||
|
|
||
| const handleOnBlur = () => { |
There was a problem hiding this comment.
| const handleOnBlur = () => { | |
| const handleBlur = () => { |
| import React, { useContext } from 'react'; | ||
| import { TodosContext } from '../contexts/TodosContext'; | ||
|
|
||
| export const ClearCompletedButton: React.FC = () => { |
There was a problem hiding this comment.
it's the very small component you could keep in the Footer.tsx - just FYI
src/contexts/TodosContext.tsx
Outdated
| case TodoActions.Completed: | ||
| return todo.completed; | ||
| default: | ||
| return todo; |
src/contexts/TodosContext.tsx
Outdated
| // eslint-disable-next-line | ||
| export const TodoProvider = ({ children }: { children: React.ReactNode }) => { | ||
| const [todos, setTodos] = useLocalStorage('todos', []); | ||
| // eslint-disable-next-line |
DEMO LINK