Improve the realtime hooks approach in the waitpoint reference project

Author: myftija

references/waitpoint-tokens/src/app/actions.ts

@@ -2,12 +2,7 @@
 
 import type { articleWorkflow } from "@/trigger/articleWorkflow";
 import type { ReviewPayload } from "@/trigger/reviewSummary";
-import { tasks, wait } from "@trigger.dev/sdk/v3";
-
-// A user identifier that could be fetched from your auth mechanism.
-// This is out of scope for this example, so we just hardcode it.
-const user = "reactflowtest";
-const userTag = `user_${user}`;
+import { auth, tasks, wait } from "@trigger.dev/sdk/v3";
 
 const randomStr = (length: number) =>
   [...Array(length)]
@@ -21,30 +16,41 @@ const randomStr = (length: number) =>
 
 export async function triggerArticleWorkflow(prevState: any, formData: FormData) {
   const articleUrl = formData.get("articleUrl") as string;
-  const uniqueTag = `reactflow_${randomStr(20)}`;
+  const workflowTag = `reactflow_${randomStr(20)}`;
 
   const reviewWaitpointToken = await wait.createToken({
-    tags: [uniqueTag, userTag],
+    tags: [workflowTag],
     timeout: "1h",
-    idempotencyKey: `review-summary-${uniqueTag}`,
+    idempotencyKey: `review-summary-${workflowTag}`,
   });
 
-  const handle = await tasks.trigger<typeof articleWorkflow>(
-    "article-workflow",
-    {
-      articleUrl,
-      approvalWaitpointTokenId: reviewWaitpointToken.id,
-    },
-    {
-      tags: [uniqueTag, userTag],
-    }
-  );
+  const [workflowPublicAccessToken] = await Promise.all([
+    // We generate a public access token to use the Trigger.dev realtime API and listen to changes in task runs using react hooks.
+    // This token has access to all runs tagged with the unique workflow tag.
+    auth.createPublicToken({
+      scopes: {
+        read: {
+          tags: [workflowTag],
+        },
+      },
+    }),
+    ,
+    tasks.trigger<typeof articleWorkflow>(
+      "article-workflow",
+      {
+        articleUrl,
+        approvalWaitpointTokenId: reviewWaitpointToken.id,
+      },
+      {
+        tags: [workflowTag],
+      }
+    ),
+  ]);
 
   return {
     articleUrl,
-    runId: handle.id,
-    runTag: uniqueTag,
-    reviewWaitpointTokenId: reviewWaitpointToken.id,
+    workflowTag,
+    workflowPublicAccessToken,
   };
 }
 
@@ -54,7 +60,7 @@ export async function approveArticleSummary(tokenId: string) {
     {
       approved: true,
       approvedAt: new Date(),
-      approvedBy: user,
+      approvedBy: "Alice",
     }
   );
 }
@@ -65,7 +71,7 @@ export async function rejectArticleSummary(tokenId: string) {
     {
       approved: false,
       rejectedAt: new Date(),
-      rejectedBy: user,
+      rejectedBy: "Alice",
       reason: "It's no good",
     }
   );

references/waitpoint-tokens/src/app/page.tsx

@@ -2,26 +2,8 @@ import React from "react";
 import Flow from "@/components/Flow";
 import Image from "next/image";
 import logo from "./logo.svg";
