refacor:fix all the comments

src/App.tsx

@@ -10,15 +10,14 @@ import { Loader } from './components/Loader';
 import { ITodoFilter, Todo } from './types/Todo';
 import { getTodos } from './api';
 import { getFiltredTodo } from './utils/filterTodo';
+import { DEFAULT_FILTER_STATE } from './constants/TodoFilter';
 
 export const App: React.FC = () => {
   const [isLoading, setLoading] = useState(true);
   const [todos, setTodos] = useState<Todo[]>([]);
   const [selectedTodo, setselectedTodo] = useState<null | Todo>(null);
-  const [todosFilter, setTodosFilter] = useState<ITodoFilter>({
-    status: '',
-    filter: '',
-  });
+  const [todosFilter, setTodosFilter] =
+    useState<ITodoFilter>(DEFAULT_FILTER_STATE);
 
   const filtredTodos = useMemo(
     () => getFiltredTodo(todos, todosFilter),
@@ -35,7 +34,7 @@ export const App: React.FC = () => {
         // eslint-disable-next-line no-console
         console.log(e.message);
       });
-  }, [getTodos]);
+  }, []);
 
   const closeModal = () => setselectedTodo(null);
 
@@ -47,7 +46,10 @@ export const App: React.FC = () => {
             <h1 className="title">Todos:</h1>
 
             <div className="block">
-              <TodoFilter setTodosFilter={setTodosFilter} />
+              <TodoFilter
+                setTodosFilter={setTodosFilter}
+                todosFilter={todosFilter}
+              />
             </div>
 
             <div className="block">

src/components/TodoFilter/TodoFilter.tsx

@@ -1,28 +1,35 @@
-import { ChangeEvent, FC, useEffect, useState } from 'react';
+import { ChangeEvent, Dispatch, FC, SetStateAction, useState } from 'react';
 import { ITodoFilter } from '../../types/Todo';
+import {
+  DEFAULT_FILTER_STATE,
+  TODO_FILTER_OPTIONS,
+} from '../../constants/TodoFilter';
+import { Filter_Statuses } from '../../utils/enums/FiltersStatus';
 
 interface IProps {
-  setTodosFilter: (filter: ITodoFilter) => void;
+  todosFilter: ITodoFilter;
+  setTodosFilter: Dispatch<SetStateAction<ITodoFilter>>;
 }
 
-export const TodoFilter: FC<IProps> = ({ setTodosFilter }) => {
-  const [status, setStatus] = useState('');
-  const [filter, setFilter] = useState('');
-
-  useEffect(() => {
-    setTodosFilter({ status, filter });
-  }, [status, filter]);
+export const TodoFilter: FC<IProps> = ({ setTodosFilter, todosFilter }) => {
+  const { filter, status } = todosFilter;
 
   const handleChangeFilter = (event: ChangeEvent<HTMLInputElement>) => {
-    setFilter(event.target.value.toLowerCase());
+    setTodosFilter(prevState => ({
+      ...prevState,
+      filter: event.target.value.toLowerCase().trim(),
+    }));
   };
 
   const handleChangeStatus = (event: ChangeEvent<HTMLSelectElement>) => {
-    setStatus(event.target.value);
+    setTodosFilter(prevState => ({
+      ...prevState,
+      status: event.target.value as Filter_Statuses,
+    }));
   };
 
   const handleClearFilter = () => {
-    setFilter('');
+    setTodosFilter(DEFAULT_FILTER_STATE);
   };
 
   return (
@@ -34,9 +41,11 @@ export const TodoFilter: FC<IProps> = ({ setTodosFilter }) => {
             value={status}
             onChange={handleChangeStatus}
           >
-            <option value="all">All</option>
-            <option value="active">Active</option>
-            <option value="completed">Completed</option>
+            {TODO_FILTER_OPTIONS.map(({ value, title, id }) => (
+              <option value={value} key={id}>
+                {title}
+              </option>
+            ))}
           </select>
         </span>
       </p>

src/components/TodoList/TodoList.tsx

@@ -30,6 +30,7 @@ export const TodoList: React.FC<IProps> = ({
     <tbody>
       {todos.map(todo => {
         const { id, completed, title } = todo;
+
         return (
           <tr data-cy="todo" className="" key={id}>
             <td className="is-vcentered">{id}</td>

src/constants/TodoFilter.ts

@@ -1,5 +1,12 @@
-export const TODO_FILTER_STATUS = {
-  all: undefined,
-  active: false,
-  completed: true,
+import { Filter_Statuses } from '../utils/enums/FiltersStatus';
+
+export const TODO_FILTER_OPTIONS = [
+  { value: 'all', title: 'All', id: 1 },
+  { value: 'active', title: 'Active', id: 2 },
+  { value: 'completed', title: 'Completed', id: 3 },
+];
+
+export const DEFAULT_FILTER_STATE = {
+  status: Filter_Statuses.All,
+  filter: '',
 };

src/types/Todo.ts

@@ -1,3 +1,5 @@
+import { Filter_Statuses } from '../utils/enums/FiltersStatus';
+
 export interface Todo {
   id: number;
   title: string;
@@ -6,6 +8,6 @@ export interface Todo {
 }
 
 export interface ITodoFilter {
-  status: string;
+  status: Filter_Statuses;
   filter: string;
 }

src/utils/enums/FiltersStatus.ts

@@ -0,0 +1,5 @@
+export enum Filter_Statuses {
+  All = 'all',
+  Active = 'active',
+  Completed = 'completed',
+}

src/utils/filterTodo.ts

@@ -1,23 +1,24 @@
-import { TODO_FILTER_STATUS } from '../constants/TodoFilter';
 import { ITodoFilter, Todo } from '../types/Todo';
-
-export const getTodoFilterStatus = (status = '') => {
-  if (status in TODO_FILTER_STATUS) {
-    return TODO_FILTER_STATUS[status as keyof typeof TODO_FILTER_STATUS];
-  }
-  return undefined;
-};
+import { Filter_Statuses } from './enums/FiltersStatus';
 
 export const getFiltredTodo = (
   todos: Todo[],
   { status, filter }: ITodoFilter,
 ) => {
-  const todoStatus = getTodoFilterStatus(status);
-
-  return todos.filter(todo =>
-    todoStatus === undefined
-      ? todo.title.toLowerCase().includes(filter)
-      : todo.title.toLowerCase().includes(filter) &&
-        todo.completed === todoStatus,
+  let filteredTodos = todos.filter(({ title }) =>
+    title.toLowerCase().trim().includes(filter),
   );
+
+  filteredTodos = filteredTodos.filter(({ completed }) => {
+    switch (status) {
+      case Filter_Statuses.Active:
+        return !completed;
+      case Filter_Statuses.Completed:
+        return completed;
+      default:
+        return true;
+    }
+  });
+
+  return filteredTodos;
 };