send notifications over SSE to be displayed inside the app

app/routes/__app/settings/notifications.tsx

@@ -2,43 +2,16 @@ import type { ActionFunction } from "@remix-run/node";
 import { ClientOnly } from "remix-utils";
 import { Form } from "@remix-run/react";
 
-import db from "~/utils/db.server";
-import { notify } from "~/utils/web-push.server";
 import Button from "~/features/settings/components/button";
 import NotificationsSettings, {
 	FallbackNotificationsSettings,
 } from "~/features/settings/components/settings/notifications-settings";
+import notifyIncomingMessageQueue from "~/queues/notify-incoming-message.server";
 
 export const action: ActionFunction = async () => {
-	const phoneNumber = await db.phoneNumber.findUnique({
-		where: { id: "PN4f11f0c4155dfb5d5ac8bbab2cc23cbc" },
-		select: {
-			twilioAccount: {
-				include: {
-					organization: {
-						select: {
-							memberships: {
-								select: { notificationSubscription: true },
-							},
-						},
-					},
-				},
-			},
-		},
-	});
-	const subscriptions = phoneNumber!.twilioAccount.organization.memberships.flatMap(
-		(membership) => membership.notificationSubscription,
-	);
-	await notify(subscriptions, {
-		title: "+33 6 13 37 07 87",
-		body: "wesh le zin, wesh la zine, copain copine mais si y'a moyen on pine",
-		actions: [
-			{
-				action: "reply",
-				title: "Reply",
-			},
-		],
-		data: { recipient: "+33613370787", type: "message" },
+	await notifyIncomingMessageQueue.add("ddd", {
+		messageSid: "SM07ef9eb508f4e04bff596f11ac90e835",
+		phoneNumberId: "PNb77c9690c394368bdbaf20ea6fe5e9fc",
 	});
 	return null;
 };

app/routes/__app/sse.notifications.ts

@@ -0,0 +1,46 @@
+import type { LoaderFunction } from "@remix-run/node";
+
+import { events } from "~/utils/events.server";
+import type { NotificationPayload } from "~/utils/web-push.server";
+
+export let loader: LoaderFunction = ({ request }) => {
+	if (!request.signal) {
+		return new Response(null, { status: 500 });
+	}
+
+	return new Response(
+		new ReadableStream({
+			start(controller) {
+				const encoder = new TextEncoder();
+				const onNotification = (notification: NotificationPayload) => {
+					controller.enqueue(encoder.encode(`data: ${JSON.stringify(notification)}\n\n`));
+				};
+
+				let closed = false;
+				function close() {
+					if (closed) {
+						return;
+					}
+
+					closed = true;
+					events.removeListener("notification", onNotification);
+					request.signal.removeEventListener("abort", close);
+					controller.close();
+				}
+
+				events.addListener("notification", onNotification);
+				request.signal.addEventListener("abort", close);
+				if (request.signal.aborted) {
+					close();
+					return;
+				}
+			},
+		}),
+		{
+			headers: {
+				"Content-Type": "text/event-stream",
+				"Cache-Control": "no-cache",
+			},
+		},
+	);
+};