🐛 SkjønnsfastsettingForm lukkes ved hopping mellom skjæringstidspunkt

* Skjemaet caches per skjæringstidspunkt og resettes når man går til oversikten

Co-authored-by: Martin Solheim <[email protected]>

Author: trinelinderud

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

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { useSkjønnsfastsettelsesMaler } from '@external/sanity';
 import {
@@ -54,6 +54,14 @@ export const SkjønnsfastsettingSykepengegrunnlag = ({
         setEndretSykepengegrunnlag(null);
     }, [editing]);
 
+    const skjæringstidspunktRef = useRef(periode.skjaeringstidspunkt);
+    useEffect(() => {
+        if (periode.skjaeringstidspunkt !== skjæringstidspunktRef.current) {
+            setEditing(false);
+            skjæringstidspunktRef.current = periode.skjaeringstidspunkt;
+        }
+    }, [periode.skjaeringstidspunkt]);
+
     return (
         <div className={classNames(styles.formWrapper, editing && styles.redigerer)}>
             <SkjønnsfastsettingHeader

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

@@ -69,7 +69,7 @@ export const SkjønnsfastsettingForm = ({
     );
     const erBeslutteroppgave = isBeregnetPeriode(periode) && (periode.totrinnsvurdering?.erBeslutteroppgave ?? false);
     const feiloppsummeringRef = useRef<HTMLDivElement>(null);
-    const setSkjønnsfastsettelseFormState = useSetSkjønnsfastsettelseFormState();
+    const setSkjønnsfastsettelseFormState = useSetSkjønnsfastsettelseFormState(periode.skjaeringstidspunkt);
     const avrundetSammenligningsgrunnlag = avrundetToDesimaler(sammenligningsgrunnlag);
     const cancelEditing = () => {
         setEditing(false);

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

@@ -24,7 +24,7 @@ export const useSkjønnsfastsettingDefaults = (
     defaults: SkjønnsfastsettingFormFields;
 } => {
     const arbeidsgiver = useCurrentArbeidsgiver(person);
-    const skjønnsfastsettelseFormState = useSkjønnsfastsettelseFormState();
+    const skjønnsfastsettelseFormState = useSkjønnsfastsettelseFormState(period.skjaeringstidspunkt);
 
     if (!arbeidsgiver)
         return {

src/state/forms/skjønnsfastsetting.ts

@@ -1,16 +1,22 @@
 import { atom, useAtomValue, useSetAtom } from 'jotai';
+import { atomFamily } from 'jotai/utils';
 import { useEffect } from 'react';
 
 import { Maybe } from '@io/graphql';
 import { SkjønnsfastsettingFormFields } from '@saksbilde/sykepengegrunnlag/skjønnsfastsetting/form/skjønnsfastsettingForm/SkjønnsfastsettingForm';
 import { Skjønnsfastsettingstype } from '@saksbilde/sykepengegrunnlag/skjønnsfastsetting/skjønnsfastsetting';
 
-const skjønnsfastsettelseFormState = atom<Maybe<SkjønnsfastsettingFormFields>>(null);
+const skjemaFamily = atomFamily(
+    // _ er skjæringstidspunkt som brukes som key til skjemaFamily
+    (_: string) => atom<Maybe<SkjønnsfastsettingFormFields>>(null),
+    (a, b) => a === b,
+);
 
-export const useSkjønnsfastsettelseFormState = () => useAtomValue(skjønnsfastsettelseFormState);
+export const useSkjønnsfastsettelseFormState = (skjæringstidspunkt: string) =>
+    useAtomValue(skjemaFamily(skjæringstidspunkt));
 
-export const useSetSkjønnsfastsettelseFormState = () => {
-    const setState = useSetAtom(skjønnsfastsettelseFormState);
+export const useSetSkjønnsfastsettelseFormState = (skjæringstispunkt: string) => {
+    const setState = useSetAtom(skjemaFamily(skjæringstispunkt));
     return (årsak: string, begrunnelseFritekst: string, type?: Skjønnsfastsettingstype) => {
         setState((prevState) => {
             if (prevState) {
@@ -33,10 +39,10 @@ export const useSetSkjønnsfastsettelseFormState = () => {
 };
 
 export const useResetSkjønnsfastsettelseFormState = () => {
-    const setState = useSetAtom(skjønnsfastsettelseFormState);
     useEffect(() => {
-        setState(null);
-    }, [setState]);
+        skjemaFamily.setShouldRemove(() => true);
+        skjemaFamily.setShouldRemove(null);
+    }, []);
 };
 
 const defaultState: SkjønnsfastsettingFormFields = {