solution

.prettierrc

@@ -7,5 +7,18 @@
   "printWidth": 80,
   "semi": true,
   "bracketSpacing": true,
-  "bracketSameLine": false
+  "bracketSameLine": false,
+  "files.autoSave": "afterDelay",
+  "files.autoSaveDelay": 500,
+  "editor.fontSize": 15,
+  "editor.tabSize": 2,
+  "editor.renderWhitespace": "boundary",
+  "editor.detectIndentation": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "always",
+    "source.fixAll.eslint": "always"
+  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnType": true,
+  "editor.formatOnSave": true
 }

README.md

@@ -1,4 +1,4 @@
-# React + Redux list of TODOs
+asd# React + Redux list of TODOs
 
 > ❗ Read the lesson theory before solving this task
 
@@ -13,9 +13,10 @@ using the Redux. It should look and work identically, so use the same markup.
 - implement `features/todos` storing an array of todos;
 - load the todos in the `App` on page load (don't use Redux Thunk for now);
 - `useAppSelector` already aware of `RootState` so you can write selectors in your
-components (no need to write them in the store file)
+  components (no need to write them in the store file)
 
 ## Instructions
+
 - Install Prettier Extention and use this [VSCode settings](https://mate-academy.github.io/fe-program/tools/vscode/settings.json) to enable format on save.
-- Replace `<your_account>` with your Github username in the [DEMO LINK](https://<your_account>.github.io/react_redux-list-of-todos/)
+- Replace `<your_account>` with your Github username in the [DEMO LINK](https://HryniukTaras.github.io/react_redux-list-of-todos/)
 - Follow the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline)

package.json

@@ -18,7 +18,7 @@
   },
   "devDependencies": {
     "@cypress/react18": "^2.0.1",
-    "@mate-academy/scripts": "^1.8.5",
+    "@mate-academy/scripts": "^1.9.12",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^20.14.10",

src/App.tsx

@@ -1,26 +1,80 @@
+import React, { useEffect, useState, useMemo } from 'react';
 import 'bulma/css/bulma.css';
 import '@fortawesome/fontawesome-free/css/all.css';
-import { Loader, TodoFilter, TodoList, TodoModal } from './components';
 
-export const App = () => (
-  <>
-    <div className="section">
-      <div className="container">
-        <div className="box">
-          <h1 className="title">Todos:</h1>
+import { TodoList } from './components/TodoList';
+import { TodoFilter } from './components/TodoFilter';
+import { TodoModal } from './components/TodoModal';
+import { Loader } from './components/Loader';
+import { getTodos } from './api';
+import { AppDispatch, RootState } from './app/store';
+import { useDispatch, useSelector } from 'react-redux';
+import { setTodoList } from './features/todos';
+import { setCurrentTodo } from './features/currentTodo';
 
-          <div className="block">
-            <TodoFilter />
-          </div>
+export const App: React.FC = () => {
+  const [isLoading, setIsLoading] = useState(true);
+
+  const { status, query } = useSelector((state: RootState) => state.filter);
+  const currentTodo = useSelector((state: RootState) => state.currentTodo);
+  const todos = useSelector((state: RootState) => state.todos);
+
+  const dispatch: AppDispatch = useDispatch();
+
+  useEffect(() => {
+    getTodos()
+      .then(data => {
+        dispatch(setTodoList(data));
+      })
+      .finally(() => setIsLoading(false));
+  }, [dispatch]);
+
+  const filteredTodoList = useMemo(() => {
+    let filteredTodos = todos;
+
+    if (status === 'active') {
+      filteredTodos = todos.filter(todo => !todo.completed);
+    } else if (status === 'completed') {
+      filteredTodos = todos.filter(todo => todo.completed);
+    }
+
+    if (query) {
+      filteredTodos = filteredTodos.filter(todo =>
+        todo.title.toLowerCase().includes(query.toLowerCase()),
+      );
+    }
+
+    return filteredTodos;
+  }, [status, query, todos]);
+
+  return (
+    <>
+      <div className="section">
+        <div className="container">
+          <div className="box">
+            <h1 className="title">Todos:</h1>
+
+            <div className="block">
+              <TodoFilter />
+            </div>
 
-          <div className="block">
-            <Loader />
-            <TodoList />
+            <div className="block">
+              {isLoading ? (
+                <Loader />
+              ) : (
+                <TodoList todoList={filteredTodoList} />
+              )}
+            </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <TodoModal />
-  </>
-);
+      {currentTodo && (
+        <TodoModal
+          todo={currentTodo}
+          closeModal={() => dispatch(setCurrentTodo(null))}
+        />
+      )}
+    </>
+  );
+};

src/app/store.ts

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

src/components/TodoFilter/TodoFilter.tsx

@@ -1,17 +1,33 @@
 import React from 'react';
+import { Status } from '../../types/Status';
+import { useDispatch, useSelector } from 'react-redux';
+import { AppDispatch, RootState } from '../../app/store';
+import { setQuery, setStatus } from '../../features/filter';
+
+export const TodoFilter: React.FC = ({}) => {
+  const { status, query } = useSelector((state: RootState) => state.filter);
+  const dispatch: AppDispatch = useDispatch();
+
+  const handleStatusChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    dispatch(setStatus(event.target.value as Status));
+  };
+
+  const handleTextChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    dispatch(setQuery(event.target.value));
+  };
 
-export const TodoFilter: React.FC = () => {
   return (
-    <form
-      className="field has-addons"
-      onSubmit={event => event.preventDefault()}
-    >
+    <form className="field has-addons">
       <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={status}
+            onChange={handleStatusChange}
+          >
+            <option value={'all'}>All</option>
+            <option value={'active'}>Active</option>
+            <option value={'completed'}>Completed</option>
           </select>
         </span>
       </p>
@@ -22,19 +38,23 @@ export const TodoFilter: React.FC = () => {
           type="text"
           className="input"
           placeholder="Search..."
+          value={query}
+          onChange={handleTextChange}
         />
         <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 && (
+          <span className="icon is-right" style={{ pointerEvents: 'all' }}>
+            <button
+              data-cy="clearSearchButton"
+              type="button"
+              className="delete"
+              onClick={() => dispatch(setQuery(''))}
+            />
+          </span>
+        )}
       </p>
     </form>
   );