add task solution

src/App.tsx

@@ -1,26 +1,43 @@
 import 'bulma/css/bulma.css';
 import '@fortawesome/fontawesome-free/css/all.css';
 import { Loader, TodoFilter, TodoList, TodoModal } from './components';
+import { useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { Todo } from './types/Todo';
+import { todosSlice } from './features/todos';
+import { getTodos } from './api';
+import { useAppSelector } from './app/hooks';
 
-export const App = () => (
-  <>
-    <div className="section">
-      <div className="container">
-        <div className="box">
-          <h1 className="title">Todos:</h1>
+export const App = () => {
+  const [loading, setLoading] = useState(false);
+  const currentTodo = useAppSelector(state => state.currentTodo);
+  const dispatch = useDispatch();
 
-          <div className="block">
-            <TodoFilter />
-          </div>
+  useEffect(() => {
+    setLoading(true);
+    getTodos()
+      .then((data: Todo[]) => dispatch(todosSlice.actions.setTodos(data)))
+      .finally(() => setLoading(false));
+  }, [dispatch]);
+
+  return (
+    <>
+      <div className="section">
+        <div className="container">
+          <div className="box">
+            <h1 className="title">Todos:</h1>
 
-          <div className="block">
-            <Loader />
-            <TodoList />
+            <div className="block">
+              <TodoFilter />
+            </div>
+            <div className="block">
+              {loading && <Loader />}
+              {!loading && <TodoList />}
+            </div>
           </div>
         </div>
       </div>
-    </div>
-
-    <TodoModal />
-  </>
-);
+      {currentTodo && <TodoModal />}
+    </>
+  );
+};

src/app/hooks.ts

@@ -0,0 +1,4 @@
+import { TypedUseSelectorHook, useSelector } from 'react-redux';
+import { RootState } from './store';
+
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

src/app/store.ts

@@ -1,6 +1,9 @@
 import { combineSlices, configureStore } from '@reduxjs/toolkit';
+import { todosSlice } from '../features/todos';
+import { currentTodoSlice } from '../features/currentTodo';
+import { filterSlice } from '../features/filter';
 
-const rootReducer = combineSlices();
+const rootReducer = combineSlices(todosSlice, currentTodoSlice, filterSlice);
 
 export const store = configureStore({
   reducer: rootReducer,

src/components/TodoFilter/TodoFilter.tsx

@@ -1,40 +1,64 @@
 import React from 'react';
+import { useAppSelector } from '../../app/hooks';
+import { useDispatch } from 'react-redux';
+import { filterSlice } from '../../features/filter';
+import { Status } from '../../types/Status';
 
 export const TodoFilter: React.FC = () => {
+  const filter = useAppSelector(state => state.filter);
+  const query = filter.query;
+  const dispatch = useDispatch();
+
+  const handleSelect = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    dispatch(filterSlice.actions.setStatus(event.target.value));
+  };
+
+  const ChangeQuery = (event: React.ChangeEvent<HTMLInputElement>) => {
+    dispatch(filterSlice.actions.setQuery(event.target.value));
+  };
+
   return (
     <form
       className="field has-addons"
       onSubmit={event => event.preventDefault()}
     >
       <p className="control">
         <span className="select">
-          <select data-cy="statusSelect">
-            <option value="all">All</option>
-            <option value="active">Active</option>
-            <option value="completed">Completed</option>
+        <select
+            data-cy="statusSelect"
+            value={filter.status}
+            onChange={handleSelect}
+          >
+            <option value={Status.All}>All</option>
+            <option value={Status.Active}>Active</option>
+            <option value={Status.Completed}>Completed</option>
           </select>
         </span>
       </p>
 
       <p className="control is-expanded has-icons-left has-icons-right">
         <input
           data-cy="searchInput"
+          value={query}
           type="text"
           className="input"
           placeholder="Search..."
+          onChange={ChangeQuery}
         />
         <span className="icon is-left">
           <i className="fas fa-magnifying-glass" />
         </span>
-
-        <span className="icon is-right" style={{ pointerEvents: 'all' }}>
-          {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
-          <button
-            data-cy="clearSearchButton"
-            type="button"
-            className="delete"
-          />
-        </span>
+        {!!query.length && (
+          <span className="icon is-right" style={{ pointerEvents: 'all' }}>
+            {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+            <button
+              data-cy="clearSearchButton"
+              type="button"
+              className="delete"
+              onClick={() => dispatch(filterSlice.actions.setQuery(''))}
+            />
+          </span>
+        )}
       </p>
     </form>
   );