From 4559a1bd5d5b6be29899b81f84cef8fe05b6a050 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 4 Sep 2023 12:34:12 +0530
Subject: [PATCH] refactor: publish project store (#2068)

---
 .../project/publish-project/modal.tsx         | 326 +++++++++---------
 web/store/project-publish.tsx                 |  47 +--
 2 files changed, 195 insertions(+), 178 deletions(-)

diff --git a/web/components/project/publish-project/modal.tsx b/web/components/project/publish-project/modal.tsx
index b22a496f5..173a5242c 100644
--- a/web/components/project/publish-project/modal.tsx
+++ b/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,137 +340,145 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                   </div>
 
                   {/* content */}
-                  <div className="space-y-3 px-6">
-                    <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}`}
-                      </div>
-                      <div className="flex-shrink-0 relative flex items-center gap-1">
-                        <CopyLinkToClipboard
-                          copy_link={`${plane_deploy_url}/${workspaceSlug}/${projectPublish.project_id}`}
-                        />
-                      </div>
-                    </div>
+                  {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}`}
+                            </div>
+                            <div className="flex-shrink-0 relative flex items-center gap-1">
+                              <CopyLinkToClipboard
+                                copy_link={`${plane_deploy_url}/${workspaceSlug}/${projectPublish.project_id}`}
+                              />
+                            </div>
+                          </div>
+                          <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>
+                        </>
+                      )}
 
-                    {watch("id") && (
-                      <div className="flex items-center gap-1 text-custom-primary-100">
-                        <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="relative flex justify-between items-center gap-2">
-                        <div className="text-sm">Views</div>
-                        <Controller
-                          control={control}
-                          name="views"
-                          render={({ field: { onChange, value } }) => (
-                            <CustomPopover
-                              label={
-                                value.length > 0
-                                  ? viewOptions
-                                      .filter((v) => value.includes(v.key))
-                                      .map((v) => v.label)
-                                      .join(", ")
-                                  : ``
-                              }
-                              placeholder="Select views"
-                            >
-                              <>
-                                {viewOptions.map((option) => (
-                                  <div
-                                    key={option.key}
-                                    className={`relative flex items-center gap-2 justify-between p-1 m-1 px-2 cursor-pointer rounded-sm text-custom-text-200 ${
-                                      value.includes(option.key)
-                                        ? "bg-custom-background-80 text-custom-text-100"
-                                        : "hover:bg-custom-background-80 hover:text-custom-text-100"
-                                    }`}
-                                    onClick={() => {
-                                      const _views =
-                                        value.length > 0
-                                          ? value.includes(option.key)
-                                            ? value.filter((_o: string) => _o !== option.key)
-                                            : [...value, option.key]
-                                          : [option.key];
-
-                                      if (_views.length === 0) return;
-
-                                      onChange(_views);
-                                      checkIfUpdateIsRequired();
-                                    }}
-                                  >
-                                    <div className="text-sm">{option.label}</div>
+                      <div className="space-y-4 mt-6">
+                        <div className="relative flex justify-between items-center gap-2">
+                          <div className="text-sm">Views</div>
+                          <Controller
+                            control={control}
+                            name="views"
+                            render={({ field: { onChange, value } }) => (
+                              <CustomPopover
+                                label={
+                                  value.length > 0
+                                    ? viewOptions
+                                        .filter((v) => value.includes(v.key))
+                                        .map((v) => v.label)
+                                        .join(", ")
+                                    : ``
+                                }
+                                placeholder="Select views"
+                              >
+                                <>
+                                  {viewOptions.map((option) => (
                                     <div
-                                      className={`w-[18px] h-[18px] relative flex justify-center items-center`}
+                                      key={option.key}
+                                      className={`relative flex items-center gap-2 justify-between p-1 m-1 px-2 cursor-pointer rounded-sm text-custom-text-200 ${
+                                        value.includes(option.key)
+                                          ? "bg-custom-background-80 text-custom-text-100"
+                                          : "hover:bg-custom-background-80 hover:text-custom-text-100"
+                                      }`}
+                                      onClick={() => {
+                                        const _views =
+                                          value.length > 0
+                                            ? value.includes(option.key)
+                                              ? value.filter((_o: string) => _o !== option.key)
+                                              : [...value, option.key]
+                                            : [option.key];
+
+                                        if (_views.length === 0) return;
+
+                                        onChange(_views);
+                                        checkIfUpdateIsRequired();
+                                      }}
                                     >
-                                      {value.length > 0 && value.includes(option.key) && (
-                                        <Icon iconName="done" className="!text-lg" />
-                                      )}
+                                      <div className="text-sm">{option.label}</div>
+                                      <div
+                                        className={`w-[18px] h-[18px] relative flex justify-center items-center`}
+                                      >
+                                        {value.length > 0 && value.includes(option.key) && (
+                                          <Icon iconName="done" className="!text-lg" />
+                                        )}
+                                      </div>
                                     </div>
-                                  </div>
-                                ))}
-                              </>
-                            </CustomPopover>
-                          )}
-                        />
-                      </div>
+                                  ))}
+                                </>
+                              </CustomPopover>
+                            )}
+                          />
+                        </div>
+                        <div className="relative flex justify-between items-center gap-2">
+                          <div className="text-sm">Allow comments</div>
+                          <Controller
+                            control={control}
+                            name="comments"
+                            render={({ field: { onChange, value } }) => (
+                              <ToggleSwitch
+                                value={value}
+                                onChange={(val) => {
+                                  onChange(val);
+                                  checkIfUpdateIsRequired();
+                                }}
+                                size="sm"
+                              />
+                            )}
+                          />
+                        </div>
+                        <div className="relative flex justify-between items-center gap-2">
+                          <div className="text-sm">Allow reactions</div>
+                          <Controller
+                            control={control}
+                            name="reactions"
+                            render={({ field: { onChange, value } }) => (
+                              <ToggleSwitch
+                                value={value}
+                                onChange={(val) => {
+                                  onChange(val);
+                                  checkIfUpdateIsRequired();
+                                }}
+                                size="sm"
+                              />
+                            )}
+                          />
+                        </div>
+                        <div className="relative flex justify-between items-center gap-2">
+                          <div className="text-sm">Allow voting</div>
+                          <Controller
+                            control={control}
+                            name="votes"
+                            render={({ field: { onChange, value } }) => (
+                              <ToggleSwitch
+                                value={value}
+                                onChange={(val) => {
+                                  onChange(val);
+                                  checkIfUpdateIsRequired();
+                                }}
+                                size="sm"
+                              />
+                            )}
+                          />
+                        </div>
 
-                      <div className="relative flex justify-between items-center gap-2">
-                        <div className="text-sm">Allow comments</div>
-                        <Controller
-                          control={control}
-                          name="comments"
-                          render={({ field: { onChange, value } }) => (
-                            <ToggleSwitch
-                              value={value}
-                              onChange={(val) => {
-                                onChange(val);
-                                checkIfUpdateIsRequired();
-                              }}
-                              size="sm"
-                            />
-                          )}
-                        />
-                      </div>
-                      <div className="relative flex justify-between items-center gap-2">
-                        <div className="text-sm">Allow reactions</div>
-                        <Controller
-                          control={control}
-                          name="reactions"
-                          render={({ field: { onChange, value } }) => (
-                            <ToggleSwitch
-                              value={value}
-                              onChange={(val) => {
-                                onChange(val);
-                                checkIfUpdateIsRequired();
-                              }}
-                              size="sm"
-                            />
-                          )}
-                        />
-                      </div>
-                      <div className="relative flex justify-between items-center gap-2">
-                        <div className="text-sm">Allow voting</div>
-                        <Controller
-                          control={control}
-                          name="votes"
-                          render={({ field: { onChange, value } }) => (
-                            <ToggleSwitch
-                              value={value}
-                              onChange={(val) => {
-                                onChange(val);
-                                checkIfUpdateIsRequired();
-                              }}
-                              size="sm"
-                            />
-                          )}
-                        />
-                      </div>
-
-                      {/* <div className="relative flex justify-between items-center gap-2">
+                        {/* <div className="relative flex justify-between items-center gap-2">
                       <div className="text-sm">Allow issue proposals</div>
                       <Controller
                         control={control}
@@ -481,8 +488,9 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                         )}
                       />
                     </div> */}
+                      </div>
                     </div>
-                  </div>
+                  )}
 
                   {/* modal handlers */}
                   <div className="border-t border-custom-border-200 px-6 py-5 relative flex justify-between items-center">
