79

Author: kossiecoder

src/components/BlogForm.js

@@ -2,8 +2,10 @@ import { useEffect, useState } from 'react';
 import axios from 'axios';
 import { useHistory, useParams } from 'react-router';
 import propTypes from 'prop-types';
+import useToast from '../hooks/toast';
+import LoadingSpinner from './LoadingSpinner';
 
-const BlogForm = ({ editing, addToast }) => {
+const BlogForm = ({ editing }) => {
   const history = useHistory();
   const { id } = useParams();
 
@@ -15,6 +17,9 @@ const BlogForm = ({ editing, addToast }) => {
   const [originalPublish, setOriginalPublish] = useState(false);
   const [titleError, setTitleError] = useState(false);
   const [bodyError, setBodyError] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const { addToast } = useToast();
 
   useEffect(() => {
     if (editing) {
@@ -25,7 +30,17 @@ const BlogForm = ({ editing, addToast }) => {
         setOriginalBody(res.data.body);
         setPublish(res.data.publish);
         setOriginalPublish(res.data.publish);
+        setLoading(false);
+      }).catch(e => {
+        setError('something went wrong in db');
+        addToast({
+          type: 'danger',
+          text: 'something went wrong in db'
+        })
+        setLoading(false);
       })
+    } else {
+      setLoading(false);
     }
   }, [id, editing]);
 
@@ -71,6 +86,11 @@ const BlogForm = ({ editing, addToast }) => {
         }).then(res => {
           console.log(res);
           history.push(`/blogs/${id}`)
+        }).catch(e => {
+          addToast({
+            type: 'danger',
+            text: 'We could not update blog'
+          })
         })
       } else {
         axios.post('http://localhost:3001/posts', {
@@ -84,6 +104,11 @@ const BlogForm = ({ editing, addToast }) => {
             text: 'Successfully created!'
           });
           history.push('/admin');
+        }).catch(e => {
+          addToast({
+            type: 'danger',
+            text: 'We could not create blog'
+          })
         })
       }
     }
@@ -93,6 +118,14 @@ const BlogForm = ({ editing, addToast }) => {
     setPublish(e.target.checked);
   };
 
+  if (loading) {
+    return <LoadingSpinner />
+  }
+
+  if (error) {
+    return (<div>{error}</div>)
+  }
+
   return (
     <div>
       <h1>{editing ? 'Edit' : 'Create'} a blog post</h1>

src/components/BlogList.js

@@ -77,6 +77,11 @@ const BlogList = ({ isAdmin }) => {
         text: 'Successfully deleted',
         type: 'success'
       });
+    }).catch(e => {
+      addToast({
+        text: 'The blog could not be deleted.',
+        type: 'danger'
+      })
     });
   };
 

src/pages/ShowPage.js

@@ -4,17 +4,27 @@ import { useEffect, useState } from "react";
 import LoadingSpinner from "../components/LoadingSpinner";
 import { Link } from "react-router-dom";
 import { useSelector } from "react-redux";
+import useToast from "../hooks/toast";
 
 const ShowPage = () => {
   const { id } = useParams();
   const [post, setPost] = useState(null);
   const [loading, setLoading] = useState(true);
   const isLoggedIn = useSelector(state => state.auth.isLoggedIn);
+  const { addToast } = useToast(); 
+  const [error, setError] = useState('');
 
   const getPost = (id) => {
     axios.get(`http://localhost:3001/posts/${id}`).then((res) => {
       setPost(res.data)
       setLoading(false);
+    }).catch(e => {
+      setError('something went wrong in db');
+      addToast({
+        type: 'danger',
+        text: 'something went wrong in db'
+      })
+      setLoading(false);
     })
   };
 
@@ -30,6 +40,10 @@ const ShowPage = () => {
     return <LoadingSpinner />
   }
 
+  if (error) {
+    return (<div>{error}</div>)
+  }
+
   return (
     <div>
       <div className="d-flex">