import React, { useCallback, useEffect, useState } from "react"; import { useRouter } from "next/router"; import dynamic from "next/dynamic"; import { mutate } from "swr"; import { SparklesIcon } from "@heroicons/react/24/outline"; // react-hook-form import { Controller, useForm } from "react-hook-form"; // services import pagesService from "services/pages.service"; import issuesService from "services/issues.service"; import aiService from "services/ai.service"; // hooks import useToast from "hooks/use-toast"; // components import { GptAssistantModal } from "components/core"; // ui import { Loader, PrimaryButton, SecondaryButton, TextArea } from "components/ui"; // types import { ICurrentUserResponse, IPageBlock } from "types"; // fetch-keys import { PAGE_BLOCKS_LIST } from "constants/fetch-keys"; type Props = { handleClose: () => void; data?: IPageBlock; handleAiAssistance?: (response: string) => void; setIsSyncing?: React.Dispatch>; focus?: keyof IPageBlock; user: ICurrentUserResponse | undefined; }; const defaultValues = { name: "", description: null, description_html: null, }; const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), { ssr: false, loading: () => ( ), }); import { IRemirrorRichTextEditor } from "components/rich-text-editor"; const WrappedRemirrorRichTextEditor = React.forwardRef< IRemirrorRichTextEditor, IRemirrorRichTextEditor >((props, ref) => ); WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor"; export const CreateUpdateBlockInline: React.FC = ({ handleClose, data, handleAiAssistance, setIsSyncing, focus, user, }) => { const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false); const [gptAssistantModal, setGptAssistantModal] = useState(false); const editorRef = React.useRef(null); const router = useRouter(); const { workspaceSlug, projectId, pageId } = router.query; const { setToastAlert } = useToast(); const { handleSubmit, register, control, watch, setValue, setFocus, reset, formState: { isSubmitting }, } = useForm({ defaultValues, }); const onClose = useCallback(() => { if (data) handleClose(); reset(); }, [handleClose, reset, data]); const createPageBlock = useCallback( async (formData: Partial) => { if (!workspaceSlug || !projectId || !pageId) return; await pagesService .createPageBlock( workspaceSlug as string, projectId as string, pageId as string, { name: formData.name, description: formData.description ?? "", description_html: formData.description_html ?? "

", }, user ) .then((res) => { mutate( PAGE_BLOCKS_LIST(pageId as string), (prevData) => [...(prevData as IPageBlock[]), res], false ); editorRef.current?.clearEditor(); }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Page could not be created. Please try again.", }); }) .finally(() => onClose()); }, [workspaceSlug, projectId, pageId, onClose, setToastAlert] ); const updatePageBlock = useCallback( async (formData: Partial) => { if (!workspaceSlug || !projectId || !pageId || !data) return; if (data.issue && data.sync && setIsSyncing) setIsSyncing(true); mutate( PAGE_BLOCKS_LIST(pageId as string), (prevData) => prevData?.map((p) => { if (p.id === data.id) return { ...p, ...formData }; return p; }), false ); await pagesService .patchPageBlock( workspaceSlug as string, projectId as string, pageId as string, data.id, { name: formData.name, description: formData.description, description_html: formData.description_html, }, user ) .then((res) => { mutate(PAGE_BLOCKS_LIST(pageId as string)); editorRef.current?.setEditorValue(res.description_html); if (data.issue && data.sync) issuesService .patchIssue( workspaceSlug as string, projectId as string, data.issue, { name: res.name, description: res.description, description_html: res.description_html, }, user ) .finally(() => { if (setIsSyncing) setIsSyncing(false); }); }) .finally(() => onClose()); }, [workspaceSlug, projectId, pageId, data, onClose, setIsSyncing] ); const handleAutoGenerateDescription = async () => { if (!workspaceSlug || !projectId) return; setIAmFeelingLucky(true); aiService .createGptTask( workspaceSlug as string, projectId as string, { prompt: watch("name"), task: "Generate a proper description for this issue in context of a project management software.", }, user ) .then((res) => { if (res.response === "") setToastAlert({ type: "error", title: "Error!", message: "Block title isn't informative enough to generate the description. Please try with a different title.", }); else { setValue("description", {}); setValue("description_html", `${watch("description_html") ?? ""}

${res.response}

`); editorRef.current?.setEditorValue(watch("description_html") ?? ""); } }) .catch((err) => { if (err.status === 429) setToastAlert({ type: "error", title: "Error!", message: "You have reached the maximum number of requests of 50 requests per month per user.", }); else setToastAlert({ type: "error", title: "Error!", message: "Some error occurred. Please try again.", }); }) .finally(() => setIAmFeelingLucky(false)); }; useEffect(() => { if (focus) setFocus(focus); if (!data) return; reset({ ...defaultValues, name: data.name, description: !data.description || data.description === "" ? { type: "doc", content: [{ type: "paragraph" }], } : data.description, description_html: data.description_html ?? "

", }); }, [reset, data, focus, setFocus]); useEffect(() => { window.addEventListener("keydown", (e: KeyboardEvent) => { if (e.key === "Escape") handleClose(); }); return () => { window.removeEventListener("keydown", (e: KeyboardEvent) => { if (e.key === "Escape") handleClose(); }); }; }, [handleClose]); useEffect(() => { const submitForm = (e: KeyboardEvent) => { if ((e.ctrlKey || e.metaKey) && e.key === "Enter") { if (data) handleSubmit(updatePageBlock)(); else handleSubmit(createPageBlock)(); } }; window.addEventListener("keydown", submitForm); return () => { window.removeEventListener("keydown", submitForm); }; }, [createPageBlock, updatePageBlock, data, handleSubmit]); return (