Legg til detail på GlobalAlerts og lag POC for å vise alert fra en eventstrøm

Author: ssaegrov

app/components/global-alert/GlobalAlerts.tsx

@@ -1,4 +1,4 @@
-import { Alert, BodyLong, Heading } from "@navikt/ds-react";
+import { Alert, BodyLong, Detail, Heading } from "@navikt/ds-react";
 import classnames from "classnames";
 
 import { useGlobalAlerts } from "~/hooks/useGlobalAlerts";
@@ -25,6 +25,7 @@ export function GlobalAlerts() {
           <>
             <Heading size="small">{alert.title}</Heading>
             {alert.body && <BodyLong>{alert.body}</BodyLong>}
+            <Detail>{alert.service}</Detail>
           </>
         </Alert>
       ))}

app/routes/test.alert.tsx

@@ -0,0 +1,22 @@
+import { Heading } from "@navikt/ds-react";
+import { useEffect } from "react";
+import { useEventSource } from "remix-utils/sse/react";
+
+import { useGlobalAlerts } from "~/hooks/useGlobalAlerts";
+
+export default function Time() {
+  const { addAlert } = useGlobalAlerts();
+  const alert = useEventSource("/test/sse/alert", { event: "alert" });
+
+  useEffect(() => {
+    if (alert) {
+      addAlert(JSON.parse(alert));
+    }
+  }, [alert]);
+
+  return (
+    <div>
+      <Heading size={"xsmall"}>Test alerts</Heading>
+    </div>
+  );
+}

app/routes/test.sse.alert.ts

@@ -0,0 +1,35 @@
+import type { LoaderFunctionArgs } from "react-router";
+import { eventStream } from "remix-utils/sse/server";
+
+import { IAlert } from "~/context/alert-context";
+
+function getRandomInterval() {
+  return Math.floor(Math.random() * (10000 - 5000 + 1)) + 5000;
+}
+
+function generateAlert() {
+  const alert: IAlert = {
+    variant: "info",
+    title: "Nytt dokument",
+    body: `Det har kommet en ettersending i saken.`,
+    service: new Date().toLocaleTimeString("nb-NO"),
+  };
+  return alert;
+}
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  return eventStream(request.signal, function setup(send) {
+    const timer = setInterval(() => {
+      const alert = generateAlert();
+      send({
+        event: "alert",
+        data: JSON.stringify(alert),
+      });
+    }, getRandomInterval());
+
+    // Cleanup function to stop the interval when the connection is closed
+    return function clear() {
+      clearInterval(timer);
+    };
+  });
+}