update_footer

mate-academy · Dec 12, 2024 · 809c804 · 809c804
1 parent 0da38f6
commit 809c804
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 49 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -9,13 +9,12 @@ import * as todoService from './api/todos';
 import { FilterOptions } from './types/FilterOptions';
 import { Todolist } from './components/TodoList';
 import classNames from 'classnames';
+import { Footer } from './components/Footer';
 
 export const App: React.FC = () => {
   const [loading, setLoading] = useState(false);
   const [todos, setTodos] = useState<Todo[]>([]);
-  const [currentFilter, setCurrentFilter] = useState<FilterOptions>(
-    FilterOptions.All,
-  );
+  const [currentFilter, setCurrentFilter] = useState<string>('All');
   const [errorMessage, setErrorMessage] = useState('');
   const [newTodoTitle, setNewTodoTitle] = useState('');
   const [tempTodo, setTempTodo] = useState<Todo | null>(null);
@@ -113,8 +112,6 @@ export const App: React.FC = () => {
     }
   };
 
-  const activeTodos = todos.filter(todo => !todo.completed).length;
-
   const completedAllTodos = () => {
     const allCompleted = todos.every(todo => todo.completed);
 
@@ -171,16 +168,6 @@ export const App: React.FC = () => {
     return <UserWarning />;
   }
 
-  const handleClearCompleted = () => {
-    const completedTodoId = todos
-      .filter(todo => todo.completed)
-      .map(todo => todo.id);
-
-    completedTodoId.forEach(todo => {
-      handleDelete(todo);
-    });
-  };
-
   return (
     <>
       <div className="todoapp">
@@ -228,37 +215,13 @@ export const App: React.FC = () => {
           />
 
           {todos.length !== 0 && (
-            <footer className="todoapp__footer" data-cy="Footer">
-              <span className="todo-count" data-cy="TodosCounter">
-                {`${activeTodos} items left`}
-              </span>
-
-              <nav className="filter" data-cy="Filter">
-                {Object.values(FilterOptions).map(option => (
-                  <a
-                    key={option}
-                    href={`#/${option}`}
-                    className={classNames('filter__link', {
-                      selected: currentFilter === option,
-                    })}
-                    data-cy={`FilterLink${option}`}
-                    onClick={() => setCurrentFilter(option)}
-                  >
-                    {option}
-                  </a>
-                ))}
-              </nav>
-
-              <button
-                type="button"
-                className="todoapp__clear-completed"
-                data-cy="ClearCompletedButton"
-                onClick={() => handleClearCompleted()}
-                disabled={todos.every(todo => !todo.completed) || loading}
-              >
-                Clear completed
-              </button>
-            </footer>
+            <Footer
+              todos={todos}
+              onDelete={handleDelete}
+              currentFilter={currentFilter}
+              setCurrentFilter={setCurrentFilter}
+              loading={loading}
+            />
           )}
         </div>
 

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -0,0 +1,68 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import React from 'react';
+
+import { Todo } from '../../types/Todo';
+import { FilterOptions } from '../../types/FilterOptions';
+import classNames from 'classnames';
+
+type Props = {
+  todos: Todo[];
+  onDelete: (todoId: number) => void;
+  currentFilter: string;
+  setCurrentFilter: (currentFilter: string) => void;
+  loading: boolean;
+};
+
+export const Footer: React.FC<Props> = ({
+  todos,
+  onDelete,
+  currentFilter,
+  setCurrentFilter,
+  loading,
+}) => {
+  const activeTodos = todos.filter(todo => !todo.completed).length;
+
+  const handleClearCompleted = () => {
+    const completedTodoId = todos
+      .filter(todo => todo.completed)
+      .map(todo => todo.id);
+
+    completedTodoId.forEach(todo => {
+      onDelete(todo);
+    });
+  };
+
+  return (
+    <footer className="todoapp__footer" data-cy="Footer">
+      <span className="todo-count" data-cy="TodosCounter">
+        {`${activeTodos} items left`}
+      </span>
+
+      <nav className="filter" data-cy="Filter">
+        {Object.values(FilterOptions).map(option => (
+          <a
+            key={option}
+            href={`#/${option}`}
+            className={classNames('filter__link', {
+              selected: currentFilter === option,
+            })}
+            data-cy={`FilterLink${option}`}
+            onClick={() => setCurrentFilter(option)}
+          >
+            {option}
+          </a>
+        ))}
+      </nav>
+
+      <button
+        type="button"
+        className="todoapp__clear-completed"
+        data-cy="ClearCompletedButton"
+        onClick={() => handleClearCompleted()}
+        disabled={todos.every(todo => !todo.completed) || loading}
+      >
+        Clear completed
+      </button>
+    </footer>
+  );
+};
diff --git a/src/components/Footer/index.ts b/src/components/Footer/index.ts
@@ -0,0 +1 @@
+export * from './Footer';
diff --git a/src/components/todo_filters/TodoFilter.tsx b/src/components/todo_filters/TodoFilter.tsx
@@ -13,9 +13,11 @@ export const TodoFilter: React.FC<Props> = ({ setFilter }) => {
             data-cy="statusSelect"
             onChange={element => setFilter(element.target.value)}
           >
-            <option value={FilterOptions.All}>All</option>
-            <option value={FilterOptions.Active}>Active</option>
-            <option value={FilterOptions.Completed}>Completed</option>
+            <option value={FilterOptions.All}>{FilterOptions.All}</option>
+            <option value={FilterOptions.Active}>{FilterOptions.Active}</option>
+            <option value={FilterOptions.Completed}>
+              {FilterOptions.Completed}
+            </option>
           </select>
         </span>
       </p>