[PWA-22] chore: pwa issue redirection (#5544)

* chore: issue peek overview redirection hook added

* chore: handleIssuePeekOverview function updated

web/core/components/dashboard/widgets/issue-panels/issues-list.tsx

@@ -20,8 +20,9 @@ import {
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { getRedirectionFilters } from "@/helpers/dashboard.helper";
-import { useIssueDetail } from "@/hooks/store";
+// hooks
-// types
+import useIssuePeekOverviewRedirection from "@/hooks/use-issue-peek-overview-redirection";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 
 export type WidgetIssuesListProps = {
   isLoading: boolean;
@@ -33,11 +34,12 @@ export type WidgetIssuesListProps = {
 
 export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
   const { isLoading, tab, type, widgetStats, workspaceSlug } = props;
-  // store hooks
+  // hooks
-  const { setPeekIssue } = useIssueDetail();
+  const { isMobile } = usePlatformOS();
+  const { handleRedirection } = useIssuePeekOverviewRedirection();
 
-  const handleIssuePeekOverview = (issue: TIssue) =>
+  // handlers
-    issue.project_id && setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id });
+  const handleIssuePeekOverview = (issue: TIssue) => handleRedirection(workspaceSlug, issue, isMobile);
 
   const filterParams = getRedirectionFilters(tab);
 

web/core/components/issues/issue-layouts/calendar/issue-block.tsx

@@ -13,6 +13,7 @@ import { Tooltip, ControlLink } from "@plane/ui";
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useIssueDetail, useProjectState } from "@/hooks/store";
+import useIssuePeekOverviewRedirection from "@/hooks/use-issue-peek-overview-redirection";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web components
@@ -37,18 +38,14 @@ export const CalendarIssueBlock = observer(
     // hooks
     const { workspaceSlug, projectId } = useParams();
     const { getProjectStates } = useProjectState();
-    const { getIsIssuePeeked, setPeekIssue } = useIssueDetail();
+    const { getIsIssuePeeked } = useIssueDetail();
+    const { handleRedirection } = useIssuePeekOverviewRedirection();
     const { isMobile } = usePlatformOS();
 
     const stateColor = getProjectStates(issue?.project_id)?.find((state) => state?.id == issue?.state_id)?.color || "";
 
-    const handleIssuePeekOverview = (issue: TIssue) =>
+    // handlers
-      workspaceSlug &&
+    const handleIssuePeekOverview = (issue: TIssue) => handleRedirection(workspaceSlug.toString(), issue, isMobile);
-      issue &&
-      issue.project_id &&
-      issue.id &&
-      !getIsIssuePeeked(issue.id) &&
-      setPeekIssue({ workspaceSlug: workspaceSlug.toString(), projectId: issue.project_id, issueId: issue.id });
 
     useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false));
 

web/core/components/issues/issue-layouts/gantt/blocks.tsx

@@ -8,6 +8,7 @@ import { Tooltip, ControlLink } from "@plane/ui";
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 // hooks
 import { useIssueDetail, useProjectState } from "@/hooks/store";
+import useIssuePeekOverviewRedirection from "@/hooks/use-issue-peek-overview-redirection";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web components
 import { IssueIdentifier } from "@/plane-web/components/issues";
