deleting blogs from the client side

Author: pramit-marattha

client/components/update/ReadNewBlog.js

@@ -6,11 +6,68 @@ import {getCookie,isAuthenticated} from "../../actions/authentication";
 import {listingTheBlog,removingTheBlog,updatingTheBlog} from "../../actions/blog";
 import PublishIcon from '@material-ui/icons/Publish';
 import {ReactQuillModules,ReactQuillFormats} from "../../helpers/ReactQuill";
+import DeleteForeverIcon from '@material-ui/icons/DeleteForever';
+import moment from "moment";
 
 const ReadNewBlog = () => {
+    const [blogs,setBlogs] = useState([])
+    const [message,setMessage] = useState('')
+    const token = getCookie('token')
+
+    const loadBlogs = ()=>{
+        listingTheBlog().then(data=>{
+            if(data.error){
+                console.log(data.error)
+            } else{
+                setBlogs(data)
+            }
+        })
+    }
+    useEffect(()=>{
+        loadBlogs();
+    },[])
+
+    const deleteTheBlog =(slug)=>{
+        removingTheBlog(slug,token).then(data=>{
+            if(data.error){
+                console.log(data.error)
+            } else{
+                setMessage(data.message)
+                loadBlogs();
+            }
+        })
+    }
+
+    const deleteConfirmation =()=>{
+        let answer = window.confirm("Are you sure you want to delete this ?")
+        if (answer){
+            deleteTheBlog(slug)
+        }
+    }
+
+    const showingAllBlogs=()=>{
+        return blogs.map((blog,index)=>{
+            return (
+                <div key={index} className="mt-4 pb-5">
+                    <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>
+               
+                </div>
+            )
+        })
+    }
+
     return (
         <>
-            <p>Update Blogs</p>
+        <div className="container">
+            <div className="row">
+            <div className="col-md-12">
+                {message && <div className="alert alert-warning">{message}</div>}
+                {showingAllBlogs()}
+                </div>
+            </div>
+        </div>
         </>
     )
 }

client/pages/adminDashboard/update/editBlog.js

@@ -10,6 +10,7 @@ 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";
+import CreateIcon from '@material-ui/icons/Create';
 
 
 
@@ -21,9 +22,8 @@ const Editblog =() =>{
         <div className="row">
         <div className="col-md-12">
         <h1 className="text-center">
-        <PostAddIcon style={{"color":"pink"}}/>
-        Create a new blog
-        <BookIcon style={{"color":"teal"}}/>
+        Edit Blogs
+        <CreateIcon style={{"color":"teal"}}/>
         </h1>
         </div>
         <div className="col-md-12">