From 61fbd5c636beffb08ff31e7318eb564d8bc77861 Mon Sep 17 00:00:00 2001
From: Harshit Sharma <harshit.s@students.iiit.ac.in>
Date: Thu, 16 Jul 2020 14:29:32 +0530
Subject: [PATCH 1/2] Corrected form element and backend for the required
 field.

---
 client/src/components/admin/AddBlog.js        |  4 ++++
 client/src/components/admin/AddEvent.js       |  5 +++++
 client/src/components/admin/AddImageslider.js |  2 ++
 client/src/components/admin/EditBlog.js       |  4 ++++
 client/src/components/admin/EditEvent.js      |  5 +++++
 client/src/components/layout/FormElement.js   | 22 +++++++++----------
 routes/api/blog.js                            |  4 ++++
 routes/api/event.js                           |  4 ++++
 routes/api/image.js                           |  6 ++---
 9 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/client/src/components/admin/AddBlog.js b/client/src/components/admin/AddBlog.js
index 758ec99..68a0c65 100644
--- a/client/src/components/admin/AddBlog.js
+++ b/client/src/components/admin/AddBlog.js
@@ -47,6 +47,7 @@ const AddBlog = ({ addBlog }) => {
               placeholder="Enter Blog Tag"
               type="text"
               value={blogtag}
+              required={false}
               onChange={(e) => onChange(e)}
             />
             <FormElement
@@ -55,6 +56,7 @@ const AddBlog = ({ addBlog }) => {
               placeholder="Enter Title"
               type="text"
               value={title}
+              required={true}
               onChange={(e) => onChange(e)}
             />
             <FormElement
@@ -63,6 +65,7 @@ const AddBlog = ({ addBlog }) => {
               placeholder="Enter Content"
               type="text"
               value={content}
+              required={false}
               onChange={(e) => onChange(e)}
             />
             <FormElement
@@ -71,6 +74,7 @@ const AddBlog = ({ addBlog }) => {
               placeholder="Enter Author"
               type="text"
               value={author}
+              required={false}
               onChange={(e) => onChange(e)}
             />
             <FileBase64
diff --git a/client/src/components/admin/AddEvent.js b/client/src/components/admin/AddEvent.js
index 73461cb..bc49df6 100644
--- a/client/src/components/admin/AddEvent.js
+++ b/client/src/components/admin/AddEvent.js
@@ -49,6 +49,7 @@ const AddEvent = ({ addEvent }) => {
               placeholder="Enter Title"
               type="text"
               value={name}
+              required={true}
               onChange={(e) => onChange(e)}
             />
             <FormElement
@@ -57,6 +58,7 @@ const AddEvent = ({ addEvent }) => {
               placeholder="Enter Venue"
               type="text"
               value={venue}
+              required={false}
               onChange={(e) => onChange(e)}
             />
             <FormElement
@@ -65,6 +67,7 @@ const AddEvent = ({ addEvent }) => {
               placeholder="Enter Description"
               type="text"
               value={description}
+              required={false}
               onChange={(e) => onChange(e)}
             />
             <FormElement
@@ -73,6 +76,7 @@ const AddEvent = ({ addEvent }) => {
               placeholder="Enter Eventdate"
               type="date"
               value={eventdate}
+              required={false}
               onChange={(e) => onChange(e)}
             />
             <FormElement
@@ -81,6 +85,7 @@ const AddEvent = ({ addEvent }) => {
               placeholder="Enter Formurl"
               type="text"
               value={formurl}
+              required={false}
               onChange={(e) => onChange(e)}
             />
             <FileBase64
diff --git a/client/src/components/admin/AddImageslider.js b/client/src/components/admin/AddImageslider.js
index 7f02564..130ea9c 100644
--- a/client/src/components/admin/AddImageslider.js
+++ b/client/src/components/admin/AddImageslider.js
@@ -46,6 +46,7 @@ const AddImageslider = ({ addImage }) => {
               placeholder="Enter Title"
               type="text"
               value={title}
+              required={false}
               onChange={(e) => onChange(e)}
             />
             <FormElement
@@ -54,6 +55,7 @@ const AddImageslider = ({ addImage }) => {
               placeholder="Enter Caption"
               type="text"
               value={caption}
+              required={false}
               onChange={(e) => onChange(e)}
             />
             <FileBase64
diff --git a/client/src/components/admin/EditBlog.js b/client/src/components/admin/EditBlog.js
index 81ca45d..0b28fb8 100644
--- a/client/src/components/admin/EditBlog.js
+++ b/client/src/components/admin/EditBlog.js
@@ -46,6 +46,7 @@ const EditBlog = ({ match, editBlog }) => {
               placeholder="Enter Blog Tag"
               type="text"
               value={blogtag}
+              required={false}
               onChange={(e) => onChange(e)}
             />
             <FormElement
@@ -54,6 +55,7 @@ const EditBlog = ({ match, editBlog }) => {
               placeholder="Enter Title"
               type="text"
               value={title}
+              required={true}
               onChange={(e) => onChange(e)}
             />
             <FormElement
@@ -62,6 +64,7 @@ const EditBlog = ({ match, editBlog }) => {
               placeholder="Enter Content"
               type="text"
               value={content}
+              required={false}
               onChange={(e) => onChange(e)}
             />
             <FormElement
@@ -70,6 +73,7 @@ const EditBlog = ({ match, editBlog }) => {
               placeholder="Enter Author"
               type="text"
               value={author}
+              required={false}
               onChange={(e) => onChange(e)}
             />
             <FileBase64
diff --git a/client/src/components/admin/EditEvent.js b/client/src/components/admin/EditEvent.js
index c3a092a..7420158 100644
--- a/client/src/components/admin/EditEvent.js
+++ b/client/src/components/admin/EditEvent.js
@@ -66,6 +66,7 @@ const EditEvent = ({ getEvent, editEvent, match, event: { event, loading } }) =>
               placeholder="Enter Title"
               type="text"
               value={name}
+              required={true}
               onChange={(e) => onChange(e)}
             />
             <FormElement
@@ -74,6 +75,7 @@ const EditEvent = ({ getEvent, editEvent, match, event: { event, loading } }) =>
               placeholder="Enter Venue"
               type="text"
               value={venue}
+              required={false}
               onChange={(e) => onChange(e)}
             />
             <FormElement
@@ -82,6 +84,7 @@ const EditEvent = ({ getEvent, editEvent, match, event: { event, loading } }) =>
               placeholder="Enter Description"
               type="text"
               value={description}
+              required={false}
               onChange={(e) => onChange(e)}
             />
             <FormElement
@@ -90,6 +93,7 @@ const EditEvent = ({ getEvent, editEvent, match, event: { event, loading } }) =>
               placeholder="Enter Eventdate"
               type="date"
               value={eventdate}
+              required={false}
               onChange={(e) => onChange(e)}
             />
             <FormElement
@@ -98,6 +102,7 @@ const EditEvent = ({ getEvent, editEvent, match, event: { event, loading } }) =>
               placeholder="Enter Formurl"
               type="text"
               value={formurl}
+              required={false}
               onChange={(e) => onChange(e)}
             />
             <FileBase64
diff --git a/client/src/components/layout/FormElement.js b/client/src/components/layout/FormElement.js
index 4109daa..c9943e5 100644
--- a/client/src/components/layout/FormElement.js
+++ b/client/src/components/layout/FormElement.js
@@ -1,19 +1,19 @@
 import React from 'react';
 
 const FormElement = (props) => {
-    const {label,name,placeholder,type,value,onChange}=props
+    const { label, name, placeholder, type, value, required, onChange } = props
     return (
         <div className="form-group">
-        <label htmlFor={name}>{label}</label>
-        <input
-            type={type}
-            name={name}
-            placeholder={placeholder}
-            value={value}
-            onChange={onChange}
-            className="form-control form-control-lg"
-            required
-        />
+            <label htmlFor={name}>{label}</label>
+            <input
+                type={type}
+                name={name}
+                placeholder={placeholder}
+                value={value}
+                onChange={onChange}
+                className="form-control form-control-lg"
+                required={required}
+            />
         </div>
     )
 }
diff --git a/routes/api/blog.js b/routes/api/blog.js
index 51d8a52..d893ea4 100644
--- a/routes/api/blog.js
+++ b/routes/api/blog.js
@@ -28,6 +28,8 @@ router.post('/', [auth, [
             if (req.body.blogtag != null) blogtag = req.body.blogtag;
             author = "";
             if (req.body.author != null) author = req.body.author;
+            picture = {};
+            if (req.body.picture != null) picture = req.body.picture;
 
             const newBlog = new Blog({
                 blogtag: blogtag,
@@ -143,6 +145,8 @@ router.put(
             if (req.body.blogtag != null) blogtag = req.body.blogtag;
             author = "";
             if (req.body.author != null) author = req.body.author;
+            picture = {};
+            if (req.body.picture != null) picture = req.body.picture;
 
             blog.title = req.body.title;
             blog.content = content;
diff --git a/routes/api/event.js b/routes/api/event.js
index 6101c9c..bdff251 100644
--- a/routes/api/event.js
+++ b/routes/api/event.js
@@ -28,6 +28,8 @@ router.post(
       if (req.body.eventdate != null) eventdate = req.body.eventdate;
       formurl = "";
       if (req.body.formurl != null) formurl = req.body.formurl;
+      picture = {};
+      if (req.body.picture != null) picture = req.body.picture;
 
       const newEvent = new Event({
         name: req.body.name,
@@ -136,6 +138,8 @@ router.put(
       if (req.body.eventdate != null) eventdate = req.body.eventdate;
       formurl = "";
       if (req.body.formurl != null) formurl = req.body.formurl;
+      picture = {};
+      if (req.body.picture != null) picture = req.body.picture;
 
       event.name = req.body.name;
       event.venue = venue;
diff --git a/routes/api/image.js b/routes/api/image.js
index 5d53e5a..a4e659f 100644
--- a/routes/api/image.js
+++ b/routes/api/image.js
@@ -13,7 +13,7 @@ const Image = require('../../models/Image');
 
 router.post(
     "/",
-    [auth],
+    [auth, [check("picture", "picture is required").not().isEmpty()]],
     async (req, res) => {
         const errors = validationResult(req);
         if (!errors.isEmpty()) {
@@ -21,15 +21,13 @@ router.post(
         }
 
         try {
-            picture = {};
-            if (req.body.picture != null) picture = req.body.picture;
             title = "";
             if (req.body.title != null) title = req.body.title;
             caption = "";
             if (req.body.caption != null) caption = req.body.caption;
 
             const newImage = new Image({
-                picture: picture,
+                picture: req.body.picture,
                 title: title,
                 caption: caption,
             });

From 7bf64e79f443ab4c4d43d897ce2ee280b9193f29 Mon Sep 17 00:00:00 2001
From: Harshit Sharma <harshit.s@students.iiit.ac.in>
Date: Sun, 19 Jul 2020 14:16:58 +0530
Subject: [PATCH 2/2] Added the feature of showing previous data in edit
 section of blog.

---
 client/src/components/admin/EditBlog.js | 27 +++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/client/src/components/admin/EditBlog.js b/client/src/components/admin/EditBlog.js
index 0b28fb8..646ea5a 100644
--- a/client/src/components/admin/EditBlog.js
+++ b/client/src/components/admin/EditBlog.js
@@ -1,12 +1,26 @@
-import React, { useState, Fragment } from "react";
+import React, { useEffect, useState, Fragment } from "react";
 import FormElement from "../layout/FormElement";
 
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
-import { editBlog } from "../../actions/blog";
+import { editBlog, getBlog } from "../../actions/blog";
 import FileBase64 from 'react-file-base64';
 
-const EditBlog = ({ match, editBlog }) => {
+const EditBlog = ({ getBlog, editBlog, match, blog: { blog, loading } }) => {
+  useEffect(() => {
+    getBlog(match.params.id);
+    if (!loading && blog) {
+
+      setFormData({
+        blogtag: blog.blogtag,
+        title: blog.title,
+        content: blog.content,
+        author: blog.author,
+        picture: blog.picture
+      })
+    }
+  }, [getBlog, loading, blog && blog._id]);
+
   const [formData, setFormData] = useState({
     blogtag: "",
     title: "",
@@ -14,6 +28,7 @@ const EditBlog = ({ match, editBlog }) => {
     author: "",
   });
 
+
   const { blogtag, title, content, author, picture } = formData;
 
   const onChange = (e) =>
@@ -94,6 +109,10 @@ const EditBlog = ({ match, editBlog }) => {
 };
 EditBlog.propTypes = {
   editBlog: PropTypes.func.isRequired,
+  getBlog: PropTypes.func.isRequired,
 };
 
-export default connect(null, { editBlog })(EditBlog);
+const mapStateToProps = state => ({
+  blog: state.blog,
+});
+export default connect(mapStateToProps, { editBlog, getBlog })(EditBlog);