@@ -25,22 +26,17 @@ export const IssueGanttBlock: React.FC<Props> = observer((props) => {
   const { getProjectStates } = useProjectState();
   const {
     issue: { getIssueById },
-    getIsIssuePeeked,
-    setPeekIssue,
   } = useIssueDetail();
+  // hooks
+  const { isMobile } = usePlatformOS();
+  const { handleRedirection } = useIssuePeekOverviewRedirection();
+
   // derived values
   const issueDetails = getIssueById(issueId);
   const stateDetails =
     issueDetails && getProjectStates(issueDetails?.project_id)?.find((state) => state?.id == issueDetails?.state_id);
 
-  const handleIssuePeekOverview = () =>
+  const handleIssuePeekOverview = () => handleRedirection(workspaceSlug, issueDetails, isMobile);
-    workspaceSlug &&
-    issueDetails &&
-    !issueDetails.tempId &&
-    issueDetails.project_id &&
-    !getIsIssuePeeked(issueDetails.id) &&
-    setPeekIssue({ workspaceSlug, projectId: issueDetails.project_id, issueId: issueDetails.id });
-  const { isMobile } = usePlatformOS();
 
   return (
     <div
@@ -82,17 +78,16 @@ export const IssueGanttSidebarBlock: React.FC<Props> = observer((props) => {
   // store hooks
   const {
     issue: { getIssueById },
-    setPeekIssue,
   } = useIssueDetail();
+  const { isMobile } = usePlatformOS();
+
+  // handlers
+  const { handleRedirection } = useIssuePeekOverviewRedirection();
+
   // derived values
   const issueDetails = getIssueById(issueId);
 
-  const handleIssuePeekOverview = () =>
+  const handleIssuePeekOverview = () => handleRedirection(workspaceSlug, issueDetails, isMobile);
-    workspaceSlug &&
-    issueDetails &&
-    issueDetails.project_id &&
-    setPeekIssue({ workspaceSlug, projectId: issueDetails.project_id, issueId: issueDetails.id });
-  const { isMobile } = usePlatformOS();
 
   return (
     <ControlLink

web/core/components/issues/issue-layouts/kanban/block.tsx

@@ -16,6 +16,7 @@ import { HIGHLIGHT_CLASS } from "@/components/issues/issue-layouts/utils";
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useIssueDetail, useKanbanView } from "@/hooks/store";
+import useIssuePeekOverviewRedirection from "@/hooks/use-issue-peek-overview-redirection";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web components
@@ -121,15 +122,12 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
   const { workspaceSlug: routerWorkspaceSlug } = useParams();
   const workspaceSlug = routerWorkspaceSlug?.toString();
   // hooks
-  const { getIsIssuePeeked, setPeekIssue } = useIssueDetail();
+  const { getIsIssuePeeked } = useIssueDetail();
+  const { handleRedirection } = useIssuePeekOverviewRedirection();
+  const { isMobile } = usePlatformOS();
 
-  const handleIssuePeekOverview = (issue: TIssue) =>
+  // handlers
-    workspaceSlug &&
+  const handleIssuePeekOverview = (issue: TIssue) => handleRedirection(workspaceSlug, issue, isMobile);
-    issue &&
-    issue.project_id &&
-    issue.id &&
-    !getIsIssuePeeked(issue.id) &&
-    setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id });
 
   const issue = issuesMap[issueId];
 

web/core/components/issues/issue-layouts/list/block.tsx

@@ -17,6 +17,7 @@ import { IssueProperties } from "@/components/issues/issue-layouts/properties";
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useAppTheme, useIssueDetail, useProject } from "@/hooks/store";
+import useIssuePeekOverviewRedirection from "@/hooks/use-issue-peek-overview-redirection";
 import { TSelectionHelper } from "@/hooks/use-multiple-select";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web components
@@ -69,21 +70,16 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
   // hooks
   const { sidebarCollapsed: isSidebarCollapsed } = useAppTheme();
   const { getProjectIdentifierById } = useProject();
-  const { getIsIssuePeeked, peekIssue, setPeekIssue, subIssues: subIssuesStore } = useIssueDetail();
+  const { getIsIssuePeeked, peekIssue, subIssues: subIssuesStore } = useIssueDetail();
+  const { handleRedirection } = useIssuePeekOverviewRedirection();
+  const { isMobile } = usePlatformOS();
 
-  const handleIssuePeekOverview = (issue: TIssue) =>
+  // handlers
-    workspaceSlug &&
+  const handleIssuePeekOverview = (issue: TIssue) => handleRedirection(workspaceSlug, issue, isMobile, nestingLevel);
-    issue &&
-    issue.project_id &&
-    issue.id &&
-    !getIsIssuePeeked(issue.id) &&
-    setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id, nestingLevel: nestingLevel });
 
   const issue = issuesMap[issueId];
   const subIssuesCount = issue?.sub_issues_count ?? 0;
 
