Merge pull request #10 from iambpn/dev

fixing pagination issue in frontend

backend/Readme.md

@@ -334,6 +334,7 @@ type AuthsRequestUser<T = Record<string, any>>
   - **Breaking**: `AUTHS_DB_DRIVER` env variable is now required.
 - 2.0.1 (Pending Release)
   - Exposed `getUserById` function for backend system interactions
+  - [Bug Fix] - Adding missing pagination in frontend
 
 ## Examples
 

backend/src/utils/helper/parsePagination.ts

@@ -13,6 +13,6 @@ export const PaginatedResponse = (totalCount: number, paginationQuery: ReturnTyp
     totalCount: totalCount,
     currentPage: skip / limit,
     pageSize: limit,
-    totalPage: totalPage - 1,
+    totalPage: totalPage,
   };
 };

frontend/src/components/addPagination.tsx

@@ -0,0 +1,93 @@
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination";
+
+type Props = {
+  totalPage: number;
+  currentPage: number;
+  setPage: (page: number) => void;
+};
+
+export function AddPagination(props: Props) {
+  const paginationTags = () => {
+    const start = props.currentPage - 3 <= 0 ? 0 : props.currentPage - 3;
+    let limit = 0;
+
+    // current page is 0 and total page is greater than 7
+    if (props.currentPage <= 0 && props.totalPage > 7) {
+      limit = props.currentPage + 7;
+    }
+    // current page is 0 and total page is greater than 7
+    else if (props.currentPage <= 0 && props.totalPage < 7) {
+      limit = props.totalPage;
+    }
+    // total page is greater than current page + 4
+    else if (props.totalPage > props.currentPage + 4) {
+      limit = props.currentPage + 4;
+    } else {
+      limit = props.totalPage;
+    }
+
+    const setPage = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>, page: number) => {
+      event.preventDefault();
+      props.setPage(page);
+    };
+
+    const pagination_elements = [
+      <PaginationItem key={"prev"}>
+        <PaginationPrevious className='cursor-pointer' onClick={(e) => setPage(e, props.currentPage > 0 ? props.currentPage - 1 : 0)} />
+      </PaginationItem>,
+    ];
+
+    if (props.currentPage > 3) {
+      pagination_elements.push(
+        <PaginationItem key={"prev_ellipsis"}>
+          <PaginationEllipsis />
+        </PaginationItem>
+      );
+    }
+
+    for (let i = start; i < limit; i++) {
+      pagination_elements.push(
+        <PaginationItem key={i}>
+          <PaginationLink className='cursor-pointer' onClick={(e) => setPage(e, i)} isActive={i === props.currentPage}>
+            {i + 1}
+          </PaginationLink>
+        </PaginationItem>
+      );
+    }
+
+    if (props.totalPage > limit) {
+      pagination_elements.push(
+        <PaginationItem key={"next_ellipsis"}>
+          <PaginationEllipsis />
+        </PaginationItem>
+      );
+    }
+
+    pagination_elements.push(
+      <PaginationItem key={"next"}>
+        <PaginationNext
+          className='cursor-pointer'
+          onClick={(e) => setPage(e, props.currentPage < props.totalPage - 1 ? props.currentPage + 1 : props.totalPage - 1)}
+        />
+      </PaginationItem>
+    );
+
+    return pagination_elements;
+  };
+
+  return (
+    <div className=''>
+      <Pagination>
+        <PaginationContent>{paginationTags()}</PaginationContent>
+      </Pagination>
+    </div>
+  );
+}

frontend/src/components/ui/pagination.tsx

@@ -0,0 +1,121 @@
+import * as React from "react"
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  DotsHorizontalIcon,
+} from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+import { ButtonProps, buttonVariants } from "@/components/ui/button"
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+))
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronLeftIcon className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRightIcon className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <DotsHorizontalIcon className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+}

frontend/src/pages/afterLogin/dashboard/permission/index.tsx

@@ -1,3 +1,4 @@
+import { AddPagination } from "@/components/addPagination";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -17,7 +18,7 @@ import { handleError } from "@/lib/handleError";
 import { NavName } from "@/lib/navName";
 import { useAppStore } from "@/store/useAppStore";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { BiEditAlt } from "react-icons/bi";
 import { IoMdAdd } from "react-icons/io";
 import { MdDeleteOutline } from "react-icons/md";
@@ -29,14 +30,16 @@ export function ListPermission() {
   const updateActiveNavLink = useAppStore((state) => state.setActiveNav);
   const queryClient = useQueryClient();
 
+  const [page, setPage] = useState(0);
+
   useEffect(() => {
     updateActiveNavLink(NavName.permission);
   }, []);
 
   const permissionQuery = useQuery<APIResponse.Permission["GET-/"]>({
-    queryKey: ["permission"],
+    queryKey: ["permission", { page }],
     queryFn: async () => {
-      const res = await axiosInstance.get("/permission?page=0&limit=10");
+      const res = await axiosInstance.get(`/permission?page=${[page]}&limit=10`);
       return res.data;
     },
   });
@@ -130,7 +133,9 @@ export function ListPermission() {
                                 <AlertDialogTitle>
                                   Are you sure, You want to delete <span className='capitalize'>`{permission.name}`</span> permission?
                                 </AlertDialogTitle>
-                                <AlertDialogDescription>This action cannot be undone. This will permanently delete selected permission from our database.</AlertDialogDescription>
+                                <AlertDialogDescription>
+                                  This action cannot be undone. This will permanently delete selected permission from our database.
+                                </AlertDialogDescription>
                               </AlertDialogHeader>
                               <AlertDialogFooter>
                                 <AlertDialogCancel>Cancel</AlertDialogCancel>
@@ -149,6 +154,9 @@ export function ListPermission() {
               ))}
           </TableBody>
         </Table>
+        {permissionQuery.data && permissionQuery.data.permissions.length > 0 && (
+          <AddPagination currentPage={permissionQuery.data.currentPage} totalPage={permissionQuery.data.totalPage} setPage={setPage} />
+        )}
       </div>
     </div>
   );

frontend/src/pages/afterLogin/dashboard/role/index.tsx

@@ -1,3 +1,4 @@
+import { AddPagination } from "@/components/addPagination";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -17,7 +18,7 @@ import { handleError } from "@/lib/handleError";
 import { NavName } from "@/lib/navName";
 import { useAppStore } from "@/store/useAppStore";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { BiEditAlt } from "react-icons/bi";
 import { IoMdAdd } from "react-icons/io";
 import { MdDeleteOutline } from "react-icons/md";
@@ -29,14 +30,16 @@ export function ListRoles() {
   const updateActiveNavLink = useAppStore((state) => state.setActiveNav);
   const queryClient = useQueryClient();
 
+  const [page, setPage] = useState(0);
+
   useEffect(() => {
     updateActiveNavLink(NavName.roles);
   }, []);
 
   const rolesQuery = useQuery<APIResponse.Roles["GET-/"]>({
-    queryKey: ["roles"],
+    queryKey: ["roles", { page }],
     queryFn: async () => {
-      const res = await axiosInstance.get("/roles?page=0&limit=10");
+      const res = await axiosInstance.get(`/roles?page=${page}&limit=10`);
       return res.data;
     },
   });
@@ -130,7 +133,9 @@ export function ListRoles() {
                                 <AlertDialogTitle>
                                   Are you sure, You want to delete <span className='capitalize'>`{role.name}`</span> role?
                                 </AlertDialogTitle>
-                                <AlertDialogDescription>This action cannot be undone. This will permanently delete selected role from our database.</AlertDialogDescription>
+                                <AlertDialogDescription>
+                                  This action cannot be undone. This will permanently delete selected role from our database.
+                                </AlertDialogDescription>
                               </AlertDialogHeader>
                               <AlertDialogFooter>
                                 <AlertDialogCancel>Cancel</AlertDialogCancel>
@@ -149,6 +154,9 @@ export function ListRoles() {
               ))}
           </TableBody>
         </Table>
+        {rolesQuery.data && rolesQuery.data.roles.length > 0 && (
+          <AddPagination currentPage={rolesQuery.data.currentPage} totalPage={rolesQuery.data.totalPage} setPage={setPage} />
+        )}
       </div>
     </div>
   );

frontend/src/pages/afterLogin/dashboard/users/index.tsx

@@ -1,3 +1,4 @@
+import { AddPagination } from "@/components/addPagination";
 import { AvatarComponent } from "@/components/avatar/avatar.component";
 import {
   AlertDialog,
@@ -18,7 +19,7 @@ import { handleError } from "@/lib/handleError";
 import { NavName } from "@/lib/navName";
 import { useAppStore } from "@/store/useAppStore";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { BiEditAlt } from "react-icons/bi";
 import { IoMdAdd } from "react-icons/io";
 import { MdDeleteOutline } from "react-icons/md";
@@ -29,16 +30,18 @@ export function Users() {
   // update Permission Nav Selection
   const updateActiveNavLink = useAppStore((state) => state.setActiveNav);
 
+  const [page, setPage] = useState(0);
+
   const queryClient = useQueryClient();
 
   useEffect(() => {
     updateActiveNavLink(NavName.users);
   }, []);
 
   const UsersQuery = useQuery<APIResponse.Users["GET-/"]>({
-    queryKey: ["users"],
+    queryKey: ["users", { page }],
     queryFn: async () => {
-      const res = await axiosInstance.get("/users?page=0&limit=10");
+      const res = await axiosInstance.get(`/users?page=${page}&limit=10`);
       return res.data;
     },
   });
@@ -157,6 +160,9 @@ export function Users() {
               ))}
           </TableBody>
         </Table>
+        {UsersQuery.data && UsersQuery.data.users.length > 0 && (
+          <AddPagination currentPage={UsersQuery.data.currentPage} totalPage={UsersQuery.data.totalPage} setPage={setPage} />
+        )}
       </div>
     </div>
   );