From df502f7b9cb9698262e61ef065d22c0c45b59cc5 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa <72977554+Cristhianzl@users.noreply.github.com> Date: Thu, 1 Aug 2024 17:26:40 -0300 Subject: [PATCH] refactor: add useQuery to request getUsers endpoint (#3127) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ✨ (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 --- .../API/queries/auth/use-get-users-page.ts | 34 ++++++---- src/frontend/src/pages/AdminPage/index.tsx | 65 ++++++++++--------- 2 files changed, 57 insertions(+), 42 deletions(-) diff --git a/src/frontend/src/controllers/API/queries/auth/use-get-users-page.ts b/src/frontend/src/controllers/API/queries/auth/use-get-users-page.ts index 96a0e9ada..e35276c94 100644 --- a/src/frontend/src/controllers/API/queries/auth/use-get-users-page.ts +++ b/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 = ( + options?, +) => { + const { mutate } = UseRequestProcessor(); - async function getUsersPage(): Promise> { + async function getUsers({ + skip, + limit, + }: getUsersQueryParams): Promise> { 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; }; diff --git a/src/frontend/src/pages/AdminPage/index.tsx b/src/frontend/src/pages/AdminPage/index.tsx index 8a7912674..e715340d4 100644 --- a/src/frontend/src/pages/AdminPage/index.tsx +++ b/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() { - {loadingUsers ? ( + {isPending ? (
@@ -317,13 +324,13 @@ export default function AdminPage() {
@@ -336,7 +343,7 @@ export default function AdminPage() { - {!loadingUsers && ( + {!isPending && ( {filterUserList.map((user: UserInputType, index) => (