thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

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

Browse Source 
feat: all added services for fetching last active workspace details
This commit is contained in:
Dakshesh Jain 2022-12-12 20:14:34 +05:30
parent 74a27edb09
commit aa21c97ed2
7 changed files with 128 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/app/components/project/confirm-project-deletion.tsx
View File

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

83
apps/app/components/workspace/ConfirmWorkspaceDeletion.tsx → apps/app/components/workspace/confirm-workspace-deletion.tsx
View File

@ -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(
(workspace: IWorkspace) => workspace.slug !== activeWorkspace.slug
);
return (prevData ?? []).filter((workspace: IWorkspace) => workspace.slug !== data.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"}

2
apps/app/constants/api-routes.ts
View File

@ -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}/`;

18
apps/app/lib/services/workspace.service.ts
View File

@ -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) => {

53
apps/app/pages/me/profile.tsx
View File

@ -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
import type { IIssue, IUser, IWorkspaceMemberInvitation } from "types";
// icons
import {
ChevronRightIcon,
ClipboardDocumentListIcon,
@ -28,11 +34,8 @@ import {
UserPlusIcon,
XMarkIcon,
} from "@heroicons/react/24/outline";
import useSWR from "swr";
import { USER_ISSUE, USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys";
import useToast from "lib/hooks/useToast";
import Link from "next/link";
import workspaceService from "lib/services/workspace.service";
// types
import type { IIssue, IUser } from "types";
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[]>(
USER_WORKSPACE_INVITATIONS,
() => workspaceService.userWorkspaceInvitations()
const { data: invitations } = useSWR(USER_WORKSPACE_INVITATIONS, () =>
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 ? (
<Input
id="email"
type="email"
register={register}
error={errors.email}
name="email"
validations={{
required: "Email is required",
}}
placeholder="Enter email"
/>
) : (
<h2>{myProfile.email}</h2>
)}
<h2>{myProfile.email}</h2>
</div>
</div>
{isEditing && (

13
apps/app/pages/workspace/settings.tsx
View File

@ -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`} />

5
apps/app/types/workspace.d.ts vendored
View File

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