UP improvement

src/app/studio/[ownerId]/main.tsx

@@ -1,70 +1,18 @@
 "use server"
 
-// import { experimental_useFormStatus as useFormStatus } from "react-dom"
-
-import { Textarea } from "@/components/ui/textarea"
-import { Button } from "@/components/ui/button"
-import { formSubmit } from "@/server/actions"
-
 import { getTasks } from "@/server"
 import { VideoTasksQueue } from "@/components/business/tasks/video-tasks-queue"
 import { RefreshStudio } from "@/components/business/refresh"
+import { VideoForm } from "@/components/business/videoForm"
 
 export default async function Main({ ownerId }: { ownerId: string }) {
   const tasks = await getTasks(ownerId)
 
   return (
-    <form
-      className="h-full flex flex-col space-y-4 max-w-4xl w-full px-4 py-8"
-      action={formSubmit}
-      >
-
-      <div className="flex flex-col md:hidden w-full text-center">
-        <h2 className="text-4xl font-thin tracking-tight">VideoChain UI</h2>
-        <p className="text-md font-thin">
-          Powered by <span className="font-normal">Hugging Face 🤗</span>
-        </p>
-        <p className="text-md font-thin">
-            Keep the <a href={`/studio/${ownerId}`} className="font-normal" target="_blank">the link</a> to this page!
-          </p>
-      </div>
-
-      <div className="flex items-center justify-between md:space-x-3 w-full">
-        <div className="hidden md:flex flex-col w-54">
-          <h2 className="text-4xl font-thin tracking-tight">VideoChain UI</h2>
-          <p className="text-md font-thin">
-            Powered by <span className="font-normal">Hugging Face 🤗</span>
-          </p>
-          <p className="text-md font-thin">
-            Keep the <a href={`/studio/${ownerId}`} className="font-normal" target="_blank">the link</a> to this page!
-          </p>
-        </div>
-
-        <input
-          type="hidden"
-          id="ownerId"
-          name="ownerId"
-          value={ownerId}
-        />
-
-        <Textarea
-          id="prompt"
-          name="prompt"
-          placeholder="Video of llamas playing baseball.."
-          className="md:w-3/6 mr-3 md:mr-0"
-        />
-
-        <Button
-          variant="secondary"
-          size="lg"
-          className="text-md md:w-32"
-          type="submit"
-        >
-          Generate
-        </Button>
-      </div>
+    <div className="h-full flex flex-col space-y-4 max-w-4xl w-full px-4 py-8">
+      <VideoForm />
       <VideoTasksQueue tasks={tasks} />
       <RefreshStudio />
-    </form>
+    </div>
   )
 }

src/components/business/tasks/columns.tsx

@@ -3,8 +3,6 @@
 import { ColumnDef } from "@tanstack/react-table"
 import { Checkbox } from "@/components/ui/checkbox"
 
-import { statuses } from "@/app/data/data"
-
 import { DataTableColumnHeader } from "./data-table-column-header"
 import { DataTableRowActions } from "./data-table-row-actions"
 
@@ -49,7 +47,7 @@ export const columns: ColumnDef<VideoTask>[] = [
     cell: ({ row }) => {
       return (
         <div className="flex space-x-2">
-          <span className="max-w-[500px] truncate font-medium">
+          <span className="max-w-[500px] font-medium">
             {row.getValue("videoPrompt")}
           </span>
         </div>

src/components/business/videoForm.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import { useEffect, useTransition } from "react"
+import { usePathname } from "next/navigation"
+
+// import { experimental_useFormStatus as useFormStatus } from "react-dom"
+import { Textarea } from "@/components/ui/textarea"
+import { Button } from "@/components/ui/button"
+import { formSubmit } from "@/server/actions"
+
+export const VideoForm = () => {
+  const pathname = usePathname()
+  const ownerId = pathname.split("/").pop()
+  const [isPending, startTransition] = useTransition()
+
+  return (
+    <form
+      action={formSubmit}
+    >
+      <div className="flex flex-col md:hidden w-full text-center">
+        <h2 className="text-4xl font-thin tracking-tight">VideoChain UI</h2>
+        <p className="text-md font-thin">
+          Powered by <span className="font-normal">Hugging Face 🤗</span>
+        </p>
+        <p className="text-md font-thin">
+          Keep the <a href={`/studio/${ownerId}`} className="font-normal" target="_blank">the link</a> to this page!
+        </p>
+      </div>
+
+      <div className="flex items-center justify-between md:space-x-3 w-full">
+        <div className="hidden md:flex flex-col w-54">
+          <h2 className="text-4xl font-thin tracking-tight">VideoChain UI</h2>
+          <p className="text-md font-thin">
+            Powered by <span className="font-normal">Hugging Face 🤗</span>
+          </p>
+          <p className="text-md font-thin">
+            Save <a href={`/studio/${ownerId}`} className="font-normal" target="_blank">the link</a> to your favorites!
+          </p>
+        </div>
+
+        <input
+          type="hidden"
+          id="ownerId"
+          name="ownerId"
+          value={ownerId}
+        />
+
+        <Textarea
+          id="prompt"
+          name="prompt"
+          placeholder="Video of llamas playing baseball.."
+          className="md:w-3/6 mr-3 md:mr-0"
+        />
+
+        <Button
+          variant="secondary"
+          size="lg"
+          className="text-md md:w-32"
+          type="submit"
+        >
+          Generate
+        </Button>
+      </div>
+    </form>
+  )
+}

src/server/base.ts

@@ -11,9 +11,9 @@ export const get = async <T>(path: string = '', defaultValue: T): Promise<T> =>
         Accept: "application/json",
         Authorization: `Bearer ${process.env.VC_SECRET_ACCESS_TOKEN}`,
       },
-     //cache: 'no-store',
+     cache: 'no-store',
      // we can also use this (see https://vercel.com/blog/vercel-cache-api-nextjs-cache)
-     next: { revalidate: 2 }
+     // next: { revalidate: 1 }
     })
 
     // The return value is *not* serialized