fix: issue description debounce issue (#208)

* fix: issue description form * fix: build errors
2024-06-14 14:31:34 +00:00 · 2023-01-30 19:47:30 +05:30 · 2023-01-30 19:47:30 +05:30 · fcf23b985b
commit fcf23b985b
parent 6b89ee2a55
6 changed files with 172 additions and 67 deletions
--- a/apps/app/components/issues/description-form.tsx
+++ b/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>
  );
--- a/apps/app/components/issues/form.tsx
+++ b/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",
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx
+++ b/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"
--- a/apps/app/package.json
+++ b/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",
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/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
--- a/pnpm-lock.yaml
+++ b/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