fix mistakes

mate-academy · Oct 7, 2024 · 1ce43cf · 1ce43cf
1 parent ee54bbf
commit 1ce43cf
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 17 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -5,7 +5,7 @@ import { useEffect, useState } from 'react';
 import { getTodos } from './api';
 import { useDispatch } from 'react-redux';
 import { useAppSelector } from './app/hooks';
-import { todosSlice } from './features/todos';
+import { setTodos } from './features/todos';
 
 export const App = () => {
   const [listLoading, setListLoading] = useState(false);
@@ -17,10 +17,10 @@ export const App = () => {
     setListLoading(true);
     getTodos()
       .then(array => {
-        dispatch(todosSlice.actions.setTodos(array));
+        dispatch(setTodos(array));
       })
       .finally(() => setListLoading(false));
-  }, []);
+  }, [dispatch]);
 
   return (
     <>

diff --git a/src/components/TodoFilter/TodoFilter.tsx b/src/components/TodoFilter/TodoFilter.tsx
@@ -1,19 +1,19 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { filterSlice } from '../../features/filter';
 import { useAppSelector } from '../../app/hooks';
+import { setStatus, setQuery } from '../../features/filter';
 
 export const TodoFilter: React.FC = () => {
   const { query, status } = useAppSelector(state => state.filter);
 
   const dispatch = useDispatch();
 
   const handleStatus = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    dispatch(filterSlice.actions.setStatus(event.target.value));
+    dispatch(setStatus(event.target.value));
   };
 
   const handleQuery = (event: React.ChangeEvent<HTMLInputElement>) => {
-    dispatch(filterSlice.actions.setQuery(event.target.value.toLowerCase()));
+    dispatch(setQuery(event.target.value.toLowerCase()));
   };
 
   return (
@@ -51,7 +51,7 @@ export const TodoFilter: React.FC = () => {
               data-cy="clearSearchButton"
               type="button"
               className="delete"
-              onClick={() => dispatch(filterSlice.actions.setQuery(''))}
+              onClick={() => dispatch(setQuery(''))}
             />
           )}
         </span>

diff --git a/src/components/TodoList/TodoList.tsx b/src/components/TodoList/TodoList.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useAppSelector } from '../../app/hooks';
 import classNames from 'classnames';
 import { useDispatch } from 'react-redux';
-import { currentTodoSlice } from '../../features/currentTodo';
+import { setCurrentTodo } from '../../features/currentTodo';
 
 export const TodoList: React.FC = () => {
   const todos = useAppSelector(state => state.todos);
@@ -73,7 +73,7 @@ export const TodoList: React.FC = () => {
                   <button
                     onClick={() =>
                       dispatch(
-                        currentTodoSlice.actions.setCurrentTodo({
+                        setCurrentTodo({
                           id,
                           title,
                           completed,
@@ -88,8 +88,10 @@ export const TodoList: React.FC = () => {
                     <span className="icon">
                       <i
                         className={classNames('far', {
-                          'fa-eye': currentTodo === null,
-                          'fa-eye-slash': currentTodo !== null,
+                          'fa-eye':
+                            currentTodo === null || currentTodo.id !== id,
+                          'fa-eye-slash':
+                            currentTodo !== null && currentTodo.id === id,
                         })}
                       />
                     </span>

diff --git a/src/components/TodoModal/TodoModal.tsx b/src/components/TodoModal/TodoModal.tsx
@@ -5,7 +5,7 @@ import { getUser } from '../../api';
 import { useAppSelector } from '../../app/hooks';
 import classNames from 'classnames';
 import { useDispatch } from 'react-redux';
-import { currentTodoSlice } from '../../features/currentTodo';
+import { setCurrentTodo } from '../../features/currentTodo';
 
 export const TodoModal: React.FC = () => {
   const [modalLoading, setModalLoading] = useState(false);
@@ -25,10 +25,10 @@ export const TodoModal: React.FC = () => {
     getUser(currentTodo.userId)
       .then(data => setUser({ ...data }))
       .finally(() => setModalLoading(false));
-  }, []);
+  }, [currentTodo]);
 
   const closeModal = () => {
-    dispatch(currentTodoSlice.actions.setCurrentTodo(null));
+    dispatch(setCurrentTodo(null));
   };
 
   return (

diff --git a/src/features/currentTodo.ts b/src/features/currentTodo.ts
@@ -10,3 +10,5 @@ export const currentTodoSlice = createSlice({
     setCurrentTodo: (_, { payload }: PayloadAction<Todo | null>) => payload,
   },
 });
+
+export const { setCurrentTodo } = currentTodoSlice.actions;
diff --git a/src/features/filter.ts b/src/features/filter.ts
@@ -1,5 +1,4 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { Status } from '../types/Status';
 
 const initialState = {
   query: '',
@@ -10,13 +9,15 @@ export const filterSlice = createSlice({
   name: 'filter',
   initialState,
   reducers: {
-    setStatus: ({ query }, { payload }: PayloadAction<Status>) => ({
+    setStatus: ({ query }, { payload }: PayloadAction<string>) => ({
       query,
       status: payload,
     }),
-    setQuery: ({ status }, { payload }: PayloadAction<Status>) => ({
+    setQuery: ({ status }, { payload }: PayloadAction<string>) => ({
       status,
       query: payload,
     }),
   },
 });
+
+export const { setStatus, setQuery } = filterSlice.actions;
diff --git a/src/features/todos.ts b/src/features/todos.ts
@@ -8,3 +8,5 @@ export const todosSlice = createSlice({
     setTodos: (_, { payload }: PayloadAction<Todo[]>) => [...payload],
   },
 });
+
+export const { setTodos } = todosSlice.actions;