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://P-Nazar.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,73 @@
 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 { getTodos, getUser } from './api';
+import { useDispatch, useSelector } from 'react-redux';
+import { setTodos } from './features/todos';
+import { CurrentTodo, Todo } from './types/Todo';
+import { saveTodo } from './features/currentTodo';
+import { RootState } from './app/store';
 
-export const App = () => (
- <>
- <div className="section">
- <div className="container">
- <div className="box">
- <h1 className="title">Todos:</h1>
+export const App = () => {
+ const dispatch = useDispatch();
+ const [isLoading, setIsLoading] = useState(false);
+ const [isModalOpen, setIsModalOpen] = useState(false);
 
- <div className="block">
- <TodoFilter />
- </div>
+ const currentTodo = useSelector<RootState, CurrentTodo | null>(
+ state => state.currentTodoSlice.currentTodo,
+ );
+
+ useEffect(() => {
+ setIsLoading(true);
+ getTodos()
+ .then(todos => {
+ dispatch(setTodos(todos));
+ })
+ .finally(() => {
+ setIsLoading(false);
+ });
+ }, []);
+
+ const openerModalWindow = async (userId: number, todo: Todo) => {
+ setIsModalOpen(true);
+
+ const user = await getUser(userId);
+
+ dispatch(
+ saveTodo({
+ ...todo,
+ user,
+ }),
+ );
 
- <div className="block">
- <Loader />
- <TodoList />
+ setTimeout(() => {
+ setIsModalOpen(false);
+ }, 300);
+ };
+
+ return (
+ <>
+ <div className="section">
+ <div className="container">
+ <div className="box">
+ <h1 className="title">Todos:</h1>
+
+ <div className="block">
+ <TodoFilter />
+ </div>
+
+ <div className="block">
+ {isLoading && <Loader />}
+
+ {!isLoading && <TodoList openerModalWindow={openerModalWindow} />}
+ </div>
  </div>
  </div>
  </div>
- </div>
-
- <TodoModal />
- </>
-);
+ {currentTodo?.user && (
+ <TodoModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
+ )}
+ </>
+ );
+};

src/app/store.ts

@@ -1,10 +1,21 @@
 import { combineSlices, configureStore } from '@reduxjs/toolkit';
+import filterReducer, { FilterStateSlice } from '../features/filter';
+import todosReducer, { TodosState } from '../features/todos';
+import currentTodoReducer, { CurrentTodoState } from '../features/currentTodo';
 
-const rootReducer = combineSlices();
+const rootReducer = combineSlices({
+ filterSlice: filterReducer,
+ todosSlice: todosReducer,
+ currentTodoSlice: currentTodoReducer,
+});
 
 export const store = configureStore({
  reducer: rootReducer,
 });
 
-export type RootState = ReturnType<typeof rootReducer>;
+export type RootState = {
+ filterSlice: FilterStateSlice;
+ todosSlice: TodosState;
+ currentTodoSlice: CurrentTodoState;
+};
 export type AppDispatch = typeof store.dispatch;

src/components/TodoFilter/TodoFilter.tsx

@@ -1,14 +1,42 @@
-import React from 'react';
+import React, { ChangeEvent } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { clearQuery, setQuery, setStatus } from '../../features/filter';
+import { RootState } from '../../app/store';
+import { Status } from '../../types/Status';
 
 export const TodoFilter: React.FC = () => {
+ const dispatch = useDispatch();
+ const status = useSelector<RootState, Status>(
+ state => state.filterSlice.status,
+ );
+ const query = useSelector<RootState, string>(
+ state => state.filterSlice.query,
+ );
+
+ const handlerSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {
+ dispatch(setStatus(e.target.value as Status));
+ };
+
+ const handlerInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+ dispatch(setQuery(e.target.value as Status));
+ };
+
+ const clearInputChange = () => {
+ dispatch(clearQuery());
+ };
+
  return (
  <form
  className="field has-addons"
  onSubmit={event => event.preventDefault()}
  >
  <p className="control">
  <span className="select">
- <select data-cy="statusSelect">
+ <select
+ data-cy="statusSelect"
+ value={status}
+ onChange={handlerSelectChange}
+ >
  <option value="all">All</option>
  <option value="active">Active</option>
  <option value="completed">Completed</option>
@@ -22,19 +50,24 @@ export const TodoFilter: React.FC = () => {
  type="text"
  className="input"
  placeholder="Search..."
+ value={query}
+ onChange={handlerInputChange}
  />
  <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 > 0 && (
+ <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={clearInputChange}
+ />
+ </span>
+ )}
  </p>
  </form>
  );