From 7687f7f511fdc241dde729b583d81f2eacea9433 Mon Sep 17 00:00:00 2001
From: jasirneoito <jasir@neoito.com>
Date: Wed, 12 Jan 2022 09:50:58 +0530
Subject: [PATCH] fix: blog status in admin page and drafted fillter added #633

fixed admin status and added drafted status filtter
---
 component/admin/AdminBlogsList.jsx | 51 +++++++++++++++++------
 component/admin/AdminNavbar.jsx    | 65 +++++++++++++++++-------------
 2 files changed, 74 insertions(+), 42 deletions(-)

diff --git a/component/admin/AdminBlogsList.jsx b/component/admin/AdminBlogsList.jsx
index eca932fd..953db6f8 100644
--- a/component/admin/AdminBlogsList.jsx
+++ b/component/admin/AdminBlogsList.jsx
@@ -14,7 +14,7 @@ export default function AdminBlogsList({ posts, updated }) {
    * @param {*} blog
    * @author athulraj2002
    * @returns null
-   * 
+   *
    */
   async function updatePostById(updateData, newPostId) {
     try {
@@ -24,18 +24,18 @@ export default function AdminBlogsList({ posts, updated }) {
       }
       updated();
     } catch (err) {
-      notify(err?.response?.data?.message ?? err?.message, 'error');
+      notify(err?.response?.data?.message ?? err?.message, "error");
     }
   }
 
   const approveBlog = async (blog) => {
     try {
       const newUpdatedPost = {
-        status: 'published',
+        status: "published"
       };
       updatePostById(blog.id, newUpdatedPost);
     } catch (err) {
-      notify(err?.response?.data?.message ?? err?.message, 'error');
+      notify(err?.response?.data?.message ?? err?.message, "error");
     }
   };
 
@@ -48,22 +48,22 @@ export default function AdminBlogsList({ posts, updated }) {
   const rejectBlog = async (blog) => {
     try {
       const newUpdatedPost = {
-        status: 'rejected',
+        status: "rejected"
       };
       updatePostById(blog.id, newUpdatedPost);
     } catch (err) {
-      notify(err?.response?.data?.message ?? err?.message, 'error');
+      notify(err?.response?.data?.message ?? err?.message, "error");
     }
   };
 
-  const unpublishBlog = async (blog) => {
+  const unPublishBlog = async (blog) => {
     try {
       const newUpdatedPost = {
-        status: 'pending',
+        status: "pending"
       };
       updatePostById(blog.id, newUpdatedPost);
     } catch (err) {
-      notify(err?.response?.data?.message ?? err?.message, 'error');
+      notify(err?.response?.data?.message ?? err?.message, "error");
     }
     // console.log(response);
   };
@@ -97,13 +97,37 @@ export default function AdminBlogsList({ posts, updated }) {
                     {moment(item.updated_at).format("LL")}
                     {" - "}
                     <Link href={`/u/${item.user.user_name}`}>
-                      <a className="text-blue-500">
-                        {item.user.user_name}
-                      </a>
+                      <a className="text-blue-500">{item.user.user_name}</a>
                     </Link>
                   </div>
                 </div>
                 <div className="flex items-center">
+                  <div
+                    className={`flex items-center w-32 justify-center rounded-full h-8 mr-3 ${
+                      item.status === "approved" && MyBlogsstyles.successBg
+                    } ${item.status === "pending" && MyBlogStyles.warningBg} ${
+                      item.status === "drafted" && MyBlogStyles.draftedBg
+                    } ${
+                      item.status === "published" && MyBlogStyles.publishedBg
+                    } ${item.status === "rejected" && MyBlogStyles.dangerBg}`}
+                  >
+                    <span
+                      className={`capitalize  ${
+                        item.status === "approved" && MyBlogStyles.successText
+                      } ${
+                        item.status === "pending" && MyBlogStyles.warningText
+                      } ${
+                        item.status === "drafted" && MyBlogStyles.draftedText
+                      } ${
+                        item.status === "published" &&
+                        MyBlogStyles.publishedText
+                      } ${
+                        item.status === "rejected" && MyBlogStyles.dangerText
+                      }`}
+                    >
+                      {item.status}
+                    </span>
+                  </div>
                   <Link
                     href={
                       item.status === "published"
@@ -127,6 +151,7 @@ export default function AdminBlogsList({ posts, updated }) {
                       </>
                     </div>
                   </Link>
+
                   {item.status == "published" ? (
                     <div
                       className={`flex items-center w-28 justify-center rounded-full h-8 mr-3  ${MyBlogStyles.publishedBg} `}
@@ -175,7 +200,7 @@ export default function AdminBlogsList({ posts, updated }) {
                   )}
                   {item.status == "published" && (
                     <div
-                      onClick={() => unpublishBlog(item)}
+                      onClick={() => unPublishBlog(item)}
                       className={`flex items-center w-28 justify-center rounded-full h-8 mr-3 cursor-pointer hover:opacity-50 duration-500 ${MyBlogStyles.warningBg} `}
                     >
                       <span
diff --git a/component/admin/AdminNavbar.jsx b/component/admin/AdminNavbar.jsx
index 4a07d8f1..5b80570b 100644
--- a/component/admin/AdminNavbar.jsx
+++ b/component/admin/AdminNavbar.jsx
@@ -4,19 +4,20 @@ import Select from "react-select";
 import styles from "../myblogs/blogs.module.scss";
 import TagService from "../../services/TagService";
 import notify from "../../lib/notify";
-import { useRouter } from 'next/router'
+import { useRouter } from "next/router";
 
 export default function AdminNavbar({ changeTag, changeStatus, event }) {
   const statusOptions = [
-    { label:event? "ALL EVENTS" : "ALL POSTS", value: "" },
+    { label: event ? "ALL EVENTS" : "ALL POSTS", value: "" },
     // { label: "APPROVED", value: "approved" },
     { label: "PENDING", value: "pending" },
     { label: "REJECTED", value: "rejected" },
     { label: "PUBLISHED", value: "published" },
+    { label: "DRAFTED", value: "drafted" }
   ];
   const [tagOptions, setTagOptions] = useState([]);
 
-  const router = useRouter()
+  const router = useRouter();
 
   useEffect(() => {
     getSettingsTags();
@@ -71,34 +72,40 @@ export default function AdminNavbar({ changeTag, changeStatus, event }) {
     <div className="bg-white flex flex-row items-center rounded shadow-sm h-sub-nav">
       <div className="flex flex-row justify-end items-center font-semibold h-full w-full md:px-5 px-3">
         <div className="flex items-center py-3">
-          {event ? " " :
-          <Select
-            options={tagOptions}
-            isMulti={false}
-            onChange={(e) => selectCategory(e)}
-            className={`basic-single postFilter m-0 outline-none focus:outline-none text-sm bg-gray-200 border rounded px-0 cursor-pointer md:mr-4 ${styles.min_w_10}`}
-            classNamePrefix="Category"
-            clearValue={() => undefined}
-            placeholder="Select Tag"
-            // closeMenuOnSelect={false}
-          />
-        }
-          {event ? "" :
-          <Select
-          options={statusOptions}
-          isMulti={false}
-          onChange={(e) => selectStatus(e)}
-          className={`basic-single postFilter md:block hidden m-0 outline-none focus:outline-none text-sm bg-gray-200 border rounded px-0 cursor-pointer  ${styles.min_w_10}`}
-          classNamePrefix="Blog Status"
-          clearValue={() => undefined}
-          placeholder="Select Status"
-          // closeMenuOnSelect={false}
-        />}
-          {router.pathname.split('/')[2] === 'events' && <div className="bg-black h-8 ml-4 hover:bg-white border border-black text-white hover:text-black hidden md:flex items-center text-sm font-semibold px-4 py-2 md:mr-3 rounded-sm cursor-pointer duration-700 blogs_h_40px__3sE3c">
+          {event ? (
+            " "
+          ) : (
+            <Select
+              options={tagOptions}
+              isMulti={false}
+              onChange={(e) => selectCategory(e)}
+              className={`basic-single postFilter m-0 outline-none focus:outline-none text-sm bg-gray-200 border rounded px-0 cursor-pointer md:mr-4 ${styles.min_w_10}`}
+              classNamePrefix="Category"
+              clearValue={() => undefined}
+              placeholder="Select Tag"
+              // closeMenuOnSelect={false}
+            />
+          )}
+          {event ? (
+            ""
+          ) : (
+            <Select
+              options={statusOptions}
+              isMulti={false}
+              onChange={(e) => selectStatus(e)}
+              className={`basic-single postFilter md:block hidden m-0 outline-none focus:outline-none text-sm bg-gray-200 border rounded px-0 cursor-pointer  ${styles.min_w_10}`}
+              classNamePrefix="Blog Status"
+              clearValue={() => undefined}
+              placeholder="Select Status"
+              // closeMenuOnSelect={false}
+            />
+          )}
+          {router.pathname.split("/")[2] === "events" && (
+            <div className="bg-black h-8 ml-4 hover:bg-white border border-black text-white hover:text-black hidden md:flex items-center text-sm font-semibold px-4 py-2 md:mr-3 rounded-sm cursor-pointer duration-700 blogs_h_40px__3sE3c">
               <a href="/admin/events/create-event">Create Event</a>
-            </div>}
+            </div>
+          )}
         </div>
-        
       </div>
     </div>
   );