solution

mate-academy · Nov 18, 2024 · 3629b90 · 3629b90
1 parent 5307fa9
commit 3629b90
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 62 deletions.
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import { FilterStatus } from '../types/FilterStatus';
 import { Todo } from '../types/Todo';
 
@@ -16,49 +17,44 @@ export const Footer: React.FC<FooterProps> = ({
   setStatusFilter,
   filteredTodos,
   clearCompletedTodos,
-}) => (
-  <footer className="todoapp__footer" data-cy="Footer">
-    <span className="todo-count" data-cy="TodosCounter">
-      {counter} items left
-    </span>
+}) => {
+  const filterOptions = [
+    { label: 'All', value: FilterStatus.All, href: '#/' },
+    { label: 'Active', value: FilterStatus.Active, href: '#/active' },
+    { label: 'Completed', value: FilterStatus.Completed, href: '#/completed' },
+  ];
 
-    <nav className="filter" data-cy="Filter">
-      <a
-        href="#/"
-        className={`filter__link ${statusFilter === FilterStatus.All ? 'selected' : ''}`}
-        data-cy="FilterLinkAll"
-        onClick={() => setStatusFilter(FilterStatus.All)} // Використовуємо FilterStatus
-      >
-        All
-      </a>
+  const completedTodosCount = filteredTodos.filter(todo => todo.completed).length;
 
-      <a
-        href="#/active"
-        className={`filter__link ${statusFilter === FilterStatus.Active ? 'selected' : ''}`}
-        data-cy="FilterLinkActive"
-        onClick={() => setStatusFilter(FilterStatus.Active)} // Використовуємо FilterStatus
-      >
-        Active
-      </a>
+  return (
+    <footer className="todoapp__footer" data-cy="Footer">
+      <span className="todo-count" data-cy="TodosCounter">
+        {counter} items left
+      </span>
 
-      <a
-        href="#/completed"
-        className={`filter__link ${statusFilter === FilterStatus.Completed ? 'selected' : ''}`}
-        data-cy="FilterLinkCompleted"
-        onClick={() => setStatusFilter(FilterStatus.Completed)}
-      >
-        Completed
-      </a>
-    </nav>
+      <nav className="filter" data-cy="Filter">
+        {filterOptions.map(({ label, value, href }) => (
+          <a
+            key={value}
+            href={href}
+            className={classNames('filter__link', { selected: statusFilter === value })}
+            data-cy={`FilterLink${label}`}
+            onClick={() => setStatusFilter(value)}
+          >
+            {label}
+          </a>
+        ))}
+      </nav>
 
-    <button
-      type="button"
-      className="todoapp__clear-completed"
-      data-cy="ClearCompletedButton"
-      disabled={filteredTodos.filter(todo => todo.completed).length === 0}
-      onClick={clearCompletedTodos}
-    >
-      Clear completed
-    </button>
-  </footer>
-);
+      <button
+        type="button"
+        className="todoapp__clear-completed"
+        data-cy="ClearCompletedButton"
+        disabled={completedTodosCount === 0}
+        onClick={clearCompletedTodos}
+      >
+        Clear completed
+      </button>
+    </footer>
+  );
+};
diff --git a/src/components/TodoItem.tsx b/src/components/TodoItem.tsx
@@ -22,8 +22,10 @@ export const TodoItem: React.FC<TodoItemProps> = ({
   updateTodo,
   setError,
 }) => {
+  const { id, title, completed } = todo;
+
   const [isEditing, setIsEditing] = useState(false);
-  const [editedTitle, setEditedTitle] = useState(todo.title);
+  const [editedTitle, setEditedTitle] = useState(title);
   const [isSaving, setIsSaving] = useState(false);
 
   const renameTodo = async () => {
@@ -38,12 +40,12 @@ export const TodoItem: React.FC<TodoItemProps> = ({
 
     if (trimmedTitle !== todo.title) {
       try {
-        await updateTodo(todo.id, { title: trimmedTitle });
-        const updatedTodo = await Methods.updateTodo(todo.id, {
+        await updateTodo(id, { title: trimmedTitle });
+        const updatedTodo = await Methods.updateTodo(id, {
           title: trimmedTitle,
         });
 
-        updateTodo(todo.id, { title: updatedTodo.title });
+        updateTodo(id, { title: updatedTodo.title });
         setIsEditing(false);
       } catch (error) {
         setError('Unable to update a todo');
@@ -59,24 +61,24 @@ export const TodoItem: React.FC<TodoItemProps> = ({
   const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
       if (editedTitle.trim() === '') {
-        deleteTodo(todo.id);
-      } else if (editedTitle !== todo.title) {
+        deleteTodo(id);
+      } else if (editedTitle !== title) {
         renameTodo();
       } else {
         setIsEditing(false);
       }
     }
 
     if (e.key === 'Escape') {
-      setEditedTitle(todo.title);
+      setEditedTitle(title);
       setIsEditing(false);
     }
   };
 
   const handleBlur = async () => {
     if (editedTitle.trim() === '') {
-      deleteTodo(todo.id);
-    } else if (editedTitle !== todo.title) {
+      deleteTodo(id);
+    } else if (editedTitle !== title) {
       await renameTodo();
     } else {
       setIsEditing(false);
@@ -86,9 +88,9 @@ export const TodoItem: React.FC<TodoItemProps> = ({
   const toggleTodoStatus = () => {
     setIsSaving(true);
 
-    Methods.updateTodo(todo.id, { completed: !todo.completed })
+    Methods.updateTodo(id, { completed: !completed })
       .then(() => {
-        toggleTodo(todo.id);
+        toggleTodo(id);
       })
       .catch(() => {
         setError('Unable to update a todo');
@@ -100,19 +102,19 @@ export const TodoItem: React.FC<TodoItemProps> = ({
 
   return (
     <div
-      className={classNames('todo', { completed: todo.completed })}
+      className={classNames('todo', { completed: completed })}
       data-cy="Todo"
-      key={todo.id}
+      key={id}
     >
-      <label htmlFor={`todo-status-${todo.id}`} className="todo__status-label">
+      <label htmlFor={`todo-status-${id}`} className="todo__status-label">
         {''}
         <input
-          id={`todo-status-${todo.id}`}
+          id={`todo-status-${id}`}
           data-cy="TodoStatus"
           type="checkbox"
           className="todo__status"
-          checked={todo.completed}
-          onChange={() => toggleTodoStatus()}
+          checked={completed}
+          onChange={toggleTodoStatus}
         />
       </label>
 
@@ -134,7 +136,7 @@ export const TodoItem: React.FC<TodoItemProps> = ({
           className="todo__title"
           onDoubleClick={() => setIsEditing(true)}
         >
-          {todo.title}
+          {title}
         </span>
       )}
 
@@ -143,15 +145,15 @@ export const TodoItem: React.FC<TodoItemProps> = ({
           type="button"
           className="todo__remove"
           data-cy="TodoDelete"
-          onClick={() => deleteTodo(todo.id)}
+          onClick={() => deleteTodo(id)}
         >
           ×
         </button>
       )}
 
       <div
         data-cy="TodoLoader"
-        className={`modal overlay ${loadingTodoId === todo.id || isSaving ? 'is-active' : ''}`}
+        className={`modal overlay ${loadingTodoId === id || isSaving ? 'is-active' : ''}`}
       >
         <div className="modal-background has-background-white-ter" />
         <div className="loader" />