Implement_a_TODO_app

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

package.json

@@ -15,8 +15,8 @@
   "devDependencies": {
     "@cypress/react": "^5.12.4",
     "@cypress/webpack-dev-server": "^1.8.4",
-    "@mate-academy/cypress-tools": "^1.0.4",
-    "@mate-academy/eslint-config-react-typescript": "^1.0.11",
+    "@mate-academy/cypress-tools": "^1.0.5",
+    "@mate-academy/eslint-config-react-typescript": "^1.0.12",
     "@mate-academy/scripts": "^1.2.8",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",

src/App.scss

@@ -0,0 +1,36 @@
+@import "./utils/variables.scss";
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+button {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  font-size: 100%;
+  vertical-align: baseline;
+  font-family: inherit;
+  font-weight: inherit;
+  color: inherit;
+  -webkit-appearance: none;
+  appearance: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
+  line-height: 1.4em;
+  background: $body-bg-color;
+  color: $body-color;
+  min-width: 230px;
+  max-width: 550px;
+  margin: 0 auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 300;
+}

src/App.tsx

@@ -1,93 +1,13 @@
-/* eslint-disable jsx-a11y/control-has-associated-label */
 import React from 'react';
 
+import './App.scss';
+import { TodoApp } from './components/TodoApp/TodoApp';
+import { GlobalStateProvider } from './components/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>
+    <GlobalStateProvider>
+      <TodoApp />
+    </GlobalStateProvider>
   );
 };

src/components/Footer/Footer.scss

@@ -0,0 +1,53 @@
+@import "../../utils/mixins.scss";
+
+.footer {
+  color: $footer-color;
+  padding: 10px 15px;
+  height: 20px;
+  text-align: center;
+  border-top: 1px solid $footer-border-color;
+
+  &:before {
+    content: "";
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 50px;
+    overflow: hidden;
+    box-shadow: 0 1px 1px $app-main-shadow-color,
+      0 8px 0 -3px $footer-secondary-shadow-color,
+      0 9px 1px -3px $app-main-shadow-color,
+      0 16px 0 -6px $footer-secondary-shadow-color,
+      0 17px 2px -6px $app-main-shadow-color;
+  }
+
+  @media (max-width: 430px) {
+    height: 50px;
+  }
+}
+
+.todo-count {
+  float: left;
+  text-align: left;
+
+  strong {
+    font-weight: 300;
+  }
+}
+
+.clear-completed {
+  float: right;
+  position: relative;
+  line-height: 20px;
+  text-decoration: none;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &:active {
+    text-decoration: none;
+  }
+}

src/components/Footer/Footer.tsx

@@ -0,0 +1,48 @@
+import React, { useContext } from 'react';
+
+import './Footer.scss';
+import { TodosContext } from '../TodosContext';
+import { TodosFilter } from '../TodosFilter';
+
+export const Footer: React.FC = () => {
+  const { todos, dispatch } = useContext(TodosContext);
+
+  const notCompletedTodos = todos.filter(todo => !todo.completed);
+  const notCompletedLength = notCompletedTodos.length;
+  const completedLength = todos.length - notCompletedLength;
+
+  const getItemsLeft = () => {
+    return notCompletedLength === 1 ? (
+      '1 item left'
+    ) : (
+      `${notCompletedLength} items left`
+    );
+  };
+
+  const handleClearClick = () => {
+    dispatch({
+      type: 'clearAllCompleted',
+      payload: notCompletedTodos,
+    });
+  };
+
+  return (
+    <footer className="footer">
+      <span className="todo-count" data-cy="todosCounter">
+        {getItemsLeft()}
+      </span>
+
+      <TodosFilter />
+
+      {!!completedLength && (
+        <button
+          type="button"
+          className="clear-completed"
+          onClick={handleClearClick}
+        >
+          Clear completed
+        </button>
+      )}
+    </footer>
+  );
+};

src/components/Footer/index.ts

@@ -0,0 +1 @@
+export * from './Footer';

src/components/Header/Header.scss

@@ -0,0 +1,10 @@
+@import "../../utils/mixins.scss";
+
+.new-todo {
+  @include editTitle;
+
+  padding: 16px 16px 16px 60px;
+  border: none;
+  background: $new-todo-background-color;
+  box-shadow: inset 0 -2px 1px $new-todo-shadow-color;
+}

src/components/Header/Header.tsx

@@ -0,0 +1,51 @@
+import React, { useContext, useState } from 'react';
+
+import './Header.scss';
+import { TodosContext } from '../TodosContext';
+
+export const Header: React.FC = () => {
+  const { dispatch } = useContext(TodosContext);
+  const [newTodoTitle, setNewTodoTitle] = useState('');
+
+  const handleKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Escape') {
+      setNewTodoTitle('');
+    }
+
+    if (event.key === 'Enter') {
+      if (newTodoTitle.trim().length) {
+        dispatch({
+          type: 'add',
+          payload: {
+            id: +new Date(),
+            title: newTodoTitle,
+            completed: false,
+          },
+        });
+      }
+
+      setNewTodoTitle('');
+    }
+  };
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setNewTodoTitle(event.target.value);
+  };
+
+  return (
+    <header className="header">
+      <h1>todos</h1>
+
+      <input
+        type="text"
+        data-cy="createTodo"
+        className="new-todo"
+        placeholder="What needs to be done?"
+        value={newTodoTitle}
+        onChange={handleChange}
+        onKeyUp={handleKeyUp}
+      />
+
+    </header>
+  );
+};

src/components/Header/index.ts

@@ -0,0 +1 @@
+export * from './Header';