todo app final part

README.md

@@ -41,4 +41,4 @@ Implement the ability to edit a todo title on double click:
 
 - 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).
-- Replace `<your_account>` with your Github username in the [DEMO LINK](https://<your_account>.github.io/react_todo-app-with-api/) and add it to the PR description.
+- Replace `<your_account>` with your Github username in the [DEMO LINK](https://AnVBondar.github.io/react_todo-app-with-api/) and add it to the PR description.

package.json

@@ -11,7 +11,8 @@
     "classnames": "^2.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1"
+    "react-scripts": "5.0.1",
+    "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
     "@cypress/react": "^5.12.4",
@@ -24,6 +25,7 @@
     "@types/node": "^17.0.45",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
+    "@types/react-transition-group": "^4.4.6",
     "cypress": "^9.5.3",
     "eslint": "^7.32.0",
     "eslint-plugin-cypress": "^2.11.2",

src/App.tsx

@@ -1,24 +1,30 @@
-/* eslint-disable max-len */
 /* eslint-disable jsx-a11y/control-has-associated-label */
-import React from 'react';
+import React, { useContext } from 'react';
 import { UserWarning } from './UserWarning';
-
-const USER_ID = 0;
+import { Footer } from './components/Footer';
+import { Header } from './components/Header';
+import { Main } from './components/Main';
+import { Errors } from './components/Errors';
+import { TodoContext } from './TodoContext';
 
 export const App: React.FC = () => {
+  const { USER_ID } = useContext(TodoContext);
+
   if (!USER_ID) {
     return <UserWarning />;
   }
 
   return (
-    <section className="section container">
-      <p className="title is-4">
-        Copy all you need from the prev task:
-        <br />
-        <a href="https://github.com/mate-academy/react_todo-app-add-and-delete#react-todo-app-add-and-delete">React Todo App - Add and Delete</a>
-      </p>
+    <div className="todoapp">
+      <h1 className="todoapp__title">todos</h1>
+
+      <div className="todoapp__content">
+        <Header />
+        <Main />
+        <Footer />
+      </div>
 
-      <p className="subtitle">Styles are already copied</p>
-    </section>
+      <Errors />
+    </div>
   );
 };

src/TodoContext.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from 'react';
+import { TodoType } from './types/TodoType';
+import { Filter } from './types/Filter';
+import { ErrorsType } from './types/ErrorsType';
+import { getTodos } from './api/todos';
+
+const USER_ID = 10236;
+
+type TodoContextType = {
+  USER_ID: number;
+  todos: TodoType[];
+  filterTodo: Filter;
+  errorMessage: string;
+  tempTodo: TodoType | null;
+  selectedTodos: TodoType[],
+  setTempTodo: (tempTodo: TodoType | null) => void;
+  getFilteredTodo: (filter: Filter) => void;
+  setErrorMessage: (error: string) => void;
+  addTodo: (newTodo: TodoType) => void;
+  setTodos: React.Dispatch<React.SetStateAction<TodoType[]>>;
+  setHasDelete: React.Dispatch<React.SetStateAction<boolean>>;
+  setSelectedTodos: React.Dispatch<React.SetStateAction<TodoType[]>>;
+};
+
+export const TodoContext = React.createContext<TodoContextType>({
+  USER_ID,
+  todos: [],
+  filterTodo: Filter.All,
+  errorMessage: '',
+  tempTodo: null,
+  selectedTodos: [],
+  setTempTodo: () => {},
+  getFilteredTodo: () => {},
+  setErrorMessage: () => {},
+  setTodos: () => {},
+  addTodo: () => {},
+  setHasDelete: () => {},
+  setSelectedTodos: () => {},
+});
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const GlobalStateProvider: React.FC<Props> = ({ children }) => {
+  const [todos, setTodos] = useState<TodoType[]>([]);
+  const [filterTodo, setFilterTodo] = useState<Filter>(Filter.All);
+  const [errorMessage, setErrorMessage] = useState<string>('');
+  const [tempTodo, setTempTodo] = useState<TodoType | null>(null);
+  const [hasDelete, setHasDelete] = useState<boolean>(false);
+  const [selectedTodos, setSelectedTodos] = useState<TodoType[]>([]);
+
+  useEffect(() => {
+    getTodos(USER_ID)
+      .then(setTodos)
+      .catch(() => {
+        setErrorMessage(ErrorsType.Load);
+        setTimeout(() => {
+          setErrorMessage('');
+        }, 3000);
+      });
+  }, [hasDelete]);
+
+  function addTodo(newTodo: TodoType) {
+    setTodos(currentTodos => [...currentTodos, newTodo]);
+  }
+
+  const value = {
+    USER_ID,
+    todos,
+    filterTodo,
+    errorMessage,
+    tempTodo,
+    setTempTodo,
+    setErrorMessage,
+    getFilteredTodo: (filter: Filter) => {
+      setFilterTodo(filter);
+    },
+    setTodos,
+    addTodo,
+    setHasDelete,
+    selectedTodos,
+    setSelectedTodos,
+  };
+
+  return (
+    <TodoContext.Provider value={value}>
+      {children}
+    </TodoContext.Provider>
+  );
+};

src/api/todos.ts

@@ -0,0 +1,29 @@
+import { TodoType } from '../types/TodoType';
+import { client } from '../utils/fetchClient';
+
+export const getTodos = (userId: number) => {
+  return client.get<TodoType[]>(`/todos?userId=${userId}`);
+};
+
+export const postTodos = (
+  {
+    userId,
+    title,
+    completed,
+  }: Omit<TodoType, 'id'>,
+) => {
+  return client.post<TodoType>('/todos', { userId, title, completed });
+};
+
+export const deleteTodos = (todoId: number) => {
+  return client.delete(`/todos/${todoId}`);
+};
+
+export const patchTodos = ({
+  id,
+  completed,
+  userId,
+  title,
+}: TodoType) => {
+  return client.patch(`/todos/${id}`, { userId, title, completed });
+};

src/components/Errors/Errors.tsx

@@ -0,0 +1,49 @@
+import cn from 'classnames';
+import { useContext } from 'react';
+import { TodoContext } from '../../TodoContext';
+import { ErrorsType } from '../../types/ErrorsType';
+
+export const Errors = () => {
+  const { errorMessage, setErrorMessage } = useContext(TodoContext);
+
+  let message = '';
+
+  switch (errorMessage) {
+    case ErrorsType.Load:
+      message = 'Unable to load a todo';
+      break;
+    case ErrorsType.Add:
+      message = 'Unable to add a todo';
+      break;
+    case ErrorsType.Delete:
+      message = 'Unable to delete a todo';
+      break;
+    case ErrorsType.Update:
+      message = 'Unable to update a todo';
+      break;
+    case ErrorsType.Title:
+      message = 'Title can\'t be empty';
+      break;
+    default:
+  }
+
+  return (
+    <div className={cn(
+      'notification',
+      'is-danger',
+      'is-light',
+      'has-text-weight-normal', {
+        hidden: !errorMessage,
+      },
+    )}
+    >
+      {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+      <button
+        type="button"
+        className="delete"
+        onClick={() => setErrorMessage('')}
+      />
+      {message}
+    </div>
+  );
+};

src/components/Errors/index.ts

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