Develop

src/App.tsx

@@ -1,203 +1,25 @@
-/* eslint-disable jsx-a11y/label-has-associated-control */
 /* eslint-disable jsx-a11y/control-has-associated-label */
 import React from 'react';
-import { UserWarning } from './UserWarning';
-import { USER_ID } from './api/todos';
+import { TodosProvider } from './Context/TodoContext';
+import { TodoInput } from './Components/TodoInput';
+import { TodoList } from './Components/TodoList';
+import { TodoFilters } from './Components/TodoFilters';
+import { NotificationProvider } from './Context/NotificationContext';
+import { Notification } from './Components/Notification';
 
 export const App: React.FC = () => {
-  if (!USER_ID) {
-    return <UserWarning />;
-  }
-
   return (
     <div className="todoapp">
       <h1 className="todoapp__title">todos</h1>
-
       <div className="todoapp__content">
-        <header className="todoapp__header">
-          {/* this button should have `active` class only if all todos are completed */}
-          <button
-            type="button"
-            className="todoapp__toggle-all active"
-            data-cy="ToggleAllButton"
-          />
-
-          {/* Add a todo on form submit */}
-          <form>
-            <input
-              data-cy="NewTodoField"
-              type="text"
-              className="todoapp__new-todo"
-              placeholder="What needs to be done?"
-            />
-          </form>
-        </header>
-
-        <section className="todoapp__main" data-cy="TodoList">
-          {/* This is a completed todo */}
-          <div data-cy="Todo" className="todo completed">
-            <label className="todo__status-label">
-              <input
-                data-cy="TodoStatus"
-                type="checkbox"
-                className="todo__status"
-                checked
-              />
-            </label>
-
-            <span data-cy="TodoTitle" className="todo__title">
-              Completed Todo
-            </span>
-
-            {/* Remove button appears only on hover */}
-            <button type="button" className="todo__remove" data-cy="TodoDelete">
-              ×
-            </button>
-
-            {/* overlay will cover the todo while it is being deleted or updated */}
-            <div data-cy="TodoLoader" className="modal overlay">
-              <div className="modal-background has-background-white-ter" />
-              <div className="loader" />
-            </div>
-          </div>
-
-          {/* This todo is an active todo */}
-          <div data-cy="Todo" className="todo">
-            <label className="todo__status-label">
-              <input
-                data-cy="TodoStatus"
-                type="checkbox"
-                className="todo__status"
-              />
-            </label>
-
-            <span data-cy="TodoTitle" className="todo__title">
-              Not Completed Todo
-            </span>
-            <button type="button" className="todo__remove" data-cy="TodoDelete">
-              ×
-            </button>
-
-            <div data-cy="TodoLoader" className="modal overlay">
-              <div className="modal-background has-background-white-ter" />
-              <div className="loader" />
-            </div>
-          </div>
-
-          {/* This todo is being edited */}
-          <div data-cy="Todo" className="todo">
-            <label className="todo__status-label">
-              <input
-                data-cy="TodoStatus"
-                type="checkbox"
-                className="todo__status"
-              />
-            </label>
-
-            {/* This form is shown instead of the title and remove button */}
-            <form>
-              <input
-                data-cy="TodoTitleField"
-                type="text"
-                className="todo__title-field"
-                placeholder="Empty todo will be deleted"
-                value="Todo is being edited now"
-              />
-            </form>
-
-            <div data-cy="TodoLoader" className="modal overlay">
-              <div className="modal-background has-background-white-ter" />
-              <div className="loader" />
-            </div>
-          </div>
-
-          {/* This todo is in loadind state */}
-          <div data-cy="Todo" className="todo">
-            <label className="todo__status-label">
-              <input
-                data-cy="TodoStatus"
-                type="checkbox"
-                className="todo__status"
-              />
-            </label>
-
-            <span data-cy="TodoTitle" className="todo__title">
-              Todo is being saved now
-            </span>
-
-            <button type="button" className="todo__remove" data-cy="TodoDelete">
-              ×
-            </button>
-
-            {/* 'is-active' class puts this modal on top of the todo */}
-            <div data-cy="TodoLoader" className="modal overlay is-active">
-              <div className="modal-background has-background-white-ter" />
-              <div className="loader" />
-            </div>
-          </div>
-        </section>
-
-        {/* Hide the footer if there are no todos */}
-        <footer className="todoapp__footer" data-cy="Footer">
-          <span className="todo-count" data-cy="TodosCounter">
-            3 items left
-          </span>
-
-          {/* Active link should have the 'selected' class */}
-          <nav className="filter" data-cy="Filter">
-            <a
-              href="#/"
-              className="filter__link selected"
-              data-cy="FilterLinkAll"
-            >
-              All
-            </a>
-
-            <a
-              href="#/active"
-              className="filter__link"
-              data-cy="FilterLinkActive"
-            >
-              Active
-            </a>
-
-            <a
-              href="#/completed"
-              className="filter__link"
-              data-cy="FilterLinkCompleted"
-            >
-              Completed
-            </a>
-          </nav>
-
-          {/* this button should be disabled if there are no completed todos */}
-          <button
-            type="button"
-            className="todoapp__clear-completed"
-            data-cy="ClearCompletedButton"
-          >
-            Clear completed
-          </button>
-        </footer>
-      </div>
-
-      {/* DON'T use conditional rendering to hide the notification */}
-      {/* Add the 'hidden' class to hide the message smoothly */}
-      <div
-        data-cy="ErrorNotification"
-        className="notification is-danger is-light has-text-weight-normal"
-      >
-        <button data-cy="HideErrorButton" type="button" className="delete" />
-        {/* show only one message at a time */}
-        Unable to load todos
-        <br />
-        Title should not be empty
-        <br />
-        Unable to add a todo
-        <br />
-        Unable to delete a todo
-        <br />
-        Unable to update a todo
+        <NotificationProvider>
+          <TodosProvider>
+            <TodoInput />
+            <TodoList />
+            <TodoFilters />
+            <Notification />
+          </TodosProvider>
+        </NotificationProvider>
       </div>
     </div>
   );

src/Components/Loader/Loader.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import '../../styles/Loader.scss';
+
+export const Loader: React.FC = () => (
+  <div className="Loader" data-cy="loader">
+    <div className="Loader__content" />
+  </div>
+);

src/Components/Loader/index.ts

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

src/Components/Notification/Notification.tsx

@@ -0,0 +1,22 @@
+import classNames from 'classnames';
+import { useNotification } from '../../Context/NotificationContext';
+
+export const Notification = () => {
+  const { message, isVisible, hideNotification } = useNotification();
+
+  return (
+    <div
+      data-cy="ErrorNotification"
+      className={classNames('error-notification', { hidden: !isVisible })}
+    >
+      <button
+        data-cy="HideErrorButton"
+        type="button"
+        className="close-btn"
+        onClick={hideNotification}
+      >
+        {message}
+      </button>
+    </div>
+  );
+};

src/Components/Notification/index.ts

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

src/Components/TodoEdit/TodoEdit.tsx

@@ -0,0 +1,64 @@
+import { useContext, useState } from 'react';
+import { TodosContext } from '../../Context/TodoContext';
+import { EditContext } from '../../Context/EditContext';
+import { ACTIONS } from '../../types/Actions';
+
+type Props = {
+  title: string;
+  id: number;
+};
+
+export const TodoEdit: React.FC<Props> = ({ title, id }) => {
+  const [newTodoTitle, setNewTodo] = useState(title);
+  const { dispatch } = useContext(TodosContext);
+  const { setEditedTodoId } = useContext(EditContext);
+
+  const checkNewValue = (newTitle: string) => {
+    if (newTitle.length === 0) {
+      dispatch({ type: ACTIONS.DELETE_TODO, payload: { id } });
+      setEditedTodoId(null);
+
+      return;
+    }
+
+    if (newTitle !== title) {
+      dispatch({ type: ACTIONS.RENAME_TODO, payload: { id, title: newTitle } });
+    }
+
+    setEditedTodoId(null);
+  };
+
+  const handleChange = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Escape') {
+      setEditedTodoId(null);
+
+      return;
+    }
+
+    if (event.key !== 'Enter') {
+      return;
+    }
+
+    checkNewValue(newTodoTitle.trim());
+  };
+
+  const handleBlur = () => {
+    checkNewValue(newTodoTitle.trim());
+  };
+
+  return (
+    <form onSubmit={e => e.preventDefault()}>
+      <input
+        autoFocus
+        data-cy="TodoTitleField"
+        type="text"
+        className="todo__title-field"
+        placeholder="Empty todo will be deleted"
+        value={newTodoTitle}
+        onBlur={handleBlur}
+        onKeyDown={event => handleChange(event)}
+        onChange={event => setNewTodo(event.target.value)}
+      />
+    </form>
+  );
+};

