update blog page setup

client/components/update/ReadNewBlog.js

@@ -8,6 +8,7 @@ import PublishIcon from '@material-ui/icons/Publish';
 import {ReactQuillModules,ReactQuillFormats} from "../../helpers/ReactQuill";
 import DeleteForeverIcon from '@material-ui/icons/DeleteForever';
 import moment from "moment";
+import CreateIcon from '@material-ui/icons/Create';
 
 const ReadNewBlog = () => {
     const [blogs,setBlogs] = useState([])
@@ -43,7 +44,23 @@ const ReadNewBlog = () => {
         if (answer){
             deleteTheBlog(slug)
         }
-    }
+    };
+
+    const showEditButton= blog =>{
+        if (isAuthenticated() && isAuthenticated().role === 0){
+            return (
+                <Link href={`/userDashboard/update/${blog.slug}`}>
+                    <a className="ml-3 btn btn-sm btn-warning"><CreateIcon/> Edit</a>
+                </Link>
+            );
+        } else if (isAuthenticated() && isAuthenticated().role === 1){
+            return (
+                <Link href={`/adminDashboard/update/${blog.slug}`}>
+                    <a className="ml-3 btn btn-sm btn-warning"><CreateIcon/> Edit</a>
+                </Link>
+            )
+        }
+    };
 
     const showingAllBlogs=()=>{
         return blogs.map((blog,index)=>{
@@ -52,7 +69,8 @@ const ReadNewBlog = () => {
                     <h3>{blog.title}</h3>
             <div style={{backgroundColor:"inset 0 0 2000px rgba(255, 255, 255, .5)",filter:"blur(0.7px)",fontSize:"15px"}}> Author : {blog.postedBy.name} | Published {moment(blog.updatedAt).fromNow()} </div>
                <button className="btn btn-sm btn-danger" onClick={() => deleteConfirmation(blog.slug)}><DeleteForeverIcon/> Delete</button>
-
+               {showEditButton(blog)}
+               {/* {console.log("role",isAuthenticated().role)} */}
                 </div>
             )
         })
@@ -70,6 +88,6 @@ const ReadNewBlog = () => {
         </div>
         </>
     )
-}
+};
 
 export default ReadNewBlog;

client/components/update/UpdateNewBlog.js

@@ -0,0 +1,63 @@
+import Link from "next/link";
+import React,{useState,useEffect} from "react";
+import Router from "next/router";
+import dynamic from "next/dynamic";  // react quill runs on client side so dynamic is used to turn off ssr for react quill(to dynamically load the component)
+import {withRouter} from "next/router"; // to get access to the router props from the components
+// importing actions
+import {getCookie,isAuthenticated} from "../../actions/authentication";
+import {getCategories} from "../../actions/category"; 
+import {getTagLists} from "../../actions/tag"; 
+import {createBlog} from "../../actions/blog";
+import PublishIcon from '@material-ui/icons/Publish';
+import {ReactQuillModules,ReactQuillFormats} from "../../helpers/ReactQuill";
+
+
+const UpdateNewBlog = () =>{
+    return (
+        <div className="container-fluid">
+            <div className="row">
+                <div className="col-md-4">
+                <div >
+                    <div className="form-group pb-2">
+                        <h4>Featured Background Image</h4>
+                        <hr style={{backgroundColor:"white"}}/>
+                        <small className="text-muted">Maximum file size : 1024kb </small>
+                        <label className="btn btn-outline-success">Upload Image
+                        <input type="file" accept="image/*" hidden/>
+                        {/* <img src={handleChange(setInfos([name]))}/> */} 
+                        </label>
+                    </div>
+                </div>
+                    <div>
+                        <h5>Select Categories</h5>
+                        <hr style={{backgroundColor:"white"}}/>
+                        <ul style={{ maxHeight: '170px', overflowY: 'scroll' }}>display categories</ul>
+                    </div>
+                    <div>
+                    <hr style={{backgroundColor:"white"}}/>
+                        <h5>Select Tags</h5>
+                        <hr style={{backgroundColor:"white"}}/>
+                        <ul style={{ maxHeight: '170px', overflowY: 'scroll' }}>display taglists</ul>
+
+                    </div>
+                </div>
+                <div className="col-md-8">
+                    Create Blog Form
+                    <p>Show Sucess and error Message</p>
+                    {/* {displayError()}
+                    {displaySuccess()}
+                    {createBlogForm()} */}
+                    {/* <hr />
+                    {JSON.stringify(title)}
+                    <hr />
+                    {JSON.stringify(body)}
+                    <hr />
+                    {JSON.stringify(categories)}
+                    <hr />
+                    {JSON.stringify(taglists)} */}
+                </div>
+            </div>
+        </div>
+    );
+}
+export default UpdateNewBlog;

client/pages/adminDashboard/update/[slug].js

@@ -0,0 +1,38 @@
+import Layout from "../../../components/Layout";
+import Admin from "../../../components/authentication/Admin";
+import UpdateNewBlog from "../../../components/update/UpdateNewBlog";
+
+import Link from "next/link";
+import CategoryIcon from '@material-ui/icons/Category';
+import AddIcon from '@material-ui/icons/Add';
+import LocalOfferIcon from '@material-ui/icons/LocalOffer';
+import BookIcon from '@material-ui/icons/Book';
+import PostAddIcon from '@material-ui/icons/PostAdd';
+// import MenuIcon from "@material-ui/icons/Menu";
+// import BigMenu from "@material-ui/icons/MenuIcons";
+
+
+const Createblog =() =>{
+    return(
+        <Layout>
+        <Admin>
+        <div className="container-fluid">
+        <div className="row">
+        <div className="col-md-12">
+        <h1 className="text-center">
+        <PostAddIcon style={{"color":"pink"}}/>
+        Update Blog
+        <BookIcon style={{"color":"teal"}}/>
+        </h1>
+        </div>
+        <div className="col-md-12">
+        <UpdateNewBlog/>
+        </div>
+        </div>
+        </div>
+        </Admin>
+        </Layout>
+    );
+}
+
+export default Createblog;

client/pages/adminDashboard/update/category-tag.js

@@ -27,7 +27,6 @@ const CategoryTag =() =>{
         <div className="col-md-6 pt-5 pb-5">
             <Tag/>
         </div>
-
         </div>
         </div>
         </Admin>