,
+ ) => {
+ event.preventDefault();
+
+ if (!title.trim()) {
+ return;
+ }
+
+ const newTodo: Todo = {
+ id: +new Date(),
+ title: title.trim(),
+ completed: false,
+ };
+
+ setTodos([...todos, newTodo]);
+ setTitle('');
+ setIsToggleCheckedAll(false);
+ }, [setIsToggleCheckedAll, setTodos, title, todos]);
+
+ return (
+
+ );
+};
diff --git a/src/components/Main.tsx b/src/components/Main.tsx
new file mode 100644
index 000000000..ebdbf30b1
--- /dev/null
+++ b/src/components/Main.tsx
@@ -0,0 +1,41 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
+import React, { useContext } from 'react';
+import { TodosContext } from '../TodosContext';
+import { TodoList } from './TodoList';
+
+export const Main: React.FC = () => {
+ const {
+ todos,
+ setTodos,
+ visibleTodos,
+ isToggleCheckedAll,
+ setIsToggleCheckedAll,
+ } = useContext(TodosContext);
+
+ const checkAllTodos = () => {
+ const newTodos = todos.map(todo => (
+ isToggleCheckedAll
+ ? { ...todo, completed: false }
+ : { ...todo, completed: true }
+ ));
+
+ setTodos(newTodos);
+ setIsToggleCheckedAll(!isToggleCheckedAll);
+ };
+
+ return (
+
+ );
+};
diff --git a/src/components/TodoApp.tsx b/src/components/TodoApp.tsx
new file mode 100644
index 000000000..515fe98f5
--- /dev/null
+++ b/src/components/TodoApp.tsx
@@ -0,0 +1,23 @@
+import React, { useContext } from 'react';
+import { Header } from './Header';
+import { Main } from './Main';
+import { Footer } from './Footer';
+import { TodosContext } from '../TodosContext';
+
+export const TodoApp: React.FC = () => {
+ const { todos } = useContext(TodosContext);
+
+ return (
+
+
+
+ {!!todos.length && (
+ <>
+
+
+
+
+ )}
+
+ );
+};
diff --git a/src/components/TodoItem.tsx b/src/components/TodoItem.tsx
new file mode 100644
index 000000000..bf4c170ef
--- /dev/null
+++ b/src/components/TodoItem.tsx
@@ -0,0 +1,121 @@
+import React, {
+ useContext,
+ useState,
+ useRef,
+ useEffect,
+} from 'react';
+import cn from 'classnames';
+import { Todo } from '../types/Todo';
+import { TodosContext } from '../TodosContext';
+
+type Props = {
+ item: Todo,
+};
+export const TodoItem: React.FC = ({ item }) => {
+ const { todos, setTodos, setIsToggleCheckedAll } = useContext(TodosContext);
+ const [isEditing, setIsEditing] = useState(false);
+ const [title, setTitle] = useState(item.title);
+
+ const selectedTodo = useRef(null);
+
+ useEffect(() => {
+ if (selectedTodo.current) {
+ selectedTodo.current.focus();
+ }
+ }, [isEditing]);
+
+ const removeTodo = (id: number) => {
+ const newTodos = todos.filter(todo => todo.id !== id);
+
+ setTodos(newTodos);
+ setIsToggleCheckedAll(newTodos.every(todo => todo.completed));
+ };
+
+ const toggleTodo = (id: number) => {
+ const newTodos = todos.map(todo => (
+ todo.id === id
+ ? { ...todo, completed: !todo.completed }
+ : todo
+ ));
+
+ setTodos(newTodos);
+ setIsToggleCheckedAll(newTodos.every(todo => todo.completed));
+ };
+
+ const handleDoubleClick = (
+ event: React.MouseEvent,
+ ) => {
+ event.preventDefault();
+ setIsEditing(true);
+ };
+
+ const handleBlur = () => {
+ setIsEditing(false);
+
+ if (!title.trim()) {
+ removeTodo(item.id);
+
+ return;
+ }
+
+ setTodos(todos.map(todo => (
+ todo.id === item.id
+ ? { ...todo, title: title.trim() }
+ : todo
+ )));
+ };
+
+ const handleKeyUp = (event: React.KeyboardEvent) => {
+ switch (event.key) {
+ case 'Escape':
+ setIsEditing(false);
+ setTitle(item.title);
+ break;
+
+ case 'Enter':
+ handleBlur();
+ break;
+
+ default:
+ break;
+ }
+ };
+
+ return (
+
+
+ toggleTodo(item.id)}
+ />
+
+
+ setTitle(event.target.value)}
+ ref={selectedTodo}
+ onKeyUp={handleKeyUp}
+ onBlur={handleBlur}
+ />
+
+ );
+};
diff --git a/src/components/TodoList.tsx b/src/components/TodoList.tsx
new file mode 100644
index 000000000..d512095fc
--- /dev/null
+++ b/src/components/TodoList.tsx
@@ -0,0 +1,16 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
+import React from 'react';
+import { Todo } from '../types/Todo';
+import { TodoItem } from './TodoItem';
+
+type Props = {
+ items: Todo[],
+};
+
+export const TodoList: React.FC = ({ items }) => (
+
+ {items.map(item => (
+
+ ))}
+
+);
diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts
new file mode 100644
index 000000000..d4069dfe6
--- /dev/null
+++ b/src/hooks/useLocalStorage.ts
@@ -0,0 +1,29 @@
+import { useState } from 'react';
+
+export function useLocalStorage(
+ key: string,
+ startValue: T,
+): [T, (v: T) => void] {
+ const [value, setValue] = useState(() => {
+ const data = localStorage.getItem(key);
+
+ if (data === null) {
+ return startValue;
+ }
+
+ try {
+ return JSON.parse(data);
+ } catch (e) {
+ localStorage.removeItem(key);
+
+ return startValue;
+ }
+ });
+
+ const save = (newValue: T) => {
+ localStorage.setItem(key, JSON.stringify(newValue));
+ setValue(newValue);
+ };
+
+ return [value, save];
+}
diff --git a/src/types/Context.ts b/src/types/Context.ts
new file mode 100644
index 000000000..577f4b434
--- /dev/null
+++ b/src/types/Context.ts
@@ -0,0 +1,12 @@
+import { Option } from './Option';
+import { Todo } from './Todo';
+
+export interface Context {
+ todos: Todo[];
+ setTodos: (v: Todo[]) => void;
+ filter: Option;
+ setFilter: (v: Option) => void;
+ visibleTodos: Todo[];
+ isToggleCheckedAll: boolean;
+ setIsToggleCheckedAll: (v: boolean) => void;
+}
diff --git a/src/types/Option.ts b/src/types/Option.ts
new file mode 100644
index 000000000..1e64b6482
--- /dev/null
+++ b/src/types/Option.ts
@@ -0,0 +1,5 @@
+export enum Option {
+ All = 'all',
+ Active = 'active',
+ Completed = 'completed',
+}
diff --git a/src/types/Todo.ts b/src/types/Todo.ts
new file mode 100644
index 000000000..f9e06b381
--- /dev/null
+++ b/src/types/Todo.ts
@@ -0,0 +1,5 @@
+export interface Todo {
+ id: number;
+ title: string;
+ completed: boolean;
+}