From 45882a44b529d43f1579a98102170b912260e52f Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Mon, 17 Nov 2025 22:15:45 +1100
Subject: [PATCH] Use turbowire react

---
 bun.lock                          |  4 +++-
 components/core/notifications.tsx | 30 ++++++++++++++----------------
 data/notification.ts              |  6 ++++++
 package.json                      |  2 +-
 4 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/bun.lock b/bun.lock
index bc5771a..e9ccd52 100644
--- a/bun.lock
+++ b/bun.lock
@@ -37,8 +37,8 @@
         "@trpc/client": "^11.0.2",
         "@trpc/server": "^11.0.2",
         "@trpc/tanstack-react-query": "^11.0.2",
+        "@turbowire/react": "^0.1.0",
         "@turbowire/serverless": "^0.2.0",
-        "@turbowire/web": "^0.4.0",
         "@upstash/redis": "^1.35.3",
         "@upstash/search": "^0.1.5",
         "@upstash/workflow": "^0.2.16",
@@ -974,6 +974,8 @@
 
     "@trpc/tanstack-react-query": ["@trpc/tanstack-react-query@11.0.2", "", { "peerDependencies": { "@tanstack/react-query": "^5.67.1", "@trpc/client": "11.0.2", "@trpc/server": "11.0.2", "react": ">=18.2.0", "react-dom": ">=18.2.0", "typescript": ">=5.7.2" } }, "sha512-sufF2L6SvW0/9hQn1j3zblMpFD0HgzHegJRSA2W3Xkt6j7BXGUnOHPrJM7lGLMeO/oAfdhby9gfadAlX2H5WQg=="],
 
+    "@turbowire/react": ["@turbowire/react@0.1.0", "", { "dependencies": { "@turbowire/web": "^0.4.0" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", "zod": "^3.0.0 || ^4.0.0" } }, "sha512-4nR+51Oi5HKaTC5OxU6bzwzfjABr03pA1ZOUrNSnQ6N8NDw6KFimYkpbDMI9G6gWY9NDHoh5z45maYCO5rv91Q=="],
+
     "@turbowire/serverless": ["@turbowire/serverless@0.2.0", "", { "peerDependencies": { "zod": "^3.0.0 || ^4.0.0" } }, "sha512-fV6GXvngDRSBd3Uvo4vLFuTZSdpn8qExcRmpEp7vLx8eTUeW27vpvc2RSVyoKX9zTSPqdfF4hSIv8HOpmo0/5A=="],
 
     "@turbowire/web": ["@turbowire/web@0.4.0", "", { "peerDependencies": { "zod": "^3.0.0 || ^4.0.0" } }, "sha512-8sCSyrsK/Csr6CKZ07dAhedYUveQOFA9/6+HD1vccBLBKPisvNvToCMFCp1/wc/3SmrNMCp9WAzeCFNwGxPT4g=="],
diff --git a/components/core/notifications.tsx b/components/core/notifications.tsx
index 4bf4f8b..0ef3764 100644
--- a/components/core/notifications.tsx
+++ b/components/core/notifications.tsx
@@ -1,11 +1,11 @@
 "use client";
 
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { TurboWire } from "@turbowire/web";
+import { useWireEvent } from "@turbowire/react";
 import { Bell, X } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { toast } from "sonner";
-import { realtimeSchema } from "@/data/notification";
+import { type NotificationPayload, realtimeSchema } from "@/data/notification";
 import { displayMutationError } from "@/lib/utils/error";
 import { useTRPC } from "@/trpc/client";
 import { Button } from "../ui/button";
@@ -40,14 +40,8 @@ export function Notifications({
 
   const unreadCount = notifications?.filter((x) => !x.read).length;
 
-  useEffect(() => {
-    if (!notificationsWire) return;
-
-    const wire = new TurboWire(notificationsWire, { schema: realtimeSchema });
-
-    wire.connect();
-
-    wire.on("notification", ({ content }) => {
+  const onNotification = useCallback(
+    ({ content }: NotificationPayload) => {
       try {
         if (!content) return;
         refetchNotifications();
@@ -55,12 +49,16 @@ export function Notifications({
       } catch (error) {
         console.error(error);
       }
-    });
+    },
+    [refetchNotifications],
+  );
+
+  const wireOptions = useMemo(
+    () => ({ schema: realtimeSchema, notification: onNotification }),
+    [onNotification],
+  );
 
-    return () => {
-      wire?.disconnect();
-    };
-  }, [notificationsWire, refetchNotifications]);
+  useWireEvent(notificationsWire, wireOptions);
 
   return (
     <>
diff --git a/data/notification.ts b/data/notification.ts
index 2564e6b..7ba4ca8 100644
--- a/data/notification.ts
+++ b/data/notification.ts
@@ -1,5 +1,11 @@
+import type { EventPayload } from "@turbowire/serverless";
 import z from "zod";
 
 export const realtimeSchema = {
   notification: z.object({ content: z.string().nullable() }),
 };
+
+export type NotificationPayload = EventPayload<
+  typeof realtimeSchema,
+  "notification"
+>;
diff --git a/package.json b/package.json
index 187b749..9a6b228 100644
--- a/package.json
+++ b/package.json
@@ -49,8 +49,8 @@
     "@trpc/client": "^11.0.2",
     "@trpc/server": "^11.0.2",
     "@trpc/tanstack-react-query": "^11.0.2",
+    "@turbowire/react": "^0.1.0",
     "@turbowire/serverless": "^0.2.0",
-    "@turbowire/web": "^0.4.0",
     "@upstash/redis": "^1.35.3",
     "@upstash/search": "^0.1.5",
     "@upstash/workflow": "^0.2.16",