fix: mutation error on issue details

2022-12-20 13:16:40 +05:30 · 2022-12-20 13:16:40 +05:30 · a0e7475ce8
commit a0e7475ce8
parent 010d98c40d
3 changed files with 86 additions and 88 deletions
--- 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
@ -99,13 +99,15 @@ const IssueDetailSidebar: React.FC<Props> = ({

  const handleCycleChange = (cycleId: string) => {
    if (activeWorkspace && activeProject && issueDetail)
-      issuesServices.addIssueToCycle(activeWorkspace.slug, activeProject.id, cycleId, {
+      issuesServices
+        .addIssueToCycle(activeWorkspace.slug, activeProject.id, cycleId, {
          issue: issueDetail.id,
+        })
+        .then(() => {
+          submitChanges({});
        });
  };

-  console.log(issueDetail?.labels, issueDetail?.labels_list);
-
  return (
    <>
      <div className="h-full w-full divide-y-2 divide-gray-100">
@ -141,7 +143,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
              type="button"
              className="p-2 hover:bg-gray-100 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 duration-300"
              onClick={() =>
-                copyTextToClipboard(`${issueDetail?.id}`)
+                copyTextToClipboard(issueDetail?.id ?? "")
                  .then(() => {
                    setToastAlert({
                      type: "success",
@ -249,7 +251,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
            </div>
            <div className="basis-1/2">
              <div className="flex gap-1 flex-wrap">
-                {issueDetail?.labels.map((label) => {
+                {watchIssue("labels_list")?.map((label) => {
                  const singleLabel = issueLabels?.find((l) => l.id === label);

                  if (!singleLabel) return null;
@ -259,11 +261,10 @@ const IssueDetailSidebar: React.FC<Props> = ({
                      key={singleLabel.id}
                      className="group flex items-center gap-1 border rounded-2xl text-xs px-1 py-0.5 hover:bg-red-50 hover:border-red-500 cursor-pointer"
                      onClick={() => {
-                        const updatedLabels = issueDetail?.labels.filter((l) => l !== label);
-                        // submitChanges({
-                        //   labels_list: updatedLabels,
-                        // });
-                        console.log(updatedLabels);
+                        const updatedLabels = watchIssue("labels_list")?.filter((l) => l !== label);
+                        submitChanges({
+                          labels_list: updatedLabels,
+                        });
                      }}
                    >
                      <span
--- a/apps/app/components/project/issues/list-view/index.tsx
+++ b/apps/app/components/project/issues/list-view/index.tsx
@ -551,6 +551,10 @@ const ListView: React.FC<Props> = ({
                          [selectedGroup]: singleGroup,
                          actionType: "createIssue",
                        });
+                      } else {
+                        setPreloadedData({
+                          actionType: "createIssue",
+                        });
                      }
                    }}
                  >
--- a/apps/app/pages/projects/[projectId]/issues/[issueId].tsx
+++ b/apps/app/pages/projects/[projectId]/issues/[issueId].tsx
@ -1,16 +1,25 @@
+import React, { useCallback, useEffect, useState } from "react";
 // next
 import Link from "next/link";
 import type { NextPage } from "next";
 import { useRouter } from "next/router";
 import dynamic from "next/dynamic";
-// react
-import React, { useCallback, useEffect, useState } from "react";
 // swr
 import useSWR, { mutate } from "swr";
 // react hook form
 import { useForm } from "react-hook-form";
+// headless ui
+import { Disclosure, Menu, Tab, Transition } from "@headlessui/react";
+// fetch keys
+import {
+  PROJECT_ISSUES_ACTIVITY,
+  PROJECT_ISSUES_COMMENTS,
+  PROJECT_ISSUES_LIST,
+} from "constants/fetch-keys";
 // services
 import issuesServices from "lib/services/issues.service";
+// common
+import { debounce } from "constants/common";
 // hooks
 import useUser from "lib/hooks/useUser";
 // hoc
@ -24,12 +33,8 @@ import AddAsSubIssue from "components/project/issues/issue-detail/add-as-sub-iss
 import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
 import IssueDetailSidebar from "components/project/issues/issue-detail/issue-detail-sidebar";
 import IssueActivitySection from "components/project/issues/issue-detail/activity";
-// headless ui
-import { Disclosure, Menu, Tab, Transition } from "@headlessui/react";
 // ui
-import { Spinner, TextArea } from "ui";
-import HeaderButton from "ui/HeaderButton";
-import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
+import { Spinner, TextArea, HeaderButton, Breadcrumbs, BreadcrumbItem } from "ui";
 // icons
 import {
  ChevronLeftIcon,
@ -39,14 +44,6 @@ import {
 } from "@heroicons/react/24/outline";
 // types
 import { IIssue, IIssueComment, IssueResponse } from "types";
-// fetch keys
-import {
-  PROJECT_ISSUES_ACTIVITY,
-  PROJECT_ISSUES_COMMENTS,
-  PROJECT_ISSUES_LIST,
-} from "constants/fetch-keys";
-// common
-import { debounce } from "constants/common";

 const RichTextEditor = dynamic(() => import("components/lexical/editor"), {
  ssr: false,
@ -148,7 +145,15 @@ const IssueDetail: NextPage = () => {
      issuesServices
        .patchIssue(activeWorkspace.slug, projectId as string, issueId as string, payload)
        .then((response) => {
-          console.log(response);
+          mutateIssues((prevData) => ({
+            ...(prevData as IssueResponse),
+            results: (prevData?.results ?? []).map((issue) => {
+              if (issue.id === issueId) {
+                return { ...issue, ...response };
+              }
+              return issue;
+            }),
+          }));
        })
        .catch((error) => {
          console.log(error);
@ -170,25 +175,23 @@ const IssueDetail: NextPage = () => {
          issueDetail.blocked_issues?.map((issue) => issue.blocked_issue_detail?.id),
        assignees_list:
          issueDetail.assignees_list ?? issueDetail.assignee_details?.map((user) => user.id),
-        labels_list: issueDetail.labels_list ?? issueDetail.labels?.map((label) => label),
-        labels: issueDetail.labels_list ?? issueDetail.labels?.map((label) => label),
+        labels_list: issueDetail.labels_list ?? issueDetail.labels,
+        labels: issueDetail.labels_list ?? issueDetail.labels,
      });
  }, [issueDetail, reset]);

  useEffect(() => {
-    const issueIndex = issues?.results.findIndex((issue) => issue.id === issueId);
-    if (issueIndex === undefined) return;
-    const issueDetail = issues?.results[issueIndex];
+    const issueDetail = issues?.results.find((issue) => issue.id === issueId);
    setIssueDetail(issueDetail);
-  }, [issues, issueId]);
+  }, [issueId, issues]);

  const prevIssue = issues?.results[issues?.results.findIndex((issue) => issue.id === issueId) - 1];
  const nextIssue = issues?.results[issues?.results.findIndex((issue) => issue.id === issueId) + 1];

-  const subIssues = (issues && issues.results.filter((i) => i.parent === issueDetail?.id)) ?? [];
+  const subIssues = (issues && issues.results.filter((i) => i.parent === issueId)) ?? [];
  const siblingIssues =
    issueDetail &&
-    issues?.results.filter((i) => i.parent === issueDetail.parent && i.id !== issueDetail.id);
+    issues?.results.filter((i) => i.parent === issueDetail.parent && i.id !== issueId);

  const handleSubIssueRemove = (issueId: string) => {
    if (activeWorkspace && activeProject) {
@ -212,8 +215,6 @@ const IssueDetail: NextPage = () => {
    }
  };

-  console.log(issueDetail);
-
  return (
    <AppLayout
      noPadding={true}
@ -236,7 +237,7 @@ const IssueDetail: NextPage = () => {
          <HeaderButton
            Icon={ChevronLeftIcon}
            label="Previous"
-            className={`${!prevIssue ? "cursor-not-allowed opacity-70" : ""}`}
+            className={!prevIssue ? "cursor-not-allowed opacity-70" : ""}
            onClick={() => {
              if (!prevIssue) return;
              router.push(`/projects/${prevIssue.project}/issues/${prevIssue.id}`);
@ -246,7 +247,7 @@ const IssueDetail: NextPage = () => {
            Icon={ChevronRightIcon}
            disabled={!nextIssue}
            label="Next"
-            className={`${!nextIssue ? "cursor-not-allowed opacity-70" : ""}`}
+            className={!nextIssue ? "cursor-not-allowed opacity-70" : ""}
            onClick={() => {
              if (!nextIssue) return;
              router.push(`/projects/${nextIssue.project}/issues/${nextIssue?.id}`);
@ -284,7 +285,7 @@ const IssueDetail: NextPage = () => {
                  <Link href={`/projects/${activeProject.id}/issues/${issueDetail.parent}`}>
                    <a className="flex items-center gap-2">
                      <span
-                        className={`h-1.5 w-1.5 block rounded-full`}
+                        className="h-1.5 w-1.5 block rounded-full"
                        style={{
                          backgroundColor: issueDetail.state_detail.color,
                        }}
@ -432,7 +433,6 @@ const IssueDetail: NextPage = () => {
                                  <Menu.Items className="origin-top-right absolute right-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50">
                                    <div className="p-1">
                                      <Menu.Item as="div">
-                                        {(active) => (
                                        <button
                                          type="button"
                                          className="flex items-center gap-2 p-2 text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap"
@ -440,7 +440,6 @@ const IssueDetail: NextPage = () => {
                                        >
                                          Add an existing issue
                                        </button>
-                                        )}
                                      </Menu.Item>
                                    </div>
                                  </Menu.Items>
@ -497,14 +496,12 @@ const IssueDetail: NextPage = () => {
                                      <Menu.Items className="origin-top-right absolute right-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50">
                                        <div className="p-1">
                                          <Menu.Item as="div">
-                                            {(active) => (
                                            <button
                                              className="flex items-center gap-2 p-2 text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap"
                                              onClick={() => handleSubIssueRemove(subIssue.id)}
                                            >
                                              Remove as sub-issue
                                            </button>
-                                            )}
                                          </Menu.Item>
                                        </div>
                                      </Menu.Items>
@ -537,7 +534,6 @@ const IssueDetail: NextPage = () => {
                      <Menu.Items className="absolute origin-top-right left-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
                        <div className="p-1">
                          <Menu.Item as="div">
-                            {(active) => (
                            <button
                              type="button"
                              className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
@ -551,10 +547,8 @@ const IssueDetail: NextPage = () => {
                            >
                              Create new
                            </button>
-                            )}
                          </Menu.Item>
                          <Menu.Item as="div">
-                            {(active) => (
                            <button
                              type="button"
                              className="p-2 text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap"
@ -568,7 +562,6 @@ const IssueDetail: NextPage = () => {
                            >
                              Add an existing issue
                            </button>
-                            )}
                          </Menu.Item>
                        </div>
                      </Menu.Items>