third part

src/api/todos.ts

@@ -0,0 +1,22 @@
+import { Todo } from '../types/Todo';
+import { client } from '../utils/fetchClient';
+
+const user = localStorage.getItem('user');
+
+export const USER_ID = user ? JSON.parse(user).id : 4291;
+
+export const getTodos = () => client.get<Todo[]>(`/todos?userId=${USER_ID}`);
+
+export const createTodo = (title: string) =>
+  client.post<Todo>('/todos', {
+    title,
+    completed: false,
+    userId: USER_ID,
+  });
+
+export const updateTodo = (
+  id: number,
+  data: Partial<Pick<Todo, 'title' | 'completed'>>,
+) => client.patch<Todo>(`/todos/${id}`, data);
+
+export const deleteTodo = (id: number) => client.delete(`/todos/${id}`);

src/components/ErrorNotification.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect } from 'react';
+import classNames from 'classnames';
+
+interface ErrorNotificationProps {
+  message: string;
+  isVisible: boolean;
+  onHide: () => void;
+}
+
+export const ErrorNotification: React.FC<ErrorNotificationProps> = ({
+  message,
+  isVisible,
+  onHide,
+}) => {
+  useEffect(() => {
+    if (!isVisible) {
+      return undefined;
+    }
+
+    const timer = setTimeout(() => {
+      onHide();
+    }, 3000);
+
+    return () => clearTimeout(timer);
+  }, [isVisible, message, onHide]);
+
+  return (
+    <div
+      data-cy="ErrorNotification"
+      className={classNames(
+        'notification is-danger is-light has-text-weight-normal',
+        {
+          hidden: !isVisible,
+        },
+      )}
+    >
+      <button
+        data-cy="HideErrorButton"
+        type="button"
+        className="delete"
+        onClick={onHide}
+      />
+      {message}
+    </div>
+  );
+};

src/components/Filter.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export enum FilterType {
+  All = 'all',
+  Active = 'active',
+  Completed = 'completed',
+}
+
+interface FilterProps {
+  selectedFilter: FilterType;
+  onFilterChange: (filter: FilterType) => void;
+}
+
+export const Filter: React.FC<FilterProps> = ({
+  selectedFilter,
+  onFilterChange,
+}) => {
+  const handleFilterClick = (
+    e: React.MouseEvent<HTMLAnchorElement>,
+    filter: FilterType,
+  ) => {
+    e.preventDefault();
+    onFilterChange(filter);
+  };
+
+  return (
+    <nav className="filter" data-cy="Filter">
+      <a
+        href="#/"
+        className={classNames('filter__link', {
+          selected: selectedFilter === FilterType.All,
+        })}
+        data-cy="FilterLinkAll"
+        onClick={e => handleFilterClick(e, FilterType.All)}
+      >
+        All
+      </a>
+
+      <a
+        href="#/active"
+        className={classNames('filter__link', {
+          selected: selectedFilter === FilterType.Active,
+        })}
+        data-cy="FilterLinkActive"
+        onClick={e => handleFilterClick(e, FilterType.Active)}
+      >
+        Active
+      </a>
+
+      <a
+        href="#/completed"
+        className={classNames('filter__link', {
+          selected: selectedFilter === FilterType.Completed,
+        })}
+        data-cy="FilterLinkCompleted"
+        onClick={e => handleFilterClick(e, FilterType.Completed)}
+      >
+        Completed
+      </a>
+    </nav>
+  );
+};

src/components/Todo.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Todo as TodoType } from '../types/Todo';
+
+interface TodoProps {
+  todo: TodoType;
+  onDelete?: () => void;
+  onToggle: () => void;
+  onStartEdit?: () => void;
+  onEditChange?: (value: string) => void;
+  onEditSubmit?: () => void;
+  onEditCancel?: () => void;
+  onEditBlur?: () => void;
+  isEditing?: boolean;
+  editValue?: string;
+  isProcessed?: boolean;
+}
+
+export const Todo: React.FC<TodoProps> = ({
+  todo,
+  onDelete,
+  onToggle,
+  onStartEdit,
+  onEditChange,
+  onEditSubmit,
+  onEditCancel,
+  onEditBlur,
+  isEditing = false,
+  editValue = '',
+  isProcessed = false,
+}) => {
+  const inputId = `todo-${todo.id}`;
+  const isTempTodo = todo.id === 0;
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      onEditCancel?.();
+      return;
+    }
+
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      onEditSubmit?.();
+    }
+  };
+
+  return (
+    <div
+      data-cy="Todo"
+      className={classNames('todo', {
+        completed: todo.completed,
+      })}
+    >
+      <input
+        id={inputId}
+        data-cy="TodoStatus"
+        type="checkbox"
+        className="todo__status"
+        checked={todo.completed}
+        aria-labelledby={`todo-title-${todo.id}`}
+        onChange={onToggle}
+        disabled={isTempTodo || isProcessed}
+      />
+
+      {isEditing ? (
+        <input
+          data-cy="TodoTitleField"
+          className="todo__title-field"
+          value={editValue}
+          onChange={event => onEditChange?.(event.target.value)}
+          onKeyDown={handleKeyDown}
+          onBlur={onEditBlur}
+          autoFocus
+        />
+      ) : (
+        <span
+          id={`todo-title-${todo.id}`}
+          data-cy="TodoTitle"
+          className="todo__title"
+          onDoubleClick={onStartEdit}
+        >
+          {todo.title}
+        </span>
+      )}
+
+      {!isEditing && onDelete && (
+        <button
+          type="button"
+          className="todo__remove"
+          data-cy="TodoDelete"
+          onClick={onDelete}
+          disabled={isProcessed}
+        >
+          ×
+        </button>
+      )}
+
+      <div
+        data-cy="TodoLoader"
+        className={classNames('modal overlay', {
+          'is-active': isProcessed,
+        })}
+      >
+        <div className="modal-background has-background-white-ter" />
+        <div className="loader" />
+      </div>
+    </div>
+  );
+};

