import { ChangeEvent, FC, useCallback, useEffect, useState } from "react"; import debounce from "lodash/debounce"; import { observer } from "mobx-react"; import { Controller, useForm } from "react-hook-form"; import { RichReadOnlyEditor, RichTextEditor } from "@plane/rich-text-editor"; import { TIssue } from "@plane/types"; // hooks import { Loader, TextArea } from "@plane/ui"; import { useMention, useWorkspace } from "@/hooks/store"; import useReloadConfirmations from "@/hooks/use-reload-confirmation"; // components // types import { FileService } from "@/services/file.service"; import { TIssueOperations } from "./issue-detail"; // services export interface IssueDescriptionFormValues { name: string; description_html: string; } export interface IssueDetailsProps { workspaceSlug: string; projectId: string; issueId: string; issue: { name: string; description_html: string; id: string; project_id?: string; }; issueOperations: TIssueOperations; disabled: boolean; isSubmitting: "submitting" | "submitted" | "saved"; setIsSubmitting: (value: "submitting" | "submitted" | "saved") => void; } const fileService = new FileService(); export const IssueDescriptionForm: FC = observer((props) => { const { workspaceSlug, projectId, issueId, issue, issueOperations, disabled, isSubmitting, setIsSubmitting } = props; const workspaceStore = useWorkspace(); const workspaceId = workspaceStore.getWorkspaceBySlug(workspaceSlug)?.id as string; // states const [characterLimit, setCharacterLimit] = useState(false); // hooks const { setShowAlert } = useReloadConfirmations(); // store hooks const { mentionHighlights, mentionSuggestions } = useMention(); // form info const { handleSubmit, watch, reset, control, formState: { errors }, } = useForm({ defaultValues: { name: issue?.name, description_html: issue?.description_html, }, }); const [localTitleValue, setLocalTitleValue] = useState(""); const [localIssueDescription, setLocalIssueDescription] = useState({ id: issue.id, description_html: issue.description_html, }); const handleDescriptionFormSubmit = useCallback( async (formData: Partial) => { if (!formData?.name || formData?.name.length === 0 || formData?.name.length > 255) return; await issueOperations.update(workspaceSlug, projectId, issueId, { name: formData.name ?? "", description_html: formData.description_html ?? "

", }); }, [workspaceSlug, projectId, issueId, issueOperations] ); useEffect(() => { if (isSubmitting === "submitted") { setShowAlert(false); setTimeout(async () => { setIsSubmitting("saved"); }, 2000); } else if (isSubmitting === "submitting") { setShowAlert(true); } }, [isSubmitting, setShowAlert, setIsSubmitting]); // reset form values useEffect(() => { if (!issue) return; reset({ ...issue, }); setLocalIssueDescription({ id: issue.id, description_html: issue.description_html === "" ? "

" : issue.description_html, }); setLocalTitleValue(issue.name); }, [issue, issue.description_html, reset]); // ADDING handleDescriptionFormSubmit TO DEPENDENCY ARRAY PRODUCES ADVERSE EFFECTS // TODO: Verify the exhaustive-deps warning // eslint-disable-next-line react-hooks/exhaustive-deps const debouncedFormSave = useCallback( debounce(async () => { handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted")); }, 1500), [handleSubmit] ); return (
{!disabled ? ( (