commited unworking code

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://OPTIMISTIXX.github.io/react_todo-app/) and add it to the PR description.

src/App.tsx

@@ -1,93 +1,25 @@
 /* eslint-disable jsx-a11y/control-has-associated-label */
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import { Header } from './components/Header';
+import { Main } from './components/Main';
+import { Footer } from './components/Footer';
+import { TodosContext } from './contexts/TodosContext';
 
 export const App: React.FC = () => {
-  return (
-    <div className="todoapp">
-      <header className="header">
-        <h1>todos</h1>
-
-        <form>
-          <input
-            type="text"
-            data-cy="createTodo"
-            className="new-todo"
-            placeholder="What needs to be done?"
-          />
-        </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>
+  const { state: { todos } } = React.useContext(TodosContext);
+  const [tasks, setTasks] = useState(todos);
 
-          <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>
+  useEffect(() => {
+    setTasks(todos);
+  }, [todos]);
 
-      <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>
+  return (
+    <div className="todoapp">
+      <Header />
+      <Main />
+      {tasks.length > 0 && (
+        <Footer />
+      )}
     </div>
   );
 };

src/components/Footer.tsx

@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react';
+import { TodosContext } from '../contexts/TodosContext';
+
+export const Footer = () => {
+  const { state: { todos }, dispatch } = React.useContext(TodosContext);
+  const [tasks, setTasks] = useState(todos);
+  const [completedTasks, setCompletedTasks] = useState(todos);
+  const [buttonsState, setButtonsState] = useState('all');
+
+  useEffect(() => {
+    setTasks(todos.filter((todo) => todo.completed === false));
+    setCompletedTasks(todos.filter((todo) => todo.completed === true));
+  }, [todos]);
+
+  const handleAllTasks = () => {
+    dispatch({ type: 'SHOW_ALL_TASKS', filter: 'all' });
+    setButtonsState('all');
+  };
+
+  const handleActiveTasks = () => {
+    dispatch({ type: 'SHOW_ACTIVE_TASKS', filter: 'active' });
+    setButtonsState('active');
+  };
+
+  const handleCompletedTasks = () => {
+    dispatch({ type: 'SHOW_COMPLETED_TASKS', filter: 'completed' });
+    setButtonsState('completed');
+  };
+
+  const handleClearCompleted = () => {
+    dispatch({ type: 'CLEAR_COMPLETED' });
+  };
+
+  return (
+    todos.length ? (
+      <footer className="footer">
+        <span className="todo-count" data-cy="todosCounter">
+          {tasks.length}
+          <span> items left</span>
+        </span>
+
+        <ul className="filters">
+          <li>
+            <a
+              onClick={handleAllTasks}
+              href="#/"
+              className={buttonsState === 'all' ? 'selected' : ''}
+            >
+              All
+            </a>
+          </li>
+
+          <li>
+            <a
+              onClick={handleActiveTasks}
+              href="#/active"
+              className={buttonsState === 'active' ? 'selected' : ''}
+            >
+              Active
+            </a>
+          </li>
+
+          <li>
+            <a
+              onClick={handleCompletedTasks}
+              href="#/active"
+              className={buttonsState === 'completed' ? 'selected' : ''}
+            >
+              Completed
+            </a>
+          </li>
+        </ul>
+
+        {completedTasks.length > 0 && (
+          <button
+            type="button"
+            onClick={handleClearCompleted}
+            className="clear-completed"
+          >
+            Clear completed
+          </button>
+        )}
+
+      </footer>
+    ) : (
+      <></>
+    )
+  );
+};

src/components/Header.tsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { TodosContext } from '../contexts/TodosContext';
+
+export const Header = () => {
+  const [input, setInput] = useState('');
+  const { dispatch } = React.useContext(TodosContext);
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (input.trim()) {
+      dispatch({ type: 'ADD_TODO_ITEM', title: input });
+    }
+
+    setInput('');
+  };
+
+  return (
+    <header className="header">
+      <h1>todos</h1>
+
+      <form onSubmit={handleSubmit}>
+        <input
+          type="text"
+          data-cy="createTodo"
+          className="new-todo"
+          placeholder="What needs to be done?"
+          value={input}
+          onChange={e => setInput(e.target.value)}
+        />
+      </form>
+    </header>
+  );
+};

src/components/Main.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import { TodosContext } from '../contexts/TodosContext';
+import { Todos } from './Todos';
+
+export const Main = () => {
+  const [labelClick, setLabelClick] = useState(0);
+  const { state: { todos }, dispatch } = React.useContext(TodosContext);
+
+  const handleToggleAll = () => {
+    setLabelClick(labelClick + 1);
+    dispatch({
+      type: labelClick % 2
+        ? 'MARK_ALL_AS_UNCOMPLETED' : 'MARK_ALL_AS_COMPLETED',
+    });
+  };
+
+  return (
+    todos.length > 0 ? (
+      <section className="main">
+        <input
+          onClick={handleToggleAll}
+          type="checkbox"
+          id="toggle-all"
+          className="toggle-all"
+          data-cy="toggleAll"
+        />
+        <label htmlFor="toggle-all">
+          Mark all as completed
+        </label>
+        <Todos />
+      </section>
+    ) : (
+      <></>
+    )
+  );
+};

src/components/Todo.tsx

@@ -0,0 +1,92 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { TodosContext } from '../contexts/TodosContext';
+import { ITodo } from '../types/types';
+
+type Props = {
+  onItemDelete: (id: number) => void;
+  todoItem: ITodo;
+};
+
+export const Todo: React.FC<Props> = ({
+  onItemDelete,
+  todoItem,
+}) => {
+  const [edit, setEdit] = useState(false);
+  const [editedTitle, setEditedTitle] = useState(todoItem.title);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const {
+    dispatch,
+  } = React.useContext(TodosContext);
+
+  const handleTitleSave = (e: React.SyntheticEvent, id: number) => {
+    e.preventDefault();
+    if (!editedTitle.trim()) {
+      dispatch({ type: 'REMOVE_TODO_ITEM', id });
+    } else {
+      dispatch({ type: 'SAVE_EDITED_TITLE', title: editedTitle, titleId: id });
+    }
+
+    setEdit(!edit);
+  };
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [edit]);
+
+  const handleLabel = () => {
+    setEdit(true);
+  };
+
+  const changeCheckbox = () => {
+    dispatch({ type: 'MARK_TASK_AS_COMPLETED', id: todoItem.id });
+  };
+
+  return (
+    <li
+      className={`item ${todoItem.completed ? 'completed' : ''}`}
+      key={todoItem.id}
+    >
+      <div className="view">
+        <input
+          type="checkbox"
+          className="toggle"
+          id={`toggle-completed-${todoItem.id}`}
+          checked={todoItem.completed}
+          onChange={changeCheckbox}
+        />
+        {edit ? (
+          <form onSubmit={(e) => handleTitleSave(e, todoItem.id)}>
+            <input
+              ref={inputRef}
+              type="text"
+              id="editID"
+              className="edit"
+              value={editedTitle}
+              onBlur={() => setEdit(false)}
+              onChange={(e) => setEditedTitle(e.target.value)}
+            />
+          </form>
+        ) : (
+          <label
+            htmlFor="editID"
+            onDoubleClick={handleLabel}
+          >
+            {todoItem.title}
+          </label>
+        )}
+        {!edit && (
+          <button
+            type="button"
+            className="destroy"
+            data-cy="deleteTodo"
+            onClick={() => onItemDelete(todoItem.id)}
+          >
+            .
+          </button>
+        )}
+      </div>
+    </li>
+  );
+};