feat: comfirm workspace deletion by typing, showing toast alert, users can't edit email from profile page

feat: all added services for fetching last active workspace details

apps/app/components/project/confirm-project-deletion.tsx

@@ -161,7 +161,7 @@ const ConfirmProjectDeletion: React.FC<Props> = ({ isOpen, data, onClose }) => {
                               setConfirmDeleteMyProject(false);
                             }
                           }}
-                          name="projectName"
+                          name="typeDelete"
                         />
                       </div>
                     </div>

apps/app/components/workspace/confirm-workspace-deletion.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 // next
 import { useRouter } from "next/router";
 // headless ui
@@ -11,43 +11,54 @@ import useToast from "lib/hooks/useToast";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
-import { Button } from "ui";
+import { Button, Input } from "ui";
 // types
 import type { IWorkspace } from "types";
 
 type Props = {
   isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  data: IWorkspace | null;
+  onClose: () => void;
 };
 
-const ConfirmWorkspaceDeletion: React.FC<Props> = ({ isOpen, setIsOpen }) => {
+const ConfirmWorkspaceDeletion: React.FC<Props> = ({ isOpen, data, onClose }) => {
   const router = useRouter();
 
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
-  const { activeWorkspace, mutateWorkspaces } = useUser();
+  const [selectedWorkspace, setSelectedWorkspace] = useState<IWorkspace | null>(null);
+
+  const [confirmProjectName, setConfirmProjectName] = useState("");
+  const [confirmDeleteMyProject, setConfirmDeleteMyProject] = useState(false);
+
+  const canDelete = confirmProjectName === data?.name && confirmDeleteMyProject;
+
+  const { mutateWorkspaces } = useUser();
 
   const { setToastAlert } = useToast();
 
   const cancelButtonRef = useRef(null);
 
   const handleClose = () => {
-    setIsOpen(false);
+    onClose();
     setIsDeleteLoading(false);
   };
 
   const handleDeletion = async () => {
     setIsDeleteLoading(true);
-    if (!activeWorkspace) return;
+    if (!data || !canDelete) return;
     await workspaceService
-      .deleteWorkspace(activeWorkspace.slug)
+      .deleteWorkspace(data.slug)
       .then(() => {
         handleClose();
         mutateWorkspaces((prevData) => {
-          return (prevData ?? []).filter(
+          return (prevData ?? []).filter((workspace: IWorkspace) => workspace.slug !== data.slug);
-            (workspace: IWorkspace) => workspace.slug !== activeWorkspace.slug
-          );
         }, false);
+        setToastAlert({
+          type: "success",
+          message: "Workspace deleted successfully",
+          title: "Success",
+        });
         router.push("/");
       })
       .catch((error) => {
@@ -56,6 +67,16 @@ const ConfirmWorkspaceDeletion: React.FC<Props> = ({ isOpen, setIsOpen }) => {
       });
   };
 
+  useEffect(() => {
+    if (data) setSelectedWorkspace(data);
+    else {
+      const timer = setTimeout(() => {
+        setSelectedWorkspace(null);
+        clearTimeout(timer);
+      }, 350);
+    }
+  }, [data]);
+
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog
@@ -103,11 +124,47 @@ const ConfirmWorkspaceDeletion: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                       <div className="mt-2">
                         <p className="text-sm text-gray-500">
                           Are you sure you want to delete workspace - {`"`}
-                          <span className="italic">{activeWorkspace?.name}</span>
+                          <span className="italic">{data?.name}</span>
                           {`"`} ? All of the data related to the workspace will be permanently
                           removed. This action cannot be undone.
                         </p>
                       </div>
+                      <div className="mt-3">
+                        <p className="text-sm">
+                          Enter the workspace name{" "}
+                          <span className="font-semibold">{selectedWorkspace?.name}</span> to
+                          continue:
+                        </p>
+                        <Input
+                          type="text"
+                          placeholder="Project name"
+                          className="mt-2"
+                          value={confirmProjectName}
+                          onChange={(e) => {
+                            setConfirmProjectName(e.target.value);
+                          }}
+                          name="workspaceName"
+                        />
+                      </div>
+                      <div className="mt-3">
+                        <p className="text-sm">
+                          To confirm, type{" "}
+                          <span className="font-semibold">delete my workspace</span> below:
+                        </p>
+                        <Input
+                          type="text"
+                          placeholder="Enter 'delete my workspace'"
+                          className="mt-2"
+                          onChange={(e) => {
+                            if (e.target.value === "delete my workspace") {
+                              setConfirmDeleteMyProject(true);
+                            } else {
+                              setConfirmDeleteMyProject(false);
+                            }
+                          }}
+                          name="typeDelete"
+                        />
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -116,7 +173,7 @@ const ConfirmWorkspaceDeletion: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                     type="button"
                     onClick={handleDeletion}
                     theme="danger"
-                    disabled={isDeleteLoading}
+                    disabled={isDeleteLoading || !canDelete}
                     className="inline-flex sm:ml-3"
                   >
                     {isDeleteLoading ? "Deleting..." : "Delete"}

apps/app/constants/api-routes.ts

@@ -24,7 +24,7 @@ export const S3_URL = `/api/file-assets/`;
 // LIST USER INVITATIONS ---- RESPOND INVITATIONS IN BULK
 export const USER_WORKSPACE_INVITATIONS = "/api/users/me/invitations/workspaces/";
 export const USER_PROJECT_INVITATIONS = "/api/users/me/invitations/projects/";
-
+export const LAST_ACTIVE_WORKSPACE_AND_PROJECTS = "/api/users/last-visited-workspace/";
 export const USER_WORKSPACE_INVITATION = (invitationId: string) =>
   `/api/users/me/invitations/${invitationId}/`;
 

apps/app/lib/services/workspace.service.ts

@@ -11,6 +11,7 @@ import {
   WORKSPACE_INVITATION_DETAIL,
   USER_WORKSPACE_INVITATION,
   USER_WORKSPACE_INVITATIONS,
+  LAST_ACTIVE_WORKSPACE_AND_PROJECTS,
 } from "constants/api-routes";
 // services
 import APIService from "lib/services/api.service";
@@ -18,7 +19,12 @@ import APIService from "lib/services/api.service";
 const { NEXT_PUBLIC_API_BASE_URL } = process.env;
 
 // types
-import { IWorkspace, IWorkspaceMember, IWorkspaceMemberInvitation } from "types";
+import {
+  ILastActiveWorkspaceDetails,
+  IWorkspace,
+  IWorkspaceMember,
+  IWorkspaceMemberInvitation,
+} from "types";
 
 class WorkspaceService extends APIService {
   constructor() {
@@ -97,6 +103,16 @@ class WorkspaceService extends APIService {
       });
   }
 
+  async getLastActiveWorkspaceAndProjects(): Promise<ILastActiveWorkspaceDetails> {
+    return this.get(LAST_ACTIVE_WORKSPACE_AND_PROJECTS)
+      .then((response) => {
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
   async userWorkspaceInvitations(): Promise<IWorkspaceMemberInvitation[]> {
     return this.get(USER_WORKSPACE_INVITATIONS)
       .then((response) => {

apps/app/pages/me/profile.tsx

@@ -1,24 +1,30 @@
 import React, { useEffect, useState } from "react";
 // next
+import Link from "next/link";
 import Image from "next/image";
 import type { NextPage } from "next";
+// swr
+import useSWR from "swr";
 // react hook form
 import { useForm } from "react-hook-form";
 // react dropzone
-import Dropzone, { useDropzone } from "react-dropzone";
+import Dropzone from "react-dropzone";
 // hooks
 import useUser from "lib/hooks/useUser";
+import useToast from "lib/hooks/useToast";
 // hoc
 import withAuth from "lib/hoc/withAuthWrapper";
 // layouts
 import AppLayout from "layouts/AppLayout";
+// constants
+import { USER_ISSUE, USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys";
 // services
 import userService from "lib/services/user.service";
 import fileServices from "lib/services/file.service";
+import workspaceService from "lib/services/workspace.service";
 // ui
 import { BreadcrumbItem, Breadcrumbs, Button, Input, Spinner } from "ui";
-// types
+// icons
-import type { IIssue, IUser, IWorkspaceMemberInvitation } from "types";
 import {
   ChevronRightIcon,
   ClipboardDocumentListIcon,
@@ -28,11 +34,8 @@ import {
   UserPlusIcon,
   XMarkIcon,
 } from "@heroicons/react/24/outline";
-import useSWR from "swr";
+// types
-import { USER_ISSUE, USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys";
+import type { IIssue, IUser } from "types";
-import useToast from "lib/hooks/useToast";
-import Link from "next/link";
-import workspaceService from "lib/services/workspace.service";
 
 const defaultValues: Partial<IUser> = {
   avatar: "",
@@ -51,8 +54,14 @@ const Profile: NextPage = () => {
   const { setToastAlert } = useToast();
 
   const onSubmit = (formData: IUser) => {
+    const payload: Partial<IUser> = {
+      id: formData.id,
+      first_name: formData.first_name,
+      last_name: formData.last_name,
+      avatar: formData.avatar,
+    };
     userService
-      .updateUser(formData)
+      .updateUser(payload)
       .then((response) => {
         mutateUser(response, false);
         setIsEditing(false);
@@ -81,9 +90,8 @@ const Profile: NextPage = () => {
     myProfile ? () => userService.userIssues() : null
   );
 
-  const { data: invitations } = useSWR<IWorkspaceMemberInvitation[]>(
+  const { data: invitations } = useSWR(USER_WORKSPACE_INVITATIONS, () =>
-    USER_WORKSPACE_INVITATIONS,
+    workspaceService.userWorkspaceInvitations()
-    () => workspaceService.userWorkspaceInvitations()
   );
 
   useEffect(() => {
@@ -128,7 +136,8 @@ const Profile: NextPage = () => {
           <>
             <div className="space-y-5">
               <section className="relative p-5 rounded-xl flex gap-10 bg-secondary">
-                <div
+                <button
+                  type="button"
                   className="absolute top-4 right-4 bg-indigo-100 hover:bg-theme hover:text-white rounded p-1 cursor-pointer duration-300"
                   onClick={() => setIsEditing((prevData) => !prevData)}
                 >
@@ -137,7 +146,7 @@ const Profile: NextPage = () => {
                   ) : (
                     <PencilIcon className="h-4 w-4" />
                   )}
-                </div>
+                </button>
                 <div className="flex-shrink-0">
                   <Dropzone
                     multiple={false}
@@ -244,21 +253,7 @@ const Profile: NextPage = () => {
                     </div>
                     <div>
                       <h4 className="text-sm text-gray-500">Email ID</h4>
-                      {isEditing ? (
+                      <h2>{myProfile.email}</h2>
-                        <Input
-                          id="email"
-                          type="email"
-                          register={register}
-                          error={errors.email}
-                          name="email"
-                          validations={{
-                            required: "Email is required",
-                          }}
-                          placeholder="Enter email"
-                        />
-                      ) : (
-                        <h2>{myProfile.email}</h2>
-                      )}
                     </div>
                   </div>
                   {isEditing && (

apps/app/pages/workspace/settings.tsx

@@ -3,6 +3,8 @@ import React, { useEffect, useState } from "react";
 import Image from "next/image";
 // react hook form
 import { useForm } from "react-hook-form";
+// headless ui
+import { Tab } from "@headlessui/react";
 // react dropzone
 import Dropzone from "react-dropzone";
 // services
@@ -17,13 +19,12 @@ import AppLayout from "layouts/AppLayout";
 import useUser from "lib/hooks/useUser";
 import useToast from "lib/hooks/useToast";
 // components
-import ConfirmWorkspaceDeletion from "components/workspace/ConfirmWorkspaceDeletion";
+import ConfirmWorkspaceDeletion from "components/workspace/confirm-workspace-deletion";
 // ui
 import { Spinner, Button, Input, Select } from "ui";
 import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
 // types
 import type { IWorkspace } from "types";
-import { Tab } from "@headlessui/react";
 
 const defaultValues: Partial<IWorkspace> = {
   name: "",
@@ -90,7 +91,13 @@ const WorkspaceSettings = () => {
         title: "Plane - Workspace Settings",
       }}
     >
-      <ConfirmWorkspaceDeletion isOpen={isOpen} setIsOpen={setIsOpen} />
+      <ConfirmWorkspaceDeletion
+        isOpen={isOpen}
+        onClose={() => {
+          setIsOpen(false);
+        }}
+        data={activeWorkspace ?? null}
+      />
       <div className="space-y-5">
         <Breadcrumbs>
           <BreadcrumbItem title={`${activeWorkspace?.name ?? "Workspace"} Settings`} />

apps/app/types/workspace.d.ts

@@ -36,3 +36,8 @@ export interface IWorkspaceMember {
   created_by: string;
   updated_by: string;
 }
+
+export interface ILastActiveWorkspaceDetails {
+  workspace_details: IWorkspace;
+  project_details: IProject[];
+}