refactor: publish project store (#2068)

web/components/project/publish-project/modal.tsx

@@ -6,7 +6,14 @@ import { Controller, useForm } from "react-hook-form";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // ui components
-import { ToggleSwitch, PrimaryButton, SecondaryButton, Icon, DangerButton } from "components/ui";
+import {
+  ToggleSwitch,
+  PrimaryButton,
+  SecondaryButton,
+  Icon,
+  DangerButton,
+  Loader,
+} from "components/ui";
 import { CustomPopover } from "./popover";
 // mobx react lite
 import { observer } from "mobx-react-lite";
@@ -146,22 +153,14 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
     const projectId = projectPublish.project_id;
 
     return projectPublish
-      .createProjectSettingsAsync(
-        workspaceSlug.toString(),
-        projectId?.toString() ?? "",
-        payload,
-        user
-      )
-      .then((response) => {
+      .publishProject(workspaceSlug.toString(), projectId?.toString() ?? "", payload, user)
+      .then((res) => {
         mutateProjectDetails();
         handleClose();
         if (projectId) window.open(`${plane_deploy_url}/${workspaceSlug}/${projectId}`, "_blank");
-        return response;
+        return res;
       })
-      .catch((error) => {
-        console.error("error", error);
-        return error;
-      });
+      .catch((err) => err);
   };
 
   const handleUpdatePublishSettings = async (payload: IProjectPublishSettings) => {
@@ -199,7 +198,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
     setIsUnpublishing(true);
 
     projectPublish
-      .deleteProjectSettingsAsync(
+      .unPublishProject(
         workspaceSlug.toString(),
         projectPublish.project_id as string,
         publishId,
@@ -329,7 +328,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                   {/* heading */}
                   <div className="px-6 pt-4 flex items-center justify-between gap-2">
                     <h5 className="font-semibold text-xl inline-block">Publish</h5>
-                    {watch("id") && (
+                    {projectPublish.projectPublishSettings !== "not-initialized" && (
                       <DangerButton
                         onClick={() => handleUnpublishProject(watch("id") ?? "")}
                         className="!px-2 !py-1.5"
@@ -341,7 +340,17 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                   </div>
 
                   {/* content */}
-                  <div className="space-y-3 px-6">
+                  {projectPublish.fetchSettingsLoader ? (
+                    <Loader className="px-6 space-y-4">
+                      <Loader.Item height="30px" />
+                      <Loader.Item height="30px" />
+                      <Loader.Item height="30px" />
+                      <Loader.Item height="30px" />
+                    </Loader>
+                  ) : (
+                    <div className="px-6">
+                      {watch("id") && (
+                        <>
                           <div className="border border-custom-border-100 bg-custom-background-80 rounded-md px-3 py-2 relative flex gap-2 items-center">
                             <div className="truncate flex-grow text-sm">
                               {`${plane_deploy_url}/${workspaceSlug}/${projectPublish.project_id}`}
@@ -352,17 +361,16 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                               />
                             </div>
                           </div>
-
-                    {watch("id") && (
-                      <div className="flex items-center gap-1 text-custom-primary-100">
+                          <div className="flex items-center gap-1 text-custom-primary-100 mt-3">
                             <div className="w-5 h-5 overflow-hidden flex items-center">
                               <Icon iconName="radio_button_checked" className="!text-lg" />
                             </div>
                             <div className="text-sm">This project is live on web</div>
                           </div>
+                        </>
                       )}
 
-                    <div className="space-y-4">
+                      <div className="space-y-4 mt-6">
                         <div className="relative flex justify-between items-center gap-2">
                           <div className="text-sm">Views</div>
                           <Controller
@@ -418,7 +426,6 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                             )}
                           />
                         </div>
-
                         <div className="relative flex justify-between items-center gap-2">
                           <div className="text-sm">Allow comments</div>
                           <Controller
@@ -483,6 +490,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                     </div> */}
                       </div>
                     </div>
+                  )}
 
                   {/* modal handlers */}
                   <div className="border-t border-custom-border-200 px-6 py-5 relative flex justify-between items-center">
@@ -490,6 +498,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                       <Icon iconName="public" className="!text-base" />
                       <div className="text-sm">Anyone with the link can access</div>
                     </div>
+                    {!projectPublish.fetchSettingsLoader && (
                       <div className="relative flex items-center gap-2">
                         <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
                         {watch("id") ? (
@@ -506,6 +515,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                           </PrimaryButton>
                         )}
                       </div>
+                    )}
                   </div>
                 </form>
               </Dialog.Panel>

web/store/project-publish.tsx

@@ -21,7 +21,8 @@ export interface IProjectPublishSettings {
 }
 
 export interface IProjectPublishStore {
-  loader: boolean;
+  generalLoader: boolean;
+  fetchSettingsLoader: boolean;
   error: any | null;
 
   projectPublishModal: boolean;
@@ -35,7 +36,7 @@ export interface IProjectPublishStore {
     project_slug: string,
     user: any
   ) => Promise<void>;
-  createProjectSettingsAsync: (
+  publishProject: (
     workspace_slug: string,
     project_slug: string,
     data: IProjectPublishSettings,
@@ -48,7 +49,7 @@ export interface IProjectPublishStore {
     data: IProjectPublishSettings,
     user: any
   ) => Promise<void>;
-  deleteProjectSettingsAsync: (
+  unPublishProject: (
     workspace_slug: string,
     project_slug: string,
     project_publish_id: string,
@@ -57,7 +58,8 @@ export interface IProjectPublishStore {
 }
 
 class ProjectPublishStore implements IProjectPublishStore {
-  loader: boolean = false;
+  generalLoader: boolean = false;
+  fetchSettingsLoader: boolean = false;
   error: any | null = null;
 
   projectPublishModal: boolean = false;
@@ -72,7 +74,8 @@ class ProjectPublishStore implements IProjectPublishStore {
   constructor(_rootStore: RootStore) {
     makeObservable(this, {
       // observable
-      loader: observable,
+      generalLoader: observable,
+      fetchSettingsLoader: observable,
       error: observable,
 
       projectPublishModal: observable,
@@ -80,6 +83,10 @@ class ProjectPublishStore implements IProjectPublishStore {
       projectPublishSettings: observable.ref,
       // action
       handleProjectModal: action,
+      getProjectSettingsAsync: action,
+      publishProject: action,
+      updateProjectSettingsAsync: action,
+      unPublishProject: action,
       // computed
     });
 
@@ -100,7 +107,7 @@ class ProjectPublishStore implements IProjectPublishStore {
 
   getProjectSettingsAsync = async (workspace_slug: string, project_slug: string, user: any) => {
     try {
-      this.loader = true;
+      this.fetchSettingsLoader = true;
       this.error = null;
 
       const response = await this.projectPublishService.getProjectSettingsAsync(
@@ -128,30 +135,30 @@ class ProjectPublishStore implements IProjectPublishStore {
 
         runInAction(() => {
           this.projectPublishSettings = _projectPublishSettings;
-          this.loader = false;
+          this.fetchSettingsLoader = false;
           this.error = null;
         });
       } else {
         this.projectPublishSettings = "not-initialized";
-        this.loader = false;
+        this.fetchSettingsLoader = false;
         this.error = null;
       }
       return response;
     } catch (error) {
-      this.loader = false;
+      this.fetchSettingsLoader = false;
       this.error = error;
       return error;
     }
   };
 
-  createProjectSettingsAsync = async (
+  publishProject = async (
     workspace_slug: string,
     project_slug: string,
     data: IProjectPublishSettings,
     user: any
   ) => {
     try {
-      this.loader = true;
+      this.generalLoader = true;
       this.error = null;
 
       const response = await this.projectPublishService.createProjectSettingsAsync(
@@ -174,14 +181,14 @@ class ProjectPublishStore implements IProjectPublishStore {
 
         runInAction(() => {
           this.projectPublishSettings = _projectPublishSettings;
-          this.loader = false;
+          this.generalLoader = false;
           this.error = null;
         });
 
         return response;
       }
     } catch (error) {
-      this.loader = false;
+      this.generalLoader = false;
       this.error = error;
       return error;
     }
@@ -195,7 +202,7 @@ class ProjectPublishStore implements IProjectPublishStore {
     user: any
   ) => {
     try {
-      this.loader = true;
+      this.generalLoader = true;
       this.error = null;
 
       const response = await this.projectPublishService.updateProjectSettingsAsync(
@@ -219,27 +226,27 @@ class ProjectPublishStore implements IProjectPublishStore {
 
         runInAction(() => {
           this.projectPublishSettings = _projectPublishSettings;
-          this.loader = false;
+          this.generalLoader = false;
           this.error = null;
         });
 
         return response;
       }
     } catch (error) {
-      this.loader = false;
+      this.generalLoader = false;
       this.error = error;
       return error;
     }
   };
 
-  deleteProjectSettingsAsync = async (
+  unPublishProject = async (
     workspace_slug: string,
     project_slug: string,
     project_publish_id: string,
     user: any
   ) => {
     try {
-      this.loader = true;
+      this.generalLoader = true;
       this.error = null;
 
       const response = await this.projectPublishService.deleteProjectSettingsAsync(
@@ -251,13 +258,13 @@ class ProjectPublishStore implements IProjectPublishStore {
 
       runInAction(() => {
         this.projectPublishSettings = "not-initialized";
-        this.loader = false;
+        this.generalLoader = false;
         this.error = null;
       });
 
       return response;
     } catch (error) {
-      this.loader = false;
+      this.generalLoader = false;
       this.error = error;
       return error;
     }