almost Fully functional Todo App🎀 #803
Conversation
polinavafik
changed the title
src/App.tsx
Outdated
| setTodos, | ||
| error, | ||
| setError, | ||
| } = useContext(TodoContext); |
There was a problem hiding this comment.
You can create hooks for contexts so you don't have to pass context every time.
const useTodo = () => useContext(TodoContext);
src/App.tsx
Outdated
| .then(setTodos) | ||
| .catch(() => { | ||
| setError(CurrentError.LoadingError); | ||
| throw new Error(); |
There was a problem hiding this comment.
You don't need to throw an error in this case, as in this case, you don't catch this error
src/Context/TodoContext.tsx
Outdated
| }) | ||
| .catch(() => { | ||
| setError(CurrentError.DeleteError); | ||
| throw new Error(); |
There was a problem hiding this comment.
The same, just set an error to notify user, it's enough in this case
src/Context/TodoContext.tsx
Outdated
| return Promise.resolve(); | ||
| } | ||
|
|
||
| if (!newTodoTitle.trim()) { | ||
| setError(CurrentError.EmptyTitleError); | ||
|
|
||
| return Promise.reject(); |
There was a problem hiding this comment.
You don't need to reject or resolve in this cases, just return in case you don't need to proceed
There was a problem hiding this comment.
I had a problem without resolve reject since I have typization handleTodoRename: (todo: Todo, newTodoTitle: string) => Promise<void>
but I added | void, to it and now it passes 😅 how I didn't think of that before
| setIsLoading(true); | ||
| setProcessingTodoIds(prevState => [...prevState, todo.id]); | ||
|
|
||
| // eslint-disable-next-line consistent-return |
There was a problem hiding this comment.
Don't disable eslint, I think in this case you actually don't need to return
There was a problem hiding this comment.
If I don't have return, then when you edit todo, after edit on load it shows the previous version of the title and then shows the new one (after load)
but with return, everything works as it should...
src/components/TodoElement.tsx
Outdated
| if (error === CurrentError.UpdateError) { | ||
| setError(CurrentError.UpdateError); | ||
| throw new Error(); | ||
| } | ||
|
|
||
| if (error === CurrentError.DeleteError) { | ||
| setError(CurrentError.DeleteError); | ||
| throw new Error(); | ||
| } | ||
|
|
||
| if (error === CurrentError.EmptyTitleError) { | ||
| setError(CurrentError.EmptyTitleError); | ||
| throw new Error(); | ||
| } |
There was a problem hiding this comment.
You don't need this as you set errors previously in you handlers, so you don't need to throw errors and handle them here one more time
src/components/TodoHeader.tsx
Outdated
| const inputField = useRef<HTMLInputElement>(null); | ||
|
|
||
| const isAllCompleted = useMemo(() => ( | ||
| todos.every(el => el.completed) |
There was a problem hiding this comment.
| todos.every(el => el.completed) | |
| todos.every(el => todo.completed) |
|
|
||
| return ( | ||
| <section className="todoapp__main" data-cy="TodoList"> | ||
| <TransitionGroup> |
src/components/TodoList.tsx
Outdated
| return ( | ||
| <section className="todoapp__main" data-cy="TodoList"> | ||
| <TransitionGroup> | ||
| {todos?.map(todo => ( |
There was a problem hiding this comment.
todos is required prop in accordance with type
src/utils/getFilteredTodos.tsx
Outdated
| let preparedTodos = [...todos]; | ||
|
|
||
| if (selectedFilter !== TodoFilter.All) { | ||
| preparedTodos = preparedTodos.filter(({ completed }) => { | ||
| switch (selectedFilter) { |
There was a problem hiding this comment.
| let preparedTodos = [...todos]; | |
| if (selectedFilter !== TodoFilter.All) { | |
| preparedTodos = preparedTodos.filter(({ completed }) => { | |
| switch (selectedFilter) { | |
| if (selectedFilter !== TodoFilter.All) { | |
| return todos.filter(({ completed }) => { | |
| switch (selectedFilter) { |
filter returns new array so you don't need create a copy
| <div | ||
| data-cy="ErrorNotification" | ||
| className={classNames( | ||
| 'notification', | ||
| 'is-danger', | ||
| 'is-light', | ||
| 'has-text-weight-normal', | ||
| { hidden: !error }, | ||
| )} | ||
| > | ||
| <button | ||
| data-cy="HideErrorButton" | ||
| type="button" | ||
| className="delete" | ||
| onClick={() => setError(CurrentError.Default)} | ||
| /> | ||
| {error} | ||
| </div> |
There was a problem hiding this comment.
Create a component ErrorNotification and move the logic for errors to it too
DEMO LINK 🎀