diff --git a/src/lib/components/TranslatedError.tsx b/src/lib/components/TranslatedError.tsx new file mode 100644 index 000000000..43e33af37 --- /dev/null +++ b/src/lib/components/TranslatedError.tsx @@ -0,0 +1,12 @@ +import {FieldError} from "react-hook-form"; +import {useTranslation} from "react-i18next"; +import {DigisosLanguageKey} from "../i18n/common.ts"; +import * as React from "react"; + +export const TranslatedError = ({error}: {error: Pick}) => { + const {t} = useTranslation("skjema"); + + if (!error?.message) return null; + + return <>{t(error.message as DigisosLanguageKey)}; +}; diff --git a/src/sider/02-begrunnelse/index.tsx b/src/sider/02-begrunnelse/index.tsx index a487f6e77..21762fc84 100644 --- a/src/sider/02-begrunnelse/index.tsx +++ b/src/sider/02-begrunnelse/index.tsx @@ -1,13 +1,11 @@ import * as React from "react"; -import * as z from "zod"; import {Alert, BodyShort} from "@navikt/ds-react"; -import {FieldError, useForm} from "react-hook-form"; +import {useForm} from "react-hook-form"; import {useTranslation} from "react-i18next"; import {zodResolver} from "@hookform/resolvers/zod"; import {SkjemaHeadings, SkjemaSteg} from "../../lib/components/SkjemaSteg/SkjemaSteg.tsx"; import {useBegrunnelse} from "../../lib/hooks/data/useBegrunnelse"; import {ApplicationSpinner} from "../../lib/components/animasjoner/ApplicationSpinner"; -import {DigisosLanguageKey} from "../../lib/i18n/common.ts"; import useKategorier from "../../lib/hooks/data/useKategorier"; import KategorierChips from "../../lib/components/KategorierChips"; import {SkjemaStegErrorSummary} from "../../lib/components/SkjemaSteg/SkjemaStegErrorSummary.tsx"; @@ -20,36 +18,8 @@ import {SkjemaStegButtons} from "../../lib/components/SkjemaSteg/SkjemaStegButto import {useNavigate} from "react-router"; import {logAmplitudeSkjemaStegFullfort} from "../../lib/logAmplitudeSkjemaStegFullfort.ts"; import {useContextFeatureToggles} from "../../lib/providers/useContextFeatureToggles.ts"; - -const MAX_LEN_HVA = 500; -const MAX_LEN_HVORFOR = 600; - -const feilmeldinger: Record = { - maksLengde: "validering.maksLengde", -} as const; - -export interface FormValues { - hvaSokesOm?: string | null; - hvorforSoke?: string | null; -} - -const begrunnelseSchema = z.object({ - hvaSokesOm: z.string().max(MAX_LEN_HVA, feilmeldinger.maksLengde).optional(), - hvorforSoke: z.string().max(MAX_LEN_HVORFOR, feilmeldinger.maksLengde), -}); - -export const TranslatedError = ({error}: {error: Pick}) => { - const {t} = useTranslation("skjema"); - - if (!error?.message) return null; - - return <>{t(error.message as DigisosLanguageKey)}; -}; - -const Feilmelding = () => { - const {t} = useTranslation("skjema"); - return {t("skjema.navigering.feil")}; -}; +import {TranslatedError} from "../../lib/components/TranslatedError.tsx"; +import {begrunnelseSchema, FormValues, MAX_LEN_HVA, MAX_LEN_HVORFOR} from "./schema.ts"; export const Begrunnelse = () => { const {get: defaultValues} = useBegrunnelse(); @@ -98,7 +68,7 @@ export const Begrunnelse = () => { ) : (
e.preventDefault()}> - {isError && } + {isError && {t("skjema.navigering.feil")}} {isKategorierEnabled ? ( = { + maksLengde: "validering.maksLengde", +} as const; + +export interface FormValues { + hvaSokesOm?: string | null; + hvorforSoke?: string | null; +} + +export const begrunnelseSchema = z.object({ + hvaSokesOm: z.string().max(MAX_LEN_HVA, feilmeldinger.maksLengde).optional(), + hvorforSoke: z.string().max(MAX_LEN_HVORFOR, feilmeldinger.maksLengde), +}); diff --git a/src/sider/03-arbeidUtdanning/index.tsx b/src/sider/03-arbeidUtdanning/index.tsx index aea1101de..5110f1e02 100644 --- a/src/sider/03-arbeidUtdanning/index.tsx +++ b/src/sider/03-arbeidUtdanning/index.tsx @@ -7,7 +7,6 @@ import {ArbeidsforholdResponse, UtdanningFrontend} from "../../generated/model"; import {zodResolver} from "@hookform/resolvers/zod"; import {z} from "zod"; import {ArbeidsforholdListe} from "./ArbeidsforholdListe"; -import {TranslatedError} from "../02-begrunnelse"; import {YesNoInput} from "../../lib/components/form/YesNoInput"; import {UnmountClosed} from "react-collapse"; import {faro} from "@grafana/faro-react"; @@ -20,6 +19,7 @@ import {SkjemaStegStepper} from "../../lib/components/SkjemaSteg/SkjemaStegStepp import {useNavigate} from "react-router"; import {SkjemaStegButtons} from "../../lib/components/SkjemaSteg/SkjemaStegButtons.tsx"; import {logAmplitudeSkjemaStegFullfort} from "../../lib/logAmplitudeSkjemaStegFullfort.ts"; +import {TranslatedError} from "../../lib/components/TranslatedError.tsx"; const MAX_LENGTH = 500;