add task solution

src/components/Footer.tsx

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import classNames from 'classnames';
+import cn from 'classnames';
 import { DispatchContext, StateContext } from './Store';
 import { getActiveTodosArray, getCompletedTodosArray } from '../services';
 import { FilterTodos } from '../types/FilterTodos';
@@ -15,47 +15,24 @@ export const Footer = () => {
       </span>
 
       <nav className="filter" data-cy="Filter">
-        <a
-          href="#/"
-          className={classNames('filter__link', {
-            selected: filter === FilterTodos.All,
-          })}
-          data-cy="FilterLinkAll"
-          onClick={() =>
-            dispatch({ type: 'setFilterByStatus', payload: FilterTodos.All })
-          }
-        >
-          All
-        </a>
-
-        <a
-          href="#/active"
-          className={classNames('filter__link', {
-            selected: filter === FilterTodos.Active,
-          })}
-          data-cy="FilterLinkActive"
-          onClick={() =>
-            dispatch({ type: 'setFilterByStatus', payload: FilterTodos.Active })
-          }
-        >
-          Active
-        </a>
-
-        <a
-          href="#/completed"
-          className={classNames('filter__link', {
-            selected: filter === FilterTodos.Completed,
-          })}
-          data-cy="FilterLinkCompleted"
-          onClick={() =>
-            dispatch({
-              type: 'setFilterByStatus',
-              payload: FilterTodos.Completed,
-            })
-          }
-        >
-          Completed
-        </a>
+        {Object.values(FilterTodos).map(status => (
+          <a
+            key={status}
+            href={`#/${status}`}
+            className={cn('filter__link', {
+              selected: filter === status,
+            })}
+            data-cy={`FilterLink${status}`}
+            onClick={() =>
+              dispatch({
+                type: 'setFilterByStatus',
+                payload: status,
+              })
+            }
+          >
+            {status}
+          </a>
+        ))}
       </nav>
 
       <button

src/components/Store.tsx

@@ -46,18 +46,16 @@ function reducer(state: State, action: Action): State {
     case 'deleteTodo':
       return {
         ...state,
-        todos: [...state.todos.filter(todo => todo.id !== action.payload)],
+        todos: state.todos.filter(todo => todo.id !== action.payload),
       };
     case 'updateTodo':
       return {
         ...state,
-        todos: [
-          ...state.todos.map(todo => {
-            return todo.id === action.payload.id
-              ? { ...todo, title: action.payload.title }
-              : todo;
-          }),
-        ],
+        todos: state.todos.map(todo =>
+          todo.id === action.payload.id
+            ? { ...todo, title: action.payload.title }
+            : todo,
+        ),
       };
     case 'setNewTodoTitle':
       return {
@@ -67,11 +65,10 @@ function reducer(state: State, action: Action): State {
     case 'setAllCompleted':
       return {
         ...state,
-        todos: [
-          ...state.todos.map(todo => {
-            return { ...todo, completed: action.payload };
-          }),
-        ],
+        todos: state.todos.map(todo => ({
+          ...todo,
+          completed: action.payload,
+        })),
       };
     case 'setStatus':
       return {
@@ -81,33 +78,28 @@ function reducer(state: State, action: Action): State {
     case 'setNewStatus':
       return {
         ...state,
-        todos: [
-          ...state.todos.map(todo => {
-            return todo.id === action.payload.id
-              ? { ...todo, completed: !todo.completed }
-              : todo;
-          }),
-        ],
+        todos: state.todos.map(todo =>
+          todo.id === action.payload.id
+            ? { ...todo, completed: !todo.completed }
+            : todo,
+        ),
       };
     case 'setFilterByStatus':
       return {
         ...state,
-        todos: [
-          ...state.todos.map(todo => ({ ...todo, filter: action.payload })),
-        ],
         filter: action.payload,
       };
     case 'clearAllCompleted':
       return {
         ...state,
-        todos: [...state.todos.filter(todo => !todo.completed)],
+        todos: state.todos.filter(todo => !todo.completed),
       };
     default:
       return state;
   }
 }
 
-export const StateContext = React.createContext(initialState);
+export const StateContext = React.createContext<State>(initialState);
 export const DispatchContext = React.createContext<React.Dispatch<Action>>(
   () => {},
 );

src/styles/index.scss

@@ -1,3 +1,7 @@
+* {
+  box-sizing: border-box;
+}
+
 iframe {
   display: none;
 }

src/styles/todoapp.scss

@@ -58,6 +58,7 @@
   &__new-todo {
     width: 100%;
     padding: 16px 16px 16px 60px;
+    box-sizing: border-box;
 
     font-size: 24px;
     line-height: 1.4em;

src/types/FilterTodos.ts

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