🐛 Reset skjønnsfastsettingsskjema når man går ut av eller bytter person

Co-authored-by: Jakob Havstein Eriksen <[email protected]>

Author: navelgen

src/app/person/[aktorId]/layout.tsx

@@ -1,7 +1,9 @@
 'use client';
 
+import { createStore } from 'jotai/index';
 import dynamic from 'next/dynamic';
-import React, { PropsWithChildren, ReactElement } from 'react';
+import { useParams } from 'next/navigation';
+import React, { PropsWithChildren, ReactElement, useState } from 'react';
 
 import { useKeyboardShortcuts } from '@hooks/useKeyboardShortcuts';
 import { useRefetchDriftsmeldinger } from '@hooks/useRefetchDriftsmeldinger';
@@ -18,6 +20,7 @@ import { InfovarselOmStans } from '@saksbilde/infovarselOmStans/InfovarselOmStan
 import { PersonHeader } from '@saksbilde/personHeader';
 import { Timeline } from '@saksbilde/timeline';
 import { Venstremeny } from '@saksbilde/venstremeny/Venstremeny';
+import { PersonStoreContext } from '@state/contexts/personStore';
 
 import styles from './layout.module.css';
 
@@ -27,26 +30,36 @@ const Historikk = dynamic(() => import('@saksbilde/historikk').then((mod) => mod
 });
 
 export default function Layout({ children }: PropsWithChildren): ReactElement {
+    const { aktorId } = useParams<{ aktorId?: string }>();
+
     useRefreshPersonVedOpptegnelse();
     usePollEtterOpptegnelser();
     useVarselOmSakErTildeltAnnenSaksbehandler();
     useKeyboardShortcuts();
     useResetOpenedDocuments();
     useRefetchDriftsmeldinger();
 
+    return <AktorScopedLayout key={aktorId}>{children}</AktorScopedLayout>;
+}
+
+const AktorScopedLayout = ({ children }: PropsWithChildren): ReactElement => {
+    const [personStore] = useState(createStore());
+
     return (
-        <div className={styles.Saksbilde}>
-            <InfovarselOmStans />
-            <PersonHeader />
-            <Timeline />
-            <AmplitudeProvider>
-                <VenterPåEndringProvider>
-                    <Venstremeny />
-                    <Saksbilde>{children}</Saksbilde>
-                    <Historikk />
-                    <EmojiTilbakemeldingMedPeriode />
-                </VenterPåEndringProvider>
-            </AmplitudeProvider>
-        </div>
+        <PersonStoreContext.Provider value={personStore}>
+            <div className={styles.Saksbilde}>
+                <InfovarselOmStans />
+                <PersonHeader />
+                <Timeline />
+                <AmplitudeProvider>
+                    <VenterPåEndringProvider>
+                        <Venstremeny />
+                        <Saksbilde>{children}</Saksbilde>
+                        <Historikk />
+                        <EmojiTilbakemeldingMedPeriode />
+                    </VenterPåEndringProvider>
+                </AmplitudeProvider>
+            </div>
+        </PersonStoreContext.Provider>
     );
-}
+};

src/routes/oversikt/Oversikt.tsx

@@ -15,7 +15,6 @@ import { BehandlingsstatistikkView } from '@oversikt/behandlingsstatistikk/Behan
 import { FiltermenySkeleton } from '@oversikt/filtermeny/Filtermeny';
 import { BehandletIdagTable } from '@oversikt/table/BehandletIdagTable';
 import { OppgaverTable } from '@oversikt/table/oppgaverTable/OppgaverTable';
-import { useResetSkjønnsfastsettelseFormState } from '@saksbilde/sykepengegrunnlag/skjønnsfastsetting/form/skjønnsfastsettingForm/SkjønnsfastsettingForm';
 import { useOppgaveFeed } from '@state/oppgaver';
 
 import { IngenOppgaver } from './IngenOppgaver';