@@ -490,22 +498,24 @@ 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>
-                    <div className="relative flex items-center gap-2">
-                      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                      {watch("id") ? (
-                        <>
-                          {isUpdateRequired && (
-                            <PrimaryButton type="submit" loading={isSubmitting}>
-                              {isSubmitting ? "Updating..." : "Update settings"}
-                            </PrimaryButton>
-                          )}
-                        </>
-                      ) : (
-                        <PrimaryButton type="submit" loading={isSubmitting}>
-                          {isSubmitting ? "Publishing..." : "Publish"}
-                        </PrimaryButton>
-                      )}
-                    </div>
+                    {!projectPublish.fetchSettingsLoader && (
+                      <div className="relative flex items-center gap-2">
+                        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                        {watch("id") ? (
+                          <>
+                            {isUpdateRequired && (
+                              <PrimaryButton type="submit" loading={isSubmitting}>
+                                {isSubmitting ? "Updating..." : "Update settings"}
+                              </PrimaryButton>
+                            )}
+                          </>
+                        ) : (
+                          <PrimaryButton type="submit" loading={isSubmitting}>
+                            {isSubmitting ? "Publishing..." : "Publish"}
+                          </PrimaryButton>
+                        )}
+                      </div>
+                    )}
                   </div>
                 </form>
               </Dialog.Panel>
diff --git a/web/store/project-publish.tsx b/web/store/project-publish.tsx
index ffc45f546..b8c6f0dbe 100644
--- a/web/store/project-publish.tsx
+++ b/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;
     }