fix: issue description debounce issue (#208)

* fix: issue description form

* fix: build errors

apps/app/components/issues/description-form.tsx

@@ -1,7 +1,11 @@
-import { FC, useEffect, useRef, useState } from "react";
+import { FC, useCallback, useEffect, useMemo } from "react";
+
 import dynamic from "next/dynamic";
-// types
-import { IIssue } from "types";
+
+// react-hook-form
+import { useForm } from "react-hook-form";
+// lodash
+import debounce from "lodash.debounce";
 // components
 import { Loader, Input } from "components/ui";
 const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
@@ -12,8 +16,8 @@ const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor
     </Loader>
   ),
 });
-// hooks
-import useDebounce from "hooks/use-debounce";
+// types
+import { IIssue } from "types";
 
 export interface IssueDescriptionFormValues {
   name: string;
@@ -23,61 +27,73 @@ export interface IssueDescriptionFormValues {
 
 export interface IssueDetailsProps {
   issue: IIssue;
-  handleSubmit: (value: IssueDescriptionFormValues) => void;
+  handleFormSubmit: (value: IssueDescriptionFormValues) => void;
 }
 
-export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleSubmit }) => {
-  // states
-  // const [issueFormValues, setIssueFormValues] = useState({
-  //   name: issue.name,
-  //   description: issue?.description,
-  //   description_html: issue?.description_html,
-  // });
-  const [issueName, setIssueName] = useState(issue?.name);
-  const [issueDescription, setIssueDescription] = useState(issue?.description);
-  const [issueDescriptionHTML, setIssueDescriptionHTML] = useState(issue?.description_html);
-  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormSubmit }) => {
+  const { handleSubmit, watch, setValue, reset } = useForm<IIssue>({
+    defaultValues: {
+      name: "",
+      description: "",
+      description_html: "",
+    },
+  });
 
-  // hooks
-  const formValues = useDebounce(
-    { name: issueName, description: issueDescription, description_html: issueDescriptionHTML },
-    2000
+  const handleDescriptionFormSubmit = useCallback(
+    (formData: Partial<IIssue>) => {
+      handleFormSubmit({
+        name: formData.name ?? "",
+        description: formData.description,
+        description_html: formData.description_html,
+      });
+    },
+    [handleFormSubmit]
   );
-  const stringFromValues = JSON.stringify(formValues);
 
-  useEffect(() => {
-    handleSubmit(formValues);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [handleSubmit, stringFromValues]);
+  const debounceHandler = useMemo(
+    () => debounce(handleSubmit(handleDescriptionFormSubmit), 2000),
+    [handleSubmit, handleDescriptionFormSubmit]
+  );
 
+  useEffect(
+    () => () => {
+      debounceHandler.cancel();
+    },
+    [debounceHandler]
+  );
+
+  // reset form values
   useEffect(() => {
-    if (textareaRef && textareaRef.current) {
-      textareaRef.current.style.height = "0px";
-      const scrollHeight = textareaRef.current.scrollHeight;
-      textareaRef.current.style.height = scrollHeight + "px";
-    }
-  }, [issueName]);
+    if (!issue) return;
+
+    reset(issue);
+  }, [issue, reset]);
 
   return (
     <div>
-      <textarea
+      <Input
         id="name"
         placeholder="Enter issue name"
         name="name"
-        value={issueName}
-        ref={textareaRef}
-        rows={1}
-        onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setIssueName(e.target.value)}
+        value={watch("name")}
+        autoComplete="off"
+        onChange={(e) => {
+          setValue("name", e.target.value);
+          debounceHandler();
+        }}
+        mode="transparent"
+        className="text-xl font-medium"
         required={true}
-        className="no-scrollbar w-full px-3 py-2 outline-none rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-theme text-xl font-medium resize-none"
       />
 
       <RemirrorRichTextEditor
-        value={issueDescription}
-        placeholder="Enter Your Text..."
-        onJSONChange={(json) => setIssueDescription(json)}
-        onHTMLChange={(html) => setIssueDescriptionHTML(html)}
-        customClassName="min-h-[150px]"
+        value={watch("description")}
+        placeholder="Describe the issue..."
+        onJSONChange={(json) => {
+          setValue("description", json);
+          debounceHandler();
+        }}
+        onHTMLChange={(html) => setValue("description_html", html)}
       />
     </div>
   );

