refactor(web): rewrite useAdminAppAuthClient with react-query (#1690)

packages/web/src/components/AdminApplicationUpdateAuthClient/index.jsx

@@ -1,47 +1,58 @@
 import React, { useCallback, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import { useMutation } from '@apollo/client';
+
 import { UPDATE_APP_AUTH_CLIENT } from 'graphql/mutations/update-app-auth-client';
-import useAppAuthClient from 'hooks/useAppAuthClient.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
 import AdminApplicationAuthClientDialog from 'components/AdminApplicationAuthClientDialog';
+import useAdminAppAuthClient from 'hooks/useAdminAppAuthClient.ee';
+
 export default function AdminApplicationUpdateAuthClient(props) {
   const { application, onClose } = props;
   const { auth } = application;
-  const authFields = auth?.fields?.map((field) => ({
-    ...field,
-    required: false,
-  }));
   const formatMessage = useFormatMessage();
   const { clientId } = useParams();
-  const { appAuthClient, loading: loadingAuthClient } =
-    useAppAuthClient(clientId);
+
+  const { data: adminAppAuthClient, isLoading: isAdminAuthClientLoading } =
+    useAdminAppAuthClient(clientId);
+
   const [updateAppAuthClient, { loading: loadingUpdateAppAuthClient, error }] =
     useMutation(UPDATE_APP_AUTH_CLIENT, {
       refetchQueries: ['GetAppAuthClients'],
       context: { autoSnackbar: false },
     });
+
+  const authFields = auth?.fields?.map((field) => ({
+    ...field,
+    required: false,
+  }));
+
   const submitHandler = async (values) => {
-    if (!appAuthClient) {
+    if (!adminAppAuthClient) {
       return;
     }
+
     const { name, active, ...formattedAuthDefaults } = values;
+
     await updateAppAuthClient({
       variables: {
         input: {
-          id: appAuthClient.id,
+          id: adminAppAuthClient.data.id,
           name,
           active,
           formattedAuthDefaults,
         },
       },
     });
+
     onClose();
   };
+
   const getAuthFieldsDefaultValues = useCallback(() => {
     if (!authFields) {
       return {};
     }
+
     const defaultValues = {};
     authFields.forEach((field) => {
       if (field.value || field.type !== 'string') {
@@ -52,25 +63,27 @@ export default function AdminApplicationUpdateAuthClient(props) {
     });
     return defaultValues;
   }, [auth?.fields]);
+
   const defaultValues = useMemo(
     () => ({
-      name: appAuthClient?.name || '',
-      active: appAuthClient?.active || false,
+      name: adminAppAuthClient?.data?.name || '',
+      active: adminAppAuthClient?.data?.active || false,
       ...getAuthFieldsDefaultValues(),
     }),
-    [appAuthClient, getAuthFieldsDefaultValues],
+    [adminAppAuthClient, getAuthFieldsDefaultValues],
   );
+
   return (
     <AdminApplicationAuthClientDialog
       onClose={onClose}
       error={error}
       title={formatMessage('updateAuthClient.title')}
-      loading={loadingAuthClient}
+      loading={isAdminAuthClientLoading}
       submitHandler={submitHandler}
       authFields={authFields}
       submitting={loadingUpdateAppAuthClient}
       defaultValues={defaultValues}
-      disabled={!appAuthClient}
+      disabled={!adminAppAuthClient}
     />
   );
 }

packages/web/src/hooks/useAdminAppAuthClient.ee.js

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useAdminAppAuthClient(id) {
+  const query = useQuery({
+    queryKey: ['adminAppAuthClient', id],
+    queryFn: async ({ payload, signal }) => {
+      const { data } = await api.get(`/v1/admin/app-auth-clients/${id}`);
+
+      return data;
+    },
+    enabled: !!id,
+  });
+
+  return query;
+}