dev

README.md

@@ -53,4 +53,4 @@ Implement a simple [TODO app](http://todomvc.com/examples/vanillajs/) working as
 - Implement a solution following the [React task guideline](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 one more 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://nikkias.github.io/react_todo-app/) and add it to the PR description.

package.json

@@ -17,7 +17,7 @@
     "@cypress/webpack-dev-server": "^1.8.4",
     "@mate-academy/cypress-tools": "^1.0.5",
     "@mate-academy/eslint-config-react-typescript": "^1.0.12",
-    "@mate-academy/scripts": "^1.2.8",
+    "@mate-academy/scripts": "^1.2.9",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^17.0.45",

src/App.tsx

@@ -1,93 +1,68 @@
-/* eslint-disable jsx-a11y/control-has-associated-label */
-import React from 'react';
+import React, { useState } from 'react';
+import { TodosContext } from './components/TodosContext';
+import { Todo } from './types/Todo';
+import { TodoContent } from './components/TodoContent';
+import { useLocalStorage } from './hooks/useLocalStorage';
+import { TodoFooter } from './components/TodoFooter';
+import { TodosFilter } from './types/TodosFilter';
 
 export const App: React.FC = () => {
+  const [query, setQuery] = useState('');
+  const [todos, setTodos] = useLocalStorage<Todo[]>('todos', []);
+  const [todosFilter, setTodosFilter] = useState<TodosFilter>(TodosFilter.all);
+  const [todoEditId, setTodoEditId] = useState<number>(0);
+  const [todoEdit, setTodoEdit] = useState<string>('');
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+    if (query.trim()) {
+      const todo = {
+        id: Date.now(),
+        title: query,
+        completed: false,
+      };
+
+      setTodos([...todos, todo]);
+      setQuery('');
+    }
+  };
+
   return (
     <div className="todoapp">
       <header className="header">
         <h1>todos</h1>
 
-        <form>
+        <form onSubmit={handleSubmit}>
           <input
             type="text"
             data-cy="createTodo"
             className="new-todo"
             placeholder="What needs to be done?"
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
           />
         </form>
       </header>
 
-      <section className="main">
-        <input
-          type="checkbox"
-          id="toggle-all"
-          className="toggle-all"
-          data-cy="toggleAll"
-        />
-        <label htmlFor="toggle-all">Mark all as complete</label>
-
-        <ul className="todo-list" data-cy="todoList">
-          <li>
-            <div className="view">
-              <input type="checkbox" className="toggle" id="toggle-view" />
-              <label htmlFor="toggle-view">asdfghj</label>
-              <button type="button" className="destroy" data-cy="deleteTodo" />
-            </div>
-            <input type="text" className="edit" />
-          </li>
-
-          <li className="completed">
-            <div className="view">
-              <input type="checkbox" className="toggle" id="toggle-completed" />
-              <label htmlFor="toggle-completed">qwertyuio</label>
-              <button type="button" className="destroy" data-cy="deleteTodo" />
-            </div>
-            <input type="text" className="edit" />
-          </li>
-
-          <li className="editing">
-            <div className="view">
-              <input type="checkbox" className="toggle" id="toggle-editing" />
-              <label htmlFor="toggle-editing">zxcvbnm</label>
-              <button type="button" className="destroy" data-cy="deleteTodo" />
-            </div>
-            <input type="text" className="edit" />
-          </li>
-
-          <li>
-            <div className="view">
-              <input type="checkbox" className="toggle" id="toggle-view2" />
-              <label htmlFor="toggle-view2">1234567890</label>
-              <button type="button" className="destroy" data-cy="deleteTodo" />
-            </div>
-            <input type="text" className="edit" />
-          </li>
-        </ul>
-      </section>
-
-      <footer className="footer">
-        <span className="todo-count" data-cy="todosCounter">
-          3 items left
-        </span>
-
-        <ul className="filters">
-          <li>
-            <a href="#/" className="selected">All</a>
-          </li>
-
-          <li>
-            <a href="#/active">Active</a>
-          </li>
-
-          <li>
-            <a href="#/completed">Completed</a>
-          </li>
-        </ul>
-
-        <button type="button" className="clear-completed">
-          Clear completed
-        </button>
-      </footer>
+      <TodosContext.Provider
+        value={{
+          todos,
+          todosFilter,
+          todoEditId,
+          todoEdit,
+          setTodos,
+          setTodosFilter,
+          setTodoEditId,
+          setTodoEdit,
+        }}
+      >
+        {todos.length > 0 && (
+          <>
+            <TodoContent />
+            <TodoFooter />
+          </>
+        )}
+      </TodosContext.Provider>
     </div>
   );
 };

src/components/TodoContent.tsx

@@ -0,0 +1,44 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+import { TodosContext } from './TodosContext';
+import { TodoList } from './TodoList';
+
+export const TodoContent: React.FC = () => {
+  const context = useContext(TodosContext);
+
+  if (!context) {
+    return null;
+  }
+
+  const { todos, setTodos } = context;
+
+  const isCompleted = todos.every(todo => todo.completed);
+
+  const toggleAll = () => {
+    setTodos(todos.map(todo => {
+      return { ...todo, completed: !isCompleted };
+    }));
+  };
+
+  return (
+    <section className="main">
+      <input
+        data-cy="toggleAll"
+        type="checkbox"
+        id="toggle-all"
+        className={cn(
+          'toggle-all',
+          { active: isCompleted },
+        )}
+        onClick={toggleAll}
+        checked={isCompleted}
+      />
+
+      <label htmlFor="toggle-all">
+        Mark all as complete
+      </label>
+
+      <TodoList />
+    </section>
+  );
+};

src/components/TodoFilter.tsx

@@ -0,0 +1,38 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+import { TodosContext } from './TodosContext';
+import { TodosFilter } from '../types/TodosFilter';
+
+export const TodoFilter: React.FC = () => {
+  const context = useContext(TodosContext);
+
+  if (!context) {
+    return null;
+  }
+
+  const { todosFilter, setTodosFilter } = context;
+
+  const handleLink = (val: string) => {
+    if (TodosFilter.all) {
+      return '#/';
+    }
+
+    return `#/${val.toLowerCase()}`;
+  };
+
+  return (
+    <ul className="filters" data-cy="todosFilter">
+      {Object.values(TodosFilter).map(val => (
+        <li key={val}>
+          <a
+            href={handleLink(val)}
+            onClick={() => setTodosFilter(val)}
+            className={cn({ selected: todosFilter === val })}
+          >
+            {val}
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+};

src/components/TodoFooter.tsx

@@ -0,0 +1,42 @@
+import React, { useContext } from 'react';
+import { TodosContext } from './TodosContext';
+import { TodoFilter } from './TodoFilter';
+
+export const TodoFooter: React.FC = () => {
+  const context = useContext(TodosContext);
+
+  if (!context) {
+    return null;
+  }
+
+  const { todos, setTodos } = context;
+
+  const clearComplete = () => {
+    setTodos(todos.filter(todo => !todo.completed));
+  };
+
+  const isCompleted = todos.some(todo => todo.completed);
+
+  const todosLeft = todos.filter(todo => todo.completed === false).length;
+
+  return (
+    <footer className="footer">
+      <span className="todo-count" data-cy="todosCounter">
+        {`${todosLeft} items left`}
+      </span>
+
+      <TodoFilter />
+
+      {isCompleted
+        && (
+          <button
+            type="button"
+            className="clear-completed"
+            onClick={clearComplete}
+          >
+            Clear completed
+          </button>
+        )}
+    </footer>
+  );
+};