Botype annet

src/lib/hooks/data/useBosituasjon.tsx

@@ -7,24 +7,27 @@ export const useBosituasjon = () => {
     const behandlingsId = useBehandlingsId();
     const queryClient = useQueryClient();
     const {data: bosituasjon, isLoading, isError, queryKey} = useHentBosituasjon(behandlingsId);
-    const {mutate} = useUpdateBosituasjon();
+    const {mutateAsync} = useUpdateBosituasjon();
 
     const setBosituasjon = async (nyBosituasjon: Partial<BosituasjonFrontend>) => {
         const data = {...(bosituasjon as BosituasjonFrontend), ...nyBosituasjon};
-        mutate({behandlingsId, data});
         queryClient.setQueryData(queryKey, data);
+        const updated = await mutateAsync({behandlingsId, data});
+        queryClient.setQueryData(queryKey, updated);
     };
 
+    const setAntallPersoner = (antallPersoner: number | undefined) => setBosituasjon({antallPersoner});
     const setBotype = (botype: BosituasjonFrontendBotype) => setBosituasjon({botype});
     const {botype, antallPersoner} = bosituasjon || {};
+    const showSecondaryOptions = !["eier", "leier", "kommunal", "ingen", null].includes(bosituasjon?.botype || null);
 
     return {
-        bosituasjon,
         botype,
-        antallPersoner,
-        setBosituasjon,
         setBotype,
+        antallPersoner,
+        setAntallPersoner,
         isLoading,
         isError,
+        showSecondaryOptions,
     };
 };

src/sider/05-bosituasjon/AntallPersoner.tsx

@@ -8,11 +8,23 @@ import {useValidering} from "../../lib/hooks/common/useValidering";
 import {ValidationArea} from "../../lib/ValidationArea";
 
 export const AntallPersoner = () => {
-    const {antallPersoner, setBosituasjon} = useBosituasjon();
+    const {antallPersoner, setAntallPersoner, isLoading} = useBosituasjon();
     const {t} = useTranslation("skjema");
-
     const {errorMessage, setError} = useValidering(ValidationArea.BosituasjonAntallPersoner);
 
+    if (isLoading) return null;
+
+    const validateAndSet: React.FocusEventHandler<HTMLInputElement> = async ({target: {value}}) => {
+        try {
+            await setAntallPersoner(validerAntallPersoner(value));
+            setError(null);
+        } catch {
+            setError(ValideringsFeilKode.ER_TALL);
+        }
+    };
+
+    const clearValidationErrors = () => setError(null);
+
     return (
         <TextField
             className={"mb-12 lg:mb-24"}
@@ -24,15 +36,8 @@ export const AntallPersoner = () => {
             maxLength={2}
             htmlSize={5}
             defaultValue={antallPersoner}
-            onBlur={async ({target: {value}}) => {
-                try {
-                    await setBosituasjon({antallPersoner: validerAntallPersoner(value)});
-                    setError(null);
-                } catch {
-                    setError(ValideringsFeilKode.ER_TALL);
-                }
-            }}
-            onChange={() => setError(null)}
+            onBlur={validateAndSet}
+            onChange={clearValidationErrors}
             error={errorMessage}
         />
     );

src/sider/05-bosituasjon/Botype.tsx

@@ -3,38 +3,33 @@ import {useBosituasjon} from "../../lib/hooks/data/useBosituasjon";
 import {NyttUnderskjema} from "./NyttUnderskjema";
 import {useTranslation} from "react-i18next";
 import {Radio, RadioGroup} from "@navikt/ds-react";
+import {BosituasjonFrontendBotype} from "../../generated/model";
+
+const main = ["eier", "leier", "kommunal", "ingen", "annet"] as const;
+const annet = ["foreldre", "familie", "venner", "institusjon", "fengsel", "krisesenter"] as const;
+
+const BotypeRadio = ({value, legend}: {value: BosituasjonFrontendBotype; legend: string}) => (
+    <Radio value={value}>{legend}</Radio>
+);
 
 export const Botype = () => {
     const {t} = useTranslation("skjema");
-    const {bosituasjon, setBosituasjon} = useBosituasjon();
+    const {botype, setBotype, showSecondaryOptions, isLoading} = useBosituasjon();
 
-    // Hjelpefunksjon: Vis kun undermenyen dersom ikke "eier", "leier", "kommunal" eller "ingen" er valgt
-    const erAnnet = () => !["eier", "leier", "kommunal", "ingen", null].includes(bosituasjon?.botype || null);
+    if (isLoading) return null;
 
     return (
         <div className={"mt-12 lg:mt-24 mb-12 lg:mb-24"}>
-            <RadioGroup
-                legend={t("bosituasjon.sporsmal")}
-                value={erAnnet() ? "annet" : bosituasjon?.botype}
-                onChange={(botype) => setBosituasjon({botype})}
-            >
-                <Radio value={"eier"}>{t("bosituasjon.eier")}</Radio>
-                <Radio value={"leier"}>{t("bosituasjon.leier")}</Radio>
-                <Radio value={"kommunal"}>{t("bosituasjon.kommunal")}</Radio>
-                <Radio value={"ingen"}>{t("bosituasjon.ingen")}</Radio>
-                <Radio value={"annet"}>{t("bosituasjon.annet")}</Radio>
+            <RadioGroup legend={t("bosituasjon.sporsmal")} value={botype} onChange={setBotype}>
+                {main.map((valg) => (
+                    <BotypeRadio key={valg} value={valg} legend={t(`bosituasjon.${valg}`)} />
+                ))}
             </RadioGroup>
-            <NyttUnderskjema hidden={!erAnnet()}>
-                <RadioGroup
-                    legend={t("bosituasjon.annenBotype.sporsmal")}
-                    onChange={(botype) => setBosituasjon({botype})}
-                >
-                    <Radio value={"foreldre"}>{t("bosituasjon.annenBotype.foreldre")}</Radio>
-                    <Radio value={"familie"}>{t("bosituasjon.annenBotype.familie")}</Radio>
-                    <Radio value={"venner"}>{t("bosituasjon.annenBotype.venner")}</Radio>
-                    <Radio value={"institusjon"}>{t("bosituasjon.annenBotype.institusjon")}</Radio>
-                    <Radio value={"fengsel"}>{t("bosituasjon.annenBotype.fengsel")}</Radio>
-                    <Radio value={"krisesenter"}>{t("bosituasjon.annenBotype.krisesenter")}</Radio>
+            <NyttUnderskjema hidden={!showSecondaryOptions}>
+                <RadioGroup value={botype} legend={t("bosituasjon.annenBotype.sporsmal")} onChange={setBotype}>
+                    {annet.map((valg) => (
+                        <BotypeRadio key={valg} value={valg} legend={t(`bosituasjon.annenBotype.${valg}`)} />
+                    ))}
                 </RadioGroup>
             </NyttUnderskjema>
         </div>