66

Author: kossiecoder

db.json

@@ -1,11 +1,165 @@
 {
   "posts": [
+    {
+      "title": "1",
+      "body": "1",
+      "publish": false,
+      "createdAt": 1655689602717,
+      "id": 1
+    },
+    {
+      "title": "1",
+      "body": "1",
+      "publish": false,
+      "createdAt": 1655689978573,
+      "id": 2
+    },
     {
       "title": "2",
       "body": "2",
       "publish": false,
-      "createdAt": 1655353112963,
+      "createdAt": 1655690060587,
+      "id": 3
+    },
+    {
+      "title": "new blog",
+      "body": "hello",
+      "publish": false,
+      "createdAt": 1655690156736,
+      "id": 4
+    },
+    {
+      "title": "5",
+      "body": "5",
+      "publish": false,
+      "createdAt": 1655690257065,
+      "id": 5
+    },
+    {
+      "title": "5",
+      "body": "5",
+      "publish": false,
+      "createdAt": 1655690639921,
+      "id": 6
+    },
+    {
+      "title": "5",
+      "body": "5",
+      "publish": false,
+      "createdAt": 1655690642822,
+      "id": 7
+    },
+    {
+      "title": "5",
+      "body": "5",
+      "publish": false,
+      "createdAt": 1655690659788,
+      "id": 8
+    },
+    {
+      "title": "5",
+      "body": "5",
+      "publish": false,
+      "createdAt": 1655690662307,
+      "id": 9
+    },
+    {
+      "title": "5",
+      "body": "5",
+      "publish": false,
+      "createdAt": 1655690723870,
       "id": 10
+    },
+    {
+      "title": "5",
+      "body": "5",
+      "publish": false,
+      "createdAt": 1655690726379,
+      "id": 11
+    },
+    {
+      "title": "5",
+      "body": "5",
+      "publish": false,
+      "createdAt": 1655690810566,
+      "id": 12
+    },
+    {
+      "title": "5",
+      "body": "5",
+      "publish": false,
+      "createdAt": 1655690813446,
+      "id": 13
+    },
+    {
+      "title": "5",
+      "body": "5",
+      "publish": false,
+      "createdAt": 1655690866548,
+      "id": 14
+    },
+    {
+      "title": "5",
+      "body": "5",
+      "publish": false,
+      "createdAt": 1655690869248,
+      "id": 15
+    },
+    {
+      "title": "1",
+      "body": "1",
+      "publish": false,
+      "createdAt": 1655690901403,
+      "id": 16
+    },
+    {
+      "title": "1",
+      "body": "1",
+      "publish": false,
+      "createdAt": 1655690904291,
+      "id": 17
+    },
+    {
+      "title": "2",
+      "body": "3",
+      "publish": false,
+      "createdAt": 1655690949947,
+      "id": 18
+    },
+    {
+      "title": "2",
+      "body": "3",
+      "publish": false,
+      "createdAt": 1655690952243,
+      "id": 19
+    },
+    {
+      "title": "1",
+      "body": "1",
+      "publish": false,
+      "createdAt": 1655690997156,
+      "id": 20
+    },
+    {
+      "title": "1",
+      "body": "1",
+      "publish": false,
+      "createdAt": 1655690999887,
+      "id": 21
+    },
+    {
+      "title": "1",
+      "body": "1",
+      "publish": false,
+      "createdAt": 1655691070469,
+      "id": 22
+    },
+    {
+      "title": "1",
+      "body": "1",
+      "publish": false,
+      "createdAt": 1655691073175,
+      "id": 23
     }
   ]
 }

src/components/BlogForm.js

@@ -2,6 +2,8 @@ import { useEffect, useState } from 'react';
 import axios from 'axios';
 import { useHistory, useParams } from 'react-router';
 import propTypes from 'prop-types';
+import { v4 as uuidv4 } from 'uuid';
+import Toast from '../components/Toast';
 
 const BlogForm = ({ editing }) => {
   const history = useHistory();
@@ -15,6 +17,7 @@ const BlogForm = ({ editing }) => {
   const [originalPublish, setOriginalPublish] = useState(false);
   const [titleError, setTitleError] = useState(false);
   const [bodyError, setBodyError] = useState(false);
+  const [toasts, setToasts] = useState([]);
 
   useEffect(() => {
     if (editing) {
@@ -59,6 +62,27 @@ const BlogForm = ({ editing }) => {
     return validated;
   }
 
+  const deleteToast = (id) => {
+    const filteredToasts = toasts.filter(toast => {
+      return toast.id !== id;
+    });
+
+    setToasts(filteredToasts);
+  }
+
+  const addToast = (toast) => {
+    const id = uuidv4();
+    const toastWithId = {
+      ...toast,
+      id
+    }
+    setToasts(prev => [...prev, toastWithId]);
+
+    setTimeout(() => {
+      deleteToast(id);
+    }, 5000);
+  };
+
   const onSubmit = () => {
     setTitleError(false);
     setBodyError(false);
@@ -79,7 +103,11 @@ const BlogForm = ({ editing }) => {
           publish,
           createdAt: Date.now()
         }).then(() => {
-          history.push('/admin');
+          addToast({
+            type: 'success',
+            text: 'Successfully created!'
+          });
+          // history.push('/admin');
         })
       }
     }
@@ -91,6 +119,10 @@ const BlogForm = ({ editing }) => {
 
   return (
     <div>
+      <Toast
+        toasts={toasts}
+        deleteToast={deleteToast}
+      />
       <h1>{editing ? 'Edit' : 'Create'} a blog post</h1>
       <div className="mb-3">
         <label className="form-label">Title</label>

src/components/BlogList.js

@@ -59,14 +59,6 @@ const BlogList = ({ isAdmin }) => {
     setCurrentPage(parseInt(pageParam) || 1);
     getPosts(parseInt(pageParam) || 1)
   }, []);
-
-  const addToast = (toast) => {
-    const toastWithId = {
-      ...toast,
-      id: uuidv4()
-    }
-    setToasts(prev => [...prev, toastWithId]);
-  };
 
   const deleteToast = (id) => {
     const filteredToasts = toasts.filter(toast => {
@@ -76,6 +68,19 @@ const BlogList = ({ isAdmin }) => {
     setToasts(filteredToasts);
   }
 
+  const addToast = (toast) => {
+    const id = uuidv4();
+    const toastWithId = {
+      ...toast,
+      id
+    }
+    setToasts(prev => [...prev, toastWithId]);
+
+    setTimeout(() => {
+      deleteToast(id);
+    }, 5000);
+  };
+
   const deleteBlog = (e, id) => {
     e.stopPropagation();