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

This commit is contained in:
Rıdvan Akca
2024-03-04 15:09:42 +03:00
committed by GitHub
parent 690832052a
commit bfc7d5d0dd
2 changed files with 44 additions and 14 deletions

View File

@@ -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}
/>
);
}

View File

@@ -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;
}