refactor: add useQuery to request getUsers endpoint (#3127)

* ✨ (use-get-users-page.ts): refactor useGetUserPage to useGetUsers for better naming consistency and clarity
🔧 (use-get-users-page.ts): update useGetUsers to accept options parameter for flexibility in mutation
🔧 (use-get-users-page.ts): refactor getUsersPage function to getUsers and update parameter name for clarity
🔧 (use-get-users-page.ts): update useGetUsers to use mutate function instead of query for mutation
🔧 (index.tsx): add useGetUsers import to AdminPage to fetch users data
🔧 (index.tsx): refactor getUsers function to use mutateGetUsers for fetching users data with options
🔧 (index.tsx): refactor handleChangePagination function to use mutateGetUsers for fetching users data with options
🔧 (index.tsx): update resetFilter function to use mutateGetUsers for fetching users data with options

* 🔧 (AdminPage/index.tsx): Remove loadingUsers state variable and related logic as it is no longer needed with the introduction of isPending variable from useGetUsers hook. Update related logic to use isPending variable instead of loadingUsers variable.

---------

Co-authored-by: anovazzi1 <otavio2204@gmail.com>

src/frontend/src/controllers/API/queries/auth/use-get-users-page.ts

@@ -1,21 +1,27 @@
-import { keepPreviousData } from "@tanstack/react-query";
-import { Users, useQueryFunctionType } from "../../../../types/api";
+import { keepPreviousData, UseMutationResult } from "@tanstack/react-query";
+import {
+  useMutationFunctionType,
+  useQueryFunctionType,
+  Users,
+} from "../../../../types/api";
 import { api } from "../../api";
 import { getURL } from "../../helpers/constants";
 import { UseRequestProcessor } from "../../services/request-processor";
 
-interface getUsersPageQueryParams {
+interface getUsersQueryParams {
   skip: number;
   limit: number;
 }
 
-export const useGetUserPage: useQueryFunctionType<
-  getUsersPageQueryParams,
-  Users
-> = ({ skip, limit }) => {
-  const { query } = UseRequestProcessor();
+export const useGetUsers: useMutationFunctionType<any, getUsersQueryParams> = (
+  options?,
+) => {
+  const { mutate } = UseRequestProcessor();
 
-  async function getUsersPage(): Promise<Array<Users>> {
+  async function getUsers({
+    skip,
+    limit,
+  }: getUsersQueryParams): Promise<Array<Users>> {
     const res = await api.get(
       `${getURL("USERS")}/?skip=${skip}&limit=${limit}`,
     );
@@ -25,9 +31,11 @@ export const useGetUserPage: useQueryFunctionType<
     return [];
   }
 
-  const queryResult = query(["useGetUserPage"], getUsersPage, {
-    placeholderData: keepPreviousData,
-  });
+  const mutation: UseMutationResult<
+    getUsersQueryParams,
+    any,
+    getUsersQueryParams
+  > = mutate(["useRefreshAccessToken"], getUsers, options);
 
-  return queryResult;
+  return mutation;
 };

src/frontend/src/pages/AdminPage/index.tsx

@@ -1,6 +1,7 @@
 import {
   useAddUser,
   useDeleteUsers,
+  useGetUsers,
   useUpdateUser,
 } from "@/controllers/API/queries/auth";
 import { cloneDeep } from "lodash";
@@ -34,7 +35,6 @@ import {
   ADMIN_HEADER_TITLE,
 } from "../../constants/constants";
 import { AuthContext } from "../../contexts/authContext";
-import { getUsersPage } from "../../controllers/API";
 import ConfirmationModal from "../../modals/confirmationModal";
 import UserManagementModal from "../../modals/userManagementModal";
 import useAlertStore from "../../stores/alertStore";
@@ -47,7 +47,6 @@ export default function AdminPage() {
 
   const [size, setPageSize] = useState(12);
   const [index, setPageIndex] = useState(1);
-  const [loadingUsers, setLoadingUsers] = useState(true);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const { userData } = useContext(AuthContext);
@@ -75,39 +74,47 @@ export default function AdminPage() {
 
   const [filterUserList, setFilterUserList] = useState(userList.current);
 
+  const { mutate: mutateGetUsers, isPending } = useGetUsers({});
+
   function getUsers() {
-    setLoadingUsers(true);
-    getUsersPage(index - 1, size)
-      .then((users) => {
-        setTotalRowsCount(users["total_count"]);
-        userList.current = users["users"];
-        setFilterUserList(users["users"]);
-        setLoadingUsers(false);
-      })
-      .catch((error) => {
-        setLoadingUsers(false);
-      });
+    mutateGetUsers(
+      {
+        skip: size * (index - 1),
+        limit: size,
+      },
+      {
+        onSuccess: (users) => {
+          setTotalRowsCount(users["total_count"]);
+          userList.current = users["users"];
+          setFilterUserList(users["users"]);
+        },
+        onError: () => {},
+      },
+    );
   }
 
   function handleChangePagination(pageIndex: number, pageSize: number) {
-    setLoadingUsers(true);
     setPageSize(pageSize);
     setPageIndex(pageIndex);
-    getUsersPage(pageSize * (pageIndex - 1), pageSize)
-      .then((users) => {
-        setTotalRowsCount(users["total_count"]);
-        userList.current = users["users"];
-        setFilterUserList(users["users"]);
-        setLoadingUsers(false);
-      })
-      .catch((error) => {
-        setLoadingUsers(false);
-      });
+
+    mutateGetUsers(
+      {
+        skip: pageSize * (pageIndex - 1),
+        limit: pageSize,
+      },
+      {
+        onSuccess: (users) => {
+          setTotalRowsCount(users["total_count"]);
+          userList.current = users["users"];
+          setFilterUserList(users["users"]);
+        },
+      },
+    );
   }
 
   function resetFilter() {
     setPageIndex(1);
-    setPageSize(10);
+    setPageSize(12);
     getUsers();
   }
 
@@ -302,7 +309,7 @@ export default function AdminPage() {
               </UserManagementModal>
             </div>
           </div>
-          {loadingUsers ? (
+          {isPending ? (
             <div className="flex h-full w-full items-center justify-center">
               <LoadingComponent remSize={12} />
             </div>
@@ -317,13 +324,13 @@ export default function AdminPage() {
               <div
                 className={
                   "m-4 h-full overflow-x-hidden overflow-y-scroll rounded-md border-2 bg-background custom-scroll" +
-                  (loadingUsers ? " border-0" : "")
+                  (isPending ? " border-0" : "")
                 }
               >
                 <Table className={"table-fixed outline-1"}>
                   <TableHeader
                     className={
-                      loadingUsers ? "hidden" : "table-fixed bg-muted outline-1"
+                      isPending ? "hidden" : "table-fixed bg-muted outline-1"
                     }
                   >
                     <TableRow>
@@ -336,7 +343,7 @@ export default function AdminPage() {
                       <TableHead className="h-10 w-[100px] text-right"></TableHead>
                     </TableRow>
                   </TableHeader>
-                  {!loadingUsers && (
+                  {!isPending && (
                     <TableBody>
                       {filterUserList.map((user: UserInputType, index) => (
                         <TableRow key={index}>