sun

src/App.js

@@ -1,3 +1,5 @@
+import React from 'react';
+import 'react-toastify/dist/ReactToastify.css';
 import InputForm from 'components/InputForm';
 import Title from 'components/Title';
 import TodoList from 'components/TodoList';

src/components/TodoList.jsx

@@ -6,6 +6,7 @@ import TodoItem from './TodoItem';
 import { selectTodo } from 'redux/selectors';
 import { fetchTodos, sendTodos } from 'redux/operations';
 import Pagination from '../utils/Pagination';
+import { toast } from 'react-toastify';
 
 const PAGE_SIZE = 5;
 
@@ -25,7 +26,11 @@ const TodoList = () => {
   }, [currentPage, todos]);
 
   useEffect(() => {
-    dispatch(fetchTodos());
+    toast.promise(dispatch(fetchTodos()), {
+      pending: 'TODO List is pending',
+      success: 'TODO List resolved 👌',
+      error: 'TODO List rejected 🤯',
+    });
   }, [dispatch]);
 
   const handlePageChange = ({ selected }) => {
@@ -45,8 +50,10 @@ const TodoList = () => {
     const [removed] = items.splice(result.source.index, 1);
     items.splice(result.destination.index, 0, removed);
     setItems(items);
-    const reversed = [...items].reverse();
-    dispatch(sendTodos(reversed));
+    console.log(items);
+    console.log(todos);
+    // const reversed = [...items].reverse();
+    // dispatch(sendTodos(reversed));
   };
 
   return (

src/redux/operations.js

@@ -57,7 +57,6 @@ export const editTodo = createAsyncThunk(
 export const sendTodos = createAsyncThunk(
   'todos/sendTodos',
   async (todosArray, thunkAPI) => {
-    console.log(todosArray);
     try {
       const response = await axios.post('/save-todos', todosArray);
       return response.data;

src/redux/selectors.js

@@ -1 +1,3 @@
 export const selectTodo = state => state.todos.todos;
+export const isLoading = state => state.todos.isLoading;
+export const error = state => state.todos.error;