Develop #1534
Develop #1534
Conversation
src/App.tsx
Outdated
| onSubmit={handleSubmit} | ||
| loading={loading} | ||
| title={title} | ||
| onTitleChange={value => setTitle(value)} |
There was a problem hiding this comment.
| onTitleChange={value => setTitle(value)} | |
| onTitleChange={setTitle} |
src/components/TodoList/TodoList.tsx
Outdated
| arg1: React.KeyboardEvent<HTMLInputElement>, | ||
| arg2: React.Dispatch<React.SetStateAction<boolean>>, | ||
| ) => void; | ||
| processedIs: number[]; |
There was a problem hiding this comment.
| processedIs: number[]; | |
| processedIds: number[]; |
typo - fix everywhere
src/components/TodoItem/TodoItem.tsx
Outdated
| onItemTitleUpdate( | ||
| id, | ||
| newTitle, | ||
| setTitleBeingUpdated, |
There was a problem hiding this comment.
no need to pass this function as a callback
Just create onBlur function here and call inputRef.current.focus(); there
src/components/TodoItem/TodoItem.tsx
Outdated
| isTitleChanged, | ||
| ) | ||
| } | ||
| onKeyUp={event => onKeyUp(event, setTitleBeingUpdated)} |
There was a problem hiding this comment.
same - remove setTitleBeingUpdated state at all
src/App.tsx
Outdated
| setTitleBeingUpdated: React.Dispatch<React.SetStateAction<boolean>>, | ||
| isTitleChanged: boolean, | ||
| e?: React.FormEvent<HTMLFormElement>, |
There was a problem hiding this comment.
do not pass it as an arguments
Instead, in TodoItem component create a separate function handler onSubmit. In this function, you should apply local logic (event.preventDefault, input focus, etc.) and just call this function with todo id and new title
Apply the same approach for other functions as well
src/components/Footer/Fotter.tsx
Outdated
| type Props = { | ||
| todos: Todo[]; | ||
| status: TodoStatus; | ||
| onStatusChange: (arg: TodoStatus) => void; |
There was a problem hiding this comment.
| onStatusChange: (arg: TodoStatus) => void; | |
| onStatusChange: (status: TodoStatus) => void; |
arg is a bad name, even in types
src/components/Footer/Fotter.tsx
Outdated
| }) => { | ||
| const activeTodos = todos.filter(todo => !todo.completed); | ||
| const isAnyCompleted = todos.some(todo => todo.completed); | ||
| const filterOptions = Object.values(TodoStatus); |
There was a problem hiding this comment.
nit: you can move this variable outside of the component
src/components/Footer/Fotter.tsx
Outdated
| const isAnyCompleted = todos.some(todo => todo.completed); | ||
| const filterOptions = Object.values(TodoStatus); | ||
|
|
||
| const capitalizeFirstLetter = (value: TodoStatus) => { |
There was a problem hiding this comment.
Same - you can create this function outside of the component (or even in a separate helpers.ts file and import it here)
src/components/TodoItem/TodoItem.tsx
Outdated
| title: string; | ||
| onItemDelete: (id: number) => void; | ||
| onItemStatusUpdate: (id: number) => void; | ||
| onItemTitleUpdate: ( |
There was a problem hiding this comment.
you can simplify this function (see other comments)
Also, write correct names for arguments
src/App.tsx
Outdated
| .catch(() => setErrorMessage('Unable to load todos')); | ||
| }, []); | ||
|
|
||
| const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { |
There was a problem hiding this comment.
Do not forget about useCallback and useMemo for functions and values
|
got you!) |
DEMO LINK