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

add task solution #1058

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
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://kravets111.github.io/react_todo-app/) and add it to the PR description.
162 changes: 15 additions & 147 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,157 +1,25 @@
/* 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 { TodosProvider } from './components/TodosContext';

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>
// const { todos } = useContext(TodosContext);

{/* 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>
return (
<TodosProvider>
<div className="todoapp">
<h1 className="todoapp__title">todos</h1>

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

{/* 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>
<TodoList />
<Footer />
</div>
</div>
</div>
</TodosProvider>
);
};
72 changes: 72 additions & 0 deletions src/components/Footer/Footer.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import React, { useContext } from 'react';
import { TodosContext } from '../TodosContext';
import { Options } from '../../type/Options';
import classNames from 'classnames';

export const Footer: React.FC = () => {
const { todos, setTodos, option, setOption } = useContext(TodosContext);
const itemsLeft = todos.filter(todo => !todo.completed).length;

if (!todos.length) {
return null;
}

return (
<footer className="todoapp__footer" data-cy="Footer">
<span className="todo-count" data-cy="TodosCounter">
{itemsLeft} items left
</span>

{/* Active link should have the 'selected' class */}
<nav className="filter" data-cy="Filter">
<a
href="#/"
className={classNames('filter__link', {
selected: option === Options.All,
})}
data-cy="FilterLinkAll"
onClick={() => setOption(Options.All)}
>
All
</a>

<a
href="#/active"
className={classNames('filter__link', {
selected: option === Options.Active,
})}
data-cy="FilterLinkActive"
onClick={() => setOption(Options.Active)}
>
Active
</a>

<a
href="#/completed"
className={classNames('filter__link', {
selected: option === Options.Completed,
})}
data-cy="FilterLinkCompleted"
onClick={() => setOption(Options.Completed)}
>
Completed
</a>
</nav>

{/* this button should be disabled if there are no completed todos */}
<button
type="button"
className="todoapp__clear-completed"
data-cy="ClearCompletedButton"
onClick={() => {
const updatedTodos = todos.filter(todo => !todo.completed);

setTodos(updatedTodos);
}}
disabled={todos.every(todo => !todo.completed)}
>
Clear completed
</button>
</footer>
);
};
1 change: 1 addition & 0 deletions src/components/Footer/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './Footer';
78 changes: 78 additions & 0 deletions src/components/Header/Header.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
import { TodosContext } from '../TodosContext';
import classNames from 'classnames';

export const Header: React.FC = () => {
const { todos, setTodos, addTodo } = useContext(TodosContext);

const inputRef = useRef<HTMLInputElement | null>(null);

const [title, setTitle] = useState('');
const [buttonVisible, setButtonVisible] = useState(false);

const handleChangeInput = (event: React.ChangeEvent<HTMLInputElement>) => {
setTitle(event.target.value);
};

const handleSubmit = (event: React.FormEvent) => {
event.preventDefault();

if (!!title.trim().length) {
addTodo(title.trim());
setTitle('');
setButtonVisible(true);
}
};

const areAllTodosCompleted = useMemo(() => {
return todos.every(todo => todo.completed);
}, [todos]);

useEffect(() => {
setButtonVisible(todos.length > 0);
}, [todos]);

useEffect(() => {
if (inputRef.current) {
inputRef.current.focus();
}
}, [todos]);

const handleToggleAll = () => {
const updatedTodos = todos.map(todo => ({
...todo,
completed: areAllTodosCompleted ? false : true,
}));

setTodos(updatedTodos);
};

return (
<header className="todoapp__header">
{buttonVisible && (
<button
type="button"
className={classNames('todoapp__toggle-all', {
active: areAllTodosCompleted,
})}
data-cy="ToggleAllButton"
onClick={handleToggleAll}
/>
)}

{/* Add a todo on form submit */}
<form onSubmit={handleSubmit}>
<input
data-cy="NewTodoField"
type="text"
className="todoapp__new-todo"
placeholder="What needs to be done?"
ref={inputRef}
value={title}
onChange={handleChangeInput}
style={{ outline: 'none', boxSizing: 'border-box' }}
/>
</form>
</header>
);
};
1 change: 1 addition & 0 deletions src/components/Header/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './Header';
Loading
Loading