Make everything as action

webstudio-is · Sep 20, 2024 · c2d22cb · c2d22cb
1 parent 41ef20f
commit c2d22cb
Show file tree

Hide file tree

Showing 4 changed files with 242 additions and 320 deletions.
diff --git a/apps/builder/app/builder/features/topbar/add-domain.tsx b/apps/builder/app/builder/features/topbar/add-domain.tsx
@@ -7,65 +7,61 @@ import {
   theme,
   Text,
   Grid,
+  toast,
 } from "@webstudio-is/design-system";
 import { validateDomain } from "@webstudio-is/domain";
 import type { Project } from "@webstudio-is/project";
-import { useId, useState } from "react";
+import { useId, useOptimistic, useRef, useState } from "react";
 import { CustomCodeIcon } from "@webstudio-is/icons";
-import { trpcClient } from "~/shared/trpc/trpc-client";
+import { nativeClient } from "~/shared/trpc/trpc-client";
 
 type DomainsAddProps = {
   projectId: Project["id"];
   onCreate: (domain: string) => void;
   onExportClick: () => void;
-  refreshDomainResult: (
-    input: { projectId: Project["id"] },
-    onSuccess: () => void
-  ) => void;
-  domainState: "idle" | "submitting";
-  isPublishing: boolean;
+  refresh: () => Promise<void>;
 };
 
 export const AddDomain = ({
   projectId,
   onCreate,
-  refreshDomainResult,
-  domainState,
-  isPublishing,
+  refresh,
   onExportClick,
 }: DomainsAddProps) => {
   const id = useId();
-  const {
-    send: create,
-    state: сreateState,
-    error: сreateSystemError,
-  } = trpcClient.domain.create.useMutation();
   const [isOpen, setIsOpen] = useState(false);
-  const [domain, setDomain] = useState("");
   const [error, setError] = useState<string>();
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const [isPending, setIsPendingOptimistic] = useOptimistic(false);
 
-  const handleCreate = () => {
-    setError(undefined);
+  const handleCreateDomain = async (formData: FormData) => {
+    // Will be automatically reset on action end
+    setIsPendingOptimistic(true);
 
+    const domain = formData.get("domain")?.toString() ?? "";
     const validationResult = validateDomain(domain);
 
     if (validationResult.success === false) {
       setError(validationResult.error);
       return;
     }
 
-    create({ domain: validationResult.domain, projectId }, (data) => {
-      if (data.success === false) {
-        setError(data.error);
-        return;
-      }
-
-      refreshDomainResult({ projectId }, () => {
-        setDomain("");
-        setIsOpen(false);
-        onCreate(validationResult.domain);
-      });
+    const result = await nativeClient.domain.create.mutate({
+      domain,
+      projectId,
     });
+
+    if (result.success === false) {
+      toast.error(result.error);
+      setError(result.error);
+      return;
+    }
+
+    onCreate(domain);
+
+    await refresh();
+
+    setIsOpen(false);
   };
 
   return (
@@ -81,7 +77,6 @@ export const AddDomain = ({
         direction={"column"}
         onKeyDown={(event) => {
           if (event.key === "Escape") {
-            setDomain("");
             setIsOpen(false);
             event.preventDefault();
           }
@@ -94,56 +89,43 @@ export const AddDomain = ({
             </Label>
             <InputField
               id={id}
+              name="domain"
               autoFocus
               placeholder="your-domain.com"
-              value={domain}
-              disabled={
-                isPublishing || сreateState !== "idle" || domainState !== "idle"
-              }
+              disabled={isPending}
               onKeyDown={(event) => {
                 if (event.key === "Enter") {
-                  handleCreate();
+                  buttonRef.current
+                    ?.closest("form")
+                    ?.requestSubmit(buttonRef.current);
                 }
                 if (event.key === "Escape") {
-                  setDomain("");
                   setIsOpen(false);
                   event.preventDefault();
                 }
               }}
-              onChange={(event) => {
-                setError(undefined);
-                setDomain(event.target.value);
-              }}
               color={error !== undefined ? "error" : undefined}
             />
             {error !== undefined && (
               <>
                 <Text color="destructive">{error}</Text>
               </>
             )}
-            {сreateSystemError !== undefined && (
-              <>
-                {/* Something happened with network, api etc */}
-                <Text color="destructive">{сreateSystemError}</Text>
-                <Text color="subtle">Please try again later</Text>
-              </>
-            )}
           </>
         )}
 
         <Grid gap={2} columns={2}>
           <Button
-            disabled={
-              isPublishing || сreateState !== "idle" || domainState !== "idle"
-            }
+            ref={buttonRef}
+            formAction={handleCreateDomain}
+            state={isPending ? "pending" : undefined}
             color={isOpen ? "primary" : "neutral"}
-            onClick={() => {
+            onClick={(event) => {
               if (isOpen === false) {
                 setIsOpen(true);
+                event.preventDefault();
                 return;
               }
-
-              handleCreate();
             }}
           >
             {isOpen ? "Add domain" : "Add a new domain"}