68

Author: kossiecoder

db.json

@@ -972,6 +972,34 @@
       "publish": false,
       "createdAt": 1657240426359,
       "id": 139
+    },
+    {
+      "title": "asdf",
+      "body": "asdf",
+      "publish": false,
+      "createdAt": 1657255138326,
+      "id": 140
+    },
+    {
+      "title": "asdf",
+      "body": "asdf",
+      "publish": false,
+      "createdAt": 1657255140428,
+      "id": 141
+    },
+    {
+      "title": "5",
+      "body": "5",
+      "publish": false,
+      "createdAt": 1657255273601,
+      "id": 142
+    },
+    {
+      "title": "5",
+      "body": "5",
+      "publish": false,
+      "createdAt": 1657255275073,
+      "id": 143
     }
   ]
 }

src/components/BlogForm.js

@@ -1,11 +1,12 @@
-import { useEffect, useState, useRef } from 'react';
+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';
+import useToast from '../hooks/toast';
 
 const BlogForm = ({ editing }) => {
+  const [toasts, addToast, deleteToast] = useToast();
   const history = useHistory();
   const { id } = useParams();
 
@@ -17,8 +18,6 @@ const BlogForm = ({ editing }) => {
   const [originalPublish, setOriginalPublish] = useState(false);
   const [titleError, setTitleError] = useState(false);
   const [bodyError, setBodyError] = useState(false);
-  const [, setToastRerender] = useState(false);
-  const toasts = useRef([]);
 
   useEffect(() => {
     if (editing) {
@@ -63,30 +62,6 @@ const BlogForm = ({ editing }) => {
     return validated;
   }
 
-  const deleteToast = (id) => {
-    const filteredToasts = toasts.current.filter(toast => {
-      return toast.id !== id;
-    });
-
-    toasts.current = filteredToasts;
-    setToastRerender(prev => !prev);
-  }
-
-  const addToast = (toast) => {
-    const id = uuidv4();
-    const toastWithId = {
-      ...toast,
-      id
-    }
-
-    toasts.current = [...toasts.current, toastWithId];
-    setToastRerender(prev => !prev);
-    
-    setTimeout(() => {
-      deleteToast(id);
-    }, 5000);
-  };
-
   const onSubmit = () => {
     setTitleError(false);
     setBodyError(false);
@@ -124,7 +99,7 @@ const BlogForm = ({ editing }) => {
   return (
     <div>
       <Toast
-        toasts={toasts.current}
+        toasts={toasts}
         deleteToast={deleteToast}
       />
       <h1>{editing ? 'Edit' : 'Create'} a blog post</h1>

src/components/BlogList.js

@@ -1,13 +1,13 @@
 import axios from 'axios';
-import { useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import Card from '../components/Card';
 import { useHistory } from 'react-router';
 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';
-import { v4 as uuidv4 } from 'uuid';
+import useToast from '../hooks/toast';
 
 const BlogList = ({ isAdmin }) => {
   const history = useHistory();
@@ -20,8 +20,8 @@ const BlogList = ({ isAdmin }) => {
   const [numberOfPosts, setNumberOfPosts] = useState(0);
   const [numberOfPages, setNumberOfPages] = useState(0);
   const [searchText, setSearchText] = useState('');
-  const [, setToastRerender] = useState(false);
-  const toasts = useRef([]);
+
+  const [toasts, addToast, deleteToast] = useToast();
   const limit = 5;
 
   useEffect(() => {
@@ -60,32 +60,6 @@ const BlogList = ({ isAdmin }) => {
     setCurrentPage(parseInt(pageParam) || 1);
     getPosts(parseInt(pageParam) || 1)
   }, []);
-  
-  const deleteToast = (id) => {
-    const filteredToasts = toasts.current.filter(toast => {
-      return toast.id !== id;
-    });
-
-    toasts.current = filteredToasts;
-    setToastRerender(prev => !prev);
-  }
-
-  const addToast = (toast) => {
-    const id = uuidv4();
-    const toastWithId = {
-      ...toast,
-      id
-    }
-    toasts.current = [
-      ...toasts.current,
-      toastWithId
-    ];
-    setToastRerender(prev => !prev);
-
-    setTimeout(() => {
-      deleteToast(id);
-    }, 5000);
-  };
 
   const deleteBlog = (e, id) => {
     e.stopPropagation();
@@ -137,7 +111,7 @@ const BlogList = ({ isAdmin }) => {
   return (
     <div>
       <Toast
-        toasts={toasts.current}
+        toasts={toasts}
         deleteToast={deleteToast}
       />
       <input 

src/hooks/toast.js

@@ -0,0 +1,39 @@
+import { useState, useRef } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+
+const useToast = () => {
+  const [, setToastRerender] = useState(false);
+  const toasts = useRef([]);
+
+  const deleteToast = (id) => {
+    const filteredToasts = toasts.current.filter(toast => {
+      return toast.id !== id;
+    });
+
+    toasts.current = filteredToasts;
+    setToastRerender(prev => !prev);
+  }
+
+  const addToast = (toast) => {
+    const id = uuidv4();
+    const toastWithId = {
+      ...toast,
+      id
+    }
+
+    toasts.current = [...toasts.current, toastWithId];
+    setToastRerender(prev => !prev);
+    
+    setTimeout(() => {
+      deleteToast(id, toasts, setToastRerender);
+    }, 5000);
+  };
+
+  return [
+    toasts.current,
+    addToast,
+    deleteToast
+  ];
+};
+
+export default useToast;