From c84c37805ca8f363880be4c93d60ae1d7058fec1 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Fri, 6 Sep 2024 15:36:06 +0530 Subject: [PATCH] [PWA-22] chore: pwa issue redirection (#5544) * chore: issue peek overview redirection hook added * chore: handleIssuePeekOverview function updated --- .../widgets/issue-panels/issues-list.tsx | 14 ++++---- .../issue-layouts/calendar/issue-block.tsx | 13 +++---- .../issues/issue-layouts/gantt/blocks.tsx | 29 +++++++--------- .../issues/issue-layouts/kanban/block.tsx | 14 ++++---- .../issues/issue-layouts/list/block.tsx | 16 ++++----- .../issue-layouts/spreadsheet/issue-row.tsx | 17 +++------- .../issues/relations/issue-list-item.tsx | 12 ++----- .../issues/sub-issues/issue-list-item.tsx | 15 ++++---- .../use-issue-peek-overview-redirection.tsx | 34 +++++++++++++++++++ 9 files changed, 85 insertions(+), 79 deletions(-) create mode 100644 web/core/hooks/use-issue-peek-overview-redirection.tsx diff --git a/web/core/components/dashboard/widgets/issue-panels/issues-list.tsx b/web/core/components/dashboard/widgets/issue-panels/issues-list.tsx index 014a1e25e..22fd61a06 100644 --- a/web/core/components/dashboard/widgets/issue-panels/issues-list.tsx +++ b/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"; -// types +// hooks +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 = (props) => { const { isLoading, tab, type, widgetStats, workspaceSlug } = props; - // store hooks - const { setPeekIssue } = useIssueDetail(); + // hooks + const { isMobile } = usePlatformOS(); + const { handleRedirection } = useIssuePeekOverviewRedirection(); - const handleIssuePeekOverview = (issue: TIssue) => - issue.project_id && setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id }); + // handlers + const handleIssuePeekOverview = (issue: TIssue) => handleRedirection(workspaceSlug, issue, isMobile); const filterParams = getRedirectionFilters(tab); diff --git a/web/core/components/issues/issue-layouts/calendar/issue-block.tsx b/web/core/components/issues/issue-layouts/calendar/issue-block.tsx index ec77933ce..f4bbd4ac4 100644 --- a/web/core/components/issues/issue-layouts/calendar/issue-block.tsx +++ b/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) => - workspaceSlug && - issue && - issue.project_id && - issue.id && - !getIsIssuePeeked(issue.id) && - setPeekIssue({ workspaceSlug: workspaceSlug.toString(), projectId: issue.project_id, issueId: issue.id }); + // handlers + const handleIssuePeekOverview = (issue: TIssue) => handleRedirection(workspaceSlug.toString(), issue, isMobile); useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false)); diff --git a/web/core/components/issues/issue-layouts/gantt/blocks.tsx b/web/core/components/issues/issue-layouts/gantt/blocks.tsx index 98d795477..6f67a8748 100644 --- a/web/core/components/issues/issue-layouts/gantt/blocks.tsx +++ b/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 = 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 = () => - workspaceSlug && - issueDetails && - !issueDetails.tempId && - issueDetails.project_id && - !getIsIssuePeeked(issueDetails.id) && - setPeekIssue({ workspaceSlug, projectId: issueDetails.project_id, issueId: issueDetails.id }); - const { isMobile } = usePlatformOS(); + const handleIssuePeekOverview = () => handleRedirection(workspaceSlug, issueDetails, isMobile); return (
= observer((props) => { // store hooks const { issue: { getIssueById }, - setPeekIssue, } = useIssueDetail(); + const { isMobile } = usePlatformOS(); + + // handlers + const { handleRedirection } = useIssuePeekOverviewRedirection(); + // derived values const issueDetails = getIssueById(issueId); - const handleIssuePeekOverview = () => - workspaceSlug && - issueDetails && - issueDetails.project_id && - setPeekIssue({ workspaceSlug, projectId: issueDetails.project_id, issueId: issueDetails.id }); - const { isMobile } = usePlatformOS(); + const handleIssuePeekOverview = () => handleRedirection(workspaceSlug, issueDetails, isMobile); return ( = 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) => - workspaceSlug && - issue && - issue.project_id && - issue.id && - !getIsIssuePeeked(issue.id) && - setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id }); + // handlers + const handleIssuePeekOverview = (issue: TIssue) => handleRedirection(workspaceSlug, issue, isMobile); const issue = issuesMap[issueId]; diff --git a/web/core/components/issues/issue-layouts/list/block.tsx b/web/core/components/issues/issue-layouts/list/block.tsx index 9dfdb7365..58fedd9d3 100644 --- a/web/core/components/issues/issue-layouts/list/block.tsx +++ b/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) => - workspaceSlug && - issue && - issue.project_id && - issue.id && - !getIsIssuePeeked(issue.id) && - setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id, nestingLevel: nestingLevel }); + // handlers + const handleIssuePeekOverview = (issue: TIssue) => handleRedirection(workspaceSlug, issue, isMobile, nestingLevel); const issue = issuesMap[issueId]; const subIssuesCount = issue?.sub_issues_count ?? 0; - const { isMobile } = usePlatformOS(); - useEffect(() => { const element = issueRef.current; diff --git a/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx b/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx index bcfd65f8c..7733514ab 100644 --- a/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx +++ b/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 && - issue && - issue.project_id && - issue.id && - !getIsIssuePeeked(issue.id) && - setPeekIssue({ - workspaceSlug: workspaceSlug.toString(), - projectId: issue.project_id, - issueId: issue.id, - nestingLevel: nestingLevel, - }); + handleRedirection(workspaceSlug?.toString(), issue, isMobile, nestingLevel); const { subIssues: subIssuesStore, issue } = useIssueDetail(); diff --git a/web/core/components/issues/relations/issue-list-item.tsx b/web/core/components/issues/relations/issue-list-item.tsx index f63a1dae3..be8c7688a 100644 --- a/web/core/components/issues/relations/issue-list-item.tsx +++ b/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 = 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 = observer((props) => { if (!issue) return <>; // handlers - const handleIssuePeekOverview = (issue: TIssue) => - workspaceSlug && - issue && - issue.project_id && - issue.id && - !getIsIssuePeeked(issue.id) && - setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id }); + const handleIssuePeekOverview = (issue: TIssue) => handleRedirection(workspaceSlug, issue, isMobile); const handleEditIssue = () => { handleIssueCrudState("update", relationIssueId, { ...issue }); diff --git a/web/core/components/issues/sub-issues/issue-list-item.tsx b/web/core/components/issues/sub-issues/issue-list-item.tsx index d86f0a93e..c6422d9c6 100644 --- a/web/core/components/issues/sub-issues/issue-list-item.tsx +++ b/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 = observer((props) => { } = props; const { - getIsIssuePeeked, - setPeekIssue, issue: { getIssueById }, subIssues: { subIssueHelpersByIssueId, setSubIssueHelpers }, toggleCreateIssueModal, @@ -60,8 +59,11 @@ export const IssueListItem: React.FC = 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 = observer((props) => { const subIssueHelpers = subIssueHelpersByIssueId(parentIssueId); const subIssueCount = issue?.sub_issues_count ?? 0; - const handleIssuePeekOverview = (issue: TIssue) => - workspaceSlug && - issue && - issue.project_id && - issue.id && - !getIsIssuePeeked(issue.id) && - setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id }); + // + const handleIssuePeekOverview = (issue: TIssue) => handleRedirection(workspaceSlug, issue, isMobile); if (!issue) return <>; diff --git a/web/core/hooks/use-issue-peek-overview-redirection.tsx b/web/core/hooks/use-issue-peek-overview-redirection.tsx new file mode 100644 index 000000000..89e3dc241 --- /dev/null +++ b/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;