63

Author: kossiecoder

db.json

@@ -83,6 +83,20 @@
       "publish": false,
       "createdAt": 1647211568779,
       "id": 15
+    },
+    {
+      "title": "",
+      "body": "",
+      "publish": false,
+      "createdAt": 1653628899948,
+      "id": 16
+    },
+    {
+      "title": "tetet",
+      "body": "body",
+      "publish": false,
+      "createdAt": 1653630771975,
+      "id": 17
     }
   ]
 }

src/components/BlogForm.js

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import axios from 'axios';
 import { useHistory, useParams } from 'react-router';
-import { bool } from 'prop-types';
 import propTypes from 'prop-types';
 
 const BlogForm = ({ editing }) => {
@@ -14,6 +13,8 @@ const BlogForm = ({ editing }) => {
   const [originalBody, setOriginalBody] = useState('');
   const [publish, setPublish] = useState(false);
   const [originalPublish, setOriginalPublish] = useState(false);
+  const [titleError, setTitleError] = useState(false);
+  const [bodyError, setBodyError] = useState(false);
 
   useEffect(() => {
     if (editing) {
@@ -42,30 +43,49 @@ const BlogForm = ({ editing }) => {
     }
   };
 
+  const validateForm = () => {
+    let validated = true;
+
+    if (title === '') {
+      setTitleError(true);
+      validated = false;
+    }
+
+    if (body === '') {
+      setBodyError(true);
+      validated = false;
+    }
+
+    return validated;
+  }
+
   const onSubmit = () => {
-    if (editing) {
-      axios.patch(`http://localhost:3001/posts/${id}`, {
-        title,
-        body,
-        publish
-      }).then(res => {
-        console.log(res);
-        history.push(`/blogs/${id}`)
-      })
-    } else {
-      axios.post('http://localhost:3001/posts', {
-        title,
-        body,
-        publish,
-        createdAt: Date.now()
-      }).then(() => {
-        history.push('/admin');
-      })
+    setTitleError(false);
+    setBodyError(false);
+    if (validateForm()) {
+      if (editing) {
+        axios.patch(`http://localhost:3001/posts/${id}`, {
+          title,
+          body,
+          publish
+        }).then(res => {
+          console.log(res);
+          history.push(`/blogs/${id}`)
+        })
+      } else {
+        axios.post('http://localhost:3001/posts', {
+          title,
+          body,
+          publish,
+          createdAt: Date.now()
+        }).then(() => {
+          history.push('/admin');
+        })
+      }
     }
   };
 
   const onChangePublish = (e) => {
-    console.log(e.target.checked)
     setPublish(e.target.checked);
   };
 
@@ -75,23 +95,29 @@ const BlogForm = ({ editing }) => {
       <div className="mb-3">
         <label className="form-label">Title</label>
         <input 
-          className="form-control" 
+          className={`form-control ${titleError ? 'border-danger': ''}`}
           value={title}
           onChange={(event) => {
             setTitle(event.target.value);
           }}
         />
+        {titleError && <div className="text-danger">
+          Title is required.
+        </div>}
       </div>
       <div className="mb-3">
         <label className="form-label">Body</label>
         <textarea 
-          className="form-control" 
+          className={`form-control ${bodyError ? 'border-danger': ''}`}
           value={body}
           onChange={(event) => {
             setBody(event.target.value);
           }}
           rows="10"
         />
+        {bodyError && <div className="text-danger">
+          Body is required.
+        </div>}
       </div>
       <div className="form-check mb-3">
           <input