Skip to content

Commit

Permalink
save changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@clavigo
clavigo committed Jan 28, 2025
1 parent c867b63 commit 3f4fdfc
Show file tree
Hide file tree
Showing 11 changed files with 436 additions and 147 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
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://clavigo.github.io/react_todo-app/) and add it to the PR description.
172 changes: 26 additions & 146 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,157 +1,37 @@
/* 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';

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"
<TodoProvider>
<div className="todoapp">
<h1 className="todoapp__title">todos</h1>

<div className="todoapp__content">
<Header
// todos={todos}
// handleAddTodo={handleAddTodo}
// handleToggling={handleToggling}
/>

{/* 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>
<TodoList
// todos={visibleTodos}
// handleDeleteTodo={handleDeleteTodo}
// handleUpdateTodo={handleUpdateTodo}
/>

{/* 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>
<Footer
// todos={todos}
// todosType={todosType}
// handleTodosTypeChange={handleTodosTypeChange}
// handleDeleteTodo={handleDeleteTodo}
/>
</div>
</div>
</div>
</TodoProvider>
);
};
60 changes: 60 additions & 0 deletions src/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import classNames from 'classnames';
import { FilterType } from '../types/FilterType';
import { useContext } from 'react';
import { TodoContext } from '../context/TodoContext';

// interface FooterProps {
// todos: Todo[];
// todosType: FilterType;
// handleTodosTypeChange: (todosType: FilterType) => void;
// handleDeleteTodo: (todoId: number) => void;
// }

export const Footer: React.FC = () => {
const { todos, todosType, handleDeleteTodo, handleTodosTypeChange } =
useContext(TodoContext)!;
const active = todos.filter(todo => !todo.completed).length;
const completed = todos.filter(todo => todo.completed);

const handleDeleteButton = () => {
completed.map(todo => {
handleDeleteTodo(todo.id);
});
};

return (
todos.length > 0 && (
<footer className="todoapp__footer" data-cy="Footer">
<span className="todo-count" data-cy="TodosCounter">
{active} items left
</span>

<nav className="filter" data-cy="Filter">
{Object.values(FilterType).map(filter => (
<a
key={filter}
href="#/"
className={classNames('filter__link', {
selected: todosType === filter,
})}
data-cy={`FilterLink${filter}`}
onClick={() => handleTodosTypeChange(filter)}
>
{filter}
</a>
))}
</nav>

<button
type="button"
className="todoapp__clear-completed"
data-cy="ClearCompletedButton"
disabled={completed.length === 0}
onClick={handleDeleteButton}
>
Clear completed
</button>
</footer>
)
);
};
62 changes: 62 additions & 0 deletions src/components/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import { useContext, useEffect, useRef, useState } from 'react';
import classNames from 'classnames';
import { TodoContext } from '../context/TodoContext';

// interface HeaderProps {
// todos: Todo[];
// handleAddTodo: (query: string) => void;
// handleToggling: (todosToToggle: Todo[]) => void;
// }

export const Header: React.FC = () => {
const { todos, handleAddTodo, handleToggling } = useContext(TodoContext)!;
const [query, setQuery] = useState('');
const [isDisabled, setIsDisabled] = useState(false);

const newTodoInput = useRef<HTMLInputElement>(null);

const allActive = todos.every(todo => todo.completed);
const toToggle = todos.filter(todo => todo.completed === allActive);

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

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

setIsDisabled(true);

handleAddTodo(query.trim());
setQuery('');
setIsDisabled(false);
};

return (
<header className="todoapp__header">
{todos.length > 0 && (
<button
type="button"
className={classNames('todoapp__toggle-all', { active: allActive })}
data-cy="ToggleAllButton"
onClick={() => handleToggling(toToggle)}
/>
)}

<form onSubmit={handleSubmit}>
<input
data-cy="NewTodoField"
type="text"
className="todoapp__new-todo"
placeholder="What needs to be done?"
value={query}
onChange={event => setQuery(event.target.value)}
ref={newTodoInput}
disabled={isDisabled}
/>
</form>
</header>
);
};
Loading

0 comments on commit 3f4fdfc

Please sign in to comment.