chore(web): publish modal (#658)

reearth · Sep 6, 2023 · df854f8 · df854f8
1 parent 4ee1969
commit df854f8
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 20 deletions.
diff --git a/web/src/beta/features/Editor/tabs/publish/Nav/PublishModal/hooks.ts b/web/src/beta/features/Editor/tabs/publish/Nav/PublishModal/hooks.ts
@@ -15,7 +15,7 @@ export default (
   publishing?: publishingType,
   publishStatus?: PublishStatus,
   defaultAlias?: string,
-  onPublish?: (publishStatus: PublishStatus) => Promise<void>,
+  onPublish?: (alias: string | undefined, publishStatus: PublishStatus) => void | Promise<void>,
   onClose?: () => void,
   onAliasValidate?: (alias: string) => void,
   onCopyToClipBoard?: () => void,
@@ -95,15 +95,17 @@ export default (
 
   const handlePublish = useCallback(async () => {
     if (!publishing) return;
+    const a = publishing !== "unpublishing" ? alias || generateAlias() : undefined;
+
     const mode =
       publishing === "unpublishing" ? "unpublished" : !searchIndex ? "limited" : "published";
-    await onPublish?.(mode);
+    await onPublish?.(a, mode);
     if (publishing === "unpublishing") {
       handleClose?.();
     } else {
       setStatusChange(true);
     }
-  }, [onPublish, publishing, searchIndex, setStatusChange, handleClose]);
+  }, [alias, generateAlias, onPublish, publishing, searchIndex, setStatusChange, handleClose]);
 
   return {
     statusChanged,

diff --git a/web/src/beta/features/Editor/tabs/publish/Nav/PublishModal/index.tsx b/web/src/beta/features/Editor/tabs/publish/Nav/PublishModal/index.tsx
@@ -23,7 +23,7 @@ type Props = {
   publishing?: publishingType;
   validatingAlias?: boolean;
   url?: string[];
-  onPublish: (publishStatus: PublishStatus) => Promise<void>;
+  onPublish: (alias: string | undefined, publishStatus: PublishStatus) => void | Promise<void>;
   onClose?: () => void;
   onCopyToClipBoard?: () => void;
   onAliasValidate?: (alias: string) => void;
@@ -79,10 +79,9 @@ const PublishModal: React.FC<Props> = ({
   const publishDisabled = useMemo(
     () =>
       loading ||
-      (publishing === "unpublishing" && publishStatus === "unpublished") ||
       ((publishing === "publishing" || publishing === "updating") &&
         (!alias || !!validation || validatingAlias || !validAlias)),
-    [alias, loading, publishStatus, publishing, validation, validAlias, validatingAlias],
+    [alias, loading, publishing, validation, validAlias, validatingAlias],
   );
 
   const modalTitleText = useMemo(() => {
@@ -125,7 +124,12 @@ const PublishModal: React.FC<Props> = ({
       button1={<Button text={secondaryButtonText} buttonType="secondary" onClick={handleClose} />}
       button2={
         !statusChanged && (
-          <Button text={primaryButtonText} disabled={publishDisabled} onClick={handlePublish} />
+          <Button
+            text={primaryButtonText}
+            buttonType="primary"
+            disabled={publishDisabled}
+            onClick={handlePublish}
+          />
         )
       }
       onClose={handleClose}>

diff --git a/web/src/beta/features/Editor/tabs/publish/Nav/hooks.ts b/web/src/beta/features/Editor/tabs/publish/Nav/hooks.ts
@@ -7,7 +7,12 @@ import { publishingType } from "./PublishModal";
 import { type PublishStatus } from "./PublishModal/hooks";
 
 export default ({ projectId }: { projectId?: string }) => {
-  const { useProjectQuery, useProjectAliasCheckLazyQuery, usePublishProject } = useProjectFetcher();
+  const {
+    useProjectQuery,
+    useProjectAliasCheckLazyQuery,
+    usePublishProject,
+    publishProjectLoading,
+  } = useProjectFetcher();
   const { project } = useProjectQuery(projectId);
 
   const [publishing, setPublishing] = useState<publishingType>("unpublishing");
@@ -55,10 +60,10 @@ export default ({ projectId }: { projectId?: string }) => {
   }, [project?.publishmentStatus]);
 
   const handleProjectPublish = useCallback(
-    async (publishStatus: PublishStatus) => {
+    async (alias: string | undefined, publishStatus: PublishStatus) => {
       await usePublishProject(publishStatus, projectId, alias);
     },
-    [projectId, alias, usePublishProject],
+    [projectId, usePublishProject],
   );
 
   const handleOpenProjectSettings = useCallback(() => {
@@ -78,6 +83,7 @@ export default ({ projectId }: { projectId?: string }) => {
   return {
     publishing,
     publishStatus,
+    publishProjectLoading,
     dropdownOpen,
     modalOpen,
     alias,

diff --git a/web/src/beta/features/Editor/tabs/publish/Nav/index.tsx b/web/src/beta/features/Editor/tabs/publish/Nav/index.tsx
@@ -35,6 +35,7 @@ const Nav: React.FC<Props> = ({ projectId, selectedProjectType, onProjectTypeCha
     alias,
     validAlias,
     validatingAlias,
+    publishProjectLoading,
     handleModalOpen,
     handleModalClose,
     setDropdown,
@@ -51,6 +52,7 @@ const Nav: React.FC<Props> = ({ projectId, selectedProjectType, onProjectTypeCha
     [publishStatus, t],
   );
 
+  const checkPublished: boolean = publishStatus === "limited" || publishStatus === "published";
   return (
     <>
       <StyledSecondaryNav>
@@ -90,13 +92,8 @@ const Nav: React.FC<Props> = ({ projectId, selectedProjectType, onProjectTypeCha
                   onClick: () => handleModalOpen("unpublishing"),
                 },
                 {
-                  name: t("Publish"),
-                  onClick: () =>
-                    handleModalOpen(
-                      publishStatus === "limited" || publishStatus === "published"
-                        ? "updating"
-                        : "publishing",
-                    ),
+                  name: checkPublished ? t("Update") : t("Publish"),
+                  onClick: () => handleModalOpen(checkPublished ? "updating" : "publishing"),
                 },
                 {
                   name: t("Publishing Settings"),
@@ -109,6 +106,7 @@ const Nav: React.FC<Props> = ({ projectId, selectedProjectType, onProjectTypeCha
       </StyledSecondaryNav>
       <PublishModal
         isVisible={modalOpen}
+        loading={publishProjectLoading}
         publishing={publishing}
         publishStatus={publishStatus}
         url={config()?.published?.split("{}")}

diff --git a/web/src/services/api/projectApi.ts b/web/src/services/api/projectApi.ts
@@ -99,9 +99,12 @@ export default () => {
     [createNewProject, createScene, setNotification, t],
   );
 
-  const [publishProjectMutation] = useMutation(PUBLISH_PROJECT, {
-    refetchQueries: ["GetProject"],
-  });
+  const [publishProjectMutation, { loading: publishProjectLoading }] = useMutation(
+    PUBLISH_PROJECT,
+    {
+      refetchQueries: ["GetProject"],
+    },
+  );
 
   const usePublishProject = useCallback(
     async (s: PublishStatus, projectId?: string, alias?: string) => {
@@ -242,6 +245,7 @@ export default () => {
   );
 
   return {
+    publishProjectLoading,
     useProjectQuery,
     useProjectAliasCheckLazyQuery,
     useCreateProject,