Stop using session storage (navikt#668)

* Dont use session storage to avoid multiple ferdigstill forhandsvarsel calls

Use query client local storage instead

* Update tests

Author: haakomol

src/components/Aktivitetskrav.cy.tsx

@@ -1,7 +1,17 @@
 import React from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
 import { Aktivitetskrav } from "./Aktivitetskrav";
 import fixtures from "@/mocks/fixtures";
 
+const queryClient = new QueryClient();
+
+const mountWithQueryClient = (component: React.ReactNode) => {
+  cy.mount(
+    <QueryClientProvider client={queryClient}>{component}</QueryClientProvider>,
+  );
+};
+
 describe("<Aktivitetskrav />", () => {
   it("Displays infoside for vurdering ny kandidat", () => {
     cy.mount(<Aktivitetskrav aktivitetskrav={fixtures.nyKandidatFixture} />);
@@ -20,15 +30,17 @@ describe("<Aktivitetskrav />", () => {
   });
 
   it("Displays forhaandsvarsel for vurdering forhandsvarsel with document", () => {
-    cy.mount(
+    mountWithQueryClient(
       <Aktivitetskrav aktivitetskrav={fixtures.forhaandsvarselFixture} />,
     );
 
     cy.contains("Varsel om stans av sykepenger");
   });
 
   it("Displays unntaksinfo with årsak for vurdering unntak", () => {
-    cy.mount(<Aktivitetskrav aktivitetskrav={fixtures.unntakFixture} />);
+    mountWithQueryClient(
+      <Aktivitetskrav aktivitetskrav={fixtures.unntakFixture} />,
+    );
 
     cy.contains("NAV har vurdert aktivitetsplikten din");
     cy.contains(
@@ -37,7 +49,9 @@ describe("<Aktivitetskrav />", () => {
   });
 
   it("Displays oppfyltinfo with årsak for vurdering oppfylt", () => {
-    cy.mount(<Aktivitetskrav aktivitetskrav={fixtures.oppfyltFixture} />);
+    mountWithQueryClient(
+      <Aktivitetskrav aktivitetskrav={fixtures.oppfyltFixture} />,
+    );
 
     cy.contains("NAV har vurdert aktivitetsplikten din");
     cy.contains("NAV vurderer at du oppfyller aktivitetsplikten siden du er");

src/components/history/HistoricEventsSummary.tsx

@@ -1,10 +1,11 @@
-import { AktivitetskravBox } from "@/components/box/AktivitetskravBox";
+import React from "react";
 import { Heading, LinkPanel } from "@navikt/ds-react";
 import NextLink from "next/link";
-import React from "react";
+
+import { AktivitetskravBox } from "@/components/box/AktivitetskravBox";
 import { getShortDateFormat } from "@/utils/dateUtils";
 import { AktivitetskravViewItem } from "@/components/view/viewUtils";
-import { ferdigstillVarsel } from "@/data/ferdigstillVarsel";
+import { useFerdigstillForhandsVarsel } from "@/data/ferdigstillVarsel";
 
 const getHeaderText = (viewItem: AktivitetskravViewItem) => {
   switch (viewItem.type) {
@@ -25,34 +26,41 @@ interface Props {
 
 export const HistoricEventsSummary = ({ historicVurderinger }: Props) => {
   if (historicVurderinger && historicVurderinger.length > 0) {
-    if (historicVurderinger?.some((item) => item.type === "FORHANDSVARSEL")) {
-      //Ferdigstiller tidligere forhåndsvarsel i tilfelle vurdering har endret seg før sykmeldt har lest forhåndsvarselet
-      ferdigstillVarsel();
-    }
-
     return (
-      <AktivitetskravBox>
-        <Heading size="medium" level="2" spacing>
-          Tidligere hendelser vedrørende din aktivitetsplikt
-        </Heading>
+      <>
+        {/* Ferdigstiller tidligere forhåndsvarsel i tilfelle vurdering har endret seg før sykmeldt har lest forhåndsvarselet */}
+        {historicVurderinger?.some(
+          (item) => item.type === "FORHANDSVARSEL",
+        ) && <FerdigstillForhandsVarsel />}
+
+        <AktivitetskravBox>
+          <Heading size="medium" level="2" spacing>
+            Tidligere hendelser vedrørende din aktivitetsplikt
+          </Heading>
 
-        {historicVurderinger.map((item, index) => {
-          return (
-            <LinkPanel
-              href={`/${item.vurdering.internUuid}`}
-              border
-              as={NextLink}
-              key={index}
-            >
-              <LinkPanel.Title>
-                {getShortDateFormat(item.vurdering.createdAt)}:{" "}
-                {getHeaderText(item)}
-              </LinkPanel.Title>
-            </LinkPanel>
-          );
-        })}
-      </AktivitetskravBox>
+          {historicVurderinger.map((item, index) => {
+            return (
+              <LinkPanel
+                href={`/${item.vurdering.internUuid}`}
+                border
+                as={NextLink}
+                key={index}
+              >
+                <LinkPanel.Title>
+                  {getShortDateFormat(item.vurdering.createdAt)}:{" "}
+                  {getHeaderText(item)}
+                </LinkPanel.Title>
+              </LinkPanel>
+            );
+          })}
+        </AktivitetskravBox>
+      </>
     );
   }
   return null;
 };
+
+const FerdigstillForhandsVarsel = () => {
+  useFerdigstillForhandsVarsel();
+  return null;
+};

src/components/view/ForhandsvarselComponent.tsx

@@ -1,18 +1,17 @@
+import React from "react";
 import { BodyLong, Heading, Link, Tag } from "@navikt/ds-react";
-import React, { useEffect } from "react";
+
 import { AktivitetskravVurdering } from "@/schema/aktivitetskravVurderingSchema";
 import { getShortDateFormat } from "@/utils/dateUtils";
 import { ComponentHeader } from "@/components/header/ComponentHeader";
-import { ferdigstillVarsel } from "@/data/ferdigstillVarsel";
+import { useFerdigstillForhandsVarsel } from "@/data/ferdigstillVarsel";
 
 interface Props {
   vurdering: AktivitetskravVurdering;
 }
 
 export const ForhandsvarselComponent = ({ vurdering }: Props) => {
-  useEffect(() => {
-    ferdigstillVarsel();
-  }, []);
+  useFerdigstillForhandsVarsel();
 
   if (vurdering.status !== "FORHANDSVARSEL") return null;
 

src/data/ferdigstillVarsel.ts

@@ -1,12 +1,26 @@
+import { useEffect } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+
 import { post } from "@/data/api";
 
-export const ferdigstillVarsel = () => {
-  const ferdigstiltSessionStorageKey = "ferdigstilt-forhandsvarsel";
-  const hasAlreadyFerdigstilt = sessionStorage.getItem(
-    ferdigstiltSessionStorageKey,
-  );
-  if (!hasAlreadyFerdigstilt) {
-    post(`${process.env.NEXT_PUBLIC_ESYFO_PROXY_API_URL!}/les`);
-    sessionStorage.setItem(ferdigstiltSessionStorageKey, "true");
-  }
+const queryKeyHasFerdigstiltForhandsVarsel = ["hasFerdigstiltForhandsVarsel"];
+
+export const useFerdigstillForhandsVarsel = () => {
+  const queryClient = useQueryClient();
+
+  const { data: hasFerdigstiltForhandsvarsel } = useQuery({
+    queryKey: queryKeyHasFerdigstiltForhandsVarsel,
+    initialData: false,
+  });
+
+  useEffect(() => {
+    const ferdigstillForhandsvarselIfNotAlreadyDone = async () => {
+      if (!hasFerdigstiltForhandsvarsel) {
+        await post(`${process.env.NEXT_PUBLIC_ESYFO_PROXY_API_URL!}/les`);
+        queryClient.setQueryData(queryKeyHasFerdigstiltForhandsVarsel, true);
+      }
+    };
+
+    ferdigstillForhandsvarselIfNotAlreadyDone();
+  }, [hasFerdigstiltForhandsvarsel, queryClient]);
 };