add task solution

README.md

@@ -17,5 +17,5 @@ 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://mykhailonl.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,61 @@
+/* eslint-disable no-console */
 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 { useEffect, useState } from 'react';
+import { getTodos } from './api';
+import { setTodos } from './features/todos';
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from './app/store';
 
- <div className="block">
- <TodoFilter />
- </div>
+export const App = () => {
+ const dispatch = useDispatch();
+ const currentTodo = useSelector((state: RootState) => state.currentTodo.todo);
+ const todos = useSelector((state: RootState) => state.todos.todos);
+
+ const [isLoading, setIsLoading] = useState(false);
+
+ useEffect(() => {
+ const fetchTodos = async () => {
+ setIsLoading(true);
+ try {
+ const response = await getTodos();
+
+ dispatch(setTodos(response));
+ } catch (error) {
+ console.error('Error fetching todos:', error);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ fetchTodos();
+ }, [dispatch]);
+
+ const noTodos = !todos.length;
+ const modalIsVisible = !!currentTodo;
+
+ 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 /> : !noTodos ? <TodoList /> : null}
+ </div>
  </div>
  </div>
  </div>
- </div>
 
- <TodoModal />
- </>
-);
+ {modalIsVisible && <TodoModal />}
+ </>
+ );
+};

src/app/store.ts

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

src/components/TodoFilter/TodoFilter.tsx

@@ -1,14 +1,26 @@
 import React from 'react';
 
+import { FilterStatus, setQuery, setStatus } from '../../features/filter';
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '../../app/store';
+
 export const TodoFilter: React.FC = () => {
+ const dispatch = useDispatch();
+ const query = useSelector((state: RootState) => state.filter.query);
+
+ const handleStatusChange = (value: React.ChangeEvent<HTMLSelectElement>) => {
+ dispatch(setStatus(value.target.value as FilterStatus));
+ };
+
+ const handleQueryChange = (value: React.ChangeEvent<HTMLInputElement>) => {
+ dispatch(setQuery(value.target.value));
+ };
+
  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">
+ <select data-cy="statusSelect" onChange={handleStatusChange}>
  <option value="all">All</option>
  <option value="active">Active</option>
  <option value="completed">Completed</option>
@@ -22,19 +34,24 @@ export const TodoFilter: React.FC = () => {
  type="text"
  className="input"
  placeholder="Search..."
+ value={query}
+ onChange={handleQueryChange}
  />
  <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(setQuery(''))}
+ />
+ </span>
+ )}
  </p>
  </form>
  );

src/components/TodoList/TodoList.tsx

@@ -1,12 +1,55 @@
 /* eslint-disable */
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '../../app/store';
+import classNames from 'classnames';
+import { setCurrentTodo } from '../../features/currentTodo';
+import { Todo } from '../../types/Todo';
+import { FilterStatus } from '../../features/filter';
 
 export const TodoList: React.FC = () => {
+ const todos = useSelector((state: RootState) => state.todos.todos);
+ const currentTodo = useSelector((state: RootState) => state.currentTodo.todo);
+ const { query, status } = useSelector((state: RootState) => state.filter);
+ const dispatch = useDispatch();
+
+ const filterTodos = (query: string, status: FilterStatus, todos: Todo[]) => {
+ return todos.filter(todo => {
+ const matchesQuery = todo.title
+ .toLowerCase()
+ .includes(query.toLowerCase());
+ const matchesStatus =
+ status === 'all' ||
+ (status === 'active' && !todo.completed) ||
+ (status === 'completed' && todo.completed);
+
+ return matchesQuery && matchesStatus;
+ });
+ };
+
+ const [visibleTodos, setVisibleTodos] = useState(todos);
+
+ useEffect(() => {
+ setVisibleTodos(filterTodos(query, status, todos));
+ }, [query, status, todos]);
+
+ if (!todos) {
+ return;
+ }
+
+ const handleSetTodo = (todo: Todo) => {
+ dispatch(setCurrentTodo(todo));
+ };
+
+ const noVisibleTodos = !visibleTodos.length;
+
  return (
  <>
- <p className="notification is-warning">
- There are no todos matching current filter criteria
- </p>
+ {noVisibleTodos && (
+ <p className="notification is-warning">
+ There are no todos matching current filter criteria
+ </p>
+ )}
 
  <table className="table is-narrow is-fullwidth">
  <thead>
@@ -25,6 +68,59 @@ export const TodoList: React.FC = () => {
  </thead>
 
  <tbody>
+ {visibleTodos.map(todo => (
+ <tr
+ data-cy="todo"
+ className={classNames('', {
+ 'has-background-info-light': todo.id === currentTodo?.id,
+ })}
+ >
+ <td className="is-vcentered">{todo.id}</td>
+ <td className="is-vcentered">
+ {todo.completed && (
+ <span className="icon" data-cy="iconCompleted">
+ <i className="fas fa-check" />
+ </span>
+ )}
+ </td>
+
+ <td className="is-vcentered is-expanded">
+ <p
+ className={classNames('', {
+ 'has-text-danger': !todo.completed,
+ 'has-text-success': todo.completed,
+ })}
+ >
+ {todo.title}
+ </p>
+ </td>
+
+ <td className="has-text-right is-vcentered">
+ <button
+ data-cy="selectButton"
+ className="button"
+ type="button"
+ onClick={() => handleSetTodo(todo)}
+ >
+ <span className="icon">
+ <i
+ className={classNames('far', {
+ 'fa-eye': todo.id !== currentTodo?.id,
+ 'fa-eye-slash': todo.id === currentTodo?.id,
+ })}
+ />
+ </span>
+ </button>
+ </td>
+ </tr>
+ ))}
+ </tbody>
+ </table>
+ </>
+ );
+};
+
+/*
  <tr data-cy="todo">
  <td className="is-vcentered">1</td>
  <td className="is-vcentered"> </td>
@@ -217,8 +313,4 @@ export const TodoList: React.FC = () => {
  </button>
  </td>
  </tr>
- </tbody>
- </table>
- </>
- );
-};
+*/