import React, { useEffect, useState } from "react"; import { useRouter } from "next/router"; import useSWR, { mutate } from "swr"; // react-hook-form import { Controller, useForm } from "react-hook-form"; // services import workspaceService from "services/workspace.service"; import fileService from "services/file.service"; // hooks import useToast from "hooks/use-toast"; import useUserAuth from "hooks/use-user-auth"; // layouts import { WorkspaceAuthorizationLayout } from "layouts/auth-layout"; import SettingsNavbar from "layouts/settings-navbar"; // components import { ImageUploadModal } from "components/core"; import { DeleteWorkspaceModal, SettingsHeader } from "components/workspace"; // ui import { Spinner, Input, CustomSelect, SecondaryButton, DangerButton } from "components/ui"; import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs"; // icons import { LinkIcon } from "@heroicons/react/24/outline"; // helpers import { copyTextToClipboard } from "helpers/string.helper"; // types import type { IWorkspace } from "types"; import type { NextPage } from "next"; // fetch-keys import { WORKSPACE_DETAILS, USER_WORKSPACES } from "constants/fetch-keys"; // constants import { COMPANY_SIZE } from "constants/workspace"; const defaultValues: Partial = { name: "", url: "", company_size: null, logo: null, }; 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(); const { workspaceSlug } = router.query; const { user } = useUserAuth(); const { setToastAlert } = useToast(); const { data: activeWorkspace } = useSWR( workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null, () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null) ); const { register, handleSubmit, control, reset, watch, setValue, formState: { errors, isSubmitting }, } = useForm({ defaultValues: { ...defaultValues, ...activeWorkspace }, }); useEffect(() => { if (activeWorkspace) reset({ ...activeWorkspace }); }, [activeWorkspace, reset]); const onSubmit = async (formData: IWorkspace) => { if (!activeWorkspace) return; const payload: Partial = { logo: formData.logo, name: formData.name, company_size: formData.company_size, }; await workspaceService .updateWorkspace(activeWorkspace.slug, payload, user) .then((res) => { mutate(USER_WORKSPACES, (prevData) => prevData?.map((workspace) => (workspace.id === res.id ? res : workspace)) ); mutate(WORKSPACE_DETAILS(workspaceSlug as string), (prevData) => { if (!prevData) return prevData; return { ...prevData, logo: formData.logo, }; }); setToastAlert({ title: "Success", type: "success", message: "Workspace updated successfully", }); }) .catch((err) => console.error(err)); }; const handleDelete = (url: string | null | undefined) => { if (!activeWorkspace || !url) return; setIsImageRemoving(true); const index = url.indexOf(".com"); const asset = url.substring(index + 5); fileService.deleteFile(asset).then(() => { workspaceService .updateWorkspace(activeWorkspace.slug, { logo: "" }, user) .then((res) => { setToastAlert({ type: "success", title: "Success!", message: "Workspace picture removed successfully.", }); mutate(USER_WORKSPACES, (prevData) => prevData?.map((workspace) => (workspace.id === res.id ? res : workspace)) ); mutate(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 ( } > setIsImageUploadModalOpen(false)} onSuccess={(imageUrl) => { setIsImageUploading(true); setValue("logo", imageUrl); setIsImageUploadModalOpen(false); handleSubmit(onSubmit)().then(() => setIsImageUploading(false)); }} value={watch("logo")} /> { setIsOpen(false); }} data={activeWorkspace ?? null} user={user} />
{activeWorkspace ? (

Logo

Max file size is 5MB. Supported file types are .jpg and .png.

{ setIsImageUploadModalOpen(true); }} > {isImageUploading ? "Uploading..." : "Upload"} {activeWorkspace.logo && activeWorkspace.logo !== "" && ( handleDelete(activeWorkspace.logo)}> {isImageRemoving ? "Removing..." : "Remove"} )}

URL

Your workspace URL.

copyTextToClipboard( `${typeof window !== "undefined" && window.location.origin}/${ activeWorkspace.slug }` ).then(() => { setToastAlert({ type: "success", title: "Link Copied!", message: "Workspace link copied to clipboard.", }); }) } outline >

Name

Give a name to your workspace.

Company Size

How big is your company?

( {COMPANY_SIZE?.map((item) => ( {item.label} ))} )} />
{isSubmitting ? "Updating..." : "Update Workspace"}

Danger Zone

The danger zone of the workspace delete page is a critical area that requires careful consideration and attention. When deleting a workspace, all of the data and resources within that workspace will be permanently removed and cannot be recovered.

setIsOpen(true)} outline> Delete the workspace
) : (
)}
); }; export default WorkspaceSettings;