Use turbowire react

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,27 +40,25 @@ 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();
         toast.info(content);
       } catch (error) {
         console.error(error);
       }
-    });
+    },
+    [refetchNotifications],
+  );
+
+  const wireOptions = useMemo(
+    () => ({ schema: realtimeSchema, notification: onNotification }),
+    [onNotification],
+  );
 
-    return () => {
-      wire?.disconnect();
-    };
-  }, [notificationsWire, refetchNotifications]);
+  useWireEvent(notificationsWire, wireOptions);
 
   return (
     <>

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"
+>;

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",