import { ChangeEvent, FC, useCallback, useEffect, useState } from "react"; import { Controller, useForm } from "react-hook-form"; // hooks import useReloadConfirmations from "hooks/use-reload-confirmation"; import debounce from "lodash/debounce"; // components import { TextArea } from "@plane/ui"; import { RichReadOnlyEditor, RichTextEditor } from "@plane/rich-text-editor"; // types import { TIssue } from "@plane/types"; import { TIssueOperations } from "./issue-detail"; // services import { FileService } from "services/file.service"; import { useMention, useWorkspace } from "hooks/store"; 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 = (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); const { setShowAlert } = useReloadConfirmations(); // store hooks const { mentionHighlights, mentionSuggestions } = useMention(); // form info const { handleSubmit, watch, reset, control, formState: { errors }, } = useForm({ defaultValues: { name: "", description_html: "", }, }); const [localTitleValue, setLocalTitleValue] = useState(""); const [localIssueDescription, setLocalIssueDescription] = useState({ id: issue.id, description_html: issue.description_html, }); // adding issue.description_html or issue.name to dependency array causes // editor rerendering on every save useEffect(() => { if (issue.id) { setLocalIssueDescription({ id: issue.id, description_html: issue.description_html }); setLocalTitleValue(issue.name); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [issue.id]); // TODO: verify the exhaustive-deps warning 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 ?? "

", }, false ); }, [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, }); }, [issue, 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 ? ( (