refactor: issue details page (#282)

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 = {
+type Props = {};
-  issueActivities: IIssueActivity[];
-  mutate: KeyedMutator<IIssueActivity[]>;
-};
 
-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}
+                  onSubmit={handleCommentUpdate}
-                  handleCommentDeletion={onCommentDelete}
+                  handleCommentDeletion={handleCommentDelete}
                 />
               );
           })}

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 { IIssueComment } from "types";
-import type { KeyedMutator } from "swr";
+// 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<{
+export const AddComment: React.FC = () => {
-  mutate: KeyedMutator<IIssueActivity[]>;
-}> = ({ mutate }) => {
   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) => {

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 {
+type SubIssueListProps = {
-  issues: IIssue[];
-  projectId: string;
-  workspaceSlug: string;
   parentIssue: IIssue;
-  handleSubIssueRemove: (subIssueId: string) => void;
   userAuth: UserAuth;
-}
+};
 
-export const SubIssuesList: FC<SubIssueListProps> = ({
+export const SubIssuesList: FC<SubIssueListProps> = ({ parentIssue, userAuth }) => {
-  issues = [],
-  handleSubIssueRemove,
-  parentIssue,
-  workspaceSlug,
-  projectId,
-  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 = () => {
+  const router = useRouter();
-    setIssueModalActive(true);
+  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 = () => {
+  const handleCreateIssueModal = () => {
-    setIssueModalActive(false);
+    setCreateIssueModal(true);
-  };
+    setPreloadedData({
-
+      parent: parentIssue.id,
-  const openSubIssueModal = () => {
+    });
-    setSubIssuesListModal(true);
-  };
-
-  const closeSubIssueModal = () => {
-    setSubIssuesListModal(false);
   };
 
   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}>
+      {subIssues && subIssues.length > 0 ? (
-        {({ open }) => (
+        <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">
+              <div className="flex items-center justify-between">
-                <ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
+                <Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100">
-                Sub-issues <span className="ml-1 text-gray-600">{issues.length}</span>
+                  <ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
-              </Disclosure.Button>
+                  Sub-issues <span className="ml-1 text-gray-600">{subIssues.length}</span>
-              {open && !isNotAllowed ? (
+                </Disclosure.Button>
-                <div className="flex items-center">
+                {open && !isNotAllowed ? (
-                  <button
+                  <div className="flex items-center">
-                    type="button"
+                    <button
-                    className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100"
+                      type="button"
-                    onClick={() => {
+                      className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100"
-                      openIssueModal();
+                      onClick={handleCreateIssueModal}
-                      setPreloadedData({
-                        parent: parentIssue.id,
-                      });
-                    }}
-                  >
-                    <PlusIcon className="h-3 w-3" />
-                    Create new
-                  </button>
-
-                  <CustomMenu ellipsis>
-                    <CustomMenu.MenuItem
-                      onClick={() => {
-                        setSubIssuesListModal(true);
-                      }}
                     >
-                      Add an existing issue
+                      <PlusIcon className="h-3 w-3" />
-                    </CustomMenu.MenuItem>
+                      Create new
-                  </CustomMenu>
+                    </button>
-                </div>
+
-              ) : null}
+                    <CustomMenu ellipsis>
-            </div>
+                      <CustomMenu.MenuItem onClick={() => setSubIssuesListModal(true)}>
-            <Transition
+                        Add an existing issue
-              enter="transition duration-100 ease-out"
+                      </CustomMenu.MenuItem>
-              enterFrom="transform scale-95 opacity-0"
+                    </CustomMenu>
-              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>
-                    )}
                   </div>
-                ))}
+                ) : null}
-              </Disclosure.Panel>
+              </div>
-            </Transition>
+              <Transition
-          </>
+                enter="transition duration-100 ease-out"
-        )}
+                enterFrom="transform scale-95 opacity-0"
-      </Disclosure>
+                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>
+        )
+      )}
     </>
   );
 };

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 {
+import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS, SUB_ISSUES } from "constants/fetch-keys";
-  PROJECT_ISSUES_ACTIVITY,
-  ISSUE_DETAILS,
-  SUB_ISSUES,
-  PROJECT_ISSUES_LIST,
-} 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]);
+  }, [issueDetails, reset, issueId]);
-
-  const isNotAllowed = props.isGuest || props.isViewer;
 
   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 parentIssue={issueDetails} userAuth={props} />
-                  <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>
-                  )
-                )}
               </div>
             </div>
             <div className="space-y-5 bg-secondary pt-3">
               <h3 className="text-lg">Comments/Activity</h3>
-              <IssueActivitySection
+              <IssueActivitySection />
-                issueActivities={issueActivities || []}
+              <AddComment />
-                mutate={mutateIssueActivities}
-              />
-              <AddComment mutate={mutateIssueActivities} />
             </div>
           </div>
           <div className="basis-1/3 space-y-5 border-l p-5">