From 2b419c02a5feae79b746760f25a51f5ca583193d Mon Sep 17 00:00:00 2001
From: sriramveeraghanta <veeraghanta.sriram@gmail.com>
Date: Mon, 25 Sep 2023 20:09:39 +0530
Subject: [PATCH] fix: leave project fixes

---
 .../project/delete-project-modal.tsx          | 77 ++++++-------------
 .../project/leave-project-modal.tsx           | 38 ++++-----
 web/components/project/sidebar-list-item.tsx  | 46 +++++------
 web/components/project/sidebar-list.tsx       | 12 +--
 .../project/single-project-card.tsx           | 36 ++-------
 web/services/project.service.ts               |  4 +-
 web/store/project.ts                          | 17 +++-
 7 files changed, 93 insertions(+), 137 deletions(-)

diff --git a/web/components/project/delete-project-modal.tsx b/web/components/project/delete-project-modal.tsx
index d6f7ba0f0..8d0833001 100644
--- a/web/components/project/delete-project-modal.tsx
+++ b/web/components/project/delete-project-modal.tsx
@@ -1,15 +1,7 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// react-hook-form
 import { Controller, useForm } from "react-hook-form";
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
-// services
-import projectService from "services/project.service";
 // hooks
 import useToast from "hooks/use-toast";
 // icons
@@ -17,16 +9,14 @@ import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
 import { DangerButton, Input, SecondaryButton } from "components/ui";
 // types
-import type { ICurrentUserResponse, IProject } from "types";
+import type { IProject } from "types";
 // fetch-keys
-import { PROJECTS_LIST } from "constants/fetch-keys";
+import { useMobxStore } from "lib/mobx/store-provider";
 
