From a155310a74b68360591139a4e2324340534e9dae Mon Sep 17 00:00:00 2001
From: Izam Mohammed <izamdeveloper1@gmail.com>
Date: Sun, 10 Mar 2024 17:22:47 +0530
Subject: [PATCH] feat: added the pagination to admin

---
 client/src/Services/bodyServices.js           |   4 +-
 client/src/Services/rightServices.js          |  75 ++++++----
 client/src/pages/AdminPages/MyBody/MyBody.jsx |  31 +++-
 client/src/pages/AdminPages/Rights/Rights.jsx | 141 +++++++++++-------
 4 files changed, 159 insertions(+), 92 deletions(-)

diff --git a/client/src/Services/bodyServices.js b/client/src/Services/bodyServices.js
index 950d103..c18b823 100644
--- a/client/src/Services/bodyServices.js
+++ b/client/src/Services/bodyServices.js
@@ -1,8 +1,8 @@
 import thaliaAPI from "../API/thaliaAPI";
 
-export const getTopics = async () => {
+export const getTopics = async (page) => {
     try {
-        const response = await thaliaAPI.get("/admin/my-body", { withCredentials: true });
+        const response = await thaliaAPI.get(`/admin/my-body?page=${page}`, { withCredentials: true });
         return response.data;
     } catch (error) {
         return error;
diff --git a/client/src/Services/rightServices.js b/client/src/Services/rightServices.js
index 4056d45..7005fb5 100644
--- a/client/src/Services/rightServices.js
+++ b/client/src/Services/rightServices.js
@@ -1,37 +1,48 @@
 import thaliaAPI from "../API/thaliaAPI";
 
 export const createRight = async (rightDetails) => {
-    try {
-        const response = await thaliaAPI.post("/admin/rights", rightDetails, { withCredentials: true });
-        return response.data;
-    } catch (error) {
-        return error;
-    }
-}
+  try {
+    const response = await thaliaAPI.post("/admin/rights", rightDetails, {
+      withCredentials: true,
+    });
+    return response.data;
+  } catch (error) {
+    return error;
+  }
+};
 export const editRight = async (rightDetails, rightId) => {
-    try {
-        const response = await thaliaAPI.put(`/admin/rights/${rightId}`, rightDetails, { withCredentials: true });
-        return response.data;
-    } catch (error) {
-        return error;
-    }
-}
-export const getRight = async () => {
-    try {
-        const response = await thaliaAPI.get('/admin/rights', {}, { withCredentials: true });
-        return response.data;
-    } catch (error) {
-        return error;
-    }
-}
+  try {
+    const response = await thaliaAPI.put(
+      `/admin/rights/${rightId}`,
+      rightDetails,
+      { withCredentials: true }
+    );
+    return response.data;
+  } catch (error) {
+    return error;
+  }
+};
+export const getRight = async (page) => {
+  try {
+    const response = await thaliaAPI.get(
+      `/admin/rights?page=${page}`,
+      {},
+      { withCredentials: true }
+    );
+    return response.data;
+  } catch (error) {
+    return error;
+  }
+};
 export const getDelete = async (rightId) => {
-    try {
-        const response = await thaliaAPI.delete(`/admin/rights/${rightId}`, {}, { withCredentials: true });
-        return response.data;
-    } catch (error) {
-        return error;
-    }
-}
-
-
-
+  try {
+    const response = await thaliaAPI.delete(
+      `/admin/rights/${rightId}`,
+      {},
+      { withCredentials: true }
+    );
+    return response.data;
+  } catch (error) {
+    return error;
+  }
+};
diff --git a/client/src/pages/AdminPages/MyBody/MyBody.jsx b/client/src/pages/AdminPages/MyBody/MyBody.jsx
index 4c0ad6b..7287075 100644
--- a/client/src/pages/AdminPages/MyBody/MyBody.jsx
+++ b/client/src/pages/AdminPages/MyBody/MyBody.jsx
@@ -5,10 +5,14 @@ import { getTopics } from "../../../Services/bodyServices";
 import { deleteBody } from "../../../Services/bodyServices";
 import timeFormat from "../../../utils/timeFormat";
 import { toast } from "react-toastify";
