feat(art): switch submit button to ActionButton

app/(ui)/artifact/form.tsx

@@ -2,10 +2,12 @@
 
 import { useRouter } from "next/navigation";
 import posthog from "posthog-js";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { toast } from "sonner";
 import { checkEnkaStatus, submitArtifact } from "@/lib/api";
 import { shared } from "@/lib/comms";
+import type { ActionSubmitContextData } from "@/components/action-submit-provider";
+import { ActionSubmitContext } from "@/components/action-submit-provider";
 
 export function ArtifactFormWrapper({
   edit,
@@ -20,6 +22,12 @@ export function ArtifactFormWrapper({
   const [, setWarningUid] = shared.state("warning.uid");
   const [warningSrc, setWarningSrc] = shared.state("warning.src");
   const [dataHold, setDataHold] = useState<FormData>();
+  const callback = useRef<() => void>(() => {});
+  const context: ActionSubmitContextData = {
+    listenForComplete(complete) {
+      callback.current = complete;
+    },
+  };
 
   // Disable warning for 60 seconds
   shared.signal(
@@ -53,15 +61,18 @@ export function ArtifactFormWrapper({
         } catch {}
         router.refresh();
       })
-      .catch((e) => toast.error(`${e.message || e}`));
+      .catch((e) => toast.error(`${e.message || e}`))
+      .finally(callback.current);
   }
   return (
-    <form
+    <ActionSubmitContext.Provider value={context}>
-      {...props}
+      <form
-      onSubmit={(e) => {
+        {...props}
-        e.preventDefault();
+        onSubmit={(e) => {
-        submit(new FormData(e.target as HTMLFormElement));
+          e.preventDefault();
-      }}
+          submit(new FormData(e.target as HTMLFormElement));
-    />
+        }}
+      />
+    </ActionSubmitContext.Provider>
   );
 }

components/action-button.tsx

@@ -3,10 +3,11 @@
 import type { MaybePromise } from "bun";
 import { Check } from "lucide-react";
 import type { ComponentProps, ReactNode } from "react";
-import { useEffect, useState } from "react";
+import { use, useEffect, useState } from "react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
+import { ActionSubmitContext } from "./action-submit-provider";
 
 export function ActionButton({
   action,
@@ -15,10 +16,11 @@ export function ActionButton({
   text,
   ...props
 }: ComponentProps<typeof Button> & {
-  action: () => MaybePromise<void>;
+  action: (() => MaybePromise<void>) | "provider";
   text?: string;
 }) {
   const [state, setState] = useState<0 | 1 | 2>(0);
+  const ctx = use(ActionSubmitContext);
 
   useEffect(() => {
     if (state !== 2) return;
@@ -33,7 +35,9 @@ export function ActionButton({
         onClick?.(ev);
         setState(1);
         try {
-          await action();
+          if (action === "provider")
+            await new Promise<void>(ctx.listenForComplete);
+          else await action();
           setState(2);
         } catch (e) {
           toast.error("An error occured!");

components/action-submit-provider.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { createContext } from "react";
+
+export type ActionSubmitContextData = {
+  listenForComplete: (complete: () => void) => void;
+};
+
+export const ActionSubmitContext = createContext<ActionSubmitContextData>({
+  listenForComplete: (r) => {
+    r();
+  },
+});