commited unworking code

src/App.tsx

@@ -1,93 +1,18 @@
 /* eslint-disable jsx-a11y/control-has-associated-label */
 import React from 'react';
+import { Footer } from './components/Footer';
+import { Header } from './components/Header';
+import { Main } from './components/Main';
+import { Provider } 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>
-
-          <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>
-    </div>
+    <Provider>
+      <div className="todoapp">
+        <Header />
+        <Main />
+        <Footer />
+      </div>
+    </Provider>
   );
 };

src/components/Footer.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { TodosContext } from '../contexts/TodosContext';
+
+export const Footer = () => {
+  const { todoList } = React.useContext(TodosContext);
+
+  return (
+    <footer className="footer">
+      <span className="todo-count" data-cy="todosCounter">
+        {todoList.length}
+        <span> items left</span>
+      </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>
+  );
+};

src/components/Header.tsx

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { TodosContext } from '../contexts/TodosContext';
+
+export const Header = () => {
+  const [input, setInput] = useState('');
+  const { addItem } = React.useContext(TodosContext);
+
+  const handleSubmit = () => {
+    addItem(input);
+  };
+
+  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,16 @@
+import { Todos } from './Todos';
+
+export const Main = () => {
+  return (
+    <section className="main">
+      <input
+        type="checkbox"
+        id="toggle-all"
+        className="toggle-all"
+        data-cy="toggleAll"
+      />
+      <label htmlFor="toggle-all">Mark all as complete</label>
+      <Todos />
+    </section>
+  );
+};

src/components/Todos.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { TodosContext } from '../contexts/TodosContext';
+
+export const Todos = () => {
+  const { todoList,
+    removeItem,
+    markAsCompleted
+  } = React.useContext(TodosContext);
+
+  return (
+    <ul className="todo-list" data-cy="todoList">
+      {todoList.map((todoItem) => (
+        <li
+          className={`item ${todoItem.completed ? 'completed' : ''}`}
+          key={todoItem.id}
+        >
+          <div className="view">
+            <input type="checkbox" className="toggle" id="toggle-completed" />
+            <label htmlFor="toggle-completed">{todoItem}</label>
+            <button type="button" className="destroy" data-cy="deleteTodo">
+              .
+            </button>
+          </div>
+          <input type="text" className="edit" />
+        </li>
+      ))}
+    </ul>
+  );
+}

src/contexts/TodosContext.tsx

@@ -0,0 +1,84 @@
+import React, { useReducer } from 'react';
+
+export type State = {
+  todoList: { id: number; completed: boolean; title: string }[];
+};
+
+type Props = {
+  children: React.ReactNode;
+};
+
+type Action =
+  { type: 'ADD_TODO_ITEM', todoItemTitle: string } |
+  { type: 'REMOVE_TODO_ITEM', todoItemId: number } |
+  { type: 'TOGGLE_COMPLETED', todoItemId: number };
+
+export type AddItem = {
+  (todoItemTitle: string): void
+};
+
+const initialState: State = {
+  todoList: [],
+};
+
+export const reducer = (state: State, action: Action) => {
+  switch (action.type) {
+    case 'ADD_TODO_ITEM':
+      return {
+        todoList: [
+          ...state.todoList,
+          {
+            id: new Date().valueOf(),
+            completed: false,
+            title: action.todoItemTitle,
+          },
+        ],
+      };
+    case 'REMOVE_TODO_ITEM': {
+      const filteredItems = state.todoList.filter((todoItem) => {
+        return todoItem.id !== action.todoItemId;
+      });
+
+      return {
+        todoList: filteredItems,
+      };
+    }
+
+    case 'TOGGLE_COMPLETED': {
+      const updatedTodoList = state.todoList.map((todoItem) => {
+        return todoItem.id === action.todoItemId
+          ? { ...todoItem, completed: !todoItem.completed }
+          : todoItem;
+      });
+
+      return { todoList: updatedTodoList };
+    }
+
+    default: return state;
+  }
+};
+
+export const TodosContext = React.createContext(initialState);
+
+export const Provider: React.FC<Props> = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  const value = {
+    todoList: state.todoList,
+    addItem: (todoItemTitle: string) => {
+      dispatch({ type: 'ADD_TODO_ITEM', todoItemTitle });
+    },
+    removeItem: ((todoItemId: number) => {
+      dispatch({ type: 'REMOVE_TODO_ITEM', todoItemId });
+    }),
+    markAsCompleted: ((todoItemId: number) => {
+      dispatch({ type: 'TOGGLE_COMPLETED', todoItemId });
+    }),
+  };
+
+  return (
+    <TodosContext.Provider value={value}>
+      {children}
+    </TodosContext.Provider>
+  );
+};