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

@@ -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) {

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<RoleRepresentation[]>([]);
 
   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") {

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({

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

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);

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 }

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 }

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<T> = {
   loader: () => Promise<T>;
@@ -20,7 +20,7 @@ export function DataLoader<T>(props: DataLoaderProps<T>) {
   const refresh = () => setKey(new Date().getTime());
 
   useEffect(() => {
-    return useFetch(
+    return asyncStateFetch(
       () => props.loader(),
       (result) => setData({ result })
     );

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,

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<T> = {
   data: T;
@@ -132,7 +132,7 @@ export function KeycloakDataTable<T>({
   const refresh = () => setKey(new Date().getTime());
 
   useEffect(() => {
-    return useFetch(
+    return asyncStateFetch(
       async () => {
         setLoading(true);
         const data = await loader(first, max, search);

src/context/auth/AdminClient.tsx

@@ -17,7 +17,23 @@ export const useAdminClient = () => {
   return adminClient;
 };
 
-export function useFetch<T>(
+/**
+ * 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<T>(
   adminClientCall: () => Promise<T>,
   callback: (param: T) => void
 ) {

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

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!);

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!);

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: {
         }
       >
         <WhoAmIContextProvider>
-          <RealmContextProvider>
+          <RealmContext.Provider
+            value={{ realm: "master", setRealm: () => {} }}
+          >
             <AccessContextProvider>{props.children}</AccessContextProvider>
-          </RealmContextProvider>
+          </RealmContext.Provider>
         </WhoAmIContextProvider>
       </AdminClient.Provider>
     </HashRouter>

src/stories/UserFedKerberosSettings.stories.tsx

@@ -12,7 +12,9 @@ export default {
 export const view = () => {
   return (
     <Page>
-      <MockAdminClient>
+      <MockAdminClient
+        mock={{ components: { findOne: () => Promise.resolve({}) } }}
+      >
         <UserFederationKerberosSettings />
       </MockAdminClient>
     </Page>

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 (
     <Page>
+      <MockAdminClient
+        mock={{ components: { findOne: () => Promise.resolve({}) } }}
+      >
         <UserFederationLdapSettings />
+      </MockAdminClient>
     </Page>
   );
 };

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,

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)
     );

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)
     );

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)
     );

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)
     );

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)
     );

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)
     );

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)
     );