refactor: issue details page (#282)

2024-06-14 14:31:34 +00:00 · 2023-02-15 12:21:41 +05:30 · 2023-02-15 12:21:41 +05:30 · ab0ce2f649
commit ab0ce2f649
parent 6f0539f01d
4 changed files with 203 additions and 281 deletions
--- a/apps/app/components/issues/activity.tsx
+++ b/apps/app/components/issues/activity.tsx
@ -1,7 +1,7 @@
 import React from "react";
 import { useRouter } from "next/router";
 import Image from "next/image";
-import { KeyedMutator } from "swr";
+import useSWR from "swr";

 // icons
 import {
@ -13,7 +13,7 @@ import {
  UserIcon,
 } from "@heroicons/react/24/outline";
 // services
-import issuesServices from "services/issues.service";
+import issuesService from "services/issues.service";
 // components
 import { CommentCard } from "components/issues/comment";
 // ui
@ -24,7 +24,8 @@ import { BlockedIcon, BlockerIcon, CyclesIcon, TagIcon, UserGroupIcon } from "co
 import { renderShortNumericDateFormat, timeAgo } from "helpers/date-time.helper";
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
-import { IIssueActivity, IIssueComment } from "types";
+import { IIssueComment } from "types";
+import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";

 const activityDetails: {
  [key: string]: {
@ -85,19 +86,27 @@ const activityDetails: {
  },
 };

-type Props = {
-  issueActivities: IIssueActivity[];
-  mutate: KeyedMutator<IIssueActivity[]>;
-};
+type Props = {};

-export const IssueActivitySection: React.FC<Props> = ({ issueActivities, mutate }) => {
+export const IssueActivitySection: React.FC<Props> = () => {
  const router = useRouter();
-
  const { workspaceSlug, projectId, issueId } = router.query;

-  const onCommentUpdate = async (comment: IIssueComment) => {
+  const { data: issueActivities, mutate: mutateIssueActivities } = useSWR(
+    workspaceSlug && projectId && issueId ? PROJECT_ISSUES_ACTIVITY(issueId as string) : null,
+    workspaceSlug && projectId && issueId
+      ? () =>
+          issuesService.getIssueActivities(
+            workspaceSlug as string,
+            projectId as string,
+            issueId as string
+          )
+      : null
+  );
+
+  const handleCommentUpdate = async (comment: IIssueComment) => {
    if (!workspaceSlug || !projectId || !issueId) return;
-    await issuesServices
+    await issuesService
      .patchIssueComment(
        workspaceSlug as string,
        projectId as string,
@ -106,13 +115,13 @@ export const IssueActivitySection: React.FC<Props> = ({ issueActivities, mutate
        comment
      )
      .then((res) => {
-        mutate();
+        mutateIssueActivities();
      });
  };

-  const onCommentDelete = async (commentId: string) => {
+  const handleCommentDelete = async (commentId: string) => {
    if (!workspaceSlug || !projectId || !issueId) return;
-    await issuesServices
+    await issuesService
      .deleteIssueComment(
        workspaceSlug as string,
        projectId as string,
@ -120,7 +129,7 @@ export const IssueActivitySection: React.FC<Props> = ({ issueActivities, mutate
        commentId
      )
      .then((response) => {
-        mutate();
+        mutateIssueActivities();
        console.log(response);
      });
  };
@ -234,8 +243,8 @@ export const IssueActivitySection: React.FC<Props> = ({ issueActivities, mutate
                <CommentCard
                  key={activity.id}
                  comment={activity as any}
-                  onSubmit={onCommentUpdate}
-                  handleCommentDeletion={onCommentDelete}
+                  onSubmit={handleCommentUpdate}
+                  handleCommentDeletion={handleCommentDelete}
                />
              );
          })}
--- a/apps/app/components/issues/comment/add-comment.tsx
+++ b/apps/app/components/issues/comment/add-comment.tsx
@ -3,6 +3,8 @@ import React, { useMemo } from "react";
 import { useRouter } from "next/router";
 import dynamic from "next/dynamic";

+import { mutate } from "swr";
+
 // react-hook-form
 import { useForm, Controller } from "react-hook-form";
 // services
@ -12,8 +14,9 @@ import { Loader } from "components/ui";
 // helpers
 import { debounce } from "helpers/common.helper";
 // types
-import type { IIssueActivity, IIssueComment } from "types";
-import type { KeyedMutator } from "swr";
+import type { IIssueComment } from "types";
+// fetch-keys
+import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";

 const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
  ssr: false,
@ -29,9 +32,7 @@ const defaultValues: Partial<IIssueComment> = {
  comment_json: "",
 };

-export const AddComment: React.FC<{
-  mutate: KeyedMutator<IIssueActivity[]>;
-}> = ({ mutate }) => {
+export const AddComment: React.FC = () => {
  const {
    handleSubmit,
    control,
@ -57,7 +58,7 @@ export const AddComment: React.FC<{
    await issuesServices
      .createIssueComment(workspaceSlug as string, projectId as string, issueId as string, formData)
      .then(() => {
-        mutate();
+        mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
        reset(defaultValues);
      })
      .catch((error) => {
--- a/apps/app/components/issues/sub-issues-list.tsx
+++ b/apps/app/components/issues/sub-issues-list.tsx
@ -1,49 +1,88 @@
 import { FC, useState } from "react";
+
 import Link from "next/link";
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// headless ui
 import { Disclosure, Transition } from "@headlessui/react";
-import { ChevronRightIcon, PlusIcon } from "@heroicons/react/24/outline";
+// services
+import issuesService from "services/issues.service";
 // components
-import { CustomMenu } from "components/ui";
 import { CreateUpdateIssueModal, SubIssuesListModal } from "components/issues";
+// ui
+import { CustomMenu } from "components/ui";
+// icons
+import { ChevronRightIcon, PlusIcon } from "@heroicons/react/24/outline";
 // types
-import { IIssue, UserAuth } from "types";
+import { IIssue, IssueResponse, UserAuth } from "types";
+// fetch-keys
+import { PROJECT_ISSUES_LIST, SUB_ISSUES } from "constants/fetch-keys";

-export interface SubIssueListProps {
-  issues: IIssue[];
-  projectId: string;
-  workspaceSlug: string;
+type SubIssueListProps = {
  parentIssue: IIssue;
-  handleSubIssueRemove: (subIssueId: string) => void;
  userAuth: UserAuth;
-}
+};

-export const SubIssuesList: FC<SubIssueListProps> = ({
-  issues = [],
-  handleSubIssueRemove,
-  parentIssue,
-  workspaceSlug,
-  projectId,
-  userAuth,
-}) => {
+export const SubIssuesList: FC<SubIssueListProps> = ({ parentIssue, userAuth }) => {
  // states
-  const [isIssueModalActive, setIssueModalActive] = useState(false);
+  const [createIssueModal, setCreateIssueModal] = useState(false);
  const [subIssuesListModal, setSubIssuesListModal] = useState(false);
  const [preloadedData, setPreloadedData] = useState<Partial<IIssue> | null>(null);

-  const openIssueModal = () => {
-    setIssueModalActive(true);
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+
+  const { data: subIssues } = useSWR<IIssue[] | undefined>(
+    workspaceSlug && projectId && issueId ? SUB_ISSUES(issueId as string) : null,
+    workspaceSlug && projectId && issueId
+      ? () =>
+          issuesService.subIssues(workspaceSlug as string, projectId as string, issueId as string)
+      : null
+  );
+
+  const handleSubIssueRemove = (issueId: string) => {
+    if (!workspaceSlug || !projectId) return;
+
+    mutate<IIssue[]>(
+      SUB_ISSUES(parentIssue.id ?? ""),
+      (prevData) => prevData?.filter((i) => i.id !== issueId),
+      false
+    );
+
+    issuesService
+      .patchIssue(workspaceSlug as string, projectId as string, issueId, { parent: null })
+      .then((res) => {
+        mutate(SUB_ISSUES(parentIssue.id ?? ""));
+
+        mutate<IssueResponse>(
+          PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
+          (prevData) => ({
+            ...(prevData as IssueResponse),
+            results: (prevData?.results ?? []).map((p) => {
+              if (p.id === res.id)
+                return {
+                  ...p,
+                  ...res,
+                };
+
+              return p;
+            }),
+          }),
+          false
+        );
+      })
+      .catch((e) => {
+        console.error(e);
+      });
  };

-  const closeIssueModal = () => {
-    setIssueModalActive(false);
-  };
-
-  const openSubIssueModal = () => {
-    setSubIssuesListModal(true);
-  };
-
-  const closeSubIssueModal = () => {
-    setSubIssuesListModal(false);
+  const handleCreateIssueModal = () => {
+    setCreateIssueModal(true);
+    setPreloadedData({
+      parent: parentIssue.id,
+    });
  };

  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
@ -51,95 +90,106 @@ export const SubIssuesList: FC<SubIssueListProps> = ({
  return (
    <>
      <CreateUpdateIssueModal
-        isOpen={isIssueModalActive}
+        isOpen={createIssueModal}
        prePopulateData={{ ...preloadedData }}
-        handleClose={closeIssueModal}
+        handleClose={() => setCreateIssueModal(false)}
      />
      <SubIssuesListModal
        isOpen={subIssuesListModal}
        handleClose={() => setSubIssuesListModal(false)}
        parent={parentIssue}
      />
-      <Disclosure defaultOpen={true}>
-        {({ open }) => (
-          <>
-            <div className="flex items-center justify-between">
-              <Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100">
-                <ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
-                Sub-issues <span className="ml-1 text-gray-600">{issues.length}</span>
-              </Disclosure.Button>
-              {open && !isNotAllowed ? (
-                <div className="flex items-center">
-                  <button
-                    type="button"
-                    className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100"
-                    onClick={() => {
-                      openIssueModal();
-                      setPreloadedData({
-                        parent: parentIssue.id,
-                      });
-                    }}
-                  >
-                    <PlusIcon className="h-3 w-3" />
-                    Create new
-                  </button>
-
-                  <CustomMenu ellipsis>
-                    <CustomMenu.MenuItem
-                      onClick={() => {
-                        setSubIssuesListModal(true);
-                      }}
+      {subIssues && subIssues.length > 0 ? (
+        <Disclosure defaultOpen={true}>
+          {({ open }) => (
+            <>
+              <div className="flex items-center justify-between">
+                <Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100">
+                  <ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
+                  Sub-issues <span className="ml-1 text-gray-600">{subIssues.length}</span>
+                </Disclosure.Button>
+                {open && !isNotAllowed ? (
+                  <div className="flex items-center">
+                    <button
+                      type="button"
+                      className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100"
+                      onClick={handleCreateIssueModal}
                    >
-                      Add an existing issue
-                    </CustomMenu.MenuItem>
-                  </CustomMenu>
-                </div>
-              ) : null}
-            </div>
-            <Transition
-              enter="transition duration-100 ease-out"
-              enterFrom="transform scale-95 opacity-0"
-              enterTo="transform scale-100 opacity-100"
-              leave="transition duration-75 ease-out"
-              leaveFrom="transform scale-100 opacity-100"
-              leaveTo="transform scale-95 opacity-0"
-            >
-              <Disclosure.Panel className="mt-3 flex flex-col gap-y-1">
-                {issues.map((issue) => (
-                  <div
-                    key={issue.id}
-                    className="group flex items-center justify-between gap-2 rounded p-2 hover:bg-gray-100"
-                  >
-                    <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}>
-                      <a className="flex items-center gap-2 rounded text-xs">
-                        <span
-                          className="block flex-shrink-0 h-1.5 w-1.5 rounded-full"
-                          style={{
-                            backgroundColor: issue.state_detail.color,
-                          }}
-                        />
-                        <span className="flex-shrink-0 text-gray-600">
-                          {issue.project_detail.identifier}-{issue.sequence_id}
-                        </span>
-                        <span className="max-w-sm break-all font-medium">{issue.name}</span>
-                      </a>
-                    </Link>
-                    {!isNotAllowed && (
-                      <div className="opacity-0 group-hover:opacity-100">
-                        <CustomMenu ellipsis>
-                          <CustomMenu.MenuItem onClick={() => handleSubIssueRemove(issue.id)}>
-                            Remove as sub-issue
-                          </CustomMenu.MenuItem>
-                        </CustomMenu>
-                      </div>
-                    )}
+                      <PlusIcon className="h-3 w-3" />
+                      Create new
+                    </button>
+
+                    <CustomMenu ellipsis>
+                      <CustomMenu.MenuItem onClick={() => setSubIssuesListModal(true)}>
+                        Add an existing issue
+                      </CustomMenu.MenuItem>
+                    </CustomMenu>
                  </div>
-                ))}
-              </Disclosure.Panel>
-            </Transition>
-          </>
-        )}
-      </Disclosure>
+                ) : null}
+              </div>
+              <Transition
+                enter="transition duration-100 ease-out"
+                enterFrom="transform scale-95 opacity-0"
+                enterTo="transform scale-100 opacity-100"
+                leave="transition duration-75 ease-out"
+                leaveFrom="transform scale-100 opacity-100"
+                leaveTo="transform scale-95 opacity-0"
+              >
+                <Disclosure.Panel className="mt-3 flex flex-col gap-y-1">
+                  {subIssues.map((issue) => (
+                    <div
+                      key={issue.id}
+                      className="group flex items-center justify-between gap-2 rounded p-2 hover:bg-gray-100"
+                    >
+                      <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}>
+                        <a className="flex items-center gap-2 rounded text-xs">
+                          <span
+                            className="block flex-shrink-0 h-1.5 w-1.5 rounded-full"
+                            style={{
+                              backgroundColor: issue.state_detail.color,
+                            }}
+                          />
+                          <span className="flex-shrink-0 text-gray-600">
+                            {issue.project_detail.identifier}-{issue.sequence_id}
+                          </span>
+                          <span className="max-w-sm break-all font-medium">{issue.name}</span>
+                        </a>
+                      </Link>
+                      {!isNotAllowed && (
+                        <div className="opacity-0 group-hover:opacity-100">
+                          <CustomMenu ellipsis>
+                            <CustomMenu.MenuItem onClick={() => handleSubIssueRemove(issue.id)}>
+                              Remove as sub-issue
+                            </CustomMenu.MenuItem>
+                          </CustomMenu>
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                </Disclosure.Panel>
+              </Transition>
+            </>
+          )}
+        </Disclosure>
+      ) : (
+        !isNotAllowed && (
+          <CustomMenu
+            label={
+              <>
+                <PlusIcon className="h-3 w-3" />
+                Add sub-issue
+              </>
+            }
+            optionsPosition="left"
+            noBorder
+          >
+            <CustomMenu.MenuItem onClick={handleCreateIssueModal}>Create new</CustomMenu.MenuItem>
+            <CustomMenu.MenuItem onClick={() => setSubIssuesListModal(true)}>
+              Add an existing issue
+            </CustomMenu.MenuItem>
+          </CustomMenu>
+        )
+      )}
    </>
  );
 };
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect } from "react";

 import Link from "next/link";
 import { useRouter } from "next/router";
@ -17,27 +17,18 @@ import AppLayout from "layouts/app-layout";
 import {
  IssueDescriptionForm,
  SubIssuesList,
-  CreateUpdateIssueModal,
  IssueDetailsSidebar,
  IssueActivitySection,
  AddComment,
-  SubIssuesListModal,
 } from "components/issues";
 // ui
 import { Loader, CustomMenu } from "components/ui";
 import { Breadcrumbs } from "components/breadcrumbs";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
 // types
-import { IIssue, IssueResponse, UserAuth } from "types";
+import { IIssue, UserAuth } from "types";
 import type { NextPage, NextPageContext } from "next";
 // fetch-keys
-import {
-  PROJECT_ISSUES_ACTIVITY,
-  ISSUE_DETAILS,
-  SUB_ISSUES,
-  PROJECT_ISSUES_LIST,
-} from "constants/fetch-keys";
+import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS, SUB_ISSUES } from "constants/fetch-keys";

 const defaultValues = {
  name: "",
@ -55,13 +46,6 @@ const defaultValues = {
 };

 const IssueDetailsPage: NextPage<UserAuth> = (props) => {
-  // states
-  const [isOpen, setIsOpen] = useState(false);
-  const [subIssuesListModal, setSubIssuesListModal] = useState(false);
-  const [preloadedData, setPreloadedData] = useState<
-    (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
-  >(undefined);
-
  const router = useRouter();
  const { workspaceSlug, projectId, issueId } = router.query;

@ -73,26 +57,6 @@ const IssueDetailsPage: NextPage<UserAuth> = (props) => {
      : null
  );

-  const { data: subIssues } = useSWR<IIssue[] | undefined>(
-    issueId && workspaceSlug && projectId ? SUB_ISSUES(issueId as string) : null,
-    issueId && workspaceSlug && projectId
-      ? () =>
-          issuesService.subIssues(workspaceSlug as string, projectId as string, issueId as string)
-      : null
-  );
-
-  const { data: issueActivities, mutate: mutateIssueActivities } = useSWR(
-    workspaceSlug && projectId && issueId ? PROJECT_ISSUES_ACTIVITY(issueId as string) : null,
-    workspaceSlug && projectId && issueId
-      ? () =>
-          issuesService.getIssueActivities(
-            workspaceSlug as string,
-            projectId as string,
-            issueId as string
-          )
-      : null
-  );
-
  const { data: siblingIssues } = useSWR(
    workspaceSlug && projectId && issueDetails?.parent ? SUB_ISSUES(issueDetails.parent) : null,
    workspaceSlug && projectId && issueDetails?.parent
@ -127,55 +91,19 @@ const IssueDetailsPage: NextPage<UserAuth> = (props) => {
        .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload)
        .then((res) => {
          mutateIssueDetails();
-          mutateIssueActivities();
+          mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
        })
        .catch((e) => {
          console.error(e);
        });
    },
-    [workspaceSlug, issueId, projectId, mutateIssueDetails, mutateIssueActivities]
+    [workspaceSlug, issueId, projectId, mutateIssueDetails]
  );

-  const handleSubIssueRemove = (issueId: string) => {
-    if (!workspaceSlug || !projectId) return;
-
-    mutate<IIssue[]>(
-      SUB_ISSUES(issueDetails?.id ?? ""),
-      (prevData) => prevData?.filter((i) => i.id !== issueId),
-      false
-    );
-
-    issuesService
-      .patchIssue(workspaceSlug as string, projectId as string, issueId, { parent: null })
-      .then((res) => {
-        mutate(SUB_ISSUES(issueDetails?.id ?? ""));
-
-        mutate<IssueResponse>(
-          PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
-          (prevData) => ({
-            ...(prevData as IssueResponse),
-            results: (prevData?.results ?? []).map((p) => {
-              if (p.id === res.id)
-                return {
-                  ...p,
-                  ...res,
-                };
-
-              return p;
-            }),
-          }),
-          false
-        );
-      })
-      .catch((e) => {
-        console.error(e);
-      });
-  };
-
  useEffect(() => {
    if (!issueDetails) return;

-    mutateIssueActivities();
+    mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
    reset({
      ...issueDetails,
      blockers_list:
@ -189,9 +117,7 @@ const IssueDetailsPage: NextPage<UserAuth> = (props) => {
      labels_list: issueDetails.labels_list ?? issueDetails.labels,
      labels: issueDetails.labels_list ?? issueDetails.labels,
    });
-  }, [issueDetails, reset, mutateIssueActivities]);
-
-  const isNotAllowed = props.isGuest || props.isViewer;
+  }, [issueDetails, reset, issueId]);

  return (
    <AppLayout
@ -211,22 +137,6 @@ const IssueDetailsPage: NextPage<UserAuth> = (props) => {
        </Breadcrumbs>
      }
    >
-      {isOpen && (
-        <CreateUpdateIssueModal
-          isOpen={isOpen}
-          handleClose={() => setIsOpen(false)}
-          prePopulateData={{
-            ...preloadedData,
-          }}
-        />
-      )}
-      {subIssuesListModal && (
-        <SubIssuesListModal
-          isOpen={subIssuesListModal}
-          handleClose={() => setSubIssuesListModal(false)}
-          parent={issueDetails}
-        />
-      )}
      {issueDetails && projectId ? (
        <div className="flex h-full">
          <div className="basis-2/3 space-y-5 divide-y-2 p-5">
@ -284,61 +194,13 @@ const IssueDetailsPage: NextPage<UserAuth> = (props) => {
                userAuth={props}
              />
              <div className="mt-2">
-                {issueId && workspaceSlug && projectId && subIssues && subIssues.length > 0 ? (
-                  <SubIssuesList
-                    issues={subIssues ?? []}
-                    parentIssue={issueDetails}
-                    projectId={projectId?.toString()}
-                    workspaceSlug={workspaceSlug?.toString()}
-                    handleSubIssueRemove={handleSubIssueRemove}
-                    userAuth={props}
-                  />
-                ) : (
-                  !isNotAllowed && (
-                    <CustomMenu
-                      label={
-                        <>
-                          <PlusIcon className="h-3 w-3" />
-                          Add sub-issue
-                        </>
-                      }
-                      optionsPosition="left"
-                      noBorder
-                    >
-                      <CustomMenu.MenuItem
-                        onClick={() => {
-                          setIsOpen(true);
-                          setPreloadedData({
-                            parent: issueDetails.id,
-                            actionType: "createIssue",
-                          });
-                        }}
-                      >
-                        Create new
-                      </CustomMenu.MenuItem>
-                      <CustomMenu.MenuItem
-                        onClick={() => {
-                          setSubIssuesListModal(true);
-                          setPreloadedData({
-                            parent: issueDetails.id,
-                            actionType: "createIssue",
-                          });
-                        }}
-                      >
-                        Add an existing issue
-                      </CustomMenu.MenuItem>
-                    </CustomMenu>
-                  )
-                )}
+                <SubIssuesList parentIssue={issueDetails} userAuth={props} />
              </div>
            </div>
            <div className="space-y-5 bg-secondary pt-3">
              <h3 className="text-lg">Comments/Activity</h3>
-              <IssueActivitySection
-                issueActivities={issueActivities || []}
-                mutate={mutateIssueActivities}
-              />
-              <AddComment mutate={mutateIssueActivities} />
+              <IssueActivitySection />
+              <AddComment />
            </div>
          </div>
          <div className="basis-1/3 space-y-5 border-l p-5">