-import { auth } from "@trigger.dev/sdk";
 
 export default async function Home() {
-  // A user identifier that could be fetched from your auth mechanism.
-  // This is out of scope for this example, so we just hardcode it.
-  const user = "reactflowtest";
-  const userTag = `user_${user}`;
-
-  // We generate a public access token to use the Trigger.dev realtime API and listen to changes in task runs.
-  // Depending on your setup, you might want to be more granular in the scopes you grant.
-  // Check the frontend usage docs for a comprehensive list of the approaches to authenticate:
-  // https://trigger.dev/docs/frontend/overview#authentication
-  const publicAccessToken = await auth.createPublicToken({
-    scopes: {
-      read: {
-        tags: [userTag],
-      },
-    },
-  });
-
   return (
     <div className="flex flex-col items-center justify-center h-screen p-5 gap-5">
       <div className="flex flex-col items-center justify-center gap-2">
@@ -33,7 +15,7 @@ export default async function Home() {
         </p>
       </div>
       <div className="grow w-full max-w-[1500px]">
-        <Flow triggerPublicAccessToken={publicAccessToken} triggerUserTag={userTag} />
+        <Flow />
       </div>
     </div>
   );

references/waitpoint-tokens/src/components/ActionNode.tsx

@@ -1,11 +1,11 @@
 "use client";
 
-import React, { useEffect } from "react";
-import { Handle, Position, NodeProps, Node, useReactFlow } from "@xyflow/react";
+import React from "react";
+import { Handle, Position, NodeProps, Node } from "@xyflow/react";
 import type { LucideIcon } from "lucide-react";
 import { Loader2, Check, X, Layers, Asterisk, RefreshCcw } from "lucide-react";
 import { Tooltip } from "react-tippy";
-import { useRealtimeRunsWithTag } from "@trigger.dev/react-hooks";
+import type { RealtimeRun, AnyTask } from "@trigger.dev/sdk";
 import { cn } from "@/lib/cn";
 
 export type ActionNodeData = Node<
@@ -15,24 +15,7 @@ export type ActionNodeData = Node<
     isTerminalAction?: boolean;
     trigger: {
       taskIdentifier: string;
-      userTag: string;
-      currentRunTag?: string;
-      currentRunStatus?:
-        | "WAITING_FOR_DEPLOY"
-        | "PENDING_VERSION"
-        | "QUEUED"
-        | "EXECUTING"
-        | "REATTEMPTING"
-        | "FROZEN"
-        | "COMPLETED"
-        | "CANCELED"
-        | "FAILED"
-        | "CRASHED"
-        | "INTERRUPTED"
-        | "SYSTEM_FAILURE"
-        | "DELAYED"
-        | "EXPIRED"
-        | "TIMED_OUT";
+      currentRun?: RealtimeRun<AnyTask>;
     };
   },
   "action"
@@ -50,60 +33,33 @@ const triggerStatusToIcon: Record<string, React.ElementType> = {
   FAILED: X,
 };
 
-function ActionNode({ id, data }: NodeProps<ActionNodeData>) {
-  const { runs } = useRealtimeRunsWithTag(data.trigger.userTag);
-  const { updateNodeData } = useReactFlow<ActionNodeData>();
-
-  useEffect(() => {
-    if (!data.trigger.currentRunTag && data.trigger.currentRunStatus !== undefined) {
-      updateNodeData(id, {
-        trigger: { ...data.trigger, currentRunStatus: undefined },
-      });
-      return;
-    }
-
-    const run = runs.find(
-      (run) =>
-        run.tags.includes(data.trigger.currentRunTag as string) &&
-        run.taskIdentifier === data.trigger.taskIdentifier
-    );
-    if (!run) {
-      if (data.trigger.currentRunStatus !== undefined) {
-        updateNodeData(id, {
-          trigger: { ...data.trigger, currentRunStatus: undefined },
-        });
-      }
-      return;
-    }
-    updateNodeData(id, {
-      trigger: { ...data.trigger, currentRunStatus: run.status },
-    });
-  }, [runs, id, updateNodeData]);
+function ActionNode({ data }: NodeProps<ActionNodeData>) {
+  const { currentRun } = data.trigger;
 
   return (
     <div className="px-4 py-2 shadow-md rounded-lg bg-white border-1 border-zinc-200 text-sm relative">
-      {data.trigger.currentRunStatus && (
+      {currentRun && (
         <div
           className={cn(
             "absolute -top-1.5 -right-1.5 flex items-center justify-center w-4 h-4 rounded-full bg-gray-400",
             {
-              "bg-blue-400": data.trigger.currentRunStatus === "EXECUTING",
-              "bg-yellow-400": data.trigger.currentRunStatus === "REATTEMPTING",
-              "bg-emerald-400": data.trigger.currentRunStatus === "COMPLETED",
-              "bg-red-400": data.trigger.currentRunStatus === "FAILED",
+              "bg-blue-400": currentRun.status === "EXECUTING",
+              "bg-yellow-400": currentRun.status === "REATTEMPTING",
+              "bg-emerald-400": currentRun.status === "COMPLETED",
+              "bg-red-400": currentRun.status === "FAILED",
             }
           )}
         >
           {/* @ts-ignore - there is some weird type issue with react-tippy */}
           <Tooltip
-            title={data.trigger.currentRunStatus.toLowerCase()}
+            title={currentRun.status.toLowerCase()}
             position="right"
             trigger="mouseenter"
             size="small"
           >
-            {React.createElement(triggerStatusToIcon[data.trigger.currentRunStatus] ?? Asterisk, {
+            {React.createElement(triggerStatusToIcon[currentRun.status] ?? Asterisk, {
               className: cn("size-3 text-white", {
-                "animate-spin": data.trigger.currentRunStatus === "EXECUTING",
+                "animate-spin": currentRun.status === "EXECUTING",
               }),
             })}
           </Tooltip>