65

Author: kossiecoder

db.json

@@ -1,95 +1,11 @@
 {
   "posts": [
     {
-      "title": "reactjs123123",
-      "body": "reactjs",
-      "createdAt": 1644556415774,
-      "id": 1,
-      "publish": true
-    },
-    {
-      "title": "reactjs345345",
-      "body": "reactjs",
-      "createdAt": 1644556415774,
-      "id": 2,
-      "publish": true
-    },
-    {
-      "title": "reactjs456456",
-      "body": "reactjs",
-      "createdAt": 1644556415774,
-      "id": 3,
-      "publish": true
-    },
-    {
-      "title": "reactjs1111",
-      "body": "reactjs",
-      "createdAt": 1644556415774,
-      "id": 4,
-      "publish": true
-    },
-    {
-      "title": "redux",
-      "body": "redux",
-      "publish": false,
-      "createdAt": 1646350520510,
-      "id": 6
-    },
-    {
-      "title": "redux 2",
-      "body": "redux 2",
-      "publish": true,
-      "createdAt": 1646350534135,
-      "id": 7
-    },
-    {
-      "title": "react",
-      "body": "react",
-      "publish": false,
-      "createdAt": 1647211176299,
-      "id": 8
-    },
-    {
-      "title": "recoiljs",
-      "body": "recoiljs",
-      "publish": false,
-      "createdAt": 1647211385146,
-      "id": 9
-    },
-    {
-      "title": "test2",
-      "body": "test2",
-      "publish": false,
-      "createdAt": 1647211545153,
-      "id": 12
-    },
-    {
-      "title": "test3",
-      "body": "test3",
-      "publish": false,
-      "createdAt": 1647211550036,
-      "id": 13
-    },
-    {
-      "title": "test4",
-      "body": "test4",
-      "publish": true,
-      "createdAt": 1647211557225,
-      "id": 14
-    },
-    {
-      "title": "test5",
-      "body": "test5",
-      "publish": false,
-      "createdAt": 1647211568779,
-      "id": 15
-    },
-    {
-      "title": "tetet",
-      "body": "body",
+      "title": "2",
+      "body": "2",
       "publish": false,
-      "createdAt": 1653630771975,
-      "id": 17
+      "createdAt": 1655353112963,
+      "id": 10
     }
   ]
 }

package-lock.json

@@ -13,6 +13,7 @@
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
+    "uuid": "^3.4.0",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

package.json

@@ -7,6 +7,7 @@ import Pagination from './Pagination';
 import { useLocation } from 'react-router-dom';
 import propTypes from 'prop-types';
 import Toast from '../components/Toast';
+import { v4 as uuidv4 } from 'uuid';
 
 const BlogList = ({ isAdmin }) => {
   const history = useHistory();
@@ -19,6 +20,7 @@ const BlogList = ({ isAdmin }) => {
   const [numberOfPosts, setNumberOfPosts] = useState(0);
   const [numberOfPages, setNumberOfPages] = useState(0);
   const [searchText, setSearchText] = useState('');
+  const [toasts, setToasts] = useState([]);
   const limit = 5;
 
   useEffect(() => {
@@ -58,11 +60,31 @@ const BlogList = ({ isAdmin }) => {
     getPosts(parseInt(pageParam) || 1)
   }, []);
 
+  const addToast = (toast) => {
+    const toastWithId = {
+      ...toast,
+      id: uuidv4()
+    }
+    setToasts(prev => [...prev, toastWithId]);
+  };
+  
+  const deleteToast = (id) => {
+    const filteredToasts = toasts.filter(toast => {
+      return toast.id !== id;
+    });
+
+    setToasts(filteredToasts);
+  }
+
   const deleteBlog = (e, id) => {
     e.stopPropagation();
 
     axios.delete(`http://localhost:3001/posts/${id}`).then(() => {
       setPosts(prevPosts => prevPosts.filter(post => post.id !== id));
+      addToast({
+        text: 'Successfully deleted',
+        type: 'success'
+      });
     });
   };
 
@@ -104,10 +126,8 @@ const BlogList = ({ isAdmin }) => {
   return (
     <div>
       <Toast
-        toasts={[
-          { text: 'error'},
-          { text: 'success', type: 'success'},
-        ]}
+        toasts={toasts}
+        deleteToast={deleteToast}
       />
       <input 
         type="text"

src/components/BlogList.js

@@ -1,11 +1,15 @@
 import propTypes from "prop-types";
 
-const Toast = ({ toasts }) => {
+const Toast = ({ toasts, deleteToast }) => {
   return (
     <div className="position-fixed bottom-0 end-0 p-2">
       {toasts.map(toast => {
         return (
-          <div className={`alert alert-${toast.type || 'success'} m-0 py-2 mt-2`}>
+          <div
+            key={toast.id}
+            onClick={() => {deleteToast(toast.id)}} 
+            className={`cursor-pointer alert alert-${toast.type || 'success'} m-0 py-2 mt-2`}
+          >
             {toast.text}
           </div>
         );
@@ -18,7 +22,8 @@ Toast.propTypes = {
   toasts: propTypes.arrayOf(propTypes.shape({
     text: propTypes.string,
     type: propTypes.string
-  })).isRequired
+  })).isRequired,
+  deleteToast: propTypes.func.isRequired,
 }
 
 Toast.defaultProps = {