+import { Pagination } from "flowbite-react";
+import Swal from "sweetalert2";
 
 function MyBody() {
   const [openModal, setOpenModal] = useState(false);
   const [bodyDeatails, setBodyDetails] = useState([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [count, setCount] = useState(0);
 
   const [editBody, setEditBody] = useState();
   const [editModal, setEditModal] = useState(false);
@@ -16,6 +20,7 @@ function MyBody() {
   const handleModal = () => {
     setOpenModal(true);
   };
+  const onPageChange = (page) => setCurrentPage(page);
   const handleEditModal = (bodyId) => {
     setEditModal(true);
     const bodyToEdit = bodyDeatails.find((body) => {
@@ -25,9 +30,10 @@ function MyBody() {
   };
   useEffect(() => {
     const getData = async () => {
-      const response = await getTopics();
+      const response = await getTopics(currentPage);
       if (response.success === true) {
         setBodyDetails(response.contents);
+        setCount(response.count)
       }
     };
     getData();
@@ -38,6 +44,7 @@ function MyBody() {
     setEditModal,
     editModal,
     setEditBody,
+    currentPage
   ]);
   const handleDelete = async (bodyId) => {
     const response = await deleteBody(bodyId);
@@ -115,7 +122,18 @@ function MyBody() {
                           </button>
                           <button
                             className="border py-1 px-6 rounded ml-2 hover:bg-red-700"
-                            onClick={() => handleDelete(data?._id)}
+                            onClick={() => {
+                              Swal.fire({
+                                title: "Are you sure",
+                                text: "are you sure wan't to delete this",
+                                showCancelButton: true,
+                                confirmButtonText:"delete"
+                              }).then((result) => {
+                                if (result.isConfirmed) {
+                                  handleDelete(data?._id);
+                                }
+                              });
+                            }}
                           >
                             Delete
                           </button>
@@ -127,6 +145,15 @@ function MyBody() {
               })}
             </table>
           </div>
+          <div className="flex z-20 mypage overflow-x-auto w-[80%] sm:justify-end">
+              {count > 10 && (
+                <Pagination
+                  currentPage={currentPage}
+                  totalPages={Math.ceil(count / 10)}
+                  onPageChange={onPageChange}
+                />
+              )}
+            </div>
         </div>
       </div>
     </>
diff --git a/client/src/pages/AdminPages/Rights/Rights.jsx b/client/src/pages/AdminPages/Rights/Rights.jsx
index f963f04..94cb7f4 100644
--- a/client/src/pages/AdminPages/Rights/Rights.jsx
+++ b/client/src/pages/AdminPages/Rights/Rights.jsx
@@ -5,6 +5,8 @@ import { getRight } from "../../../Services/rightServices";
 import { getDelete } from "../../../Services/rightServices";
 import timeFormat from "../../../utils/timeFormat";
 import { toast } from "react-toastify";
+import { Pagination } from "flowbite-react";
+import Swal from "sweetalert2";
 
 function Rights() {
   const [openModal, setOpenModal] = useState(false);
@@ -12,6 +14,10 @@ function Rights() {
 
   const [editRight, setEditRight] = useState();
   const [editModal, setEditModal] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [count, setCount] = useState(0);
+
+  const onPageChange = (page) => setCurrentPage(page);
 
   const handleModal = () => {
     setOpenModal(true);
@@ -25,8 +31,11 @@ function Rights() {
   };
   useEffect(() => {
     const getRights = async () => {
-      const response = await getRight();
-      setRightDetails(response.rights);
+      const response = await getRight(currentPage);
+      if (response.success) {
+        setRightDetails(response.rights);
+        setCount(response.count);
+      }
     };
     getRights();
   }, [
@@ -36,6 +45,7 @@ function Rights() {
     editModal,
     setRightDetails,
     setEditRight,
+    currentPage,
   ]);
   const handleDelete = async (rightId) => {
     const response = await getDelete(rightId);
@@ -72,60 +82,79 @@ function Rights() {
           </div>
           {/* Table Component  */}
           <div>
-            <>
-              <table className="w-full text-sm text-left rtl:text-right rounded">
-                <thead className="text-xs bg-secondary rounded">
-                  <tr>
-                    <th scope="col" className="px-6 py-3 text-primary">
-                      No
-                    </th>
-                    <th scope="col" className="px-6 py-3 text-primary">
-                      Name
-                    </th>
-                    <th scope="col" className="px-6 py-3 text-primary">
-                      Date
-                    </th>
-                    <th
-                      scope="col"
-                      className="px-6 py-3 text-primary text-center"
-                    >
-                      Edit or Delete
-                    </th>
-                  </tr>
-                </thead>
-                {rightDetails.map((right, index) => {
-                  return (
-                    <>
-                      <tbody className="text-text" key={index}>
-                        <tr className="border-b border-gray-600">
-                          <th scope="row" className="px-6 py-4 font-medium">
-                            {index + 1}
-                          </th>
-                          <td className="px-6 py-4">{right?.name}</td>
-                          <td className="px-6 py-4">
-                            {timeFormat(right?.createdAt)}
-                          </td>
-                          <td className="px-6 py-4 flex justify-center">
-                            <button
-                              className="border py-1 px-6 rounded hover:bg-green-500"
-                              onClick={() => handleEditModal(right?._id)}
-                            >
-                              Edit
-                            </button>
-                            <button
-                              className="border py-1 px-6 rounded ml-2 hover:bg-red-700"
-                              onClick={() => handleDelete(right?._id)}
-                            >
-                              Delete
-                            </button>
-                          </td>
-                        </tr>
-                      </tbody>
-                    </>
-                  );
-                })}
-              </table>
-            </>
+            <table className="w-full text-sm text-left rtl:text-right rounded">
+              <thead className="text-xs bg-secondary rounded">
+                <tr>
+                  <th scope="col" className="px-6 py-3 text-primary">
+                    No
+                  </th>
+                  <th scope="col" className="px-6 py-3 text-primary">
+                    Name
+                  </th>
+                  <th scope="col" className="px-6 py-3 text-primary">
+                    Date
+                  </th>
+                  <th
+                    scope="col"
+                    className="px-6 py-3 text-primary text-center"
+                  >
+                    Edit or Delete
+                  </th>
+                </tr>
+              </thead>
+              {rightDetails.map((right, index) => {
+                return (
+                  <>
+                    <tbody className="text-text" key={index}>
+                      <tr className="border-b border-gray-600">
+                        <th scope="row" className="px-6 py-4 font-medium">
+                          {index + 1}
+                        </th>
+                        <td className="px-6 py-4">{right?.name}</td>
+                        <td className="px-6 py-4">
+                          {timeFormat(right?.createdAt)}
+                        </td>
+                        <td className="px-6 py-4 flex justify-center">
+                          <button
+                            className="border py-1 px-6 rounded hover:bg-green-500"
+                            onClick={() => handleEditModal(right?._id)}
+                          >
+                            Edit
+                          </button>
+                          <button
+                            className="border py-1 px-6 rounded ml-2 hover:bg-red-700"
+                            onClick={() => {
+                              Swal.fire({
+                                title: "Are you sure",
+                                text: "are you sure wan't to delete this",
+                                showCancelButton: true,
+                                confirmButtonText:"delete"
+                              }).then((result) => {
+                                if (result.isConfirmed) {
+                                  handleDelete(right?._id);
+                                }
+                              });
+                            }}
+                          >
+                            Delete
+                          </button>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </>
+                );
+              })}
+            </table>
+
+            <div className="flex z-20 mypage overflow-x-auto w-[80%] sm:justify-end">
+              {count > 0 && (
+                <Pagination
+                  currentPage={currentPage}
+                  totalPages={Math.ceil(count / 10)}
+                  onPageChange={onPageChange}
+                />
+              )}
+            </div>
           </div>
         </div>
       </div>