69

Author: kossiecoder

db.json

@@ -1000,6 +1000,62 @@
       "publish": false,
       "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",
+      "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

@@ -5,16 +5,30 @@ import {
 } from 'react-router-dom';
 import NavBar from './components/NavBar';
 import routes from './routes';
+import Toast from './components/Toast';
+import useToast from './hooks/toast';
 
 function App() {
+  const [toasts, addToast, deleteToast] = useToast();
   return (
     <Router>
       <NavBar />
-      
+      <Toast 
+        toasts={toasts}
+        deleteToast={deleteToast}
+      />
       <div className="container mt-3">
         <Switch>
           {routes.map((route) => {
-            return <Route key={route.path} exact path={route.path} component={route.component} />;
+            const Component = route.component;
+            return <Route 
+            key={route.path} 
+            exact 
+            path={route.path} 
+            // component={route.component} 
+            >
+              <Component addToast={addToast} />
+            </Route>;
           })}
         </Switch>
       </div>

src/components/BlogForm.js

@@ -2,11 +2,8 @@ import { useEffect, useState } from 'react';
 import axios from 'axios';
 import { useHistory, useParams } from 'react-router';
 import propTypes from 'prop-types';
-import Toast from '../components/Toast';
-import useToast from '../hooks/toast';
 
-const BlogForm = ({ editing }) => {
-  const [toasts, addToast, deleteToast] = useToast();
+const BlogForm = ({ editing, addToast }) => {
   const history = useHistory();
   const { id } = useParams();
 
@@ -86,7 +83,7 @@ const BlogForm = ({ editing }) => {
             type: 'success',
             text: 'Successfully created!'
           });
-          // history.push('/admin');
+          history.push('/admin');
         })
       }
     }
@@ -98,10 +95,6 @@ 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/pages/CreatePage.js

@@ -1,9 +1,9 @@
 import BlogForm from "../components/BlogForm";
 
-const CreatePage = () => {
+const CreatePage = ({ addToast }) => {
   return (
     <div>
-      <BlogForm />
+      <BlogForm addToast={addToast} />
     </div>
   );
 };