-  const { isMobile } = usePlatformOS();
-
   useEffect(() => {
     const element = issueRef.current;
 

web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx

@@ -17,6 +17,7 @@ import { SPREADSHEET_SELECT_GROUP } from "@/constants/spreadsheet";
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useIssueDetail, useProject } from "@/hooks/store";
+import useIssuePeekOverviewRedirection from "@/hooks/use-issue-peek-overview-redirection";
 import { TSelectionHelper } from "@/hooks/use-multiple-select";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 import { usePlatformOS } from "@/hooks/use-platform-os";
@@ -171,21 +172,13 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
   const { workspaceSlug, projectId } = useParams();
   // hooks
   const { getProjectIdentifierById } = useProject();
-  const { getIsIssuePeeked, peekIssue, setPeekIssue } = useIssueDetail();
+  const { getIsIssuePeeked, peekIssue } = useIssueDetail();
+  const { handleRedirection } = useIssuePeekOverviewRedirection();
   const { isMobile } = usePlatformOS();
 
+  // handlers
   const handleIssuePeekOverview = (issue: TIssue) =>
-    workspaceSlug &&
+    handleRedirection(workspaceSlug?.toString(), issue, isMobile, nestingLevel);
-    issue &&
-    issue.project_id &&
-    issue.id &&
-    !getIsIssuePeeked(issue.id) &&
-    setPeekIssue({
-      workspaceSlug: workspaceSlug.toString(),
-      projectId: issue.project_id,
-      issueId: issue.id,
-      nestingLevel: nestingLevel,
-    });
 
   const { subIssues: subIssuesStore, issue } = useIssueDetail();
 

web/core/components/issues/relations/issue-list-item.tsx

@@ -9,6 +9,7 @@ import { ControlLink, CustomMenu, Tooltip } from "@plane/ui";
 import { RelationIssueProperty } from "@/components/issues/relations";
 // hooks
 import { useIssueDetail, useProject, useProjectState } from "@/hooks/store";
+import useIssuePeekOverviewRedirection from "@/hooks/use-issue-peek-overview-redirection";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web components
 import { IssueIdentifier } from "@/plane-web/components/issues";
@@ -41,14 +42,13 @@ export const RelationIssueListItem: FC<Props> = observer((props) => {
   // store hooks
   const {
     issue: { getIssueById },
-    getIsIssuePeeked,
-    setPeekIssue,
     removeRelation,
     toggleCreateIssueModal,
     toggleDeleteIssueModal,
   } = useIssueDetail();
   const project = useProject();
   const { getProjectStates } = useProjectState();
+  const { handleRedirection } = useIssuePeekOverviewRedirection();
   const { isMobile } = usePlatformOS();
 
   // derived values
@@ -61,13 +61,7 @@ export const RelationIssueListItem: FC<Props> = observer((props) => {
   if (!issue) return <></>;
 
   // handlers
-  const handleIssuePeekOverview = (issue: TIssue) =>
+  const handleIssuePeekOverview = (issue: TIssue) => handleRedirection(workspaceSlug, issue, isMobile);
-    workspaceSlug &&
-    issue &&
-    issue.project_id &&
-    issue.id &&
-    !getIsIssuePeeked(issue.id) &&
-    setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id });
 
   const handleEditIssue = () => {
     handleIssueCrudState("update", relationIssueId, { ...issue });

web/core/components/issues/sub-issues/issue-list-item.tsx

@@ -10,6 +10,7 @@ import { ControlLink, CustomMenu, Tooltip } from "@plane/ui";
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useIssueDetail, useProject, useProjectState } from "@/hooks/store";
+import useIssuePeekOverviewRedirection from "@/hooks/use-issue-peek-overview-redirection";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web components
 import { IssueIdentifier } from "@/plane-web/components/issues";
@@ -51,8 +52,6 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
   } = props;
 
   const {
-    getIsIssuePeeked,
-    setPeekIssue,
     issue: { getIssueById },
     subIssues: { subIssueHelpersByIssueId, setSubIssueHelpers },
     toggleCreateIssueModal,
@@ -60,8 +59,11 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
   } = useIssueDetail();
   const project = useProject();
   const { getProjectStates } = useProjectState();
+  const { handleRedirection } = useIssuePeekOverviewRedirection();
   const { isMobile } = usePlatformOS();
   const issue = getIssueById(issueId);
+
+  // derived values
   const projectDetail = (issue && issue.project_id && project.getProjectById(issue.project_id)) || undefined;
   const currentIssueStateDetail =
     (issue?.project_id && getProjectStates(issue?.project_id)?.find((state) => issue?.state_id == state.id)) ||
@@ -70,13 +72,8 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
   const subIssueHelpers = subIssueHelpersByIssueId(parentIssueId);
   const subIssueCount = issue?.sub_issues_count ?? 0;
 
-  const handleIssuePeekOverview = (issue: TIssue) =>
+  //
-    workspaceSlug &&
+  const handleIssuePeekOverview = (issue: TIssue) => handleRedirection(workspaceSlug, issue, isMobile);
-    issue &&
-    issue.project_id &&
-    issue.id &&
-    !getIsIssuePeeked(issue.id) &&
-    setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id });
 
   if (!issue) return <></>;
 

web/core/hooks/use-issue-peek-overview-redirection.tsx

@@ -0,0 +1,34 @@
+import { useRouter } from "next/navigation";
+// types
+import { TIssue } from "@plane/types";
+// hooks
+import { useIssueDetail } from "./store";
+
+const useIssuePeekOverviewRedirection = () => {
+  // router
+  const router = useRouter();
+  //   store hooks
+  const { getIsIssuePeeked, setPeekIssue } = useIssueDetail();
+
+  const handleRedirection = (
+    workspaceSlug: string | undefined,
+    issue: TIssue | undefined,
+    isMobile = false,
+    nestingLevel?: number
+  ) => {
+    if (!issue) return;
+    const { project_id, id, archived_at, tempId } = issue;
+
+    if (workspaceSlug && project_id && id && !getIsIssuePeeked(id) && !tempId) {
+      const issuePath = `/${workspaceSlug}/projects/${project_id}/${archived_at ? "archives/" : ""}issues/${id}`;
+
+      isMobile
+        ? router.push(issuePath)
+        : setPeekIssue({ workspaceSlug, projectId: project_id, issueId: id, nestingLevel });
+    }
+  };
+
+  return { handleRedirection };
+};
+
+export default useIssuePeekOverviewRedirection;