import React, { useEffect, useState } from "react"; import Image from "next/image"; import { useRouter } from "next/router"; import useSWR, { mutate } from "swr"; // react-hook-form import { Controller, useForm } from "react-hook-form"; // icons import { LinkIcon } from "@heroicons/react/24/outline"; // lib import { requiredWorkspaceAdmin } from "lib/auth"; // services import workspaceService from "services/workspace.service"; // layouts import AppLayout from "layouts/app-layout"; // hooks import useToast from "hooks/use-toast"; // components import { ImageUploadModal } from "components/core"; import { DeleteWorkspaceModal } from "components/workspace"; // ui import { Spinner, Button, Input, CustomSelect, OutlineButton } from "components/ui"; import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs"; // helpers import { copyTextToClipboard } from "helpers/string.helper"; // types import type { IWorkspace, UserAuth } from "types"; import type { GetServerSideProps, 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 = (props) => { const [isOpen, setIsOpen] = useState(false); const [isImageUploading, setIsImageUploading] = useState(false); const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false); const { query: { workspaceSlug }, } = useRouter(); 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) .then((res) => { mutate(USER_WORKSPACES, (prevData) => prevData?.map((workspace) => (workspace.id === res.id ? res : workspace)) ); setToastAlert({ title: "Success", type: "success", message: "Workspace updated successfully", }); }) .catch((err) => console.error(err)); }; return ( } settingsLayout > setIsImageUploadModalOpen(false)} onSuccess={(imageUrl) => { setIsImageUploading(true); setValue("logo", imageUrl); setIsImageUploadModalOpen(false); handleSubmit(onSubmit)().then(() => setIsImageUploading(false)); }} value={watch("logo")} /> { setIsOpen(false); }} data={activeWorkspace ?? null} /> {activeWorkspace ? (

Logo

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

URL

Your workspace URL.

Name

Give a name to your workspace.

Company Size

How big is your company?

( {COMPANY_SIZE?.map((item) => ( {item.label} ))} )} />

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)}> Delete the workspace
) : (
)}
); }; export const getServerSideProps: GetServerSideProps = async (ctx) => { const workspaceSlug = ctx.params?.workspaceSlug as string; const memberDetail = await requiredWorkspaceAdmin(workspaceSlug, ctx.req.headers.cookie); if (memberDetail === null) { return { redirect: { destination: "/", permanent: false, }, }; } return { props: { isOwner: memberDetail?.role === 20, isMember: memberDetail?.role === 15, isViewer: memberDetail?.role === 10, isGuest: memberDetail?.role === 5, }, }; }; export default WorkspaceSettings;