import React, { useState, useEffect } 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"; // common import { createSimilarString } from "constants/common"; // constants import { NETWORK_CHOICES } from "constants/"; // 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"; // types import { IProject } from "types"; type Props = { isOpen: boolean; setIsOpen: React.Dispatch>; }; const defaultValues: Partial = { name: "", identifier: "", description: "", network: 0, }; 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, { shouldRetryOnError: false, } ); const [recommendedIdentifier, setRecommendedIdentifier] = useState([]); const { setToastAlert } = useToast(); const [isChangeIdentifierRequired, setIsChangeIdentifierRequired] = useState(true); const { register, formState: { errors, isSubmitting }, handleSubmit, reset, setError, clearErrors, watch, setValue, } = useForm({ defaultValues, }); 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; } err = err.data; 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") ?? ""; useEffect(() => { if (projectName && isChangeIdentifierRequired) { setValue("identifier", projectName.replace(/ /g, "").toUpperCase().substring(0, 3)); } }, [projectName, projectIdentifier, setValue, isChangeIdentifierRequired]); useEffect(() => { if (!projectName) return; const suggestedIdentifier = createSimilarString( projectName.replace(/ /g, "").toUpperCase().substring(0, 3) ); setRecommendedIdentifier([ suggestedIdentifier + Math.floor(Math.random() * 101), suggestedIdentifier + Math.floor(Math.random() * 101), projectIdentifier.toUpperCase().substring(0, 3) + Math.floor(Math.random() * 101), projectIdentifier.toUpperCase().substring(0, 3) + Math.floor(Math.random() * 101), ]); }, [errors.identifier, projectIdentifier, projectName]); useEffect(() => { return () => setIsChangeIdentifierRequired(true); }, [isOpen]); 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.