chore: added remove workspace image in workspace settings (#781)

This commit is contained in:
Kunal Vishwakarma 2023-04-11 17:12:34 +05:30 committed by GitHub
parent 725c9375ea
commit cfa283116b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -18,7 +18,14 @@ import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
import { ImageUploadModal } from "components/core";
import { DeleteWorkspaceModal } from "components/workspace";
// ui
import { Spinner, Input, CustomSelect, OutlineButton, SecondaryButton } from "components/ui";
import {
Spinner,
Input,
CustomSelect,
OutlineButton,
SecondaryButton,
DangerButton,
} from "components/ui";
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
// icons
import { LinkIcon } from "@heroicons/react/24/outline";
@ -42,6 +49,7 @@ const defaultValues: Partial<IWorkspace> = {
const WorkspaceSettings: NextPage = () => {
const [isOpen, setIsOpen] = useState(false);
const [isImageUploading, setIsImageUploading] = useState(false);
const [isImageRemoving, setIsImageRemoving] = useState(false);
const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
const router = useRouter();
@ -85,6 +93,14 @@ const WorkspaceSettings: NextPage = () => {
mutate<IWorkspace[]>(USER_WORKSPACES, (prevData) =>
prevData?.map((workspace) => (workspace.id === res.id ? res : workspace))
);
mutate<IWorkspace>(WORKSPACE_DETAILS(workspaceSlug as string), (prevData) => {
if (!prevData) return prevData;
return {
...prevData,
logo: formData.logo,
};
});
setToastAlert({
title: "Success",
type: "success",
@ -95,12 +111,43 @@ const WorkspaceSettings: NextPage = () => {
};
const handleDelete = (url: string | null | undefined) => {
if (!url) return;
if (!activeWorkspace || !url) return;
setIsImageRemoving(true);
const index = url.indexOf(".com");
const asset = url.substring(index + 5);
fileService.deleteFile(asset);
fileService.deleteFile(asset).then(() => {
workspaceService
.updateWorkspace(activeWorkspace.slug, { logo: "" })
.then((res) => {
setToastAlert({
type: "success",
title: "Success!",
message: "Workspace picture removed successfully.",
});
mutate<IWorkspace[]>(USER_WORKSPACES, (prevData) =>
prevData?.map((workspace) => (workspace.id === res.id ? res : workspace))
);
mutate<IWorkspace>(WORKSPACE_DETAILS(workspaceSlug as string), (prevData) => {
if (!prevData) return prevData;
return {
...prevData,
logo: "",
};
});
})
.catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "There was some error in deleting your profile picture. Please try again.",
});
})
.finally(() => setIsImageRemoving(false));
});
};
return (
@ -161,7 +208,7 @@ const WorkspaceSettings: NextPage = () => {
</div>
)}
</button>
<div>
<div className="flex gap-4">
<SecondaryButton
onClick={() => {
setIsImageUploadModalOpen(true);
@ -169,6 +216,11 @@ const WorkspaceSettings: NextPage = () => {
>
{isImageUploading ? "Uploading..." : "Upload"}
</SecondaryButton>
{activeWorkspace.logo && activeWorkspace.logo !== "" && (
<DangerButton onClick={() => handleDelete(activeWorkspace.logo)}>
{isImageRemoving ? "Removing..." : "Remove"}
</DangerButton>
)}
</div>
</div>
</div>