From 2e6ad61f49ad92df5428bf2ace8ac7e895a80a99 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Mon, 27 May 2024 16:04:05 +0530
Subject: [PATCH] fix: sibling issue redirection and fetching issue resolved
 (#4603)

---
 .../issues/issue-detail/parent/root.tsx       |  2 +-
 .../issue-detail/parent/sibling-item.tsx      | 11 +++++-----
 .../issues/issue-detail/parent/siblings.tsx   | 22 +++++++++++--------
 3 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/web/components/issues/issue-detail/parent/root.tsx b/web/components/issues/issue-detail/parent/root.tsx
index abc2a9501..b4521bdaa 100644
--- a/web/components/issues/issue-detail/parent/root.tsx
+++ b/web/components/issues/issue-detail/parent/root.tsx
@@ -56,7 +56,7 @@ export const IssueParentDetail: FC<TIssueParentDetail> = observer((props) => {
             Sibling issues
           </div>
 
-          <IssueParentSiblings currentIssue={issue} parentIssue={parentIssue} />
+          <IssueParentSiblings workspaceSlug={workspaceSlug} currentIssue={issue} parentIssue={parentIssue} />
 
           <CustomMenu.MenuItem
             onClick={() => issueOperations.update(workspaceSlug, projectId, issueId, { parent_id: null })}
diff --git a/web/components/issues/issue-detail/parent/sibling-item.tsx b/web/components/issues/issue-detail/parent/sibling-item.tsx
index c6eef2a9e..c66a18899 100644
--- a/web/components/issues/issue-detail/parent/sibling-item.tsx
+++ b/web/components/issues/issue-detail/parent/sibling-item.tsx
@@ -1,4 +1,5 @@
 import { FC } from "react";
+import { observer } from "mobx-react";
 import Link from "next/link";
 // ui
 import { CustomMenu, LayersIcon } from "@plane/ui";
@@ -6,15 +7,15 @@ import { CustomMenu, LayersIcon } from "@plane/ui";
 import { useIssueDetail, useProject } from "@/hooks/store";
 
 type TIssueParentSiblingItem = {
+  workspaceSlug: string;
   issueId: string;
 };
 
-export const IssueParentSiblingItem: FC<TIssueParentSiblingItem> = (props) => {
-  const { issueId } = props;
+export const IssueParentSiblingItem: FC<TIssueParentSiblingItem> = observer((props) => {
+  const { workspaceSlug, issueId } = props;
   // hooks
   const { getProjectById } = useProject();
   const {
-    peekIssue,
     issue: { getIssueById },
   } = useIssueDetail();
 
@@ -27,7 +28,7 @@ export const IssueParentSiblingItem: FC<TIssueParentSiblingItem> = (props) => {
     <>
       <CustomMenu.MenuItem key={issueDetail.id}>
         <Link
-          href={`/${peekIssue?.workspaceSlug}/projects/${issueDetail?.project_id as string}/issues/${issueDetail.id}`}
+          href={`/${workspaceSlug}/projects/${issueDetail?.project_id as string}/issues/${issueDetail.id}`}
           className="flex items-center gap-2 py-2"
         >
           <LayersIcon className="h-4 w-4" />
@@ -36,4 +37,4 @@ export const IssueParentSiblingItem: FC<TIssueParentSiblingItem> = (props) => {
       </CustomMenu.MenuItem>
     </>
   );
-};
+});
diff --git a/web/components/issues/issue-detail/parent/siblings.tsx b/web/components/issues/issue-detail/parent/siblings.tsx
index 56e93fc0f..e23d8a595 100644
--- a/web/components/issues/issue-detail/parent/siblings.tsx
+++ b/web/components/issues/issue-detail/parent/siblings.tsx
@@ -1,4 +1,5 @@
 import { FC } from "react";
+import { observer } from "mobx-react";
 import useSWR from "swr";
 import { TIssue } from "@plane/types";
 // components
@@ -8,25 +9,25 @@ import { useIssueDetail } from "@/hooks/store";
 import { IssueParentSiblingItem } from "./sibling-item";
 
 export type TIssueParentSiblings = {
+  workspaceSlug: string;
   currentIssue: TIssue;
   parentIssue: TIssue;
 };
 
-export const IssueParentSiblings: FC<TIssueParentSiblings> = (props) => {
-  const { currentIssue, parentIssue } = props;
+export const IssueParentSiblings: FC<TIssueParentSiblings> = observer((props) => {
+  const { workspaceSlug, currentIssue, parentIssue } = props;
   // hooks
   const {
-    peekIssue,
     fetchSubIssues,
     subIssues: { subIssuesByIssueId },
   } = useIssueDetail();
 
   const { isLoading } = useSWR(
-    peekIssue && parentIssue && parentIssue.project_id
-      ? `ISSUE_PARENT_CHILD_ISSUES_${peekIssue?.workspaceSlug}_${parentIssue.project_id}_${parentIssue.id}`
+    parentIssue && parentIssue.project_id
+      ? `ISSUE_PARENT_CHILD_ISSUES_${workspaceSlug}_${parentIssue.project_id}_${parentIssue.id}`
       : null,
-    peekIssue && parentIssue && parentIssue.project_id
-      ? () => fetchSubIssues(peekIssue?.workspaceSlug, parentIssue.project_id, parentIssue.id)
+    parentIssue && parentIssue.project_id
+      ? () => fetchSubIssues(workspaceSlug, parentIssue.project_id, parentIssue.id)
       : null
   );
 
@@ -40,7 +41,10 @@ export const IssueParentSiblings: FC<TIssueParentSiblings> = (props) => {
         </div>
       ) : subIssueIds && subIssueIds.length > 0 ? (
         subIssueIds.map(
-          (issueId) => currentIssue.id != issueId && <IssueParentSiblingItem key={issueId} issueId={issueId} />
+          (issueId) =>
+            currentIssue.id != issueId && (
+              <IssueParentSiblingItem key={issueId} workspaceSlug={workspaceSlug} issueId={issueId} />
+            )
         )
       ) : (
         <div className="flex items-center gap-2 whitespace-nowrap px-1 py-1 text-left text-xs text-custom-text-200">
@@ -49,4 +53,4 @@ export const IssueParentSiblings: FC<TIssueParentSiblings> = (props) => {
       )}
     </div>
   );
-};
+});