WEB-98 Replace useRunAction hook with useTransition + runAction util

Author: wlenig

src/app/editor/MediaLibrary.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { useRef, useState } from "react";
+import { useRef, useState, useTransition } from "react";
 import { File as FileIcon, Trash2, Copy } from "lucide-react";
 import { uploadMediaAction, deleteMediaAction } from "../../lib/media-actions";
 import type { MediaFile } from "../../lib/types";
-import { useRunAction } from "./useRunAction";
+import { runAction } from "./runAction";
 
 function formatFileSize(bytes: number): string {
   if (bytes < 1024) return `${bytes} B`;
@@ -111,24 +111,32 @@ function MediaCard({
 }
 
 export function MediaLibrary({ files: initialFiles }: { files: MediaFile[] }) {
-  const [isPending, run] = useRunAction();
+  const [isPending, startTransition] = useTransition();
   const [files, setFiles] = useState(initialFiles);
 
-  async function handleUpload(file: File) {
+  function handleUpload(file: File) {
     const formData = new FormData();
     formData.append("file", file);
-    const result = await run(uploadMediaAction(formData));
-    if (result.success) {
-      setFiles((prev) => [...prev, result.data]);
-    }
+    startTransition(async () => {
+      const result = await runAction(uploadMediaAction(formData));
+      if (result.success) {
+        setFiles((prev) => [...prev, result.data]);
+      } else {
+        alert(result.error);
+      }
+    });
   }
 
-  async function handleDelete(file: MediaFile) {
+  function handleDelete(file: MediaFile) {
     if (!window.confirm(`Delete "${file.name}"?`)) return;
-    const result = await run(deleteMediaAction({ name: file.name }));
-    if (result.success) {
-      setFiles((prev) => prev.filter((f) => f.name !== file.name));
-    }
+    startTransition(async () => {
+      const result = await runAction(deleteMediaAction({ name: file.name }));
+      if (result.success) {
+        setFiles((prev) => prev.filter((f) => f.name !== file.name));
+      } else {
+        alert(result.error);
+      }
+    });
   }
 
   return (

src/app/editor/RouteTable.tsx

@@ -1,14 +1,14 @@
 "use client";
 
 import Link from "next/link";
-import { useRef, useState } from "react";
+import { useRef, useState, useTransition } from "react";
 import { Check, SquarePen, Trash2, X } from "lucide-react";
 import {
   createRouteAction,
   updateRouteAction,
   deleteRouteAction,
 } from "../../lib/actions";
-import { useRunAction } from "./useRunAction";
+import { runAction } from "./runAction";
 
 type RouteRow = {
   id: number;
@@ -181,33 +181,45 @@ export function RouteTable({
   routes: RouteRow[];
   documents: DocumentOption[];
 }) {
-  const [isPending, run] = useRunAction();
+  const [isPending, startTransition] = useTransition();
   const [creating, setCreating] = useState(false);
   const [routes, setRoutes] = useState(initialRoutes);
 
-  async function handleCreate(path: string, documentId: number) {
+  function handleCreate(path: string, documentId: number) {
     setCreating(false);
-    const result = await run(createRouteAction({ path, documentId }));
-    if (result.success) {
-      const docName = documents.find((d) => d.id === documentId)?.name ?? "";
-      setRoutes((prev) => [...prev, { id: result.data.routeId, path, documentId, documentName: docName }]);
-    }
+    startTransition(async () => {
+      const result = await runAction(createRouteAction({ path, documentId }));
+      if (result.success) {
+        const docName = documents.find((d) => d.id === documentId)?.name ?? "";
+        setRoutes((prev) => [...prev, { id: result.data.routeId, path, documentId, documentName: docName }]);
+      } else {
+        alert(result.error);
+      }
+    });
   }
 
-  async function handleUpdate(id: number, path: string, documentId: number) {
-    const result = await run(updateRouteAction({ id, path, documentId }));
-    if (result.success) {
-      const docName = documents.find((d) => d.id === documentId)?.name ?? "";
-      setRoutes((prev) => prev.map((r) => (r.id === id ? { ...r, path, documentId, documentName: docName } : r)));
-    }
+  function handleUpdate(id: number, path: string, documentId: number) {
+    startTransition(async () => {
+      const result = await runAction(updateRouteAction({ id, path, documentId }));
+      if (result.success) {
+        const docName = documents.find((d) => d.id === documentId)?.name ?? "";
+        setRoutes((prev) => prev.map((r) => (r.id === id ? { ...r, path, documentId, documentName: docName } : r)));
+      } else {
+        alert(result.error);
+      }
+    });
   }
 
-  async function handleDelete(route: RouteRow) {
+  function handleDelete(route: RouteRow) {
     if (!window.confirm(`Delete route "${route.path}"?`)) return;
-    const result = await run(deleteRouteAction({ id: route.id }));
-    if (result.success) {
-      setRoutes((prev) => prev.filter((r) => r.id !== route.id));
-    }
+    startTransition(async () => {
+      const result = await runAction(deleteRouteAction({ id: route.id }));
+      if (result.success) {
+        setRoutes((prev) => prev.filter((r) => r.id !== route.id));
+      } else {
+        alert(result.error);
+      }
+    });
   }
 
   return (

src/app/editor/[id]/SaveButton.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import { createUsePuck } from "@puckeditor/core";
-import { useState } from "react";
+import { useTransition } from "react";
 import { useDocumentContext } from "./client";
 import { saveVersionAction } from "../../../lib/actions";
+import { runAction } from "../runAction";
 
 const usePuck = createUsePuck();
 
@@ -12,21 +13,20 @@ export function SaveButton() {
   const dispatch = usePuck((s) => s.dispatch);
   const { documentId, addVersion } = useDocumentContext();
 
-  const [isSaving, setIsSaving] = useState(false);
+  const [isSaving, startTransition] = useTransition();
 
-  const handleSave = async () => {
-    setIsSaving(true);
-    const result = await saveVersionAction({ documentId, content: data });
+  const handleSave = () => {
+    startTransition(async () => {
+      const result = await runAction(saveVersionAction({ documentId, content: data }));
 
-    if (result.success === false) {
-      alert(`Error: ${result.error}`);
-      setIsSaving(false);
-      return;
-    }
+      if (result.success === false) {
+        alert(result.error);
+        return;
+      }
 
-    dispatch({ type: "setData", data });
-    addVersion(result.data.version);
-    setIsSaving(false);
+      dispatch({ type: "setData", data });
+      addVersion(result.data.version);
+    });
   };
 
   return (

src/app/editor/[id]/VersionPluginContainer.tsx

@@ -1,28 +1,28 @@
 "use client";
 
-import { useState } from "react";
+import { useTransition } from "react";
 import { useRouter } from "next/navigation";
 import { useDocumentContext } from "./client";
 import { publishVersionAction } from "../../../lib/actions";
+import { runAction } from "../runAction";
 import { VersionListPanel } from "./VersionListPanel";
 
 export function VersionPluginContainer() {
   const router = useRouter();
   const { documentId, versionId, publishedVersionId, versions, setPublishedVersionId } = useDocumentContext();
-  const [isPublishing, setIsPublishing] = useState(false);
+  const [isPublishing, startTransition] = useTransition();
 
-  const handlePublishVersion = async (targetVersionId: number) => {
-    setIsPublishing(true);
-    const result = await publishVersionAction({ documentId, versionId: targetVersionId });
+  const handlePublishVersion = (targetVersionId: number) => {
+    startTransition(async () => {
+      const result = await runAction(publishVersionAction({ documentId, versionId: targetVersionId }));
 
-    if (result.success === false) {
-      alert(`Error: ${result.error}`);
-      setIsPublishing(false);
-      return;
-    }
+      if (result.success === false) {
+        alert(result.error);
+        return;
+      }
 
-    setPublishedVersionId(targetVersionId);
-    setIsPublishing(false);
+      setPublishedVersionId(targetVersionId);
+    });
   };
 
   const handleLoadVersion = (versionIdToLoad: number) => {

src/app/editor/runAction.ts

@@ -0,0 +1,9 @@
+import type { ActionResult } from "../../lib/types";
+
+export async function runAction<T>(action: Promise<ActionResult<T>>): Promise<ActionResult<T>> {
+  try {
+    return await action;
+  } catch {
+    return { success: false, error: "Something went wrong. Please try again." };
+  }
+}