-type TConfirmProjectDeletionProps = {
+type DeleteProjectModal = {
   isOpen: boolean;
+  project: IProject;
   onClose: () => void;
-  onSuccess?: () => void;
-  data: IProject | null;
-  user: ICurrentUserResponse | undefined;
 };
 
 const defaultValues = {
@@ -34,18 +24,16 @@ const defaultValues = {
   confirmDelete: "",
 };
 
-export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
-  isOpen,
-  data,
-  onClose,
-  onSuccess,
-  user,
-}) => {
+export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
+  const { isOpen, project, onClose } = props;
+  // store
+  const { project: projectStore } = useMobxStore();
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
-
+  // toast
   const { setToastAlert } = useToast();
-
+  // form info
   const {
     control,
     formState: { isSubmitting },
@@ -54,8 +42,7 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
     watch,
   } = useForm({ defaultValues });
 
-  const canDelete =
-    watch("projectName") === data?.name && watch("confirmDelete") === "delete my project";
+  const canDelete = watch("projectName") === project?.name && watch("confirmDelete") === "delete my project";
 
   const handleClose = () => {
     const timer = setTimeout(() => {
@@ -67,30 +54,20 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
   };
 
   const onSubmit = async () => {
-    if (!data || !workspaceSlug || !canDelete) return;
+    if (!workspaceSlug || !canDelete) return;
 
-    await projectService
-      .deleteProject(workspaceSlug.toString(), data.id, user)
+    await projectStore
+      .deleteProject(workspaceSlug.toString(), project.id)
       .then(() => {
         handleClose();
-
-        mutate<IProject[]>(
-          PROJECTS_LIST(workspaceSlug.toString(), { is_favorite: "all" }),
-          (prevData) => prevData?.filter((project: IProject) => project.id !== data.id),
-          false
-        );
-
-        if (onSuccess) onSuccess();
-
-        if (projectId && projectId === data.id) router.push(`/${workspaceSlug}/projects`);
       })
-      .catch(() =>
+      .catch(() => {
         setToastAlert({
           type: "error",
           title: "Error!",
           message: "Something went wrong. Please try again later.",
-        })
-      );
+        });
+      });
   };
 
   return (
@@ -123,10 +100,7 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
                 <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
+                      <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </span>
                     <span className="flex items-center justify-start">
                       <h3 className="text-xl font-medium 2xl:text-2xl">Delete Project</h3>
@@ -135,16 +109,14 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
                   <span>
                     <p className="text-sm leading-7 text-custom-text-200">
                       Are you sure you want to delete project{" "}
-                      <span className="break-words font-semibold">{data?.name}</span>? All of the
-                      data related to the project will be permanently removed. This action cannot be
-                      undone
+                      <span className="break-words font-semibold">{project?.name}</span>? All of the data related to the
+                      project will be permanently removed. This action cannot be undone
                     </p>
                   </span>
                   <div className="text-custom-text-200">
                     <p className="break-words text-sm ">
-                      Enter the project name{" "}
-                      <span className="font-medium text-custom-text-100">{data?.name}</span> to
-                      continue:
+                      Enter the project name <span className="font-medium text-custom-text-100">{project?.name}</span>{" "}
+                      to continue:
                     </p>
                     <Controller
                       control={control}
@@ -162,8 +134,7 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
                   </div>
                   <div className="text-custom-text-200">
                     <p className="text-sm">
-                      To confirm, type{" "}
-                      <span className="font-medium text-custom-text-100">delete my project</span>{" "}
+                      To confirm, type <span className="font-medium text-custom-text-100">delete my project</span>{" "}
                       below:
                     </p>
                     <Controller
diff --git a/web/components/project/leave-project-modal.tsx b/web/components/project/leave-project-modal.tsx
index 64efb3815..90da32d74 100644
--- a/web/components/project/leave-project-modal.tsx
+++ b/web/components/project/leave-project-modal.tsx
@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, Fragment } from "react";
 import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
 import { Dialog, Transition } from "@headlessui/react";
@@ -29,7 +29,14 @@ const defaultValues: FormData = {
   confirmLeave: "",
 };
 
-export const LeaveProjectModal: FC<> = observer(() => {
+export interface ILeaveProjectModal {
+  project: IProject;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
+  const { project, isOpen, onClose } = props;
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -50,22 +57,18 @@ export const LeaveProjectModal: FC<> = observer(() => {
   } = useForm({ defaultValues });
 
   const handleClose = () => {
-    projectStore.handleProjectLeaveModal(null);
     reset({ ...defaultValues });
   };
 
   const onSubmit = async (data: any) => {
+    if (!workspaceSlug) return;
+
     if (data) {
-      if (data.projectName === projectStore?.projectLeaveDetails?.name) {
+      if (data.projectName === project?.name) {
         if (data.confirmLeave === "Leave Project") {
           return projectStore
-            .leaveProject(
-              projectStore.projectLeaveDetails.workspaceSlug.toString(),
-              projectStore.projectLeaveDetails.id.toString(),
-              user
-            )
+            .leaveProject(workspaceSlug.toString(), project.id)
             .then((res) => {
-              mutateProjects();
               handleClose();
               router.push(`/${workspaceSlug}/projects`);
             })
@@ -100,10 +103,10 @@ export const LeaveProjectModal: FC<> = observer(() => {
   };
 
   return (
-    <Transition.Root show={projectStore.projectLeaveModal} as={React.Fragment}>
+    <Transition.Root show={isOpen} as={Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
         <Transition.Child
-          as={React.Fragment}
+          as={Fragment}
           enter="ease-out duration-300"
           enterFrom="opacity-0"
           enterTo="opacity-100"
@@ -117,7 +120,7 @@ export const LeaveProjectModal: FC<> = observer(() => {
         <div className="fixed inset-0 z-20 overflow-y-auto">
           <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
             <Transition.Child
-              as={React.Fragment}
+              as={Fragment}
               enter="ease-out duration-300"
               enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
               enterTo="opacity-100 translate-y-0 sm:scale-100"
@@ -139,16 +142,15 @@ export const LeaveProjectModal: FC<> = observer(() => {
                   <span>
                     <p className="text-sm leading-7 text-custom-text-200">
                       Are you sure you want to leave the project -
-                      <span className="font-medium text-custom-text-100">{` "${project?.projectLeaveDetails?.name}" `}</span>
-                      ? All of the issues associated with you will become inaccessible.
+                      <span className="font-medium text-custom-text-100">{` "${project?.name}" `}</span>? All of the
+                      issues associated with you will become inaccessible.
                     </p>
                   </span>
 
                   <div className="text-custom-text-200">
                     <p className="break-words text-sm ">
-                      Enter the project name{" "}
-                      <span className="font-medium text-custom-text-100">{project?.projectLeaveDetails?.name}</span> to
-                      continue:
+                      Enter the project name <span className="font-medium text-custom-text-100">{project?.name}</span>{" "}
+                      to continue:
                     </p>
                     <Controller
                       control={control}
diff --git a/web/components/project/sidebar-list-item.tsx b/web/components/project/sidebar-list-item.tsx
index 2c7d4f1d1..b88e77c44 100644
--- a/web/components/project/sidebar-list-item.tsx
+++ b/web/components/project/sidebar-list-item.tsx
@@ -1,16 +1,9 @@
 import { useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { mutate } from "swr";
 import { DraggableProvided, DraggableStateSnapshot } from "react-beautiful-dnd";
 import { Disclosure, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
-// services
-import projectService from "services/project.service";
-// hooks
-import useToast from "hooks/use-toast";
-// ui
-import { CustomMenu, Icon, Tooltip } from "components/ui";
 // icons
 import { EllipsisVerticalIcon, LinkIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
 import {
@@ -23,24 +16,26 @@ import {
   PhotoFilterOutlined,
   SettingsOutlined,
 } from "@mui/icons-material";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { CustomMenu, Icon, Tooltip } from "components/ui";
 import { PenSquare } from "lucide-react";
 // helpers
 import { renderEmoji } from "helpers/emoji.helper";
 // types
 import { IProject } from "types";
-// fetch-keys
-import { PROJECTS_LIST } from "constants/fetch-keys";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
-import { LeaveProjectModal } from "./leave-project-modal";
+// components
+import { LeaveProjectModal, DeleteProjectModal } from "components/project";
 
 type Props = {
   project: IProject;
   sidebarCollapse: boolean;
   provided?: DraggableProvided;
   snapshot?: DraggableStateSnapshot;
-  handleDeleteProject: () => void;
   handleCopyText: () => void;
   shortContextMenu?: boolean;
 };
@@ -79,15 +74,7 @@ const navigation = (workspaceSlug: string, projectId: string) => [
 ];
 
 export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
-  const {
-    project,
-    sidebarCollapse,
-    provided,
-    snapshot,
-    handleDeleteProject,
-    handleCopyText,
-    shortContextMenu = false,
-  } = props;
+  const { project, sidebarCollapse, provided, snapshot, handleCopyText, shortContextMenu = false } = props;
   // store
   const { projectPublish, project: projectStore }: RootStore = useMobxStore();
   // router
@@ -97,6 +84,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
   const { setToastAlert } = useToast();
   // states
   const [leaveProjectModalOpen, setLeaveProjectModal] = useState(false);
+  const [deleteProjectModalOpen, setDeleteProjectModal] = useState(false);
 
   const isAdmin = project.member_role === 20;
   const isViewerOrGuest = project.member_role === 10 || project.member_role === 5;
@@ -129,9 +117,23 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
     setLeaveProjectModal(true);
   };
 
+  const handleLeaveProjectModalClose = () => {
+    setLeaveProjectModal(false);
+  };
+
+  const handleDeleteProjectClick = () => {
+    setDeleteProjectModal(true);
+  };
+
+  const handleDeleteProjectModalClose = () => {
+    setDeleteProjectModal(false);
+    router.push(`/${workspaceSlug}/projects`);
+  };
+
   return (
     <>
-      <LeaveProjectModal project={project} isOpen={leaveProjectModalOpen} onClose={} />
+      <DeleteProjectModal project={project} isOpen={deleteProjectModalOpen} onClose={handleDeleteProjectModalClose} />
+      <LeaveProjectModal project={project} isOpen={leaveProjectModalOpen} onClose={handleLeaveProjectModalClose} />
       <Disclosure key={project.id} defaultOpen={projectId === project.id}>
         {({ open }) => (
           <>
@@ -205,7 +207,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                   ellipsis
                 >
                   {!shortContextMenu && isAdmin && (
-                    <CustomMenu.MenuItem onClick={handleDeleteProject}>
+                    <CustomMenu.MenuItem onClick={handleDeleteProjectClick}>
                       <span className="flex items-center justify-start gap-2 ">
                         <TrashIcon className="h-4 w-4" />
                         <span>Delete project</span>
diff --git a/web/components/project/sidebar-list.tsx b/web/components/project/sidebar-list.tsx
index 5bd0b38b5..77e9f6e2d 100644
--- a/web/components/project/sidebar-list.tsx
+++ b/web/components/project/sidebar-list.tsx
@@ -9,7 +9,7 @@ import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
 import useProjects from "hooks/use-projects";
 // components
-import { CreateProjectModal, DeleteProjectModal, ProjectSidebarListItem, LeaveProjectModal } from "components/project";
+import { CreateProjectModal, ProjectSidebarListItem, LeaveProjectModal } from "components/project";
 import { PublishProjectModal } from "components/project/publish-project/modal";
 // services
 import projectService from "services/project.service";
@@ -119,14 +119,6 @@ export const ProjectSidebarList: FC = observer(() => {
         setToFavorite={isFavoriteProjectCreate}
         user={user}
       />
-      <DeleteProjectModal
-        isOpen={deleteProjectModal}
-        onClose={() => setDeleteProjectModal(false)}
-        data={projectToDelete}
-        user={user}
-      />
-      {/* project leave modal */}
-      <LeaveProjectModal />
       {/* publish project modal */}
       <PublishProjectModal />
       <div
@@ -183,7 +175,6 @@ export const ProjectSidebarList: FC = observer(() => {
                                     sidebarCollapse={themeStore?.sidebarCollapsed || false}
                                     provided={provided}
                                     snapshot={snapshot}
-                                    handleDeleteProject={() => handleDeleteProject(project)}
                                     handleCopyText={() => handleCopyText(project.id)}
                                     shortContextMenu
                                   />
@@ -252,7 +243,6 @@ export const ProjectSidebarList: FC = observer(() => {
                                       sidebarCollapse={themeStore?.sidebarCollapsed || false}
                                       provided={provided}
                                       snapshot={snapshot}
-                                      handleDeleteProject={() => handleDeleteProject(project)}
                                       handleCopyText={() => handleCopyText(project.id)}
                                     />
                                   </div>
diff --git a/web/components/project/single-project-card.tsx b/web/components/project/single-project-card.tsx
index 547211c53..cf771d532 100644
--- a/web/components/project/single-project-card.tsx
+++ b/web/components/project/single-project-card.tsx
@@ -12,14 +12,7 @@ import useToast from "hooks/use-toast";
 // ui
 import { CustomMenu, Tooltip } from "components/ui";
 // icons
-import {
-  CalendarDaysIcon,
-  LinkIcon,
-  PencilIcon,
-  PlusIcon,
-  StarIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
+import { CalendarDaysIcon, LinkIcon, PencilIcon, PlusIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
 // helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
@@ -35,11 +28,7 @@ export type ProjectCardProps = {
   setDeleteProject: (id: string | null) => void;
 };
 
-export const SingleProjectCard: React.FC<ProjectCardProps> = ({
-  project,
-  setToJoinProject,
-  setDeleteProject,
-}) => {
+export const SingleProjectCard: React.FC<ProjectCardProps> = ({ project, setToJoinProject, setDeleteProject }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
@@ -53,15 +42,12 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
 
     mutate<IProject[]>(
       PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
-      (prevData) =>
-        (prevData ?? []).map((p) => (p.id === project.id ? { ...p, is_favorite: true } : p)),
+      (prevData) => (prevData ?? []).map((p) => (p.id === project.id ? { ...p, is_favorite: true } : p)),
       false
     );
 
     projectService
-      .addProjectToFavorites(workspaceSlug as string, {
-        project: project.id,
-      })
+      .addProjectToFavorites(workspaceSlug as string, project.id)
       .then(() => {
         setToastAlert({
           type: "success",
@@ -83,8 +69,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
 
     mutate<IProject[]>(
       PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
-      (prevData) =>
-        (prevData ?? []).map((p) => (p.id === project.id ? { ...p, is_favorite: false } : p)),
+      (prevData) => (prevData ?? []).map((p) => (p.id === project.id ? { ...p, is_favorite: false } : p)),
       false
     );
 
@@ -107,8 +92,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
   };
 
   const handleCopyText = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
 
     copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${project.id}/issues`).then(() => {
       setToastAlert({
@@ -148,9 +132,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
                     <span>Select to Join</span>
                   </button>
                 ) : (
-                  <span className="cursor-default rounded bg-green-600 px-2 py-1 text-xs">
-                    Member
-                  </span>
+                  <span className="cursor-default rounded bg-green-600 px-2 py-1 text-xs">Member</span>
                 )}
                 {project.is_favorite && (
                   <span className="grid h-6 w-9 cursor-default place-items-center rounded bg-orange-400">
@@ -174,9 +156,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
                   renderEmoji(project.icon_prop)
                 ) : null}
               </div>
-              <p className="mt-3.5 mb-7 break-words">
-                {truncateText(project.description ?? "", 100)}
-              </p>
+              <p className="mt-3.5 mb-7 break-words">{truncateText(project.description ?? "", 100)}</p>
             </a>
           </Link>
           <div className="flex h-full items-end justify-between">
diff --git a/web/services/project.service.ts b/web/services/project.service.ts
index 1e0aaa7a3..841043f6e 100644
--- a/web/services/project.service.ts
+++ b/web/services/project.service.ts
@@ -87,7 +87,7 @@ export class ProjectService extends APIService {
       });
   }
 
-  async deleteProject(workspaceSlug: string, projectId: string, user: ICurrentUserResponse | undefined): Promise<any> {
+  async deleteProject(workspaceSlug: string, projectId: string, user: any | undefined): Promise<any> {
     return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/`)
       .then((response) => {
         trackEventServices.trackProjectEvent({ projectId }, "DELETE_PROJECT", user);
@@ -132,7 +132,7 @@ export class ProjectService extends APIService {
       });
   }
 
-  async leaveProject(workspaceSlug: string, projectId: string, user: ICurrentUserResponse): Promise<any> {
+  async leaveProject(workspaceSlug: string, projectId: string, user: any): Promise<any> {
     return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/leave/`)
       .then((response) => {
         trackEventServices.trackProjectEvent(
diff --git a/web/store/project.ts b/web/store/project.ts
index 0c92970b7..52bfbca75 100644
--- a/web/store/project.ts
+++ b/web/store/project.ts
@@ -67,7 +67,8 @@ export interface IProjectStore {
 
   handleProjectLeaveModal: (project: any | null) => void;
 
-  leaveProject: (workspaceSlug: string, projectSlug: string, user: any) => Promise<void>;
+  leaveProject: (workspaceSlug: string, projectSlug: string) => Promise<void>;
+  deleteProject: (workspaceSlug: string, projectSlug: string) => Promise<void>;
 }
 
 class ProjectStore implements IProjectStore {
@@ -484,12 +485,13 @@ class ProjectStore implements IProjectStore {
     }
   };
 
-  leaveProject = async (workspaceSlug: string, projectSlug: string, user: any) => {
+  leaveProject = async (workspaceSlug: string, projectSlug: string) => {
     try {
       this.loader = true;
       this.error = null;
 
-      const response = await this.projectService.leaveProject(workspaceSlug, projectSlug, user);
+      const response = await this.projectService.leaveProject(workspaceSlug, projectSlug, this.rootStore.user);
+      await this.rootStore.workspace.getWorkspaceProjects(workspaceSlug);
 
       runInAction(() => {
         this.loader = false;
@@ -503,6 +505,15 @@ class ProjectStore implements IProjectStore {
       return error;
     }
   };
+
+  deleteProject = async (workspaceSlug: string, projectId: string) => {
+    try {
+      await this.projectService.deleteProject(workspaceSlug, projectId, this.rootStore.user.currentUser);
+      await this.rootStore.workspace.getWorkspaceProjects(workspaceSlug);
+    } catch (error) {
+      console.log("Failed to delete project from project store");
+    }
+  };
 }
 
 export default ProjectStore;