apps/app/components/issues/form.tsx

@@ -194,7 +194,7 @@ export const IssueForm: FC<IssueFormProps> = ({
                   error={errors.name}
                   register={register}
                   validations={{
-                    required: "Name is required",
+                    required: "Title is required",
                     maxLength: {
                       value: 255,
                       message: "Name should be less than 255 characters",

apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx

@@ -34,6 +34,7 @@ import SelectBlocked from "components/project/issues/issue-detail/issue-detail-s
 // headless ui
 // ui
 import { Input, Button, Spinner } from "components/ui";
+import DatePicker from "react-datepicker";
 // icons
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
@@ -42,6 +43,8 @@ import type { ICycle, IIssue, IIssueLabels } from "types";
 // fetch-keys
 import { PROJECT_ISSUE_LABELS, PROJECT_ISSUES_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
 
+import "react-datepicker/dist/react-datepicker.css";
+
 type Props = {
   control: Control<IIssue, any>;
   submitChanges: (formData: Partial<IIssue>) => void;
@@ -216,6 +219,24 @@ const IssueDetailSidebar: React.FC<Props> = ({
                 <p>Due date</p>
               </div>
               <div className="sm:basis-1/2">
+                {/* <Controller
+                  control={control}
+                  name="target_date"
+                  render={({ field: { value, onChange } }) => (
+                    <DatePicker
+                      selected={value ? new Date(value) : new Date()}
+                      onChange={(val: Date) => {
+                        submitChanges({
+                          target_date: `${val.getFullYear()}-${
+                            val.getMonth() + 1
+                          }-${val.getDate()}`,
+                        });
+                        onChange(`${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`);
+                      }}
+                      dateFormat="dd-MM-yyyy"
+                    />
+                  )}
+                /> */}
                 <Controller
                   control={control}
                   name="target_date"

apps/app/package.json

@@ -15,14 +15,18 @@
     "@remirror/extension-react-tables": "^2.2.11",
     "@remirror/pm": "^2.0.3",
     "@remirror/react": "^2.0.24",
+    "@types/lodash.debounce": "^4.0.7",
+    "@types/react-datepicker": "^4.8.0",
     "axios": "^1.1.3",
     "js-cookie": "^3.0.1",
+    "lodash.debounce": "^4.0.8",
     "next": "12.3.2",
     "next-pwa": "^5.6.0",
     "react": "18.2.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-circular-progressbar": "^2.1.0",
     "react-color": "^2.19.3",
+    "react-datepicker": "^4.8.0",
     "react-dom": "18.2.0",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.38.0",

apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx

@@ -149,6 +149,7 @@ const IssueDetailsPage: NextPage = () => {
       issuesService
         .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload)
         .then((res) => {
+          console.log(res);
           mutateIssueDetails();
           mutateIssueActivities();
         })
@@ -173,24 +174,6 @@ const IssueDetailsPage: NextPage = () => {
       });
   };
 
-  /**
-   * Handling the debounce submit by updating the issue with name, description and description_html
-   * @param values IssueDescriptionFormValues
-   */
-  const handleDescriptionFormSubmit = useCallback(
-    (values: IssueDescriptionFormValues) => {
-      if (!workspaceSlug || !projectId || !issueId) return;
-
-      issuesService
-        .updateIssue(workspaceSlug as string, projectId as string, issueId as string, values)
-        .then((res) => {
-          console.log(res);
-          mutateIssueActivities();
-        });
-    },
-    [workspaceSlug, projectId, issueId, mutateIssueActivities]
-  );
-
   return (
     <AppLayout
       noPadding={true}
@@ -304,10 +287,7 @@ const IssueDetailsPage: NextPage = () => {
                   </CustomMenu>
                 </div>
               ) : null}
-              <IssueDescriptionForm
-                issue={issueDetails}
-                handleSubmit={handleDescriptionFormSubmit}
-              />
+              <IssueDescriptionForm issue={issueDetails} handleFormSubmit={submitChanges} />
               <div className="mt-2">
                 {issueId && workspaceSlug && projectId && subIssues?.length > 0 ? (
                   <SubIssueList