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
+// types
-import useDebounce from "hooks/use-debounce";
+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 }) => {
+export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormSubmit }) => {
-  // states
+  const { handleSubmit, watch, setValue, reset } = useForm<IIssue>({
-  // const [issueFormValues, setIssueFormValues] = useState({
+    defaultValues: {
-  //   name: issue.name,
+      name: "",
-  //   description: issue?.description,
+      description: "",
-  //   description_html: issue?.description_html,
+      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);
 
-  // hooks
+  const handleDescriptionFormSubmit = useCallback(
-  const formValues = useDebounce(
+    (formData: Partial<IIssue>) => {
-    { name: issueName, description: issueDescription, description_html: issueDescriptionHTML },
+      handleFormSubmit({
-    2000
+        name: formData.name ?? "",
+        description: formData.description,
+        description_html: formData.description_html,
+      });
+    },
+    [handleFormSubmit]
   );
-  const stringFromValues = JSON.stringify(formValues);
 
-  useEffect(() => {
+  const debounceHandler = useMemo(
-    handleSubmit(formValues);
+    () => debounce(handleSubmit(handleDescriptionFormSubmit), 2000),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [handleSubmit, handleDescriptionFormSubmit]
-  }, [handleSubmit, stringFromValues]);
+  );
 
+  useEffect(
+    () => () => {
+      debounceHandler.cancel();
+    },
+    [debounceHandler]
+  );
+
+  // reset form values
   useEffect(() => {
-    if (textareaRef && textareaRef.current) {
+    if (!issue) return;
-      textareaRef.current.style.height = "0px";
+
-      const scrollHeight = textareaRef.current.scrollHeight;
+    reset(issue);
-      textareaRef.current.style.height = scrollHeight + "px";
+  }, [issue, reset]);
-    }
-  }, [issueName]);
 
   return (
     <div>
-      <textarea
+      <Input
         id="name"
         placeholder="Enter issue name"
         name="name"
-        value={issueName}
+        value={watch("name")}
-        ref={textareaRef}
+        autoComplete="off"
-        rows={1}
+        onChange={(e) => {
-        onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setIssueName(e.target.value)}
+          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}
+        value={watch("description")}
-        placeholder="Enter Your Text..."
+        placeholder="Describe the issue..."
-        onJSONChange={(json) => setIssueDescription(json)}
+        onJSONChange={(json) => {
-        onHTMLChange={(html) => setIssueDescriptionHTML(html)}
+          setValue("description", json);
-        customClassName="min-h-[150px]"
+          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
+              <IssueDescriptionForm issue={issueDetails} handleFormSubmit={submitChanges} />
-                issue={issueDetails}
-                handleSubmit={handleDescriptionFormSubmit}
-              />
               <div className="mt-2">
                 {issueId && workspaceSlug && projectId && subIssues?.length > 0 ? (
                   <SubIssueList

pnpm-lock.yaml

@@ -21,10 +21,12 @@ importers:
       '@remirror/pm': ^2.0.3
       '@remirror/react': ^2.0.24
       '@types/js-cookie': ^3.0.2
+      '@types/lodash.debounce': ^4.0.7
       '@types/node': 18.0.6
       '@types/react': 18.0.15
       '@types/react-beautiful-dnd': ^13.1.2
       '@types/react-color': ^3.0.6
+      '@types/react-datepicker': ^4.8.0
       '@types/react-dom': 18.0.6
       '@types/uuid': ^8.3.4
       '@typescript-eslint/eslint-plugin': ^5.48.2
@@ -35,6 +37,7 @@ importers:
       eslint: ^8.31.0
       eslint-config-next: 12.2.2
       js-cookie: ^3.0.1
+      lodash.debounce: ^4.0.8
       next: 12.3.2
       next-pwa: ^5.6.0
       postcss: ^8.4.14
@@ -42,6 +45,7 @@ importers:
       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
@@ -58,14 +62,18 @@ importers:
       '@remirror/extension-react-tables': 2.2.11_primzaudxtd4wvxl4iqmlhjvbm
       '@remirror/pm': 2.0.3
       '@remirror/react': 2.0.24_primzaudxtd4wvxl4iqmlhjvbm
+      '@types/lodash.debounce': 4.0.7
+      '@types/react-datepicker': 4.8.0_biqbaboplfbrettd7655fr4n2y
       axios: 1.2.0
       js-cookie: 3.0.1
+      lodash.debounce: 4.0.8
       next: 12.3.2_biqbaboplfbrettd7655fr4n2y
       next-pwa: 5.6.0_next@12.3.2
       react: 18.2.0
       react-beautiful-dnd: 13.1.1_biqbaboplfbrettd7655fr4n2y
       react-circular-progressbar: 2.1.0_react@18.2.0
       react-color: 2.19.3_react@18.2.0
+      react-datepicker: 4.8.0_biqbaboplfbrettd7655fr4n2y
       react-dom: 18.2.0_react@18.2.0
       react-dropzone: 14.2.3_react@18.2.0
       react-hook-form: 7.40.0_react@18.2.0
@@ -3940,6 +3948,16 @@ packages:
   /@types/json5/0.0.29:
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
 
+  /@types/lodash.debounce/4.0.7:
+    resolution: {integrity: sha512-X1T4wMZ+gT000M2/91SYj0d/7JfeNZ9PeeOldSNoE/lunLeQXKvkmIumI29IaKMotU/ln/McOIvgzZcQ/3TrSA==}
+    dependencies:
+      '@types/lodash': 4.14.191
+    dev: false
+
+  /@types/lodash/4.14.191:
+    resolution: {integrity: sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==}
+    dev: false
+
   /@types/marked/4.0.8:
     resolution: {integrity: sha512-HVNzMT5QlWCOdeuBsgXP8EZzKUf0+AXzN+sLmjvaB3ZlLqO+e4u0uXrdw9ub69wBKFs+c6/pA4r9sy6cCDvImw==}
     dev: false
@@ -4004,6 +4022,18 @@ packages:
       '@types/react': 18.0.15
       '@types/reactcss': 1.2.6
 
+  /@types/react-datepicker/4.8.0_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-20uzZsIf4moPAjjHDfPvH8UaOHZBxrkiQZoLS3wgKq8Xhp+95gdercLEdoA7/I8nR9R5Jz2qQkdMIM+Lq4AS1A==}
+    dependencies:
+      '@popperjs/core': 2.11.6
+      '@types/react': 18.0.26
+      date-fns: 2.29.3
+      react-popper: 2.3.0_r6q5zrenym2zg7je7hgi674bti
+    transitivePeerDependencies:
+      - react
+      - react-dom
+    dev: false
+
   /@types/react-dom/18.0.6:
     resolution: {integrity: sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==}
     dependencies:
@@ -4787,7 +4817,6 @@ packages:
 
   /classnames/2.3.2:
     resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==}
-    dev: true
 
   /clean-webpack-plugin/4.0.0:
     resolution: {integrity: sha512-WuWE1nyTNAyW5T7oNyys2EN0cfP2fdRxhxnIQWiAp0bMabPdHhoGxM8A6YL2GhqwgrPnnaemVE7nv5XJ2Fhh2w==}
@@ -4960,6 +4989,11 @@ packages:
     resolution: {integrity: sha512-4FbVrHDwfOASx7uQVxeiCTo7ggSdYZbqs8lH+WU6ViypPlDbe9y6IP5VVUDQBv9DcnyaiPT5XT0UWHgJ64zLeQ==}
     dev: false
 
+  /date-fns/2.29.3:
+    resolution: {integrity: sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==}
+    engines: {node: '>=0.11'}
+    dev: false
+
   /debug/2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:
@@ -8351,6 +8385,22 @@ packages:
       tinycolor2: 1.4.2
     dev: false
 
+  /react-datepicker/4.8.0_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-u69zXGHMpxAa4LeYR83vucQoUCJQ6m/WBsSxmUMu/M8ahTSVMMyiyQzauHgZA2NUr9y0FUgOAix71hGYUb6tvg==}
+    peerDependencies:
+      react: ^16.9.0 || ^17 || ^18
+      react-dom: ^16.9.0 || ^17 || ^18
+    dependencies:
+      '@popperjs/core': 2.11.6
+      classnames: 2.3.2
+      date-fns: 2.29.3
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-onclickoutside: 6.12.2_biqbaboplfbrettd7655fr4n2y
+      react-popper: 2.3.0_r6q5zrenym2zg7je7hgi674bti
+    dev: false
+
   /react-dom/18.2.0_react@18.2.0:
     resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
     peerDependencies:
@@ -8373,6 +8423,10 @@ packages:
       react: 18.2.0
     dev: false
 
+  /react-fast-compare/3.2.0:
+    resolution: {integrity: sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==}
+    dev: false
+
   /react-hook-form/7.40.0_react@18.2.0:
     resolution: {integrity: sha512-0rokdxMPJs0k9bvFtY6dbcSydyNhnZNXCR49jgDr/aR03FDHFOK6gfh8ccqB3fl696Mk7lqh04xdm+agqWXKSw==}
     engines: {node: '>=12.22.0'}
@@ -8393,6 +8447,30 @@ packages:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
     dev: false
 
+  /react-onclickoutside/6.12.2_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-NMXGa223OnsrGVp5dJHkuKxQ4czdLmXSp5jSV9OqiCky9LOpPATn3vLldc+q5fK3gKbEHvr7J1u0yhBh/xYkpA==}
+    peerDependencies:
+      react: ^15.5.x || ^16.x || ^17.x || ^18.x
+      react-dom: ^15.5.x || ^16.x || ^17.x || ^18.x
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /react-popper/2.3.0_r6q5zrenym2zg7je7hgi674bti:
+    resolution: {integrity: sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==}
+    peerDependencies:
+      '@popperjs/core': ^2.0.0
+      react: ^16.8.0 || ^17 || ^18
+      react-dom: ^16.8.0 || ^17 || ^18
+    dependencies:
+      '@popperjs/core': 2.11.6
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-fast-compare: 3.2.0
+      warning: 4.0.3
+    dev: false
+
   /react-redux/7.2.9_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==}
     peerDependencies:
@@ -9705,6 +9783,12 @@ packages:
     resolution: {integrity: sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg==}
     dev: false
 
+  /warning/4.0.3:
+    resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: false
+
   /webidl-conversions/4.0.2:
     resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
     dev: false