fix errors

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)

src/App.tsx

@@ -3,15 +3,20 @@ 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 } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { setTodos } from './features/todos';
-import { Todo } from './types/Todo';
+import { CurrentTodo, Todo } from './types/Todo';
 import { saveTodo } from './features/currentTodo';
+import { RootState } from './app/store';
 
 export const App = () => {
  const dispatch = useDispatch();
  const [isLoading, setIsLoading] = useState(false);
- const [isOpenerMOdal, setIsOpenerMOdal] = useState(false);
+ const [isModalOpen, setIsModalOpen] = useState(false);
+
+ const currentTodo = useSelector<RootState, CurrentTodo | null>(
+ state => state.currentTodoSlice.currentTodo,
+ );
 
  useEffect(() => {
  setIsLoading(true);
@@ -25,7 +30,7 @@ export const App = () => {
  }, []);
 
  const openerModalWindow = async (userId: number, todo: Todo) => {
- setIsOpenerMOdal(true);
+ setIsModalOpen(true);
 
  const user = await getUser(userId);
 
@@ -37,7 +42,7 @@ export const App = () => {
  );
 
  setTimeout(() => {
- setIsOpenerMOdal(false);
+ setIsModalOpen(false);
  }, 300);
  };
 
@@ -60,7 +65,9 @@ export const App = () => {
  </div>
  </div>
  </div>
- <TodoModal isOpenerMOdal={isOpenerMOdal} />
+ {currentTodo?.user && (
+ <TodoModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
+ )}
  </>
  );
 };

src/components/TodoList/TodoList.tsx

@@ -44,13 +44,15 @@ export const TodoList: React.FC<Props> = ({ openerModalWindow }) => {
 
  return (
  <>
+ <table className="table is-narrow is-fullwidth">
+
  {!filteredTodos.length && (
  <p className="notification is-warning">
  There are no todos matching current filter criteria
  </p>
  )}
 
- <table className="table is-narrow is-fullwidth">
+ {filteredTodos.length > 0 && (
  <thead>
  <tr>
  <th>#</th>
@@ -65,19 +67,22 @@ export const TodoList: React.FC<Props> = ({ openerModalWindow }) => {
  <th> </th>
  </tr>
  </thead>
-
+ )}
  <tbody>
  {filteredTodos.map(todo => (
  <tr key={todo.id} data-cy="todo">
  <td className="is-vcentered">{todo.id}</td>
  <td className="is-vcentered">
- <span className="icon" data-cy="iconCompleted">
+ {todo.completed && (
+ <span className="icon" data-cy="iconCompleted">
  <i
  className={classNames('fas', {
  'fa-check': todo.completed,
  })}
  />
  </span>
+ )}
+
  </td>
 
  <td className="is-vcentered is-expanded">

src/components/TodoModal/TodoModal.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Dispatch, SetStateAction } from 'react';
 import { Loader } from '../Loader';
 import { useDispatch, useSelector } from 'react-redux';
 import { CurrentTodo } from '../../types/Todo';
@@ -7,16 +7,19 @@ import { clearTodo } from '../../features/currentTodo';
 import classNames from 'classnames';
 
 type Props = {
- isOpenerMOdal: boolean;
+ isModalOpen: boolean;
+ setIsModalOpen: Dispatch<SetStateAction<boolean>>;
 };
 
-export const TodoModal: React.FC<Props> = ({ isOpenerMOdal }) => {
+export const TodoModal: React.FC<Props> = ({ isModalOpen, setIsModalOpen }) => {
  const dispatch = useDispatch();
  const currentTodo = useSelector<RootState, CurrentTodo | null>(
  state => state.currentTodoSlice.currentTodo,
  );
 
  const handlerCloseModal = () => {
+ setIsModalOpen(false);
+
  dispatch(clearTodo());
  };
 
@@ -29,9 +32,9 @@ export const TodoModal: React.FC<Props> = ({ isOpenerMOdal }) => {
  >
  <div className="modal-background" />
 
- {isOpenerMOdal && <Loader />}
+ {isModalOpen && <Loader />}
 
- {!isOpenerMOdal && (
+ {currentTodo?.user && !isModalOpen && (
  <div className="modal-card">
  <header className="modal-card-head">
  <div

src/features/currentTodo.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { CurrentTodo } from '../types/Todo';
 
@@ -8,7 +9,7 @@ export type CurrentTodoState = {
 
 const initialState: CurrentTodoState = {
  currentTodo: null,
- isLoading: false,
+ isLoading: true,
 };
 
 export const currentTodoSlice = createSlice({

src/features/filter.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { Status } from '../types/Status';
 

src/features/todos.ts

@@ -14,6 +14,7 @@ export const todosSlice = createSlice({
  initialState,
  reducers: {
  setTodos(state, action: { payload: Todo[] }) {
+ // eslint-disable-next-line no-param-reassign
  state.todos = action.payload;
  },
  },