import { useEffect, useState, useRef } from "react"; import { useRouter } from "next/router"; import { useForm } from "react-hook-form"; import { observer } from "mobx-react-lite"; import { PlusIcon } from "lucide-react"; // hooks import useToast from "hooks/use-toast"; import useKeypress from "hooks/use-keypress"; import useOutsideClickDetector from "hooks/use-outside-click-detector"; // store import { useMobxStore } from "lib/mobx/store-provider"; // helpers import { createIssuePayload } from "helpers/issue.helper"; // types import { IIssue, IProject } from "types"; type Props = { formKey: keyof IIssue; groupId?: string; subGroupId?: string | null; prePopulatedData?: Partial; quickAddCallback?: ( workspaceSlug: string, projectId: string, data: IIssue, viewId?: string ) => Promise; viewId?: string; }; const defaultValues: Partial = { name: "", }; const Inputs = (props: any) => { const { register, setFocus, projectDetails } = props; useEffect(() => { setFocus("name"); }, [setFocus]); return ( <>

{projectDetails?.identifier ?? "..."}

); }; export const SpreadsheetQuickAddIssueForm: React.FC = observer((props) => { const { formKey, groupId, subGroupId = null, prePopulatedData, quickAddCallback, viewId } = props; // router const router = useRouter(); const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string }; // store const { workspace: workspaceStore, project: projectStore } = useMobxStore(); const { reset, handleSubmit, setFocus, register, formState: { errors, isSubmitting }, } = useForm({ defaultValues }); // ref const ref = useRef(null); // states const [isOpen, setIsOpen] = useState(false); const handleClose = () => setIsOpen(false); // hooks useKeypress("Escape", handleClose); useOutsideClickDetector(ref, handleClose); const { setToastAlert } = useToast(); // derived values const workspaceDetail = (workspaceSlug && workspaceStore.getWorkspaceBySlug(workspaceSlug)) || null; const projectDetail: IProject | null = (workspaceSlug && projectId && projectStore.getProjectById(workspaceSlug, projectId)) || null; useEffect(() => { setFocus("name"); }, [setFocus, isOpen]); useEffect(() => { if (!isOpen) reset({ ...defaultValues }); }, [isOpen, reset]); useEffect(() => { if (!errors) return; Object.keys(errors).forEach((key) => { const error = errors[key as keyof IIssue]; setToastAlert({ type: "error", title: "Error!", message: error?.message?.toString() || "Some error occurred. Please try again.", }); }); }, [errors, setToastAlert]); // const onSubmitHandler = async (formData: IIssue) => { // if (isSubmitting || !workspaceSlug || !projectId) return; // // resetting the form so that user can add another issue quickly // reset({ ...defaultValues }); // const payload = createIssuePayload(workspaceDetail!, projectDetails!, { // ...(prePopulatedData ?? {}), // ...formData, // }); // try { // quickAddStore.createIssue( // workspaceSlug.toString(), // projectId.toString(), // { // group_id: groupId ?? null, // sub_group_id: null, // }, // payload // ); // setToastAlert({ // type: "success", // title: "Success!", // message: "Issue created successfully.", // }); // } catch (err: any) { // Object.keys(err || {}).forEach((key) => { // const error = err?.[key]; // const errorTitle = error ? (Array.isArray(error) ? error.join(", ") : error) : null; // setToastAlert({ // type: "error", // title: "Error!", // message: errorTitle || "Some error occurred. Please try again.", // }); // }); // } // }; const onSubmitHandler = async (formData: IIssue) => { if (isSubmitting || !workspaceDetail || !projectDetail) return; reset({ ...defaultValues }); const payload = createIssuePayload(workspaceDetail, projectDetail, { ...(prePopulatedData ?? {}), ...formData, }); try { quickAddCallback && (await quickAddCallback(workspaceSlug, projectId, { ...payload } as IIssue, viewId)); setToastAlert({ type: "success", title: "Success!", message: "Issue created successfully.", }); } catch (err: any) { console.error(err); setToastAlert({ type: "error", title: "Error!", message: err?.message || "Some error occurred. Please try again.", }); } }; return (
{isOpen && (
)} {isOpen && (

Press {"'"}Enter{"'"} to add another issue

)} {!isOpen && (
)}
); });