import React, { useState, useEffect, useCallback } from "react"; // swr import useSWR, { mutate } from "swr"; // react hook form import { useForm } from "react-hook-form"; // headless import { Dialog, Transition } from "@headlessui/react"; // services import projectServices from "lib/services/project.service"; import workspaceService from "lib/services/workspace.service"; // fetch keys import { PROJECTS_LIST, WORKSPACE_MEMBERS } from "constants/fetch-keys"; // hooks import useUser from "lib/hooks/useUser"; import useToast from "lib/hooks/useToast"; // ui import { Button, Input, TextArea, Select } from "ui"; // common import { debounce } from "constants/common"; // types import { IProject, WorkspaceMember } from "types"; type Props = { isOpen: boolean; setIsOpen: React.Dispatch>; }; const NETWORK_CHOICES = { "0": "Secret", "2": "Public" }; const defaultValues: Partial = { name: "", description: "", }; const IsGuestCondition: React.FC<{ setIsOpen: React.Dispatch>; }> = ({ setIsOpen }) => { const { setToastAlert } = useToast(); useEffect(() => { setIsOpen(false); setToastAlert({ title: "Error", type: "error", message: "You don't have permission to create project.", }); }, [setIsOpen, setToastAlert]); return null; }; const CreateProjectModal: React.FC = ({ isOpen, setIsOpen }) => { const handleClose = () => { setIsOpen(false); const timeout = setTimeout(() => { reset(defaultValues); clearTimeout(timeout); }, 500); }; const { activeWorkspace, user } = useUser(); const { data: workspaceMembers } = useSWR( activeWorkspace ? WORKSPACE_MEMBERS(activeWorkspace.slug) : null, activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null ); const { setToastAlert } = useToast(); const [isChangeIdentifierRequired, setIsChangeIdentifierRequired] = useState(true); const { register, formState: { errors, isSubmitting }, handleSubmit, reset, setError, watch, setValue, } = useForm({ defaultValues, reValidateMode: "onChange", mode: "all", }); const onSubmit = async (formData: IProject) => { if (!activeWorkspace) return; await projectServices .createProject(activeWorkspace.slug, formData) .then((res) => { console.log(res); mutate( PROJECTS_LIST(activeWorkspace.slug), (prevData) => [res, ...(prevData ?? [])], false ); setToastAlert({ title: "Success", type: "success", message: "Project created successfully", }); handleClose(); }) .catch((err) => { if (err.status === 403) { setToastAlert({ title: "Error", type: "error", message: "You don't have permission to create project.", }); handleClose(); return; } Object.keys(err).map((key) => { const errorMessages = err[key]; setError(key as keyof IProject, { message: Array.isArray(errorMessages) ? errorMessages.join(", ") : errorMessages, }); }); }); }; const projectName = watch("name") ?? ""; const projectIdentifier = watch("identifier") ?? ""; const checkIdentifier = (slug: string, value: string) => { projectServices.checkProjectIdentifierAvailability(slug, value).then((response) => { console.log(response); if (response.exists) setError("identifier", { message: "Identifier already exists" }); }); }; // eslint-disable-next-line react-hooks/exhaustive-deps const checkIdentifierAvailability = useCallback(debounce(checkIdentifier, 1500), []); useEffect(() => { if (projectName && isChangeIdentifierRequired) { setValue("identifier", projectName.replace(/ /g, "-").toUpperCase().substring(0, 3)); } }, [projectName, projectIdentifier, setValue, isChangeIdentifierRequired]); if (workspaceMembers) { const isMember = workspaceMembers.find((member) => member.member.id === user?.id); const isGuest = workspaceMembers.find( (member) => member.member.id === user?.id && member.role === 5 ); if ((!isMember || isGuest) && isOpen) return ; } return (
Create Project

Create a new project to start working on it.