Develop

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,49 @@
 import 'bulma/css/bulma.css';
 import '@fortawesome/fontawesome-free/css/all.css';
 import { Loader, TodoFilter, TodoList, TodoModal } from './components';
+import { AppDispatch, RootState } from './app/store';
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { getTodos } from './api';
+import { todosActions } from './features/todos';
 
-export const App = () => (
- <>
- <div className="section">
- <div className="container">
- <div className="box">
- <h1 className="title">Todos:</h1>
+export const App = () => {
+ const dispatch = useDispatch<AppDispatch>();
+ const currentTodo = useSelector((state: RootState) => state.currentTodo);
 
- <div className="block">
- <TodoFilter />
- </div>
+ const [isTodosLoading, setIsTodosLoading] = useState(false);
+
+ useEffect(() => {
+ setIsTodosLoading(true);
+ getTodos()
+ .then(todosFromServer => {
+ dispatch(todosActions.setTodos(todosFromServer));
+ })
+ .catch()
+ .finally(() => {
+ setIsTodosLoading(false);
+ });
+ }, [dispatch]);
+
+ 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">
+  {isTodosLoading ? <Loader /> : <TodoList />}
+ </div>
  </div>
  </div>
  </div>
- </div>
 
- <TodoModal />
- </>
-);
+ {currentTodo && <TodoModal />}
+ </>
+ );
+};

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,32 @@
 import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { AppDispatch, RootState } from '../../app/store';
+import { filterActions } from '../../features/filter';
+import { Status } from '../../types/Status';
 
 export const TodoFilter: React.FC = () => {
+ const dispatch = useDispatch<AppDispatch>();
+ const query = useSelector((state: RootState) => state.filter.query);
+
+ const handleFilterChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+ dispatch(filterActions.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" onChange={handleFilterChange}>
+ <select>
+ {Object.values(Status).map(status => (
+ <option key={status} value={status}>
+ {status}
+ </option>
+ ))}
+ </select>
  </select>
  </span>
  </p>
@@ -22,19 +37,28 @@ export const TodoFilter: React.FC = () => {
  type="text"
  className="input"
  placeholder="Search..."
+ value={query}
+ onChange={event => {
+ dispatch(filterActions.setQuery(event.target.value));
+ }}
  />
  <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' }}>
+ {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+ <button
+ data-cy="clearSearchButton"
+ type="button"
+ className="delete"
+ onClick={() => {
+ dispatch(filterActions.clearQuery());
+ }}
+ />
+ </span>
+ )}
  </p>
  </form>
  );

src/components/TodoList/TodoItem/TodoItem.tsx

@@ -0,0 +1,55 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { Todo } from '../../../types/Todo';
+import { AppDispatch, RootState } from '../../../app/store';
+import { currTodoActions } from '../../../features/currentTodo';
+
+type Props = {
+ todo: Todo;
+};
+
+export const TodoItem: React.FC<Props> = ({ todo }) => {
+ const dispatch = useDispatch<AppDispatch>();
+ const currentTodo = useSelector((state: RootState) => state.currentTodo);
+
+ const { id, completed, title } = todo;
+
+ const handleButtonClick = () => {
+ dispatch(currTodoActions.setCurrentTodo(todo));
+ };
+
+ return (
+ <tr data-cy="todo">
+ <td className="is-vcentered">{id}</td>
+ <td className="is-vcentered">
+ {completed && (
+ <span className="icon" data-cy="iconCompleted">
+ <i className="fas fa-check" />
+ </span>
+ )}
+ </td>
+
+ <td className="is-vcentered is-expanded">
+ <p className={completed ? 'has-text-success' : 'has-text-danger'}>
+ {title}
+ </p>
+ </td>
+
+ <td className="has-text-right is-vcentered">
+ <button
+ data-cy="selectButton"
+ className="button"
+ type="button"
+ onClick={handleButtonClick}
+ >
+ <span className="icon">
+ <i
+ className={
+ currentTodo?.id === id ? 'far fa-eye-slash' : 'far fa-eye'
+ }
+ />
+ </span>
+ </button>
+ </td>
+ </tr>
+ );
+};

src/components/TodoList/TodoItem/index.ts

@@ -0,0 +1 @@
+export * from './TodoItem';