import React, { useState, useEffect } from "react"; import { useRouter } from "next/router"; import useSWR, { mutate } from "swr"; import { useForm, Controller } from "react-hook-form"; import { Dialog, Transition } from "@headlessui/react"; // services import projectServices from "services/project.service"; import workspaceService from "services/workspace.service"; // hooks import useToast from "hooks/use-toast"; // ui import { Input, TextArea, CustomSelect, PrimaryButton, SecondaryButton } from "components/ui"; // icons import { XMarkIcon } from "@heroicons/react/24/outline"; // components import { ImagePickerPopover } from "components/core"; import EmojiIconPicker from "components/emoji-icon-picker"; // helpers import { getRandomEmoji, renderEmoji } from "helpers/emoji.helper"; // types import { ICurrentUserResponse, IProject } from "types"; // fetch-keys import { PROJECTS_LIST, WORKSPACE_MEMBERS_ME } from "constants/fetch-keys"; // constants import { NETWORK_CHOICES } from "constants/project"; type Props = { isOpen: boolean; setIsOpen: React.Dispatch>; user: ICurrentUserResponse | undefined; }; const defaultValues: Partial = { name: "", identifier: "", description: "", network: 2, emoji_and_icon: getRandomEmoji(), cover_image: "https://images.unsplash.com/photo-1575116464504-9e7652fddcb3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwyODUyNTV8MHwxfHNlYXJjaHwxOHx8cGxhbmV8ZW58MHx8fHwxNjgxNDY4NTY5&ixlib=rb-4.0.3&q=80&w=1080", }; 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; }; export const CreateProjectModal: React.FC = (props) => { const { isOpen, setIsOpen, user } = props; const [isChangeIdentifierRequired, setIsChangeIdentifierRequired] = useState(true); const { setToastAlert } = useToast(); const { query: { workspaceSlug }, } = useRouter(); const { data: myWorkspaceMembership } = useSWR( workspaceSlug ? WORKSPACE_MEMBERS_ME(workspaceSlug as string) : null, workspaceSlug ? () => workspaceService.workspaceMemberMe(workspaceSlug as string) : null, { shouldRetryOnError: false, } ); const { register, formState: { errors, isSubmitting }, handleSubmit, reset, setError, control, watch, setValue, } = useForm({ defaultValues, mode: "all", reValidateMode: "onChange", }); 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(() => () => setIsChangeIdentifierRequired(true), [isOpen]); const handleClose = () => { setIsOpen(false); reset(defaultValues); }; const onSubmit = async (formData: IProject) => { if (!workspaceSlug) return; const { emoji_and_icon, ...payload } = formData; if (typeof formData.emoji_and_icon === "object") payload.icon_prop = formData.emoji_and_icon; else payload.emoji = formData.emoji_and_icon; await projectServices .createProject(workspaceSlug as string, payload, user) .then((res) => { mutate( PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }), (prevData) => [res, ...(prevData ?? [])], false ); setToastAlert({ type: "success", title: "Success!", message: "Project created successfully.", }); handleClose(); }) .catch((err) => { if (err.status === 403) { setToastAlert({ type: "error", title: "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, }); }); }); }; if (myWorkspaceMembership && isOpen) { if (myWorkspaceMembership.role <= 10) return ; } return (
{watch("cover_image") !== null && ( Cover Image )}

Create Project

{ setValue("cover_image", image); }} value={watch("cover_image")} />
( {value.name} ) : ( renderEmoji(value) ) ) : ( "Icon" ) } onChange={onChange} value={value} /> )} />
setIsChangeIdentifierRequired(false)} validations={{ required: "Identifier is required", validate: (value) => /^[A-Z]+$/.test(value) || "Identifier must be uppercase text.", minLength: { value: 1, message: "Identifier must at least be of 1 character", }, maxLength: { value: 5, message: "Identifier must at most be of 5 characters", }, }} />
( k === value.toString()) ? NETWORK_CHOICES[value.toString() as keyof typeof NETWORK_CHOICES] : "Select network" } width="w-full" input > {Object.keys(NETWORK_CHOICES).map((key) => ( {NETWORK_CHOICES[key as keyof typeof NETWORK_CHOICES]} ))} )} />