73

Author: kossiecoder

db.json

@@ -889,138 +889,12 @@
       "createdAt": 1657240162434,
       "id": 127
     },
-    {
-      "title": "f",
-      "body": "f",
-      "publish": false,
-      "createdAt": 1657240197883,
-      "id": 128
-    },
-    {
-      "title": "f",
-      "body": "f",
-      "publish": false,
-      "createdAt": 1657240200199,
-      "id": 129
-    },
     {
       "title": "f",
       "body": "f",
       "publish": false,
       "createdAt": 1657240212897,
       "id": 130
-    },
-    {
-      "title": "f",
-      "body": "f",
-      "publish": false,
-      "createdAt": 1657240407068,
-      "id": 131
-    },
-    {
-      "title": "f",
-      "body": "f",
-      "publish": false,
-      "createdAt": 1657240408910,
-      "id": 132
-    },
-    {
-      "title": "f",
-      "body": "f",
-      "publish": false,
-      "createdAt": 1657240415516,
-      "id": 133
-    },
-    {
-      "title": "f",
-      "body": "f",
-      "publish": false,
-      "createdAt": 1657240423386,
-      "id": 134
-    },
-    {
-      "title": "f",
-      "body": "f",
-      "publish": false,
-      "createdAt": 1657240424008,
-      "id": 135
-    },
-    {
-      "title": "f",
-      "body": "f",
-      "publish": false,
-      "createdAt": 1657240424604,
-      "id": 136
-    },
-    {
-      "title": "f",
-      "body": "f",
-      "publish": false,
-      "createdAt": 1657240424829,
-      "id": 137
-    },
-    {
-      "title": "f",
-      "body": "f",
-      "publish": false,
-      "createdAt": 1657240425122,
-      "id": 138
-    },
-    {
-      "title": "f",
-      "body": "f",
-      "publish": false,
-      "createdAt": 1657240426359,
-      "id": 139
-    },
-    {
-      "title": "asdf",
-      "body": "asdf",
-      "publish": false,
-      "createdAt": 1657255138326,
-      "id": 140
-    },
-    {
-      "title": "asdf",
-      "body": "asdf",
-      "publish": false,
-      "createdAt": 1657255140428,
-      "id": 141
-    },
-    {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1657255273601,
-      "id": 142
-    },
-    {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1657255275073,
-      "id": 143
-    },
-    {
-      "title": "b",
-      "body": "b",
-      "publish": false,
-      "createdAt": 1657774497818,
-      "id": 149
-    },
-    {
-      "title": "a",
-      "body": "a",
-      "publish": false,
-      "createdAt": 1657775679723,
-      "id": 150
-    },
-    {
-      "title": "b",
-      "body": "b",
-      "publish": false,
-      "createdAt": 1657775748192,
-      "id": 151
     }
   ]
 }

src/App.js

@@ -7,9 +7,11 @@ import NavBar from './components/NavBar';
 import routes from './routes';
 import Toast from './components/Toast';
 import useToast from './hooks/toast';
+import { useSelector } from 'react-redux';
 
 function App() {
-  const [toasts, addToast, deleteToast] = useToast();
+  const toasts = useSelector(state => state.toast.toasts);
+  const { deleteToast } = useToast();
   return (
     <Router>
       <NavBar />
@@ -20,15 +22,12 @@ function App() {
       <div className="container mt-3">
         <Switch>
           {routes.map((route) => {
-            const Component = route.component;
             return <Route 
-            key={route.path} 
-            exact 
-            path={route.path} 
-            // component={route.component} 
-            >
-              <Component addToast={addToast} />
-            </Route>;
+              key={route.path} 
+              exact 
+              path={route.path} 
+              component={route.component} 
+            />
           })}
         </Switch>
       </div>

src/components/.BlogList.js.swp

@@ -6,7 +6,6 @@ import LoadingSpinner from '../components/LoadingSpinner';
 import Pagination from './Pagination';
 import { useLocation } from 'react-router-dom';
 import propTypes from 'prop-types';
-import Toast from '../components/Toast';
 import useToast from '../hooks/toast';
 
 const BlogList = ({ isAdmin }) => {
@@ -21,7 +20,7 @@ const BlogList = ({ isAdmin }) => {
   const [numberOfPages, setNumberOfPages] = useState(0);
   const [searchText, setSearchText] = useState('');
 
-  const [toasts, addToast, deleteToast] = useToast();
+  const { addToast } = useToast();
   const limit = 5;
 
   useEffect(() => {
@@ -110,10 +109,6 @@ const BlogList = ({ isAdmin }) => {
 
   return (
     <div>
-      <Toast
-        toasts={toasts}
-        deleteToast={deleteToast}
-      />
       <input 
         type="text"
         placeholder="Search.."

src/components/BlogList.js

@@ -1,20 +1,12 @@
-import { useState, useRef } from 'react';
 import { v4 as uuidv4 } from 'uuid';
-import { addToast as add } from '../store/toastSlice';
+import { addToast as add, removeToast } from '../store/toastSlice';
 import { useDispatch } from 'react-redux';
 
 const useToast = () => {
-  const [, setToastRerender] = useState(false);
-  const toasts = useRef([]);
   const dispatch = useDispatch();
 
   const deleteToast = (id) => {
-    const filteredToasts = toasts.current.filter(toast => {
-      return toast.id !== id;
-    });
-
-    toasts.current = filteredToasts;
-    setToastRerender(prev => !prev);
+    dispatch(removeToast(id));
   }
 
   const addToast = (toast) => {
@@ -25,19 +17,16 @@ const useToast = () => {
     }
 
     dispatch(add(toastWithId));
-    // toasts.current = [...toasts.current, toastWithId];
-    // setToastRerender(prev => !prev);
 
     setTimeout(() => {
-      deleteToast(id, toasts, setToastRerender);
+      deleteToast(id);
     }, 5000);
   };
 
-  return [
-    toasts.current,
+  return {
     addToast,
     deleteToast
-  ];
+  };
 };
 
 export default useToast;

src/hooks/toast.js

@@ -10,10 +10,15 @@ const toastSlice = createSlice({
   reducers: {
     addToast: (state, action) => {
       state.toasts.push(action.payload);
+    },
+    removeToast: (state, action) => {
+      state.toasts = state.toasts.filter(toast => {
+        return toast.id !== action.payload
+      })
     }
   } 
 })
 
-export const { addToast } = toastSlice.actions;
+export const { addToast, removeToast } = toastSlice.actions;
 
 export default toastSlice.reducer;