import React, { useState, useEffect } from "react"; import Image from "next/image"; 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 } from "helpers/common.helper"; // types import { 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>; }; const defaultValues: Partial = { name: "", identifier: "", description: "", network: 2, icon: getRandomEmoji(), cover_image: null, }; 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 } = 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; await projectServices .createProject(workspaceSlug as string, formData) .then((res) => { mutate( PROJECTS_LIST(workspaceSlug as string), (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, }); }); }); }; // FIXME: remove this and authorize using getServerSideProps 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")} />
{ setValue("icon", emoji); }} value={watch("icon")} />
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", }, }} />