-
Notifications
You must be signed in to change notification settings - Fork 1.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
solution #1562
base: master
Are you sure you want to change the base?
solution #1562
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good job!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good work 👍
Let's improve your solution slightly
src/App.tsx
Outdated
<div className="todoapp"> | ||
<h1 className="todoapp__title">todos</h1> | ||
|
||
<header className="todoapp__header"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Create a header component
src/App.tsx
Outdated
<h1 className="todoapp__title">todos</h1> | ||
|
||
<header className="todoapp__header"> | ||
{/* this button should have `active` class only if all todos are completed */} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Remove all comments
src/App.tsx
Outdated
</header> | ||
|
||
<div className="todoapp__content"> | ||
<section className="todoapp__main" data-cy="TodoList"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Create a TodoList
component
src/App.tsx
Outdated
</div> | ||
|
||
<div | ||
data-cy="ErrorNotification" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Create ErrorNotification
component
|
||
export const TodoFilter: React.FC<Props> = memo( | ||
({ filter, onFilterChange, todos, onDelete }) => { | ||
const statuses = [ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Move this constant outside the component
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
good point
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great job, let's fix a few minor comments
src/App.tsx
Outdated
|
||
const handleError = useCallback((error: ErrorType) => { | ||
setErrorMsg(error); | ||
setTimeout(() => setErrorMsg(ErrorType.Default), 3000); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
please don't forget to clear setTimeout
export const USER_ID = 2176; | ||
|
||
export const getTodos = () => { | ||
return client.get<Todo[]>(`/todos?userId=${USER_ID}`); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
let's move /todos
into const and reuse
|
||
export const TodoFilter: React.FC<Props> = memo( | ||
({ filter, onFilterChange, todos, onDelete }) => { | ||
const statuses = [ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
good point
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good to me!
DEMO LINK