import { useEffect, useState } from "react"; import { useRouter } from "next/router"; import useSWR, { mutate } from "swr"; // react-hook-form import { Controller, useForm } from "react-hook-form"; import { IProject, IWorkspace, UserAuth } from "types"; // lib import { requiredAdmin } from "lib/auth"; // layouts import AppLayout from "layouts/app-layout"; // services import projectService from "services/project.service"; // components import { DeleteProjectModal } from "components/project"; import EmojiIconPicker from "components/emoji-icon-picker"; // hooks import useToast from "hooks/use-toast"; // ui import { Input, TextArea, Loader, CustomSelect, OutlineButton, SecondaryButton, } from "components/ui"; import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs"; // types import type { NextPage, GetServerSidePropsContext } from "next"; // fetch-keys import { PROJECTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys"; // constants import { NETWORK_CHOICES } from "constants/project"; const defaultValues: Partial = { name: "", description: "", identifier: "", network: 0, }; const GeneralSettings: NextPage = ({ isMember, isOwner, isViewer, isGuest }) => { const [selectProject, setSelectedProject] = useState(null); const { setToastAlert } = useToast(); const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { data: projectDetails } = useSWR( workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null, workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null ); const { register, handleSubmit, reset, control, setError, formState: { errors, isSubmitting }, } = useForm({ defaultValues, }); const checkIdentifier = (value: string) => { if (!workspaceSlug) return; projectService .checkProjectIdentifierAvailability(workspaceSlug as string, value) .then((response) => { if (response.exists) setError("identifier", { message: "Identifier already exists" }); }); }; useEffect(() => { if (projectDetails) reset({ ...projectDetails, default_assignee: projectDetails.default_assignee?.id, project_lead: projectDetails.project_lead?.id, workspace: (projectDetails.workspace as IWorkspace).id, }); }, [projectDetails, reset]); const onSubmit = async (formData: IProject) => { if (!workspaceSlug || !projectDetails) return; const payload: Partial = { name: formData.name, network: formData.network, identifier: formData.identifier, description: formData.description, default_assignee: formData.default_assignee, project_lead: formData.project_lead, icon: formData.icon, }; await projectService .checkProjectIdentifierAvailability(workspaceSlug as string, payload.identifier ?? "") .then(async (res) => { if (res.exists) setError("identifier", { message: "Identifier already exists" }); else await projectService .updateProject(workspaceSlug as string, projectDetails.id, payload) .then((res) => { mutate( PROJECT_DETAILS(projectDetails.id), (prevData) => ({ ...prevData, ...res }), false ); mutate(PROJECTS_LIST(workspaceSlug as string)); setToastAlert({ type: "success", title: "Success!", message: "Project updated successfully", }); }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Project could not be updated. Please try again.", }); }); }); }; return ( } settingsLayout > setSelectedProject(null)} onSuccess={() => { router.push(`/${workspaceSlug}/projects`); }} />

Icon & Name

Select an icon and a name for your project.

{projectDetails ? ( ( )} /> ) : ( )} {projectDetails ? ( ) : ( )}

Description

Give a description to your project.

{projectDetails ? (