removed useEffect data load instead uses fetch (#1460)

* removed useEffect data load instead uses fetch

fixes: #1025

* fixed the test
This commit is contained in:
Erik Jan de Wit 2021-11-09 15:14:54 +01:00 committed by GitHub
parent 2e664a8b2c
commit 16042dd1f6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 35 additions and 44 deletions

View file

@ -1,4 +1,4 @@
import React, { useEffect } from "react";
import React from "react";
import {
ActionGroup,
AlertVariant,
@ -17,7 +17,7 @@ import type ComponentRepresentation from "@keycloak/keycloak-admin-client/lib/de
import { Controller, useForm } from "react-hook-form";
import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
import { useAdminClient } from "../context/auth/AdminClient";
import { useAdminClient, useFetch } from "../context/auth/AdminClient";
import { useAlerts } from "../components/alert/Alerts";
import { useTranslation } from "react-i18next";
import { ViewHeader } from "../components/view-header/ViewHeader";
@ -37,7 +37,7 @@ const KerberosSettingsHeader = ({
toggleDeleteDialog,
}: KerberosSettingsHeaderProps) => {
const { t } = useTranslation("user-federation");
const { id } = useParams<{ id: string }>();
const { id } = useParams<{ id?: string }>();
const [toggleDisableDialog, DisableConfirm] = useConfirmDialog({
titleKey: "user-federation:userFedDisableConfirmTitle",
messageKey: "user-federation:userFedDisableConfirm",
@ -50,7 +50,7 @@ const KerberosSettingsHeader = ({
return (
<>
<DisableConfirm />
{id === "new" ? (
{!id ? (
<ViewHeader titleKey="Kerberos" />
) : (
<ViewHeader
@ -69,7 +69,7 @@ const KerberosSettingsHeader = ({
if (!value) {
toggleDisableDialog();
} else {
onChange("" + value);
onChange(value.toString());
save();
}
}}
@ -86,25 +86,27 @@ export default function UserFederationKerberosSettings() {
const adminClient = useAdminClient();
const { realm } = useRealm();
const { id } = useParams<{ id: string }>();
const { id } = useParams<{ id?: string }>();
const { addAlert, addError } = useAlerts();
useEffect(() => {
(async () => {
if (id !== "new") {
const fetchedComponent = await adminClient.components.findOne({ id });
if (fetchedComponent) {
setupForm(fetchedComponent);
} else {
throw new Error(t("common:notFound"));
}
useFetch(
async () => {
if (id) {
return adminClient.components.findOne({ id });
}
})();
}, []);
},
(fetchedComponent) => {
if (fetchedComponent) {
setupForm(fetchedComponent);
} else if (id) {
throw new Error(t("common:notFound"));
}
},
[]
);
const setupForm = (component: ComponentRepresentation) => {
form.reset();
Object.entries(component).map((entry) => {
form.setValue(
"config.allowPasswordAuthentication",
@ -119,24 +121,16 @@ export default function UserFederationKerberosSettings() {
const save = async (component: ComponentRepresentation) => {
try {
if (id) {
if (id === "new") {
await adminClient.components.create(component);
history.push(`/${realm}/user-federation`);
} else {
await adminClient.components.update({ id }, component);
}
if (!id) {
await adminClient.components.create(component);
history.push(`/${realm}/user-federation`);
} else {
await adminClient.components.update({ id }, component);
}
setupForm(component as ComponentRepresentation);
addAlert(
t(id === "new" ? "createSuccess" : "saveSuccess"),
AlertVariant.success
);
addAlert(t(!id ? "createSuccess" : "saveSuccess"), AlertVariant.success);
} catch (error) {
addError(
`user-federation:${id === "new" ? "createError" : "saveError"}`,
error
);
addError(`user-federation:${!id ? "createError" : "saveError"}`, error);
}
};
@ -147,7 +141,7 @@ export default function UserFederationKerberosSettings() {
continueButtonVariant: ButtonVariant.danger,
onConfirm: async () => {
try {
await adminClient.components.del({ id });
await adminClient.components.del({ id: id! });
addAlert(t("userFedDeletedSuccess"), AlertVariant.success);
history.replace(`/${realm}/user-federation`);
} catch (error: any) {

View file

@ -237,14 +237,13 @@ export const KerberosSettingsRequired = ({
render={({ onChange, value }) => (
<Switch
id={"kc-debug"}
isDisabled={false}
onChange={(value) => onChange([`${value}`])}
isChecked={value[0] === "true"}
isChecked={value?.[0] === "true"}
label={t("common:on")}
labelOff={t("common:off")}
/>
)}
></Controller>
/>
</FormGroup>
<FormGroup
@ -266,14 +265,13 @@ export const KerberosSettingsRequired = ({
render={({ onChange, value }) => (
<Switch
id={"kc-allow-password-authentication"}
isDisabled={false}
onChange={(value) => onChange([`${value}`])}
isChecked={value[0] === "true"}
isChecked={value?.[0] === "true"}
label={t("common:on")}
labelOff={t("common:off")}
/>
)}
></Controller>
/>
</FormGroup>
{_.isEqual(allowPassAuth, ["true"]) ? (
@ -337,14 +335,13 @@ export const KerberosSettingsRequired = ({
render={({ onChange, value }) => (
<Switch
id={"kc-update-first-login"}
isDisabled={false}
onChange={(value) => onChange([`${value}`])}
isChecked={value[0] === "true"}
isChecked={value?.[0] === "true"}
label={t("common:on")}
labelOff={t("common:off")}
/>
)}
></Controller>
/>
</FormGroup>
</FormAccess>
</>

View file

@ -11,8 +11,8 @@ import { UserFederationsLdapRoute } from "./routes/UserFederationsLdap";
const routes: RouteDef[] = [
UserFederationRoute,
UserFederationsKerberosRoute,
UserFederationKerberosRoute,
NewKerberosUserFederationRoute,
UserFederationKerberosRoute,
UserFederationsLdapRoute,
NewLdapUserFederationRoute,
UserFederationLdapRoute,