-
Notifications
You must be signed in to change notification settings - Fork 1.2k
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 #1051
base: master
Are you sure you want to change the base?
add task solution #1051
Changes from 3 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,157 +1,12 @@ | ||
/* eslint-disable jsx-a11y/control-has-associated-label */ | ||
import React from 'react'; | ||
import { TodoProvider } from './Components/TodoContext'; | ||
import { TodoApp } from './Components/TodoApp'; | ||
|
||
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> | ||
</div> | ||
</div> | ||
<TodoProvider> | ||
<TodoApp /> | ||
</TodoProvider> | ||
); | ||
}; |
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -0,0 +1,89 @@ | ||||||
import React, { useContext } from 'react'; | ||||||
import cn from 'classnames'; | ||||||
import { ActionNames, FilterBy, TodoContext } from './TodoContext'; | ||||||
|
||||||
export const Footer: React.FC = () => { | ||||||
const { todos, dispatch, handleFilterBy, filteredBy, originalTodos } = | ||||||
useContext(TodoContext); | ||||||
|
||||||
const activeTodos = originalTodos.filter( | ||||||
todo => todo.completed === false, | ||||||
).length; | ||||||
const disabled = todos.some(todo => todo.completed); | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
const handleFilter = ( | ||||||
event: React.MouseEvent<HTMLAnchorElement>, | ||||||
type: FilterBy, | ||||||
) => { | ||||||
event.preventDefault(); | ||||||
|
||||||
handleFilterBy(type); | ||||||
}; | ||||||
|
||||||
return ( | ||||||
<> | ||||||
{originalTodos.length > 0 && ( | ||||||
<footer className="todoapp__footer" data-cy="Footer"> | ||||||
<span className="todo-count" data-cy="TodosCounter"> | ||||||
{`${activeTodos} items left`} | ||||||
</span> | ||||||
|
||||||
<nav className="filter" data-cy="Filter"> | ||||||
<a | ||||||
href="#/" | ||||||
className={cn('filter__link', { | ||||||
selected: filteredBy === FilterBy.All, | ||||||
})} | ||||||
data-cy="FilterLinkAll" | ||||||
onClick={(event: React.MouseEvent<HTMLAnchorElement>) => | ||||||
handleFilter(event, FilterBy.All) | ||||||
} | ||||||
> | ||||||
All | ||||||
</a> | ||||||
|
||||||
<a | ||||||
href="#/active" | ||||||
className={cn('filter__link', { | ||||||
selected: filteredBy === FilterBy.Active, | ||||||
})} | ||||||
data-cy="FilterLinkActive" | ||||||
onClick={(event: React.MouseEvent<HTMLAnchorElement>) => | ||||||
handleFilter(event, FilterBy.Active) | ||||||
} | ||||||
> | ||||||
Active | ||||||
</a> | ||||||
|
||||||
<a | ||||||
href="#/completed" | ||||||
className={cn('filter__link', { | ||||||
selected: filteredBy === FilterBy.Completed, | ||||||
})} | ||||||
data-cy="FilterLinkCompleted" | ||||||
onClick={(event: React.MouseEvent<HTMLAnchorElement>) => | ||||||
handleFilter(event, FilterBy.Completed) | ||||||
} | ||||||
> | ||||||
Completed | ||||||
</a> | ||||||
</nav> | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. To make your code cleaner you could use map + Object.values(FilterBy) |
||||||
|
||||||
<button | ||||||
type="button" | ||||||
className="todoapp__clear-completed" | ||||||
data-cy="ClearCompletedButton" | ||||||
disabled={!disabled} | ||||||
onClick={() => | ||||||
dispatch({ | ||||||
type: ActionNames.ClearCompleted, | ||||||
}) | ||||||
} | ||||||
> | ||||||
Clear completed | ||||||
</button> | ||||||
</footer> | ||||||
)} | ||||||
</> | ||||||
); | ||||||
}; |
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -0,0 +1,87 @@ | ||||||
import React, { useContext, useEffect, useRef, useState } from 'react'; | ||||||
import cn from 'classnames'; | ||||||
import { ActionNames, TodoContext } from './TodoContext'; | ||||||
import { Todo } from '../types/Todo'; | ||||||
|
||||||
export const Header: React.FC = ({}) => { | ||||||
const { todos, dispatch, originalTodos } = useContext(TodoContext); | ||||||
const [value, setValue] = useState(''); | ||||||
|
||||||
const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => { | ||||||
event.preventDefault(); | ||||||
setValue(event.target.value); | ||||||
}; | ||||||
|
||||||
const handleKeyDown = (event: React.FormEvent<HTMLFormElement>) => { | ||||||
event.preventDefault(); | ||||||
|
||||||
if (value.trim() === '') { | ||||||
return; | ||||||
} | ||||||
|
||||||
const newTodo: Todo = { | ||||||
id: +new Date(), | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. lol) |
||||||
completed: false, | ||||||
title: value.trim(), | ||||||
}; | ||||||
|
||||||
setValue(''); | ||||||
|
||||||
dispatch({ type: ActionNames.Add, payload: newTodo }); | ||||||
}; | ||||||
|
||||||
const completed = | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
todos.length && todos.some(todo => todo.completed === false); | ||||||
|
||||||
const allCompleted = originalTodos.every(todo => todo.completed); | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
const inputRef = useRef<HTMLInputElement>(null); | ||||||
|
||||||
const focusInput = () => { | ||||||
if (inputRef.current) { | ||||||
inputRef.current.focus(); | ||||||
} | ||||||
}; | ||||||
|
||||||
useEffect(() => { | ||||||
if (allCompleted) { | ||||||
focusInput(); | ||||||
} | ||||||
}, [allCompleted]); | ||||||
|
||||||
useEffect(() => { | ||||||
focusInput(); | ||||||
}, [todos.length]); | ||||||
|
||||||
return ( | ||||||
<header className="todoapp__header"> | ||||||
{originalTodos.length > 0 && ( | ||||||
<button | ||||||
type="button" | ||||||
data-cy="ToggleAllButton" | ||||||
onClick={() => | ||||||
dispatch({ type: ActionNames.ToggleAllCompleted, payload: todos }) | ||||||
} | ||||||
className={cn('todoapp__toggle-all', { | ||||||
active: !completed, | ||||||
})} | ||||||
/> | ||||||
)} | ||||||
|
||||||
<form onSubmit={handleKeyDown}> | ||||||
<input | ||||||
data-cy="NewTodoField" | ||||||
type="text" | ||||||
className={cn('todoapp__new-todo', { | ||||||
active: allCompleted, | ||||||
})} | ||||||
placeholder="What needs to be done?" | ||||||
autoFocus | ||||||
value={value} | ||||||
ref={inputRef} | ||||||
onChange={handleOnChange} | ||||||
/> | ||||||
</form> | ||||||
</header> | ||||||
); | ||||||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import React from 'react'; | ||
import { Header } from './Header'; | ||
import { Footer } from './Footer'; | ||
import { TodoList } from './TodoList'; | ||
|
||
export const TodoApp: React.FC = () => { | ||
return ( | ||
<div className="todoapp"> | ||
<h1 className="todoapp__title">todos</h1> | ||
|
||
<div className="todoapp__content"> | ||
<Header /> | ||
|
||
<section className="todoapp__main" data-cy="TodoList"> | ||
<TodoList /> | ||
</section> | ||
|
||
<Footer /> | ||
</div> | ||
</div> | ||
); | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.