src/Components/TodoEdit/index.ts

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

src/Components/TodoElement/TodoElement.tsx

@@ -0,0 +1,75 @@
+import classNames from 'classnames';
+import { TodosContext } from '../../Context/TodoContext';
+import { useContext } from 'react';
+import { TodoEdit } from '../TodoEdit';
+import { EditContext } from '../../Context/EditContext';
+import { ACTIONS } from '../../types/Actions';
+import { Todo } from '../../types/Todo';
+
+type Props = {
+  todo: Todo;
+};
+
+export const TodoElement: React.FC<Props> = ({ todo }) => {
+  const { completed, title, id } = todo;
+  const { dispatch } = useContext(TodosContext);
+  const { editedTodoId, setEditedTodoId } = useContext(EditContext);
+
+  const handleToggle = () => {
+    dispatch({ type: ACTIONS.TOGGLE_TODO, payload: { id, completed } });
+  };
+
+  const handleDelete = () => {
+    dispatch({ type: ACTIONS.DELETE_TODO, payload: { id } });
+  };
+
+  const completedTodoClass = classNames('todo', {
+    completed: completed,
+  });
+
+  return (
+    <div data-cy="Todo" className={completedTodoClass}>
+      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+      <label className="todo__status-label" htmlFor={`completed-${id}`}>
+        <input
+          id={`completed-${id}`}
+          data-cy="TodoStatus"
+          type="checkbox"
+          className="todo__status"
+          checked={completed}
+          onChange={handleToggle}
+        />
+      </label>
+
+      {editedTodoId === id ? (
+        <TodoEdit title={title} id={id} />
+      ) : (
+        <>
+          <span
+            data-cy="TodoTitle"
+            className="todo__title"
+            onDoubleClick={() => setEditedTodoId(id)}
+          >
+            {title}
+          </span>
+
+          <button
+            type="button"
+            className="todo__remove"
+            data-cy="TodoDelete"
+            onClick={handleDelete}
+          >
+            ×
+          </button>
+        </>
+      )}
+      <div
+        data-cy="TodoLoader"
+        className={`modal overlay ${editedTodoId === id ? 'is-active' : ''}`}
+      >
+        <div className="modal-background has-background-white-ter" />
+        <div className="loader" />
+      </div>
+    </div>
+  );
+};

src/Components/TodoElement/index.ts

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