initial commit #765
initial commit #765
Conversation
| edit: false, | ||
| }); | ||
| const [currentFilter, setCurrentFilter] = useState(TodoFilter.All); | ||
| const [loadingId, setLoadingId] = useState<number[]>([]); |
There was a problem hiding this comment.
| const [loadingId, setLoadingId] = useState<number[]>([]); | |
| const [loadingTodoIds, setLoadingTodoIds] = useState<number[]>([]); |
array - use plural form
|
|
||
| export const App: React.FC = () => { | ||
| const [todos, setTodos] = useState<Todo[]>([]); | ||
| const [visibleTodos, setVisibleTodos] = useState<Todo[]>([]); | ||
| const [errors, setErrors] = useState({ |
There was a problem hiding this comment.
use enum instead of object, where default value is Error.Empty:
enum Error {
Empty = ''
// other errors
}
|
|
||
| const changeTodo = ( | ||
| property: string, | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any |
There was a problem hiding this comment.
why any? try to figure out with types (maybe boolean | string, etc)
|
|
||
| if (newTitle.trim()) { | ||
| addTodo(newTitle); | ||
| } else if (newTitle.trim() === '') { |
There was a problem hiding this comment.
| } else if (newTitle.trim() === '') { | |
| } else { |
| /> | ||
|
|
||
| {/* show only one message at a time */} | ||
| {errors.load && ( |
There was a problem hiding this comment.
create function which returns you the correct error message (using switch) or just save the correct message in the enum mentioned above
| }; | ||
|
|
||
| const saveChanges = () => { | ||
| if (inputValue.trim() && inputValue.trim() !== title.trim()) { |
There was a problem hiding this comment.
no need to trim title here, save inputValue.trim() to a variable and reuse
| }; | ||
|
|
||
| return ( | ||
| <div className={`todo ${completed ? 'completed' : ''}`}> |
There was a problem hiding this comment.
use classnames library for such cases
| const [isEditingId, setIsEditingId] = useState<number | null>(null); | ||
| const [inputValue, setInputValue] = useState(title); | ||
|
|
||
| const handleDoubleClick = () => { |
There was a problem hiding this comment.
you should also focus on input when it appears - use ref for it (ask in chat if you have questions)
| useEffect(() => { | ||
| filterTodos(); | ||
| }, [currentFilter, todos]); |
There was a problem hiding this comment.
you don't need visibleTodos state
general rule if you calculate some value based on other state values/props no need to save it in state
save it in a common variable, wrap in useMemo with the same dependency array
| if (initTodos) { | ||
| filtered = [...initTodos]; | ||
| } else { | ||
| filtered = [...todos]; | ||
| } |
There was a problem hiding this comment.
you should get rid of it - make todos argument mandatory
DEMO LINK