r - samler vår context til en provider

src/lib/components/Feiloppsummering.tsx

@@ -1,13 +1,12 @@
 import {Alert, Heading} from "@navikt/ds-react";
-import React, {useContext} from "react";
 import {useTranslation} from "react-i18next";
-import {ValideringsContext} from "../providers/ValideringContextProvider.tsx";
+import {useValideringContext} from "../providers/useValideringContext.tsx";
 
 const Feiloppsummering = () => {
     const {t} = useTranslation("skjema");
     const {
         state: {feil, visValideringsfeil},
-    } = useContext(ValideringsContext);
+    } = useValideringContext();
     if (!visValideringsfeil || !feil?.length) return null;
 
     return (

src/lib/components/SkjemaSteg/useSkjemaNavigation.ts

@@ -1,6 +1,5 @@
 import {useNavigate} from "react-router";
-import {useContext} from "react";
-import {ValideringsContext} from "../../providers/ValideringContextProvider.tsx";
+import {useValideringContext} from "../../providers/useValideringContext.tsx";
 import {logAmplitudeEvent} from "../../amplitude/Amplitude";
 
 /**
@@ -11,7 +10,7 @@ export const useSkjemaNavigation = (steg: number) => {
     const {
         state: {feil},
         dispatch,
-    } = useContext(ValideringsContext);
+    } = useValideringContext();
     const navigate = useNavigate();
 
     /**

src/lib/hooks/common/useValidering.tsx

@@ -1,14 +1,13 @@
 import {useTranslation} from "react-i18next";
-import {useContext} from "react";
-import {ValideringsContext} from "../../providers/ValideringContextProvider.tsx";
+import {useValideringContext} from "../../providers/useValideringContext.tsx";
 
 import {ValidationArea} from "../../ValidationArea";
 import {DigisosLanguageKey} from "../../i18n/common.ts";
 
 export const useValidering = (faktumKey: ValidationArea) => {
     const {t} = useTranslation("skjema");
 
-    const {state, dispatch} = useContext(ValideringsContext);
+    const {state, dispatch} = useValideringContext();
 
     const error = state.feil?.find((f) => f.faktumKey === faktumKey);
 

src/lib/providers/DigisosContext.tsx

@@ -0,0 +1,20 @@
+import {createContext, Dispatch} from "react";
+import {ValideringActionTypes, ValideringState} from "../validering.ts";
+
+type TDigisosContext = {
+    analytics: {
+        analyticsData: Partial<AnalyticsData>;
+        setAnalyticsData: (data: Partial<AnalyticsData>) => void;
+    };
+    validering: {
+        state: ValideringState;
+        dispatch: Dispatch<ValideringActionTypes>;
+    };
+};
+
+export const DigisosContext = createContext<TDigisosContext | undefined>(undefined);
+
+export type AnalyticsData = {
+    selectedKategorier?: string[];
+    situasjonEndret?: string;
+};

src/lib/providers/DigisosContextProvider.tsx

@@ -0,0 +1,32 @@
+import {ReactNode, useReducer, useState} from "react";
+import {initialValideringState, valideringsReducer} from "../validering.ts";
+import {AnalyticsData, DigisosContext} from "./DigisosContext.tsx";
+
+export const DigisosContextProvider = ({children}: {children: ReactNode}) => {
+    const [state, dispatch] = useReducer(valideringsReducer, initialValideringState);
+
+    const [analyticsData, setAnalyticsDataState] = useState<AnalyticsData>({});
+    const setAnalyticsData = (data: Partial<AnalyticsData>) => {
+        setAnalyticsDataState((prevData) => ({
+            ...prevData,
+            ...data,
+        }));
+    };
+
+    return (
+        <DigisosContext.Provider
+            value={{
+                analytics: {
+                    analyticsData,
+                    setAnalyticsData,
+                },
+                validering: {
+                    state,
+                    dispatch,
+                },
+            }}
+        >
+            {children}
+        </DigisosContext.Provider>
+    );
+};

src/lib/providers/Providers.tsx

@@ -1,20 +1,17 @@
 import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
-import {ValideringsContextProvider} from "./ValideringContextProvider.tsx";
-import {AnalyticsProvider} from "./AnalyticsContextProvider.tsx";
+import {DigisosContextProvider} from "./DigisosContextProvider.tsx";
 import {ReactQueryDevtools} from "@tanstack/react-query-devtools";
 
 const queryClient = new QueryClient();
 export const Providers = ({children}: {children: React.ReactNode}) => {
     return (
-        <ValideringsContextProvider>
+        <DigisosContextProvider>
             <QueryClientProvider client={queryClient}>
-                <AnalyticsProvider>
-                    {children}
-                    <div aria-hidden={"true"}>
-                        <ReactQueryDevtools initialIsOpen={false} />
-                    </div>
-                </AnalyticsProvider>
+                {children}
+                <div aria-hidden={"true"}>
+                    <ReactQueryDevtools initialIsOpen={false} />
+                </div>
             </QueryClientProvider>
-        </ValideringsContextProvider>
+        </DigisosContextProvider>
     );
 };

src/lib/providers/useAnalyticsContext.tsx

@@ -0,0 +1,8 @@
+import {useContext} from "react";
+import {DigisosContext} from "./DigisosContext.tsx";
+
+export const useAnalyticsContext = () => {
+    const context = useContext(DigisosContext)?.analytics;
+    if (!context) throw new Error("useAnalyticsContext must be used within a AnalyticsProvider");
+    return context;
+};

src/lib/providers/useValideringContext.tsx

@@ -0,0 +1,10 @@
+import {useContext} from "react";
+import {DigisosContext} from "./DigisosContext.tsx";
+
+export const useValideringContext = () => {
+    const context = useContext(DigisosContext)?.validering;
+    if (!context) {
+        throw new Error("useValideringContext must be used within a ValideringContextProvider");
+    }
+    return context;
+};

src/sider/09-oppsummering/Oppsummering.tsx

@@ -16,7 +16,7 @@ import React from "react";
 import {useCurrentSoknadIsKort} from "../../lib/components/SkjemaSteg/useCurrentSoknadIsKort.tsx";
 import {useNavigate} from "react-router";
 import {SkjemaStegButtons} from "../../lib/components/SkjemaSteg/SkjemaStegButtons.tsx";
-import {useAnalyticsContext} from "../../lib/providers/AnalyticsContextProvider.tsx";
+import {useAnalyticsContext} from "../../lib/providers/useAnalyticsContext.tsx";
 
 export const Oppsummering = () => {
     const {t} = useTranslation("skjema");

src/sider/kort/02-behov/index.tsx

@@ -20,7 +20,7 @@ import {useNavigate} from "react-router";
 import {SkjemaStegStepper} from "../../../lib/components/SkjemaSteg/SkjemaStegStepper.tsx";
 import {SkjemaStegButtons} from "../../../lib/components/SkjemaSteg/SkjemaStegButtons.tsx";
 import {logAmplitudeSkjemaStegFullfort} from "../../../lib/logAmplitudeSkjemaStegFullfort.ts";
-import {useAnalyticsContext} from "../../../lib/providers/AnalyticsContextProvider.tsx";
+import {useAnalyticsContext} from "../../../lib/providers/useAnalyticsContext.tsx";
 import {useFeatureToggles} from "../../../generated/feature-toggle-ressurs/feature-toggle-ressurs.ts";
 
 const MAX_LEN_HVA_ER_ENDRET = 500;