WIP client side fetch mov

app/components/melding-om-vedtak/MeldingOmVedtak.tsx

@@ -1,27 +1,67 @@
+import { useFetcher } from "@remix-run/react";
+import { useEffect, useState } from "react";
+
 import { MeldingOmVedtakPreview } from "~/components/melding-om-vedtak-preview/MeldingOmVedtakPreview";
 import { UtvidedeBeskrivelser } from "~/components/utvidede-beskrivelser/UtvidedeBeskrivelser";
 import { useMeldingOmVedtakTekst } from "~/hooks/useMeldingOmVedtakTekst";
 import { useTypedRouteLoaderData } from "~/hooks/useTypedRouteLoaderData";
+import { IMeldingOmVedtak } from "~/models/melding-om-vedtak.server";
+import { isIMeldingOmVedtak } from "~/utils/type-guards";
 
 import styles from "./MeldingOmVedtak.module.css";
 
 export function MeldingOmVedtak({ readOnly }: { readOnly?: boolean }) {
-  const { meldingOmVedtak } = useTypedRouteLoaderData("routes/oppgave.$oppgaveId");
+  const fetcher = useFetcher();
+  const { oppgave } = useTypedRouteLoaderData("routes/oppgave.$oppgaveId");
+  const [meldingOmVedtak, setMeldingOmVedtak] = useState<IMeldingOmVedtak | null>(null);
   const { utvidedeBeskrivelser } = useMeldingOmVedtakTekst();
-  if (!meldingOmVedtak) {
-    return null;
-  }
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const formData = new FormData();
+        formData.append("behandlingId", oppgave.behandlingId);
+        formData.append("fornavn", oppgave.person.fornavn);
+        formData.append("mellomnavn", oppgave.person.mellomnavn || "");
+        formData.append("etternavn", oppgave.person.etternavn);
+        formData.append("fodselsnummer", oppgave.person.ident);
+        if (oppgave.saksbehandler) {
+          formData.append("saksbehandler", JSON.stringify(oppgave.saksbehandler));
+        }
+        if (oppgave.beslutter) {
+          formData.append("beslutter", JSON.stringify(oppgave.beslutter));
+        }
+
+        fetcher.submit(formData, {
+          action: "/api/hent-melding-om-vedtak",
+          method: "post",
+        });
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  useEffect(() => {
+    if (fetcher.data && isIMeldingOmVedtak(fetcher.data)) {
+      setMeldingOmVedtak(fetcher.data);
+    }
+  }, [fetcher.data]);
 
   return (
     <div className={styles.container}>
       <UtvidedeBeskrivelser utvidetBeskrivelser={utvidedeBeskrivelser} readOnly={readOnly} />
 
-      <div className={styles.previewContainer}>
-        <MeldingOmVedtakPreview
-          meldingOmVedtak={meldingOmVedtak}
-          utvidetBeskrivelser={utvidedeBeskrivelser}
-        />
-      </div>
+      {meldingOmVedtak && (
+        <div className={styles.previewContainer}>
+          <MeldingOmVedtakPreview
+            meldingOmVedtak={meldingOmVedtak}
+            utvidetBeskrivelser={utvidedeBeskrivelser}
+          />
+        </div>
+      )}
     </div>
   );
 }

app/routes/api.hent-melding-om-vedtak.tsx

@@ -0,0 +1,23 @@
+import { ActionFunctionArgs } from "@remix-run/node";
+
+import { hentMeldingOmVedtak } from "~/models/melding-om-vedtak.server";
+
+export async function action({ request }: ActionFunctionArgs) {
+  const formData = await request.formData();
+  const behandlingId = formData.get("behandlingId") as string;
+  const fornavn = formData.get("fornavn") as string;
+  const mellomnavn = formData.get("mellomnavn") as string;
+  const etternavn = formData.get("etternavn") as string;
+  const fodselsnummer = formData.get("fodselsnummer") as string;
+  const saksbehandler = formData.get("saksbehandler") as string;
+  const beslutter = formData.get("beslutter") as string;
+
+  return await hentMeldingOmVedtak(request, behandlingId, {
+    fornavn,
+    mellomnavn,
+    etternavn,
+    fodselsnummer,
+    saksbehandler: saksbehandler ? JSON.parse(saksbehandler) : undefined,
+    beslutter: beslutter ? JSON.parse(beslutter) : undefined,
+  });
+}

app/utils/type-guards.ts

@@ -2,7 +2,10 @@ import { AlertProps } from "@navikt/ds-react";
 
 import type { IFormValidationError } from "~/components/oppgave-handlinger/OppgaveHandlinger";
 import type { IAlert } from "~/context/alert-context";
-import { ILagreUtvidetBeskrivelseResponse } from "~/models/melding-om-vedtak.server";
+import {
+  ILagreUtvidetBeskrivelseResponse,
+  IMeldingOmVedtak,
+} from "~/models/melding-om-vedtak.server";
 import { ILagreNotatResponse } from "~/models/oppgave.server";
 import type { INetworkResponseError, INetworkResponseSuccess } from "~/utils/types";
 
@@ -76,3 +79,16 @@ export function isFormValidationError(data: unknown): data is IFormValidationErr
 
   return typeof maybeError.message === "string";
 }
+
+export function isIMeldingOmVedtak(data: unknown): data is IMeldingOmVedtak {
+  if (typeof data !== "object" || data === null) {
+    return false;
+  }
+
+  const maybeMeldingOmVedtak = data as Partial<IMeldingOmVedtak>;
+
+  const hasValidHtml = typeof maybeMeldingOmVedtak.html === "string";
+  const hasValidUtvidedeBeskrivelser = Array.isArray(maybeMeldingOmVedtak.utvidedeBeskrivelser);
+
+  return hasValidHtml && hasValidUtvidedeBeskrivelser;
+}