Skip to content

Solution #1317

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.

Sign up for GitHub

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

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

Solution #1317

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5019abd
Solution
cassiaqueiroz Jun 3, 2026
d241d2f
Corrections
cassiaqueiroz Jun 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,4 +33,4 @@ Implement a simple [TODO app](https://mate-academy.github.io/react_todo-app/) th
- Implement a solution following the [React task guidelines](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline).
- Use the [React TypeScript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript).
- Open another terminal and run tests with `npm test` to ensure your solution is correct.
- Replace `<your_account>` with your GitHub username in the [DEMO LINK](https://<your_account>.github.io/react_todo-app/) and add it to the PR description.
- Replace `<your_account>` with your GitHub username in the [DEMO LINK](https://cassiaqueiroz.github.io/react_todo-app/) and add it to the PR description.
23 changes: 18 additions & 5 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,10 @@
},
"devDependencies": {
"@cypress/react18": "^2.0.1",
"@mate-academy/scripts": "^1.9.12",
"@mate-academy/scripts": "^2.1.3",
"@mate-academy/students-ts-config": "*",
"@mate-academy/stylelint-config": "*",
"@types/classnames": "^2.3.0",
"@types/node": "^20.14.10",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
Expand Down
163 changes: 14 additions & 149 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,157 +1,22 @@
/* eslint-disable jsx-a11y/control-has-associated-label */
import React from 'react';
import { Header } from './components/Header';
import { TodoList } from './components/TodoList';
import { Footer } from './components/Footer';
import { TodoProvider } from './context/TodoContext';
Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 3, 2026

Choose a reason for hiding this comment

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

The onClick variable shadows the filter type's onClick method from useTodo. Consider renaming to avoid confusion and follow the naming convention that handler functions should start with 'handle'.


export const App: React.FC = () => {
return (
<div className="todoapp">
<h1 className="todoapp__title">todos</h1>

<div className="todoapp__content">
<header className="todoapp__header">
{/* this button should have `active` class only if all todos are completed */}
<button
type="button"
className="todoapp__toggle-all active"
data-cy="ToggleAllButton"
/>

{/* Add a todo on form submit */}
<form>
<input
data-cy="NewTodoField"
type="text"
className="todoapp__new-todo"
placeholder="What needs to be done?"
/>
</form>
</header>

<section className="todoapp__main" data-cy="TodoList">
{/* This is a completed todo */}
<div data-cy="Todo" className="todo completed">
<label className="todo__status-label">
<input
data-cy="TodoStatus"
type="checkbox"
className="todo__status"
checked
/>
</label>

<span data-cy="TodoTitle" className="todo__title">
Completed Todo
</span>

{/* Remove button appears only on hover */}
<button type="button" className="todo__remove" data-cy="TodoDelete">
×
</button>
</div>

{/* This todo is an active todo */}
<div data-cy="Todo" className="todo">
<label className="todo__status-label">
<input
data-cy="TodoStatus"
type="checkbox"
className="todo__status"
/>
</label>

<span data-cy="TodoTitle" className="todo__title">
Not Completed Todo
</span>

<button type="button" className="todo__remove" data-cy="TodoDelete">
×
</button>
</div>

{/* This todo is being edited */}
<div data-cy="Todo" className="todo">
<label className="todo__status-label">
<input
data-cy="TodoStatus"
type="checkbox"
className="todo__status"
/>
</label>

{/* This form is shown instead of the title and remove button */}
<form>
<input
data-cy="TodoTitleField"
type="text"
className="todo__title-field"
placeholder="Empty todo will be deleted"
value="Todo is being edited now"
/>
</form>
</div>

{/* This todo is in loadind state */}
<div data-cy="Todo" className="todo">
<label className="todo__status-label">
<input
data-cy="TodoStatus"
type="checkbox"
className="todo__status"
/>
</label>

<span data-cy="TodoTitle" className="todo__title">
Todo is being saved now
</span>

<button type="button" className="todo__remove" data-cy="TodoDelete">
×
</button>
</div>
</section>

{/* Hide the footer if there are no todos */}
<footer className="todoapp__footer" data-cy="Footer">
<span className="todo-count" data-cy="TodosCounter">
3 items left
</span>

{/* Active link should have the 'selected' class */}
<nav className="filter" data-cy="Filter">
<a
href="#/"
className="filter__link selected"
data-cy="FilterLinkAll"
>
All
</a>

<a
href="#/active"
className="filter__link"
data-cy="FilterLinkActive"
>
Active
</a>

<a
href="#/completed"
className="filter__link"
data-cy="FilterLinkCompleted"
>
Completed
</a>
</nav>

{/* this button should be disabled if there are no completed todos */}
<button
type="button"
className="todoapp__clear-completed"
data-cy="ClearCompletedButton"
>
Clear completed
</button>
</footer>
<TodoProvider>
<div className="todoapp">
<h1 className="todoapp__title">todos</h1>

<div className="todoapp__content">
Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 3, 2026

Choose a reason for hiding this comment

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

Checklist item #7 requires using the classnames library for calculated classes instead of template literals like this.

<Header />
<TodoList />
Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 3, 2026

Choose a reason for hiding this comment

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

This handler is called inside the onClick callbacks, creating unnecessary nested arrow functions. Consider passing the filter type directly to setFilter or creating a dedicated handler.

<Footer />
</div>
Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 3, 2026

Choose a reason for hiding this comment

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

Checklist item #10 requires creating constants for filter strings instead of using hardcoded string literals. Define a FILTERS constant object with 'all', 'active', 'completed' values.

</div>
</div>
</TodoProvider>
);
};
51 changes: 51 additions & 0 deletions src/components/Filter/Filter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import React from 'react';
import cn from 'classnames';
import { FILTERS } from '../../utils/filters';

import { useTodo } from '../../context/TodoContext';

export const Filter: React.FC = () => {
const { filter, setFilter } = useTodo();
Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 3, 2026

Choose a reason for hiding this comment

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

This violates checklist item #10 which requires using constants for filter strings. The values 'all', 'active', and 'completed' are used as raw strings throughout the file. Define a FILTERS constant object instead.


return (
<nav className="filter" data-cy="Filter">
<a
href="#/"
className={cn('filter__link', { selected: filter === FILTERS.all })}
data-cy="FilterLinkAll"
onClick={event => {
event.preventDefault();
setFilter(FILTERS.all);
}}
>
All
</a>

<a
href="#/active"
className={cn('filter__link', { selected: filter === FILTERS.active })}
data-cy="FilterLinkActive"
onClick={event => {
event.preventDefault();
Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 3, 2026

Choose a reason for hiding this comment

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

The disabled condition is inverted. Currently todos.every(todo => !todo.completed) returns true when there are NO completed todos (meaning the button SHOULD be disabled). But the button is DISABLED when true, so this logic is backwards. It should be !todos.every(todo => !todo.completed) or todos.some(todo => todo.completed) to disable when there are NO completed todos.

setFilter(FILTERS.active);
}}
>
Active
</a>

<a
href="#/completed"
className={cn('filter__link', {
selected: filter === FILTERS.completed,
})}
data-cy="FilterLinkCompleted"
onClick={event => {
event.preventDefault();
setFilter(FILTERS.completed);
}}
>
Completed
</a>
</nav>
);
};
1 change: 1 addition & 0 deletions src/components/Filter/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './Filter';
35 changes: 35 additions & 0 deletions src/components/Footer/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React from 'react';
import { Filter } from '../Filter';
import { useTodo } from '../../context/TodoContext';

export const Footer: React.FC = () => {
const { todos, clearCompleted } = useTodo();

if (todos.length === 0) {
return null;
}

const onClick = () => {
clearCompleted();
};

return (
<footer className="todoapp__footer" data-cy="Footer">
<span className="todo-count" data-cy="TodosCounter">
{todos.filter(todo => !todo.completed).length} items left
</span>

<Filter />

<button
type="button"
className="todoapp__clear-completed"
data-cy="ClearCompletedButton"
onClick={onClick}
disabled={!todos.some(todo => todo.completed)}
>
Clear Completed
</button>
</footer>
);
};
1 change: 1 addition & 0 deletions src/components/Footer/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './Footer';
30 changes: 30 additions & 0 deletions src/components/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import cn from 'classnames';
import { useTodo } from '../../context/TodoContext';
import { NewTodo } from '../NewTodo';

export const Header: React.FC = () => {
Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 3, 2026

Choose a reason for hiding this comment

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

Checklist item #7 violation: Use the classnames library instead of template literals for calculated classes.

Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 3, 2026

Choose a reason for hiding this comment

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

Other components use the useTodo custom hook for accessing context. Using raw useContext(TodoContext) here creates inconsistency. Consider using useTodo hook like other components do.

const { todos, toggleAll } = useTodo();

Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 3, 2026

Choose a reason for hiding this comment

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

Checklist item #6 violation: Function names should start with a verb and describe the result. Consider renaming to handleToggleAll instead of onClick.

const handleToggleAll = () => {
toggleAll();
};

return (
<header className="todoapp__header">
{/* this button should have `active` class only if all todos are completed */}
{todos.length > 0 && (
<button
type="button"
className={cn('todoapp__toggle-all', {
active: todos.every(todo => todo.completed),
})}
onClick={handleToggleAll}
data-cy="ToggleAllButton"
/>
)}

{/* Add a todo on form submit */}
<NewTodo />
</header>
);
};
1 change: 1 addition & 0 deletions src/components/Header/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './Header';
Loading
Loading