Skip to content
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

todo app #1053

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

todo app #1053

wants to merge 3 commits into from

Conversation

OMedvid
Copy link

@OMedvid OMedvid commented Sep 6, 2024

Copy link

@volodymyr-soltys97 volodymyr-soltys97 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good job 👍
Let's improve your code

  1. You need to fix this linter error
image
  1. Need to fix the UI, fix the input width
image image

Comment on lines 27 to 57
<a
href="#/"
className={classNames('filter__link', {
selected: isActive === IsActiveTab.All,
})}
data-cy="FilterLinkAll"
onClick={() => {
setIsActiveTab(IsActiveTab.All);
}}
>
All
</a>

<a
href="#/active"
className={classNames('filter__link', {
selected: isActive === IsActiveTab.Active,
})}
data-cy="FilterLinkActive"
onClick={() => {
setIsActiveTab(IsActiveTab.Active);
}}
>
Active
</a>

<a
href="#/completed"
className={classNames('filter__link', {
selected: isActive === IsActiveTab.Completed,
})}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use Object.values(your enum) and render these options with map() method

type="button"
className="todoapp__clear-completed"
data-cy="ClearCompletedButton"
onClick={() => handleClearCompleted()}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
onClick={() => handleClearCompleted()}
onClick={handleClearCompleted}

Copy link

@etojeDenys etojeDenys left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good job

Comment on lines +83 to +104
{!isFocused && (
<>
<span
data-cy="TodoTitle"
className="todo__title"
onDoubleClick={() => setIsFocused(true)}
>
{title}
</span>

<button
type="button"
className="todo__remove"
data-cy="TodoDelete"
onClick={() => handleClick(Actions.delete)}
>
×
</button>
</>
)}

{isFocused && (

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can simplify it using the ternary operator


export const App: React.FC = () => {
const { todos } = useContext(TodosContext);
const [isActive, setIsActiveTab] = useState(IsActiveTab.All);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const [isActive, setIsActiveTab] = useState(IsActiveTab.All);
const [activeTab, setActiveTab] = useState(IsActiveTab.All);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants