feat: adds pagination in users table

frontend/src/pages/admin/AccessManagementPage/components/ServerAdminsTable.tsx

@@ -11,7 +11,6 @@ import {
   faXmark
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { InfiniteData } from "@tanstack/react-query";
 import { twMerge } from "tailwind-merge";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
@@ -28,6 +27,7 @@ import {
   EmptyState,
   IconButton,
   Input,
+  Pagination,
   Table,
   TableContainer,
   TableSkeleton,
@@ -39,13 +39,19 @@ import {
   Tr
 } from "@app/components/v2";
 import { useSubscription, useUser } from "@app/context";
-import { useDebounce, usePopUp } from "@app/hooks";
+import {
+  getUserTablePreference,
+  PreferenceKey,
+  setUserTablePreference
+} from "@app/helpers/userTablePreferences";
+import { useDebounce, usePagination, usePopUp } from "@app/hooks";
 import {
   useAdminBulkDeleteUsers,
   useAdminDeleteUser,
   useAdminGetUsers,
   useRemoveUserServerAdminAccess
 } from "@app/hooks/api";
+import { AdminUsersOrderBy } from "@app/hooks/api/admin/types";
 import { User } from "@app/hooks/api/users/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 import { AddServerAdminModal } from "@app/pages/admin/AccessManagementPage/components/AddServerAdminModal";
@@ -54,15 +60,17 @@ const removeServerAdminUpgradePlanMessage = "Removing Server Admin permissions f
 
 const ServerAdminsPanelTable = ({
   handlePopUpOpen,
-  users: usersPages,
+  users,
   isPending,
   searchUserFilter,
   setSearchUserFilter,
-  isFetchingNextPage,
-  fetchNextPage,
-  hasNextPage,
   selectedUsers,
-  setSelectedUsers
+  setSelectedUsers,
+  totalCount,
+  page,
+  perPage,
+  setPage,
+  handlePerPageChange
 }: {
   handlePopUpOpen: (
     popUpName: keyof UsePopUpState<
@@ -75,20 +83,20 @@ const ServerAdminsPanelTable = ({
     }
   ) => void;
   isPending: boolean;
-  users: InfiniteData<User[], unknown> | undefined;
+  users?: User[];
   searchUserFilter: string;
   setSearchUserFilter: (filter: string) => void;
   selectedUsers: User[];
   setSelectedUsers: Dispatch<SetStateAction<User[]>>;
-  isFetchingNextPage: boolean;
-  fetchNextPage: () => void;
-  hasNextPage: boolean;
+  totalCount: number;
+  page: number;
+  perPage: number;
+  setPage: Dispatch<SetStateAction<number>>;
+  handlePerPageChange: (newPerPage: number) => void;
 }) => {
   const { subscription } = useSubscription();
 
-  const users = usersPages?.pages.flat();
-
-  const isEmpty = !isPending && !users?.length;
+  const isEmpty = !isPending && totalCount === 0;
 
   const selectedUserIds = selectedUsers.map((user) => user.id);
 
@@ -241,16 +249,13 @@ const ServerAdminsPanelTable = ({
           {!isPending && isEmpty && <EmptyState title="No users found" icon={faUsers} />}
         </TableContainer>
         {!isEmpty && (
-          <Button
-            className="mt-4 py-3 text-sm"
-            isFullWidth
-            variant="outline_bg"
-            isLoading={isFetchingNextPage}
-            isDisabled={isFetchingNextPage || !hasNextPage}
-            onClick={() => fetchNextPage()}
-          >
-            {hasNextPage ? "Load More" : "End of List"}
-          </Button>
+          <Pagination
+            count={totalCount}
+            page={page}
+            perPage={perPage}
+            onChangePage={(newPage) => setPage(newPage)}
+            onChangePerPage={handlePerPageChange}
+          />
         )}
       </div>
     </>
@@ -278,18 +283,27 @@ export const ServerAdminsTable = () => {
   const [searchUserFilter, setSearchUserFilter] = useState("");
   const [debouncedSearchTerm] = useDebounce(searchUserFilter, 500);
 
-  const {
-    data: users,
-    isPending,
-    isFetchingNextPage,
-    hasNextPage,
-    fetchNextPage
-  } = useAdminGetUsers({
-    limit: 20,
+  const { offset, limit, setPage, perPage, page, setPerPage } = usePagination<AdminUsersOrderBy>(
+    AdminUsersOrderBy.Username,
+    {
+      initPerPage: getUserTablePreference("ServerAdminUsersTable", PreferenceKey.PerPage, 20)
+    }
+  );
+
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage);
+    setUserTablePreference("ServerAdminUsersTable", PreferenceKey.PerPage, newPerPage);
+  };
+
+  const { data, isPending } = useAdminGetUsers({
+    limit,
+    offset,
     searchTerm: debouncedSearchTerm,
     adminsOnly: true
   });
 
+  const { users = [], totalCount = 0 } = data ?? {};
+
   const handleRemoveUser = async () => {
     const { id } = popUp?.removeUser?.data as { id: string; username: string };
 
@@ -389,9 +403,11 @@ export const ServerAdminsTable = () => {
           searchUserFilter={searchUserFilter}
           setSearchUserFilter={setSearchUserFilter}
           isPending={isPending}
-          isFetchingNextPage={isFetchingNextPage}
-          hasNextPage={hasNextPage}
-          fetchNextPage={fetchNextPage}
+          page={page}
+          perPage={perPage}
+          setPage={setPage}
+          handlePerPageChange={handlePerPageChange}
+          totalCount={totalCount}
         />
         <DeleteActionModal
           isOpen={popUp.removeUser.isOpen}