64

Author: kossiecoder

db.json

@@ -84,13 +84,6 @@
       "createdAt": 1647211568779,
       "id": 15
     },
-    {
-      "title": "",
-      "body": "",
-      "publish": false,
-      "createdAt": 1653628899948,
-      "id": 16
-    },
     {
       "title": "tetet",
       "body": "body",

src/components/BlogList.js

@@ -6,6 +6,7 @@ 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';
 
 const BlogList = ({ isAdmin }) => {
   const history = useHistory();
@@ -102,6 +103,12 @@ const BlogList = ({ isAdmin }) => {
 
   return (
     <div>
+      <Toast
+        toasts={[
+          { text: 'error'},
+          { text: 'success', type: 'success'},
+        ]}
+      />
       <input 
         type="text"
         placeholder="Search.."

src/components/Toast.js

@@ -0,0 +1,28 @@
+import propTypes from "prop-types";
+
+const Toast = ({ toasts }) => {
+  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`}>
+            {toast.text}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+Toast.propTypes = {
+  toasts: propTypes.arrayOf(propTypes.shape({
+    text: propTypes.string,
+    type: propTypes.string
+  })).isRequired
+}
+
+Toast.defaultProps = {
+  toasts: []
+}
+
+export default Toast;