72

Author: kossiecoder

db.json

@@ -1001,41 +1001,6 @@
       "createdAt": 1657255275073,
       "id": 143
     },
-    {
-      "title": "tt",
-      "body": "tt",
-      "publish": false,
-      "createdAt": 1657774109980,
-      "id": 144
-    },
-    {
-      "title": "af",
-      "body": "fg",
-      "publish": false,
-      "createdAt": 1657774124639,
-      "id": 145
-    },
-    {
-      "title": "a",
-      "body": "a",
-      "publish": false,
-      "createdAt": 1657774343111,
-      "id": 146
-    },
-    {
-      "title": "a",
-      "body": "a",
-      "publish": false,
-      "createdAt": 1657774405686,
-      "id": 147
-    },
-    {
-      "title": "b",
-      "body": "b",
-      "publish": false,
-      "createdAt": 1657774415721,
-      "id": 148
-    },
     {
       "title": "b",
       "body": "b",

src/components/BlogList.js

@@ -8,7 +8,6 @@ import { useLocation } from 'react-router-dom';
 import propTypes from 'prop-types';
 import Toast from '../components/Toast';
 import useToast from '../hooks/toast';
-import { useSelector } from 'react-redux';
 
 const BlogList = ({ isAdmin }) => {
   const history = useHistory();
@@ -21,10 +20,6 @@ const BlogList = ({ isAdmin }) => {
   const [numberOfPosts, setNumberOfPosts] = useState(0);
   const [numberOfPages, setNumberOfPages] = useState(0);
   const [searchText, setSearchText] = useState('');
-  const toasts1 = useSelector((state) => {
-    return state.toast.toasts;
-  });
-  console.log('hello', toasts1)
 
   const [toasts, addToast, deleteToast] = useToast();
   const limit = 5;

src/components/Card.js

@@ -1,11 +1,6 @@
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
 
 const Card = ({ title, onClick, children }) => {
-  const toasts = useSelector((state) => {
-    return state.toast.toasts;
-  });
-  console.log('hello1', toasts);
   return (
     <div 
       className="card mb-3 cursor-pointer"

src/hooks/toast.js

@@ -1,9 +1,12 @@
 import { useState, useRef } from 'react';
 import { v4 as uuidv4 } from 'uuid';
+import { addToast as add } 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 => {
@@ -21,8 +24,9 @@ const useToast = () => {
       id
     }
 
-    toasts.current = [...toasts.current, toastWithId];
-    setToastRerender(prev => !prev);
+    dispatch(add(toastWithId));
+    // toasts.current = [...toasts.current, toastWithId];
+    // setToastRerender(prev => !prev);
 
     setTimeout(() => {
       deleteToast(id, toasts, setToastRerender);

src/store/toastSlice.js

@@ -8,8 +8,12 @@ const toastSlice = createSlice({
   name: 'toast',
   initialState,
   reducers: {
-
+    addToast: (state, action) => {
+      state.toasts.push(action.payload);
+    }
   } 
 })
 
+export const { addToast } = toastSlice.actions;
+
 export default toastSlice.reducer;