@@ -49,7 +48,6 @@ export const Oversikt = (): ReactElement => {
     useKeyboardShortcuts();
     useFjernPersonFraApolloCache();
     useRefetchDriftsmeldinger();
-    useResetSkjønnsfastsettelseFormState();
 
     return (
         <main className={styles.Oversikt}>

src/routes/saksbilde/sykepengegrunnlag/skjønnsfastsetting/SkjønnsfastsettingSykepengegrunnlag.tsx

@@ -1,6 +1,4 @@
 import classNames from 'classnames';
-import { atom, useAtom } from 'jotai/index';
-import { atomFamily } from 'jotai/utils';
 import React, { useEffect, useState } from 'react';
 
 import { useSkjønnsfastsettelsesMaler } from '@external/sanity';
@@ -12,6 +10,7 @@ import {
     PersonFragment,
     Sykepengegrunnlagsgrense,
 } from '@io/graphql';
+import { useAtomEditingForPersonOgSkjæringstidspunkt } from '@saksbilde/sykepengegrunnlag/skjønnsfastsetting/atoms';
 import {
     SkjønnsfastsettingForm,
     useAktiveArbeidsgivere,
@@ -24,8 +23,6 @@ import { SkjønnsfastsettingSammendrag } from './SkjønnsfastsettingSammendrag';
 
 import styles from './SkjønnsfastsettingSykepengegrunnlag.module.css';
 
-const editingFamily = atomFamily((_skjæringstidspunkt: string) => atom<boolean>(false));
-
 interface SkjønnsfastsettingSykepengegrunnlagProps {
     person: PersonFragment;
     periode: BeregnetPeriodeFragment | GhostPeriodeFragment;
@@ -51,7 +48,7 @@ export const SkjønnsfastsettingSykepengegrunnlag = ({
     avviksprosent,
     organisasjonsnummer,
 }: SkjønnsfastsettingSykepengegrunnlagProps) => {
-    const [editing, setEditing] = useAtom(editingFamily(periode.skjaeringstidspunkt));
+    const [editing, setEditing] = useAtomEditingForPersonOgSkjæringstidspunkt(periode.skjaeringstidspunkt);
     const [endretSykepengegrunnlag, setEndretSykepengegrunnlag] = useState<Maybe<number>>(null);
     const aktiveArbeidsgivereMedOmregnetÅrsinntekt = useAktiveArbeidsgivere(person, periode, inntekter);
     const skalVise828andreLedd = avviksprosent > 25;

src/routes/saksbilde/sykepengegrunnlag/skjønnsfastsetting/atoms.ts

@@ -0,0 +1,28 @@
+import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai/index';
+import { atomFamily } from 'jotai/utils';
+
+import { Maybe } from '@io/graphql';
+import { SkjønnsfastsettingFormFields } from '@saksbilde/sykepengegrunnlag/skjønnsfastsetting/form/skjønnsfastsettingForm/SkjønnsfastsettingForm';
+import { usePersonStore } from '@state/contexts/personStore';
+
+const skjemaFamily = atomFamily((_skjæringstidspunkt: string) => atom<Maybe<SkjønnsfastsettingFormFields>>(null));
+
+export const useAtomSkjemaForPersonOgSkjæringstidspunkt = (skjaeringstidspunkt: string) =>
+    useAtom(skjemaFamily(skjaeringstidspunkt), {
+        store: usePersonStore(),
+    });
+
+export const useAtomValueSkjemaForPersonOgSkjæringstidspunkt = (skjaeringstidspunkt: string) =>
+    useAtomValue(skjemaFamily(skjaeringstidspunkt), {
+        store: usePersonStore(),
+    });
+
+export const useSetAtomSkjemaForPersonOgSkjæringstidspunkt = (skjaeringstidspunkt: string) =>
+    useSetAtom(skjemaFamily(skjaeringstidspunkt), { store: usePersonStore() });
+
+const editingFamily = atomFamily((_skjæringstidspunkt: string) => atom<boolean>(false));
+
+export const useAtomEditingForPersonOgSkjæringstidspunkt = (skjaeringstidspunkt: string) =>
+    useAtom(editingFamily(skjaeringstidspunkt), {
+        store: usePersonStore(),
+    });

src/routes/saksbilde/sykepengegrunnlag/skjønnsfastsetting/form/skjønnsfastsettingForm/SkjønnsfastsettingForm.tsx

@@ -1,5 +1,3 @@
-import { atom, useAtomValue, useSetAtom } from 'jotai/index';
-import { atomFamily } from 'jotai/utils';
 import React, { ReactElement, useEffect, useRef } from 'react';
 import { CustomElement, FieldErrors, FieldValues, FormProvider, useForm, useWatch } from 'react-hook-form';
 
@@ -18,6 +16,10 @@ import {
     Sykepengegrunnlagsgrense,
     Sykepengegrunnlagskjonnsfastsetting,
 } from '@io/graphql';
+import {
+    useAtomValueSkjemaForPersonOgSkjæringstidspunkt,
+    useSetAtomSkjemaForPersonOgSkjæringstidspunkt,
+} from '@saksbilde/sykepengegrunnlag/skjønnsfastsetting/atoms';
 import { SkjønnsfastsettingBegrunnelse } from '@saksbilde/sykepengegrunnlag/skjønnsfastsetting/form/SkjønnsfastsettingBegrunnelse';
 import { SkjønnsfastsettingType } from '@saksbilde/sykepengegrunnlag/skjønnsfastsetting/form/SkjønnsfastsettingType';
 import { SkjønnsfastsettingÅrsak } from '@saksbilde/sykepengegrunnlag/skjønnsfastsetting/form/SkjønnsfastsettingÅrsak';
@@ -33,15 +35,6 @@ import { skjønnsfastsettingFormToDto } from './skjønnsfastsettingFormToDto';
 
 import styles from './SkjønnsfastsettingForm.module.css';
 
-const skjemaFamily = atomFamily((_skjæringstidspunkt: string) => atom<Maybe<SkjønnsfastsettingFormFields>>(null));
-
-export const useResetSkjønnsfastsettelseFormState = () => {
-    useEffect(() => {
-        skjemaFamily.setShouldRemove(() => true);
-        skjemaFamily.setShouldRemove(null);
-    }, []);
-};
-
 export const useAktiveArbeidsgivere = (
     person: PersonFragment,
     period: BeregnetPeriodeFragment | GhostPeriodeFragment,
@@ -68,7 +61,7 @@ function useFormDefaults(
     aktiveArbeidsgivereInntekter: Arbeidsgiverinntekt[],
     forrigeSkjønnsfastsettelse: Sykepengegrunnlagskjonnsfastsetting | null,
 ): SkjønnsfastsettingFormFields {
-    const skjønnsfastsettelseFormState = useAtomValue(skjemaFamily(period.skjaeringstidspunkt));
+    const skjønnsfastsettelseFormState = useAtomValueSkjemaForPersonOgSkjæringstidspunkt(period.skjaeringstidspunkt);
     if (skjønnsfastsettelseFormState) {
         return skjønnsfastsettelseFormState;
     } else {
@@ -184,7 +177,7 @@ export const SkjønnsfastsettingForm = ({
     const watchedFormFields = watch();
     const prevFormFields = useRef(watchedFormFields);
 
-    const setFormFields = useSetAtom(skjemaFamily(periode.skjaeringstidspunkt));
+    const setFormFields = useSetAtomSkjemaForPersonOgSkjæringstidspunkt(periode.skjaeringstidspunkt);
     useEffect(() => {
         if (JSON.stringify(prevFormFields.current) !== JSON.stringify(watchedFormFields)) {
             setFormFields(watchedFormFields);

src/state/contexts/personStore.tsx

@@ -0,0 +1,17 @@
+import { createStore } from 'jotai/index';
+import { createContext, useContext } from 'react';
+
+import { Maybe } from '@io/graphql';
+
+type JotaiStore = ReturnType<typeof createStore>;
+export const PersonStoreContext = createContext<Maybe<JotaiStore>>(null);
+
+export const usePersonStore = (): JotaiStore => {
+    const context = useContext(PersonStoreContext);
+    if (!context)
+        throw new Error(
+            'Mangler PersonStoreContext - antageligvis brukes usePersonStore()' +
+                ' et sted som ikke ligger under PersonStoreContext.Provider i komponenttreet',
+        );
+    return context;
+};