Skip to content

add task solution #1275

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
Abdulahhh2005 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

add task solution #1275

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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://Abdulahhh2005.github.io/react_todo-app/) and add it to the PR description.
129 changes: 39 additions & 90 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
},
"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/node": "^20.14.10",
Expand Down
344 changes: 212 additions & 132 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,156 +1,236 @@
/* eslint-disable jsx-a11y/control-has-associated-label */
import React from 'react';
/* eslint-disable jsx-a11y/label-has-associated-control */
import React, { useEffect, useRef, useState } from 'react';
import { useTodosContext } from './TodosContext';
import cn from 'classnames';
import { Filter } from './types/Filter';

export const App: React.FC = () => {
const { todos, setTodos } = useTodosContext();
const [title, setTitle] = useState('');
const [type, setType] = useState<Filter>('All');
const [editingId, setEditingId] = useState<number | null>(null);
const [editValue, setEditValue] = useState(''); // хранит текущее значение редактирования

const newTodoRef = useRef<HTMLInputElement>(null);
const editTodoRef = useRef<HTMLInputElement>(null);

useEffect(() => {
if (editingId !== null) {
editTodoRef.current?.focus();
} else {
newTodoRef.current?.focus();
}
}, [editingId, todos.length]);

const handleCreateTodo = (titleValue: string) => {
const trimmedTitleValue = titleValue.trim();

if (!trimmedTitleValue) {
return;
}

setTodos(prev => [
...prev,
{
id: +new Date(),
title: trimmedTitleValue,
completed: false,
},
]);
setTitle('');
};

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
handleCreateTodo(title);
};

const visibleTodos = todos.filter(todo => {
switch (type) {
case 'Active':
return !todo.completed;
case 'Completed':
return todo.completed;
default:
return true;
}
});

const notCompletedTodos = todos.filter(t => !t.completed).length;
const completedTodos = todos.filter(t => t.completed).length;
const allCompleted = todos.every(t => t.completed);

const toggleAll = () => {
setTodos(prev => prev.map(t => ({ ...t, completed: !allCompleted })));
};

const handleSave = (id: number) => {
const trimmed = editValue.trim();

if (!trimmed) {
setTodos(prev => prev.filter(t => t.id !== id));
} else {
setTodos(prev =>
prev.map(t => (t.id === id ? { ...t, title: trimmed } : t)),
);
}

setEditingId(null);
};

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>
{todos.length > 0 && (
<button
type="button"
className={cn('todoapp__toggle-all', { active: allCompleted })}
data-cy="ToggleAllButton"
onClick={toggleAll}
/>
)}

<form onSubmit={handleSubmit}>
<input
ref={newTodoRef}
data-cy="NewTodoField"
type="text"
className="todoapp__new-todo"
className="todoapp__new-todo is-danger"
placeholder="What needs to be done?"
value={title}
onChange={e => setTitle(e.target.value)}
/>
</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>
{todos.length > 0 && (
<div data-cy="TodoList">
{visibleTodos.map(todo => {
const isEditing = editingId === todo.id;

return (
<div
data-cy="Todo"
className={cn('todo', { completed: todo.completed })}
key={todo.id}
>
<label className="todo__status-label">
<input
data-cy="TodoStatus"
type="checkbox"
className="todo__status"
checked={todo.completed}
onChange={() =>
setTodos(prev =>
prev.map(t =>
t.id === todo.id
? { ...t, completed: !t.completed }
: t,
),
)
}
/>
</label>

{!isEditing ? (
<>
<span
data-cy="TodoTitle"
className="todo__title"
onDoubleClick={() => {
setEditingId(todo.id);
setEditValue(todo.title);
}}
>
{todo.title}
</span>

<button
type="button"
className="todo__remove"
data-cy="TodoDelete"
onClick={() =>
setTodos(prev => prev.filter(t => t.id !== todo.id))
}
>
×
</button>
</>
) : (
<input
ref={editTodoRef}
data-cy="TodoTitleField"
type="text"
className="todo__title-field"
value={editValue}
onChange={e => setEditValue(e.target.value)}
onBlur={() => handleSave(todo.id)}
onKeyUp={e => {
if (e.key === 'Enter') {
handleSave(todo.id);
}

if (e.key === 'Escape') {
setEditingId(null);
}
}}
/>
)}
</div>
);
})}
</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
{todos.length > 0 && (
<footer className="todoapp__footer" data-cy="Footer">
<span className="todo-count" data-cy="TodosCounter">
{notCompletedTodos} items left
</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"
<nav className="filter" data-cy="Filter">
<a
href="#/"
className={cn('filter__link', { selected: type === 'All' })}
onClick={() => setType('All')}
data-cy="FilterLinkAll"
>
All
</a>
<a
href="#/active"
className={cn('filter__link', { selected: type === 'Active' })}
onClick={() => setType('Active')}
data-cy="FilterLinkActive"
>
Active
</a>
<a
href="#/completed"
className={cn('filter__link', {
selected: type === 'Completed',
})}
onClick={() => setType('Completed')}
data-cy="FilterLinkCompleted"
>
Completed
</a>
</nav>

<button
type="button"
className="todoapp__clear-completed"
data-cy="ClearCompletedButton"
disabled={completedTodos === 0}
onClick={() => setTodos(prev => prev.filter(t => !t.completed))}
>
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>
Clear completed
</button>
</footer>
)}
</div>
</div>
);
Expand Down
Loading