Developed

cypress/integration/page.spec.js

@@ -58,9 +58,9 @@ Cypress.on('fail', e => {
 });
 
 describe('', () => {
-  beforeEach(() => {
-    if (failed) Cypress.runner.stop();
-  });
+  // beforeEach(() => {
+  //   if (failed) Cypress.runner.stop();
+  // });
 
   describe('Page with no todos', () => {
     beforeEach(() => {

package.json

@@ -14,7 +14,7 @@
   },
   "devDependencies": {
     "@cypress/react18": "^2.0.1",
-    "@mate-academy/scripts": "^1.8.5",
+    "@mate-academy/scripts": "^1.9.12",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^20.14.10",

src/App.tsx

@@ -1,157 +1,28 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
 /* eslint-disable jsx-a11y/control-has-associated-label */
-import React from 'react';
+import { TodoFilter } from './components/TodoFilter/TodoFilter';
+import React, { useContext } from 'react';
+import { TodoList } from './components/TodoList/TodoList';
+import { TodoForm } from './components/TodoForm/TodoForm';
+import { Notification } from './components/Notification/Notification';
+import { StateContext } from './Store';
 
 export const App: React.FC = () => {
+  const { todos } = useContext(StateContext);
+
   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>
-          </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>
-
-          {/* 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>
+        <TodoForm />
 
-            {/* 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>
+        <TodoList />
 
-          {/* 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>
-          </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>
+        {todos.length > 0 && <TodoFilter />}
       </div>
+
+      <Notification />
     </div>
   );
 };

src/Store.tsx

@@ -0,0 +1,130 @@
+import React, { useEffect, useReducer } from 'react';
+import { ErrorMessage } from './types/ErrorMessage';
+import { Todo } from './types/Todo';
+import { Status } from './types/Status';
+export type Action =
+  | { type: 'failure'; errorMessage: ErrorMessage | null }
+  | { type: 'closeNotification' }
+  | { type: 'filterStatus'; status: Status }
+  | { type: 'addTodo'; tempTodo: Todo }
+  | { type: 'addingSuccess'; newTodo: Todo }
+  | { type: 'reset' }
+  | { type: 'startAction'; selectedTodo: number[] }
+  | { type: 'deletingSuccesses' }
+  | { type: 'editTodoSuccess'; index: number; updatedTodo: Todo }
+  | { type: 'toggleAllSuccesses'; completed: boolean };
+
+interface RootState {
+  todos: Todo[];
+  selectedTodo: number[];
+  status: Status;
+  errorMessage: ErrorMessage | null;
+}
+
+const initialState: RootState = {
+  todos: [],
+  selectedTodo: [],
+  status: Status.all,
+  errorMessage: null,
+};
+
+const reducer = (state: RootState, action: Action): RootState => {
+  switch (action.type) {
+    case 'failure':
+      return {
+        ...state,
+        errorMessage: action.errorMessage,
+      };
+    case 'closeNotification':
+      return {
+        ...state,
+        errorMessage: null,
+      };
+    case 'filterStatus':
+      return {
+        ...state,
+        status: action.status,
+      };
+    case 'addTodo':
+      return {
+        ...state,
+        errorMessage: null,
+      };
+    case 'addingSuccess':
+      return {
+        ...state,
+        todos: [...state.todos, action.newTodo],
+      };
+    case 'reset':
+      return {
+        ...state,
+        selectedTodo: [],
+      };
+    case 'startAction':
+      return {
+        ...state,
+        errorMessage: null,
+        selectedTodo: action.selectedTodo,
+      };
+    case 'deletingSuccesses':
+      const newTodos = state.todos.filter(
+        todo => !state.selectedTodo.includes(todo.id),
+      );
+
+      return {
+        ...state,
+        todos: newTodos,
+      };
+    case 'editTodoSuccess': {
+      const updatedTodos = state.todos.map((todo, idx) =>
+        idx === action.index ? action.updatedTodo : todo,
+      );
+
+      return {
+        ...state,
+        todos: updatedTodos,
+      };
+    }
+
+    case 'toggleAllSuccesses': {
+      const updatedTodos = state.todos.map(todo => ({
+        ...todo,
+        completed: action.completed,
+      }));
+
+      return {
+        ...state,
+        todos: updatedTodos,
+      };
+    }
+
+    default:
+      return state;
+  }
+};
+
+export const StateContext = React.createContext(initialState);
+// eslint-disable-next-line @typescript-eslint/no-unused-vars, prettier/prettier
+export const DispatchContext = React.createContext((action: Action) => { });
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const GlobalStateProvider: React.FC<Props> = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, initialState, initial => {
+    const savedTodos = localStorage.getItem('todos');
+
+    return savedTodos ? { ...initial, todos: JSON.parse(savedTodos) } : initial;
+  });
+
+  useEffect(() => {
+    localStorage.setItem('todos', JSON.stringify(state.todos));
+  }, [state.todos]);
+
+  return (
+    <DispatchContext.Provider value={dispatch}>
+      <StateContext.Provider value={state}>{children}</StateContext.Provider>
+    </DispatchContext.Provider>
+  );
+};

src/UserWarning.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export const UserWarning: React.FC = () => (
+  <section className="section">
+    <p className="box is-size-3">
+      Please get your <b> userId </b>{' '}
+      <a href="https://mate-academy.github.io/react_student-registration">
+        here
+      </a>{' '}
+      and save it in the app <pre>const USER_ID = ...</pre>
+      All requests to the API must be sent with this
+      <b> userId.</b>
+    </p>
+  </section>
+);

src/components/Notification/Notification.tsx

@@ -0,0 +1,32 @@
+import React, { useContext, useMemo } from 'react';
+import classNames from 'classNames';
+import { DispatchContext, StateContext } from '../../Store';
+
+export const Notification: React.FC = () => {
+  const { errorMessage } = useContext(StateContext);
+  const hasError = useMemo(() => !Boolean(errorMessage), [errorMessage]);
+  const dispatch = useContext(DispatchContext);
+  const onCloseNotification = () => {
+    dispatch({ type: 'closeNotification' });
+  };
+
+  return (
+    <div
+      data-cy="ErrorNotification"
+      className={classNames(
+        'notification is-danger is-light has-text-weight-normal',
+        {
+          hidden: hasError,
+        },
+      )}
+    >
+      <button
+        data-cy="HideErrorButton"
+        type="button"
+        className="delete"
+        onClick={onCloseNotification}
+      />
+      {errorMessage}
+    </div>
+  );
+};