From feca61d2b0a8d80fdfcf0131b9c551bf68b6e2a0 Mon Sep 17 00:00:00 2001 From: Erik Jan de Wit Date: Mon, 11 Jan 2021 19:56:19 +0100 Subject: [PATCH] renamed `useFetch` to `asyncStateFetch` (#277) * renamed `useFetch` to `asyncStateFetch` otherwise React will mistake it for a react hook and will complain. * added jsdoc * fixed the user red stories * renamed --- src/App.tsx | 4 ++-- src/client-scopes/add/RoleMappingForm.tsx | 9 ++++++--- src/client-scopes/details/MappingDetails.tsx | 7 +++++-- src/client-scopes/form/ClientScopeForm.tsx | 7 +++++-- src/clients/ClientDetails.tsx | 4 ++-- src/clients/credentials/Credentials.tsx | 7 +++++-- src/clients/scopes/ClientScopes.tsx | 7 +++++-- src/components/data-loader/DataLoader.tsx | 4 ++-- .../download-dialog/DownloadDialog.tsx | 7 +++++-- .../table-toolbar/KeycloakDataTable.tsx | 4 ++-- src/context/auth/AdminClient.tsx | 18 +++++++++++++++++- src/realm-roles/RealmRoleForm.tsx | 4 ++-- src/realm-roles/RealmRoleTabs.tsx | 4 ++-- src/realm-roles/RoleAttributes.tsx | 4 ++-- src/stories/MockAdminClient.tsx | 8 +++++--- .../UserFedKerberosSettings.stories.tsx | 4 +++- src/stories/UserFedLDAPSettingsTab.stories.tsx | 7 ++++++- src/user-federation/UserFederationSection.tsx | 4 ++-- .../kerberos/KerberosSettingsCache.tsx | 7 +++++-- .../ldap/LdapSettingsAdvanced.tsx | 7 +++++-- .../ldap/LdapSettingsConnection.tsx | 7 +++++-- .../ldap/LdapSettingsGeneral.tsx | 7 +++++-- .../ldap/LdapSettingsKerberosIntegration.tsx | 7 +++++-- .../ldap/LdapSettingsSearching.tsx | 7 +++++-- .../ldap/LdapSettingsSynchronization.tsx | 7 +++++-- 25 files changed, 113 insertions(+), 49 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 8bde2585c7..1827fb0b77 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -19,7 +19,7 @@ import { routes, RouteDef } from "./route-config"; import { PageBreadCrumbs } from "./components/bread-crumb/PageBreadCrumbs"; import { ForbiddenSection } from "./ForbiddenSection"; import { useRealm } from "./context/realm-context/RealmContext"; -import { useAdminClient, useFetch } from "./context/auth/AdminClient"; +import { useAdminClient, asyncStateFetch } from "./context/auth/AdminClient"; // This must match the id given as scrollableSelector in scroll-form const mainPageContentId = "kc-main-content-page-container"; @@ -41,7 +41,7 @@ const RealmPathSelector = ({ children }: { children: ReactNode }) => { const adminClient = useAdminClient(); useEffect( () => - useFetch( + asyncStateFetch( () => adminClient.realms.find(), (realms) => { if (realms.findIndex((r) => r.realm == realm) !== -1) { diff --git a/src/client-scopes/add/RoleMappingForm.tsx b/src/client-scopes/add/RoleMappingForm.tsx index 6dc7e30438..e74b5ebbf5 100644 --- a/src/client-scopes/add/RoleMappingForm.tsx +++ b/src/client-scopes/add/RoleMappingForm.tsx @@ -24,7 +24,10 @@ import ClientRepresentation from "keycloak-admin/lib/defs/clientRepresentation"; import ProtocolMapperRepresentation from "keycloak-admin/lib/defs/protocolMapperRepresentation"; import { useAlerts } from "../../components/alert/Alerts"; import { RealmContext } from "../../context/realm-context/RealmContext"; -import { useAdminClient, useFetch } from "../../context/auth/AdminClient"; +import { + useAdminClient, + asyncStateFetch, +} from "../../context/auth/AdminClient"; import { ViewHeader } from "../../components/view-header/ViewHeader"; import { HelpItem } from "../../components/help-enabler/HelpItem"; @@ -47,7 +50,7 @@ export const RoleMappingForm = () => { const [clientRoles, setClientRoles] = useState([]); useEffect(() => { - return useFetch( + return asyncStateFetch( async () => { const clients = await adminClient.clients.find(); @@ -76,7 +79,7 @@ export const RoleMappingForm = () => { }, []); useEffect(() => { - return useFetch( + return asyncStateFetch( async () => { const client = selectedClient as ClientRepresentation; if (client && client.name !== "realmRoles") { diff --git a/src/client-scopes/details/MappingDetails.tsx b/src/client-scopes/details/MappingDetails.tsx index 8473edcd38..1c24ff4333 100644 --- a/src/client-scopes/details/MappingDetails.tsx +++ b/src/client-scopes/details/MappingDetails.tsx @@ -24,7 +24,10 @@ import { ConfigPropertyRepresentation } from "keycloak-admin/lib/defs/configProp import ProtocolMapperRepresentation from "keycloak-admin/lib/defs/protocolMapperRepresentation"; import { ViewHeader } from "../../components/view-header/ViewHeader"; -import { useAdminClient, useFetch } from "../../context/auth/AdminClient"; +import { + useAdminClient, + asyncStateFetch, +} from "../../context/auth/AdminClient"; import { Controller, useForm } from "react-hook-form"; import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog"; import { useAlerts } from "../../components/alert/Alerts"; @@ -56,7 +59,7 @@ export const MappingDetails = () => { const isGuid = /^[{]?[0-9a-fA-F]{8}-([0-9a-fA-F]{4}-){3}[0-9a-fA-F]{12}[}]?$/; useEffect(() => { - return useFetch( + return asyncStateFetch( async () => { if (id.match(isGuid)) { const data = await adminClient.clientScopes.findProtocolMapper({ diff --git a/src/client-scopes/form/ClientScopeForm.tsx b/src/client-scopes/form/ClientScopeForm.tsx index 96be5f955f..d2233b1fe8 100644 --- a/src/client-scopes/form/ClientScopeForm.tsx +++ b/src/client-scopes/form/ClientScopeForm.tsx @@ -22,7 +22,10 @@ import { Controller, useForm } from "react-hook-form"; import ClientScopeRepresentation from "keycloak-admin/lib/defs/clientScopeRepresentation"; import { HelpItem } from "../../components/help-enabler/HelpItem"; -import { useAdminClient, useFetch } from "../../context/auth/AdminClient"; +import { + useAdminClient, + asyncStateFetch, +} from "../../context/auth/AdminClient"; import { useAlerts } from "../../components/alert/Alerts"; import { useLoginProviders } from "../../context/server-info/ServerInfoProvider"; import { ViewHeader } from "../../components/view-header/ViewHeader"; @@ -49,7 +52,7 @@ export const ClientScopeForm = () => { const refresh = () => setKey(new Date().getTime()); useEffect(() => { - return useFetch( + return asyncStateFetch( async () => { if (id) { const data = await adminClient.clientScopes.findOne({ id }); diff --git a/src/clients/ClientDetails.tsx b/src/clients/ClientDetails.tsx index e0472d82e0..905849b032 100644 --- a/src/clients/ClientDetails.tsx +++ b/src/clients/ClientDetails.tsx @@ -19,7 +19,7 @@ import { useAlerts } from "../components/alert/Alerts"; import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog"; import { useDownloadDialog } from "../components/download-dialog/DownloadDialog"; import { ViewHeader } from "../components/view-header/ViewHeader"; -import { useAdminClient, useFetch } from "../context/auth/AdminClient"; +import { useAdminClient, asyncStateFetch } from "../context/auth/AdminClient"; import { Credentials } from "./credentials/Credentials"; import { convertFormValuesToObject, @@ -144,7 +144,7 @@ export const ClientDetails = () => { }; useEffect(() => { - return useFetch( + return asyncStateFetch( () => adminClient.clients.findOne({ id }), (fetchedClient) => { setClient(fetchedClient); diff --git a/src/clients/credentials/Credentials.tsx b/src/clients/credentials/Credentials.tsx index 0fae09920d..03e71f271c 100644 --- a/src/clients/credentials/Credentials.tsx +++ b/src/clients/credentials/Credentials.tsx @@ -22,7 +22,10 @@ import { useAlerts } from "../../components/alert/Alerts"; import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog"; import { HelpItem } from "../../components/help-enabler/HelpItem"; -import { useAdminClient, useFetch } from "../../context/auth/AdminClient"; +import { + useAdminClient, + asyncStateFetch, +} from "../../context/auth/AdminClient"; import { ClientSecret } from "./ClientSecret"; import { SignedJWT } from "./SignedJWT"; import { X509 } from "./X509"; @@ -64,7 +67,7 @@ export const Credentials = ({ clientId, form, save }: CredentialsProps) => { const [open, isOpen] = useState(false); useEffect(() => { - return useFetch( + return asyncStateFetch( async () => { const providers = await adminClient.authenticationManagement.getClientAuthenticatorProviders( { id: clientId } diff --git a/src/clients/scopes/ClientScopes.tsx b/src/clients/scopes/ClientScopes.tsx index 17c002e7bc..3c011d65d2 100644 --- a/src/clients/scopes/ClientScopes.tsx +++ b/src/clients/scopes/ClientScopes.tsx @@ -23,7 +23,10 @@ import { FilterIcon } from "@patternfly/react-icons"; import ClientScopeRepresentation from "keycloak-admin/lib/defs/clientScopeRepresentation"; import KeycloakAdminClient from "keycloak-admin"; -import { useAdminClient, useFetch } from "../../context/auth/AdminClient"; +import { + useAdminClient, + asyncStateFetch, +} from "../../context/auth/AdminClient"; import { TableToolbar } from "../../components/table-toolbar/TableToolbar"; import { ListEmptyState } from "../../components/list-empty-state/ListEmptyState"; import { AddScopeDialog } from "./AddScopeDialog"; @@ -137,7 +140,7 @@ export const ClientScopes = ({ clientId, protocol }: ClientScopesProps) => { const refresh = () => setKey(new Date().getTime()); useEffect(() => { - return useFetch( + return asyncStateFetch( async () => { const defaultClientScopes = await adminClient.clients.listDefaultClientScopes( { id: clientId } diff --git a/src/components/data-loader/DataLoader.tsx b/src/components/data-loader/DataLoader.tsx index ed037d2a16..1f891a43d5 100644 --- a/src/components/data-loader/DataLoader.tsx +++ b/src/components/data-loader/DataLoader.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from "react"; import { Spinner } from "@patternfly/react-core"; -import { useFetch } from "../../context/auth/AdminClient"; +import { asyncStateFetch } from "../../context/auth/AdminClient"; type DataLoaderProps = { loader: () => Promise; @@ -20,7 +20,7 @@ export function DataLoader(props: DataLoaderProps) { const refresh = () => setKey(new Date().getTime()); useEffect(() => { - return useFetch( + return asyncStateFetch( () => props.loader(), (result) => setData({ result }) ); diff --git a/src/components/download-dialog/DownloadDialog.tsx b/src/components/download-dialog/DownloadDialog.tsx index 7bf7fefe8f..3a483a7493 100644 --- a/src/components/download-dialog/DownloadDialog.tsx +++ b/src/components/download-dialog/DownloadDialog.tsx @@ -18,7 +18,10 @@ import { ConfirmDialogModal } from "../confirm-dialog/ConfirmDialog"; import { HelpItem } from "../help-enabler/HelpItem"; import { useTranslation } from "react-i18next"; import { useServerInfo } from "../../context/server-info/ServerInfoProvider"; -import { useAdminClient, useFetch } from "../../context/auth/AdminClient"; +import { + useAdminClient, + asyncStateFetch, +} from "../../context/auth/AdminClient"; import { HelpContext } from "../help-enabler/HelpHeader"; export type DownloadDialogProps = { @@ -65,7 +68,7 @@ export const DownloadDialog = ({ const [openType, setOpenType] = useState(false); useEffect(() => { - return useFetch( + return asyncStateFetch( async () => { const snippet = await adminClient.clients.getInstallationProviders({ id, diff --git a/src/components/table-toolbar/KeycloakDataTable.tsx b/src/components/table-toolbar/KeycloakDataTable.tsx index 8a06f1c8d0..fcb456e835 100644 --- a/src/components/table-toolbar/KeycloakDataTable.tsx +++ b/src/components/table-toolbar/KeycloakDataTable.tsx @@ -14,7 +14,7 @@ import _ from "lodash"; import { PaginatingTableToolbar } from "./PaginatingTableToolbar"; import { TableToolbar } from "./TableToolbar"; -import { useFetch } from "../../context/auth/AdminClient"; +import { asyncStateFetch } from "../../context/auth/AdminClient"; type Row = { data: T; @@ -132,7 +132,7 @@ export function KeycloakDataTable({ const refresh = () => setKey(new Date().getTime()); useEffect(() => { - return useFetch( + return asyncStateFetch( async () => { setLoading(true); const data = await loader(first, max, search); diff --git a/src/context/auth/AdminClient.tsx b/src/context/auth/AdminClient.tsx index 1f8d3bdd74..5270cea3af 100644 --- a/src/context/auth/AdminClient.tsx +++ b/src/context/auth/AdminClient.tsx @@ -17,7 +17,23 @@ export const useAdminClient = () => { return adminClient; }; -export function useFetch( +/** + * Util function to only set the state when the component is still mounted. + * + * It takes 2 functions one you do your adminClient call in and the other to set your state + * + * @example + * useEffect(() => { + * return asyncStateFetch( + * () => adminClient.components.findOne({ id }), + * (component) => setupForm(component) + * ); + * }, []); + * + * @param adminClientCall use this to do your adminClient call + * @param callback when the data is fetched this is where you set your state + */ +export function asyncStateFetch( adminClientCall: () => Promise, callback: (param: T) => void ) { diff --git a/src/realm-roles/RealmRoleForm.tsx b/src/realm-roles/RealmRoleForm.tsx index e28dd8ce76..c38d70d5b8 100644 --- a/src/realm-roles/RealmRoleForm.tsx +++ b/src/realm-roles/RealmRoleForm.tsx @@ -24,7 +24,7 @@ import { FormAccess } from "../components/form-access/FormAccess"; import { useAlerts } from "../components/alert/Alerts"; import { ViewHeader } from "../components/view-header/ViewHeader"; -import { useAdminClient, useFetch } from "../context/auth/AdminClient"; +import { useAdminClient, asyncStateFetch } from "../context/auth/AdminClient"; import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog"; import { RoleAttributes } from "./RoleAttributes"; import { useRealm } from "../context/realm-context/RealmContext"; @@ -113,7 +113,7 @@ export const RealmRolesForm = () => { const [activeTab, setActiveTab] = useState(0); useEffect(() => { - return useFetch( + return asyncStateFetch( async () => { if (id) { const role = await adminClient.roles.findOneById({ id }); diff --git a/src/realm-roles/RealmRoleTabs.tsx b/src/realm-roles/RealmRoleTabs.tsx index 4516e54a08..3a2a2eda00 100644 --- a/src/realm-roles/RealmRoleTabs.tsx +++ b/src/realm-roles/RealmRoleTabs.tsx @@ -17,7 +17,7 @@ import { Controller, useForm } from "react-hook-form"; import { FormAccess } from "../components/form-access/FormAccess"; import { useAlerts } from "../components/alert/Alerts"; -import { useAdminClient, useFetch } from "../context/auth/AdminClient"; +import { useAdminClient, asyncStateFetch } from "../context/auth/AdminClient"; import RoleRepresentation from "keycloak-admin/lib/defs/roleRepresentation"; import { RoleAttributes } from "./RoleAttributes"; import "./RealmRolesSection.css"; @@ -37,7 +37,7 @@ export const RolesTabs = () => { const { addAlert } = useAlerts(); useEffect(() => { - return useFetch( + return asyncStateFetch( () => adminClient.roles.findOneById({ id }), (fetchedRole) => { setName(fetchedRole.name!); diff --git a/src/realm-roles/RoleAttributes.tsx b/src/realm-roles/RoleAttributes.tsx index f95f2bdacd..143cd88f16 100644 --- a/src/realm-roles/RoleAttributes.tsx +++ b/src/realm-roles/RoleAttributes.tsx @@ -5,7 +5,7 @@ import { useParams } from "react-router-dom"; import { Button, ButtonVariant, TextInput } from "@patternfly/react-core"; import { useForm } from "react-hook-form"; import "./RealmRolesSection.css"; -import { useAdminClient, useFetch } from "../context/auth/AdminClient"; +import { useAdminClient, asyncStateFetch } from "../context/auth/AdminClient"; import RoleRepresentation from "keycloak-admin/lib/defs/roleRepresentation"; import { useTranslation } from "react-i18next"; @@ -46,7 +46,7 @@ export const RoleAttributes = () => { ]; useEffect(() => { - return useFetch( + return asyncStateFetch( () => adminClient.roles.findOneById({ id }), (fetchedRole) => { setName(fetchedRole.name!); diff --git a/src/stories/MockAdminClient.tsx b/src/stories/MockAdminClient.tsx index efcf03150e..4c1e2c5aab 100644 --- a/src/stories/MockAdminClient.tsx +++ b/src/stories/MockAdminClient.tsx @@ -4,7 +4,7 @@ import KeycloakAdminClient from "keycloak-admin"; import { AccessContextProvider } from "../context/access/Access"; import { WhoAmIContextProvider } from "../context/whoami/WhoAmI"; -import { RealmContextProvider } from "../context/realm-context/RealmContext"; +import { RealmContext } from "../context/realm-context/RealmContext"; import whoamiMock from "../context/whoami/__tests__/mock-whoami.json"; import { AdminClient } from "../context/auth/AdminClient"; @@ -39,9 +39,11 @@ export const MockAdminClient = (props: { } > - + {} }} + > {props.children} - + diff --git a/src/stories/UserFedKerberosSettings.stories.tsx b/src/stories/UserFedKerberosSettings.stories.tsx index 8570d92ff8..de57b1d26c 100644 --- a/src/stories/UserFedKerberosSettings.stories.tsx +++ b/src/stories/UserFedKerberosSettings.stories.tsx @@ -12,7 +12,9 @@ export default { export const view = () => { return ( - + Promise.resolve({}) } }} + > diff --git a/src/stories/UserFedLDAPSettingsTab.stories.tsx b/src/stories/UserFedLDAPSettingsTab.stories.tsx index ead07916f0..56b435817c 100644 --- a/src/stories/UserFedLDAPSettingsTab.stories.tsx +++ b/src/stories/UserFedLDAPSettingsTab.stories.tsx @@ -2,6 +2,7 @@ import React from "react"; import { Meta } from "@storybook/react"; import { Page } from "@patternfly/react-core"; import { UserFederationLdapSettings } from "../user-federation/UserFederationLdapSettings"; +import { MockAdminClient } from "./MockAdminClient"; export default { title: "User Federation LDAP Settings Tab", @@ -11,7 +12,11 @@ export default { export const view = () => { return ( - + Promise.resolve({}) } }} + > + + ); }; diff --git a/src/user-federation/UserFederationSection.tsx b/src/user-federation/UserFederationSection.tsx index f67b7327af..fe316dbb18 100644 --- a/src/user-federation/UserFederationSection.tsx +++ b/src/user-federation/UserFederationSection.tsx @@ -22,7 +22,7 @@ import { ViewHeader } from "../components/view-header/ViewHeader"; import { DatabaseIcon } from "@patternfly/react-icons"; import { useTranslation } from "react-i18next"; import { RealmContext } from "../context/realm-context/RealmContext"; -import { useAdminClient, useFetch } from "../context/auth/AdminClient"; +import { useAdminClient, asyncStateFetch } from "../context/auth/AdminClient"; import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog"; import "./user-federation.css"; @@ -38,7 +38,7 @@ export const UserFederationSection = () => { const refresh = () => setKey(new Date().getTime()); useEffect(() => { - return useFetch( + return asyncStateFetch( () => { const testParams: { [name: string]: string | number } = { parentId: realm, diff --git a/src/user-federation/kerberos/KerberosSettingsCache.tsx b/src/user-federation/kerberos/KerberosSettingsCache.tsx index c6bd2a3afd..758fe79f94 100644 --- a/src/user-federation/kerberos/KerberosSettingsCache.tsx +++ b/src/user-federation/kerberos/KerberosSettingsCache.tsx @@ -12,7 +12,10 @@ import { convertToFormValues } from "../../util"; import { useForm, Controller, useWatch } from "react-hook-form"; import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation"; import { FormAccess } from "../../components/form-access/FormAccess"; -import { useAdminClient, useFetch } from "../../context/auth/AdminClient"; +import { + useAdminClient, + asyncStateFetch, +} from "../../context/auth/AdminClient"; import { useParams } from "react-router-dom"; import _ from "lodash"; @@ -41,7 +44,7 @@ export const KerberosSettingsCache = () => { }; useEffect(() => { - return useFetch( + return asyncStateFetch( () => adminClient.components.findOne({ id }), (component) => setupForm(component) ); diff --git a/src/user-federation/ldap/LdapSettingsAdvanced.tsx b/src/user-federation/ldap/LdapSettingsAdvanced.tsx index 1f9d68db73..c0f8dcd3ea 100644 --- a/src/user-federation/ldap/LdapSettingsAdvanced.tsx +++ b/src/user-federation/ldap/LdapSettingsAdvanced.tsx @@ -6,7 +6,10 @@ import { useForm, Controller } from "react-hook-form"; import { convertToFormValues } from "../../util"; import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation"; import { FormAccess } from "../../components/form-access/FormAccess"; -import { useAdminClient, useFetch } from "../../context/auth/AdminClient"; +import { + useAdminClient, + asyncStateFetch, +} from "../../context/auth/AdminClient"; import { useParams } from "react-router-dom"; export const LdapSettingsAdvanced = () => { @@ -27,7 +30,7 @@ export const LdapSettingsAdvanced = () => { }; useEffect(() => { - return useFetch( + return asyncStateFetch( () => adminClient.components.findOne({ id }), (fetchedComponent) => setupForm(fetchedComponent) ); diff --git a/src/user-federation/ldap/LdapSettingsConnection.tsx b/src/user-federation/ldap/LdapSettingsConnection.tsx index b33a600ca3..33c2ba32d9 100644 --- a/src/user-federation/ldap/LdapSettingsConnection.tsx +++ b/src/user-federation/ldap/LdapSettingsConnection.tsx @@ -16,7 +16,10 @@ import { convertToFormValues } from "../../util"; import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation"; import { EyeIcon } from "@patternfly/react-icons"; import { FormAccess } from "../../components/form-access/FormAccess"; -import { useAdminClient, useFetch } from "../../context/auth/AdminClient"; +import { + useAdminClient, + asyncStateFetch, +} from "../../context/auth/AdminClient"; import { useParams } from "react-router-dom"; export const LdapSettingsConnection = () => { @@ -62,7 +65,7 @@ export const LdapSettingsConnection = () => { }; useEffect(() => { - return useFetch( + return asyncStateFetch( () => adminClient.components.findOne({ id }), (fetchedComponent) => setupForm(fetchedComponent) ); diff --git a/src/user-federation/ldap/LdapSettingsGeneral.tsx b/src/user-federation/ldap/LdapSettingsGeneral.tsx index f201de5832..faec7d3dcb 100644 --- a/src/user-federation/ldap/LdapSettingsGeneral.tsx +++ b/src/user-federation/ldap/LdapSettingsGeneral.tsx @@ -12,7 +12,10 @@ import { useForm, Controller } from "react-hook-form"; import { convertToFormValues } from "../../util"; import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation"; import { FormAccess } from "../../components/form-access/FormAccess"; -import { useAdminClient, useFetch } from "../../context/auth/AdminClient"; +import { + useAdminClient, + asyncStateFetch, +} from "../../context/auth/AdminClient"; import { useParams } from "react-router-dom"; export const LdapSettingsGeneral = () => { @@ -37,7 +40,7 @@ export const LdapSettingsGeneral = () => { }; useEffect(() => { - return useFetch( + return asyncStateFetch( () => adminClient.components.findOne({ id }), (fetchedComponent) => setupForm(fetchedComponent) ); diff --git a/src/user-federation/ldap/LdapSettingsKerberosIntegration.tsx b/src/user-federation/ldap/LdapSettingsKerberosIntegration.tsx index 8cabd814cc..58548d6297 100644 --- a/src/user-federation/ldap/LdapSettingsKerberosIntegration.tsx +++ b/src/user-federation/ldap/LdapSettingsKerberosIntegration.tsx @@ -6,7 +6,10 @@ import { useForm, Controller } from "react-hook-form"; import { convertToFormValues } from "../../util"; import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation"; import { FormAccess } from "../../components/form-access/FormAccess"; -import { useAdminClient, useFetch } from "../../context/auth/AdminClient"; +import { + useAdminClient, + asyncStateFetch, +} from "../../context/auth/AdminClient"; import { useParams } from "react-router-dom"; export const LdapSettingsKerberosIntegration = () => { @@ -28,7 +31,7 @@ export const LdapSettingsKerberosIntegration = () => { }; useEffect(() => { - return useFetch( + return asyncStateFetch( () => adminClient.components.findOne({ id }), (fetchedComponent) => setupForm(fetchedComponent) ); diff --git a/src/user-federation/ldap/LdapSettingsSearching.tsx b/src/user-federation/ldap/LdapSettingsSearching.tsx index 4f3f108f65..3a89f04186 100644 --- a/src/user-federation/ldap/LdapSettingsSearching.tsx +++ b/src/user-federation/ldap/LdapSettingsSearching.tsx @@ -12,7 +12,10 @@ import { HelpItem } from "../../components/help-enabler/HelpItem"; import { useForm, Controller } from "react-hook-form"; import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation"; import { FormAccess } from "../../components/form-access/FormAccess"; -import { useAdminClient, useFetch } from "../../context/auth/AdminClient"; +import { + useAdminClient, + asyncStateFetch, +} from "../../context/auth/AdminClient"; import { useParams } from "react-router-dom"; import { convertToFormValues } from "../../util"; @@ -54,7 +57,7 @@ export const LdapSettingsSearching = () => { }; useEffect(() => { - return useFetch( + return asyncStateFetch( () => adminClient.components.findOne({ id }), (fetchedComponent) => setupForm(fetchedComponent) ); diff --git a/src/user-federation/ldap/LdapSettingsSynchronization.tsx b/src/user-federation/ldap/LdapSettingsSynchronization.tsx index 8fa4205228..6d04a3fb5d 100644 --- a/src/user-federation/ldap/LdapSettingsSynchronization.tsx +++ b/src/user-federation/ldap/LdapSettingsSynchronization.tsx @@ -6,7 +6,10 @@ import { useForm, Controller } from "react-hook-form"; import { convertToFormValues } from "../../util"; import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation"; import { FormAccess } from "../../components/form-access/FormAccess"; -import { useAdminClient, useFetch } from "../../context/auth/AdminClient"; +import { + useAdminClient, + asyncStateFetch, +} from "../../context/auth/AdminClient"; import { useParams } from "react-router-dom"; export const LdapSettingsSynchronization = () => { @@ -27,7 +30,7 @@ export const LdapSettingsSynchronization = () => { }; useEffect(() => { - return useFetch( + return asyncStateFetch( () => adminClient.components.findOne({ id }), (fetchedComponent) => setupForm(fetchedComponent) );