|
| 1 | +"use client"; |
| 2 | + |
| 3 | +import { useRealtimeRun, useInputStreamSend } from "@trigger.dev/react-hooks"; |
| 4 | +import type { approvalTask } from "@/trigger/approval"; |
| 5 | + |
| 6 | +export function ApprovalFlow({ |
| 7 | + runId, |
| 8 | + accessToken, |
| 9 | +}: { |
| 10 | + runId: string; |
| 11 | + accessToken: string; |
| 12 | +}) { |
| 13 | + const { run, error: runError } = useRealtimeRun<typeof approvalTask>(runId, { |
| 14 | + accessToken, |
| 15 | + baseURL: process.env.NEXT_PUBLIC_TRIGGER_API_URL, |
| 16 | + }); |
| 17 | + const { |
| 18 | + send, |
| 19 | + isLoading: isSending, |
| 20 | + error: sendError, |
| 21 | + } = useInputStreamSend<{ approved: boolean; reviewer: string }>("approval", runId, { |
| 22 | + accessToken, |
| 23 | + baseURL: process.env.NEXT_PUBLIC_TRIGGER_API_URL, |
| 24 | + }); |
| 25 | + |
| 26 | + const status = run?.metadata?.status as string | undefined; |
| 27 | + const reviewer = run?.metadata?.reviewer as string | undefined; |
| 28 | + const isWaiting = status === "waiting-for-approval"; |
| 29 | + const isCompleted = run?.status === "COMPLETED"; |
| 30 | + const isFailed = run?.status === "FAILED" || run?.status === "CANCELED"; |
| 31 | + |
| 32 | + return ( |
| 33 | + <div className="flex flex-col gap-6"> |
| 34 | + <div className="flex items-center gap-3"> |
| 35 | + <div |
| 36 | + className={`w-3 h-3 rounded-full ${ |
| 37 | + isWaiting |
| 38 | + ? "bg-yellow-400 animate-pulse" |
| 39 | + : status === "approved" |
| 40 | + ? "bg-green-400" |
| 41 | + : status === "rejected" |
| 42 | + ? "bg-red-400" |
| 43 | + : status === "timed-out" |
| 44 | + ? "bg-gray-400" |
| 45 | + : "bg-blue-400 animate-pulse" |
| 46 | + }`} |
| 47 | + /> |
| 48 | + <span className="text-sm text-gray-600"> |
| 49 | + {!run |
| 50 | + ? "Loading..." |
| 51 | + : isWaiting |
| 52 | + ? "Waiting for approval" |
| 53 | + : status === "approved" |
| 54 | + ? `Approved by ${reviewer}` |
| 55 | + : status === "rejected" |
| 56 | + ? `Rejected by ${reviewer}` |
| 57 | + : status === "timed-out" |
| 58 | + ? "Timed out" |
| 59 | + : `Status: ${run?.status ?? "unknown"}`} |
| 60 | + </span> |
| 61 | + </div> |
| 62 | + |
| 63 | + {isWaiting && ( |
| 64 | + <div className="flex gap-3"> |
| 65 | + <button |
| 66 | + onClick={() => send({ approved: true, reviewer: "You" })} |
| 67 | + disabled={isSending} |
| 68 | + className="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 transition-colors font-medium" |
| 69 | + > |
| 70 | + {isSending ? "Sending..." : "Approve"} |
| 71 | + </button> |
| 72 | + <button |
| 73 | + onClick={() => send({ approved: false, reviewer: "You" })} |
| 74 | + disabled={isSending} |
| 75 | + className="px-6 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50 transition-colors font-medium" |
| 76 | + > |
| 77 | + {isSending ? "Sending..." : "Reject"} |
| 78 | + </button> |
| 79 | + </div> |
| 80 | + )} |
| 81 | + |
| 82 | + {runError && <p className="text-red-500 text-sm">Run error: {runError.message}</p>} |
| 83 | + {sendError && <p className="text-red-500 text-sm">Send error: {sendError.message}</p>} |
| 84 | + |
| 85 | + {(isCompleted || isFailed) && run?.output && ( |
| 86 | + <pre className="bg-gray-100 p-4 rounded-lg text-sm overflow-auto"> |
| 87 | + {JSON.stringify(run.output, null, 2)} |
| 88 | + </pre> |
| 89 | + )} |
| 90 | + </div> |
| 91 | + ); |
| 92 | +} |
0 commit comments