src/components/TodoList.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Todo as TodoType } from '../types/Todo';
+import { Todo } from './Todo';
+import { FilterType } from './Filter';
+
+interface TodoListProps {
+  todos: TodoType[];
+  filter: FilterType;
+  tempTodo?: TodoType | null;
+  processingIds: number[];
+  editingTodoId: number | null;
+  editingTitle: string;
+  onDelete: (id: number) => void;
+  onToggle: (id: number) => void;
+  onEditStart: (todo: TodoType) => void;
+  onEditChange: (value: string) => void;
+  onEditSave: (id: number) => void;
+  onEditCancel: () => void;
+  onEditBlur: (id: number) => void;
+}
+
+export const TodoList: React.FC<TodoListProps> = ({
+  todos,
+  filter,
+  tempTodo,
+  processingIds,
+  editingTodoId,
+  editingTitle,
+  onDelete,
+  onToggle,
+  onEditStart,
+  onEditChange,
+  onEditSave,
+  onEditCancel,
+  onEditBlur,
+}) => {
+  const getFilteredTodos = () => {
+    switch (filter) {
+      case FilterType.Active:
+        return todos.filter(todo => !todo.completed);
+      case FilterType.Completed:
+        return todos.filter(todo => todo.completed);
+      default:
+        return todos;
+    }
+  };
+
+  const filteredTodos = getFilteredTodos();
+
+  return (
+    <section className="todoapp__main" data-cy="TodoList">
+      {filteredTodos.map(todo => (
+        <Todo
+          key={todo.id}
+          todo={todo}
+          onToggle={() => onToggle(todo.id)}
+          onDelete={() => onDelete(todo.id)}
+          onStartEdit={() => onEditStart(todo)}
+          onEditChange={onEditChange}
+          onEditSubmit={() => onEditSave(todo.id)}
+          onEditCancel={onEditCancel}
+          onEditBlur={() => onEditBlur(todo.id)}
+          isEditing={editingTodoId === todo.id}
+          editValue={editingTodoId === todo.id ? editingTitle : todo.title}
+          isProcessed={processingIds.includes(todo.id)}
+        />
+      ))}
+      {tempTodo && (
+        <Todo
+          key="temp"
+          todo={tempTodo}
+          onToggle={() => {}}
+          isProcessed
+        />
+      )}
+    </section>
+  );
+};

src/types/Todo.ts

@@ -0,0 +1,6 @@
+export interface Todo {
+  id: number;
+  userId: number;
+  title: string;
+  completed: boolean;
+}

src/utils/fetchClient.ts

@@ -0,0 +1,46 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const BASE_URL = 'https://mate.academy/students-api';
+
+// returns a promise resolved after a given delay
+function wait(delay: number) {
+  return new Promise(resolve => {
+    setTimeout(resolve, delay);
+  });
+}
+
+// To have autocompletion and avoid mistypes
+type RequestMethod = 'GET' | 'POST' | 'PATCH' | 'DELETE';
+
+function request<T>(
+  url: string,
+  method: RequestMethod = 'GET',
+  data: any = null, // we can send any data to the server
+): Promise<T> {
+  const options: RequestInit = { method };
+
+  if (data) {
+    // We add body and Content-Type only for the requests with data
+    options.body = JSON.stringify(data);
+    options.headers = {
+      'Content-Type': 'application/json; charset=UTF-8',
+    };
+  }
+
+  // DON'T change the delay it is required for tests
+  return wait(100)
+    .then(() => fetch(BASE_URL + url, options))
+    .then(response => {
+      if (!response.ok) {
+        throw new Error();
+      }
+
+      return response.json();
+    });
+}
+
+export const client = {
+  get: <T>(url: string) => request<T>(url),
+  post: <T>(url: string, data: any) => request<T>(url, 'POST', data),
+  patch: <T>(url: string, data: any) => request<T>(url, 'PATCH', data),
+  delete: (url: string) => request(url, 'DELETE'),
+};