sentraliser kode ifm. DeltakerRegistrering

frontend/mulighetsrommet-veileder-flate/src/apps/modia/ModiaArbeidsmarkedstiltak.tsx

@@ -11,7 +11,7 @@ import { DemoImageHeader } from "@/components/DemoImageHeader";
 import { Landingsside } from "./views/Landingsside";
 import { ModiaArbeidsmarkedstiltakOversikt } from "./views/ModiaArbeidsmarkedstiltakOversikt";
 import { ModiaArbeidsmarkedstiltakDetaljer } from "./views/ModiaArbeidsmarkedstiltakDetaljer";
-import { DeltakerRegistrering } from "@/microfrontends/team_komet/DeltakerRegistrering";
+import { DeltakerRegistrering } from "@/microfrontends/deltaker-registrering/DeltakerRegistrering";
 
 export function ModiaArbeidsmarkedstiltak() {
   return (
@@ -24,7 +24,7 @@ export function ModiaArbeidsmarkedstiltak() {
 function ModiaArbeidsmarkedstiltakRoutes() {
   useHentVeilederdata(); // Pre-fetch veilederdata så slipper vi å vente på data når vi trenger det i appen senere
 
-  const { fnr, enhet } = useInitializeAppContext();
+  useInitializeAppContext();
 
   useInitializeArbeidsmarkedstiltakFilterForBruker();
 
@@ -48,10 +48,7 @@ function ModiaArbeidsmarkedstiltakRoutes() {
       <Route path="oversikt" element={<ModiaArbeidsmarkedstiltakOversikt />} />
       <Route path="tiltak/:id/*" element={<ModiaArbeidsmarkedstiltakDetaljer />} />
       {visDeltakerregistrering ? (
-        <Route
-          path="tiltak/:id/deltaker"
-          element={<DeltakerRegistrering fnr={fnr} enhetId={enhet} />}
-        />
+        <Route path="tiltak/:id/deltaker" element={<DeltakerRegistrering />} />
       ) : null}
       <Route
         path="*"

frontend/mulighetsrommet-veileder-flate/src/apps/modia/views/ModiaArbeidsmarkedstiltakDetaljer.tsx

@@ -29,7 +29,7 @@ import { useFeatureToggle } from "@/core/api/feature-toggles";
 import { DelMedBruker } from "@/components/delMedBruker/DelMedBruker";
 import { TiltakLoader } from "@/components/TiltakLoader";
 import { useGetTiltaksgjennomforingIdFraUrl } from "@/core/api/queries/useGetTiltaksgjennomforingIdFraUrl";
-import { isProd } from "@/utils/Utils";
+import { isProduction } from "@/environment";
 
 export function ModiaArbeidsmarkedstiltakDetaljer() {
   const { fnr } = useAppContext();
@@ -195,7 +195,7 @@ function isIndividueltTiltak(tiltakstype: VeilederflateTiltakstype): boolean {
 }
 
 function lenkeTilOpprettAvtale(): string {
-  const baseUrl = isProd()
+  const baseUrl = isProduction
     ? "https://tiltaksgjennomforing.intern.nav.no"
     : "https://tiltaksgjennomforing.intern.dev.nav.no";
   return `${baseUrl}/tiltaksgjennomforing/opprett-avtale`;

frontend/mulighetsrommet-veileder-flate/src/environment.ts

@@ -0,0 +1,23 @@
+export enum Environment {
+  PROD = "PROD",
+  DEV = "DEV",
+  LOCAL = "LOCAL",
+}
+
+export const environment: Environment = getEnvironment();
+
+export const isProduction = window.location.origin.endsWith(".intern.nav.no");
+
+export const isDevelopment = window.location.origin.endsWith(".intern.dev.nav.no");
+
+function getEnvironment() {
+  if (isProduction) {
+    return Environment.PROD;
+  }
+
+  if (isDevelopment) {
+    return Environment.DEV;
+  }
+
+  return Environment.LOCAL;
+}

frontend/mulighetsrommet-veileder-flate/src/hooks/useInitializeAppContext.ts

@@ -1,10 +1,10 @@
 import { useSetAtom } from "jotai";
 import { useOverordnetEnhet } from "../core/api/queries/useOverordnetEnhet";
-import { appContextAtom, AppContextData, useAppContext } from "./useAppContext";
+import { appContextAtom, useAppContext } from "./useAppContext";
 import { useEffect } from "react";
 import { useLogEvent } from "../logging/amplitude";
 
-export function useInitializeAppContext(): AppContextData {
+export function useInitializeAppContext() {
   const appContext = useAppContext();
   const setAppContext = useSetAtom(appContextAtom);
   const { data: overordnetEnhet } = useOverordnetEnhet(appContext.enhet);
@@ -21,6 +21,4 @@ export function useInitializeAppContext(): AppContextData {
       logEvent({ name: "arbeidsmarkedstiltak.unike-brukere" });
     }
   }, [appContext.overordnetEnhet]);
-
-  return appContext;
 }

frontend/mulighetsrommet-veileder-flate/src/microfrontends/deltaker-registrering/DeltakerRegistrering.tsx

@@ -0,0 +1,45 @@
+import { Alert, Button } from "@navikt/ds-react";
+import React from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { useLoadDeltakerRegistreringApp } from "@/microfrontends/deltaker-registrering/useLoadDeltakerRegistreringApp";
+import { useGetTiltaksgjennomforingIdFraUrl } from "@/core/api/queries/useGetTiltaksgjennomforingIdFraUrl";
+import { useAppContext } from "@/hooks/useAppContext";
+
+export function DeltakerRegistrering() {
+  return (
+    <React.Suspense fallback="Laster...">
+      <ErrorBoundary
+        FallbackComponent={({ resetErrorBoundary }) => {
+          return (
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                gap: "1rem",
+              }}
+            >
+              <Alert variant="error">Klarte ikke laste deltakerregistrering</Alert>
+              <Button onClick={resetErrorBoundary}>Prøv på nytt</Button>
+            </div>
+          );
+        }}
+      >
+        <DeltakerRegistreringApp />
+      </ErrorBoundary>
+    </React.Suspense>
+  );
+}
+
+function DeltakerRegistreringApp() {
+  useLoadDeltakerRegistreringApp();
+
+  const tiltaksgjennomforingId = useGetTiltaksgjennomforingIdFraUrl();
+
+  const { fnr, enhet } = useAppContext();
+
+  return React.createElement("arbeidsmarkedstiltak-deltaker", {
+    "data-personident": fnr,
+    "data-deltakerlisteId": tiltaksgjennomforingId,
+    "data-enhetId": enhet,
+  });
+}

frontend/mulighetsrommet-veileder-flate/src/microfrontends/deltaker-registrering/useLoadDeltakerRegistreringApp.ts

@@ -0,0 +1,40 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { environment } from "@/environment";
+import { headers } from "@/core/api/headers";
+
+export const DELTAKERREGISTRERING_ENTRY = "src/webComponentWrapper.tsx";
+
+const DELTAKERREGISTRERING_KOMET = {
+  LOCAL: "http://localhost:4173",
+  DEV: "https://amt-deltaker-flate.intern.dev.nav.no", // URL til bundle som blir hostet et sted i dev
+  PROD: "", // URL til bundle som blir hostet et sted i prod
+};
+
+const deltakerRegistreringOrigin = DELTAKERREGISTRERING_KOMET[environment];
+
+const deltakerregistreringKometManifestUrl = `${deltakerRegistreringOrigin}/asset-manifest.json`;
+
+interface DeltakerRegistreringAssetManifest {
+  "src/webComponentWrapper.tsx": {
+    file: string;
+  };
+}
+
+export function useLoadDeltakerRegistreringApp() {
+  return useSuspenseQuery<any>({
+    queryKey: ["deltaker-registrering-asset-manifest"],
+    queryFn: async () => {
+      const response = await fetch(deltakerregistreringKometManifestUrl, {
+        headers,
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to load DeltakerRegistrering");
+      }
+
+      const manifest: DeltakerRegistreringAssetManifest = await response.json();
+      const entry = manifest[DELTAKERREGISTRERING_ENTRY].file;
+      return import(/* @vite-ignore */ `${deltakerRegistreringOrigin}/${entry}`);
+    },
+  });
+}

frontend/mulighetsrommet-veileder-flate/src/utils/Utils.ts

@@ -4,14 +4,6 @@ import {
   valgteEnhetsnumre,
 } from "../hooks/useArbeidsmarkedstiltakFilter";
 
-export function isDev() {
-  return !isProd();
-}
-
-export function isProd() {
-  return window.location.origin.endsWith(".intern.nav.no");
-}
-
 export const inneholderUrl = (string: string) => {
   return window.location.href.indexOf(string) > -1;
 };