From 1b79517f070ed3451f2222817062678188441b58 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Tue, 30 Apr 2024 17:20:02 +0530 Subject: [PATCH] [WEB-1111] chore: added a helper function to check if issue is peeked (#4305) * chore: added a helper function to check if issue is peeked * chore: make the kanban block observer * chore: rename isIssuePeekd helper function --- web/components/gantt-chart/blocks/block.tsx | 7 ++++--- .../gantt-chart/sidebar/issues/block.tsx | 7 ++++--- .../issue-layouts/calendar/issue-block.tsx | 10 ++++------ .../issues/issue-layouts/gantt/blocks.tsx | 4 ++-- .../issues/issue-layouts/kanban/block.tsx | 18 +++++++++--------- .../issue-layouts/kanban/blocks-list.tsx | 3 --- .../issues/issue-layouts/kanban/default.tsx | 13 +------------ .../issue-layouts/kanban/kanban-group.tsx | 3 --- .../issues/issue-layouts/list/block.tsx | 8 ++++---- .../issue-layouts/spreadsheet/issue-row.tsx | 12 ++++-------- .../issues/sub-issues/issue-list-item.tsx | 4 ++-- web/store/issue/issue-details/root.store.ts | 5 +++++ 12 files changed, 39 insertions(+), 55 deletions(-) diff --git a/web/components/gantt-chart/blocks/block.tsx b/web/components/gantt-chart/blocks/block.tsx index e0e464cf0..0897b6b39 100644 --- a/web/components/gantt-chart/blocks/block.tsx +++ b/web/components/gantt-chart/blocks/block.tsx @@ -36,7 +36,7 @@ export const GanttChartBlock: React.FC = observer((props) => { } = props; // store hooks const { updateActiveBlockId, isBlockActive } = useGanttChart(); - const { peekIssue } = useIssueDetail(); + const { getIsIssuePeeked } = useIssueDetail(); const isBlockVisibleOnChart = block.start_date && block.target_date; @@ -81,8 +81,9 @@ export const GanttChartBlock: React.FC = observer((props) => {
updateActiveBlockId(block.id)} onMouseLeave={() => updateActiveBlockId(null)} diff --git a/web/components/gantt-chart/sidebar/issues/block.tsx b/web/components/gantt-chart/sidebar/issues/block.tsx index ae670941d..bd84af92c 100644 --- a/web/components/gantt-chart/sidebar/issues/block.tsx +++ b/web/components/gantt-chart/sidebar/issues/block.tsx @@ -25,7 +25,7 @@ export const IssuesSidebarBlock: React.FC = observer((props) => { const { block, enableReorder, provided, snapshot } = props; // store hooks const { updateActiveBlockId, isBlockActive } = useGanttChart(); - const { peekIssue } = useIssueDetail(); + const { getIsIssuePeeked } = useIssueDetail(); const duration = findTotalDaysInRange(block.start_date, block.target_date); @@ -33,8 +33,9 @@ export const IssuesSidebarBlock: React.FC = observer((props) => {
updateActiveBlockId(block.id)} onMouseLeave={() => updateActiveBlockId(null)} diff --git a/web/components/issues/issue-layouts/calendar/issue-block.tsx b/web/components/issues/issue-layouts/calendar/issue-block.tsx index 44ca0c9df..6d1fd6c9c 100644 --- a/web/components/issues/issue-layouts/calendar/issue-block.tsx +++ b/web/components/issues/issue-layouts/calendar/issue-block.tsx @@ -27,7 +27,7 @@ export const CalendarIssueBlock: React.FC = observer((props) => { } = useApplication(); const { getProjectIdentifierById } = useProject(); const { getProjectStates } = useProjectState(); - const { peekIssue, setPeekIssue } = useIssueDetail(); + const { getIsIssuePeeked, setPeekIssue } = useIssueDetail(); const { isMobile } = usePlatformOS(); // states const [isMenuActive, setIsMenuActive] = useState(false); @@ -41,7 +41,7 @@ export const CalendarIssueBlock: React.FC = observer((props) => { issue && issue.project_id && issue.id && - peekIssue?.issueId !== issue.id && + !getIsIssuePeeked(issue.id) && setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id }); useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false)); @@ -82,10 +82,8 @@ export const CalendarIssueBlock: React.FC = observer((props) => { "group/calendar-block flex h-10 md:h-8 w-full items-center justify-between gap-1.5 rounded border-b md:border-[0.5px] border-custom-border-200 hover:border-custom-border-400 md:px-1 px-4 py-1.5 ", { "bg-custom-background-90 shadow-custom-shadow-rg border-custom-primary-100": isDragging, - }, - { "bg-custom-background-100 hover:bg-custom-background-90": !isDragging }, - { - "border border-custom-primary-70 hover:border-custom-primary-70": peekIssue?.issueId === issue.id, + "bg-custom-background-100 hover:bg-custom-background-90": !isDragging, + "border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issue.id), } )} > diff --git a/web/components/issues/issue-layouts/gantt/blocks.tsx b/web/components/issues/issue-layouts/gantt/blocks.tsx index 02ed66e5a..924f50a94 100644 --- a/web/components/issues/issue-layouts/gantt/blocks.tsx +++ b/web/components/issues/issue-layouts/gantt/blocks.tsx @@ -20,7 +20,7 @@ export const IssueGanttBlock: React.FC = observer((props) => { const { getProjectStates } = useProjectState(); const { issue: { getIssueById }, - peekIssue, + getIsIssuePeeked, setPeekIssue, } = useIssueDetail(); // derived values @@ -32,7 +32,7 @@ export const IssueGanttBlock: React.FC = observer((props) => { workspaceSlug && issueDetails && !issueDetails.tempId && - peekIssue?.issueId !== issueDetails.id && + !getIsIssuePeeked(issueDetails.id) && setPeekIssue({ workspaceSlug, projectId: issueDetails.project_id, issueId: issueDetails.id }); const { isMobile } = usePlatformOS(); diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx index b70bebfdb..885f3de4d 100644 --- a/web/components/issues/issue-layouts/kanban/block.tsx +++ b/web/components/issues/issue-layouts/kanban/block.tsx @@ -1,4 +1,4 @@ -import { MutableRefObject, memo, useEffect, useRef, useState } from "react"; +import { MutableRefObject, useEffect, useRef, useState } from "react"; import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine"; import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"; import { observer } from "mobx-react-lite"; @@ -17,7 +17,6 @@ import { WithDisplayPropertiesHOC } from "../properties/with-display-properties- // helper interface IssueBlockProps { - peekIssueId?: string; issueId: string; issuesMap: IIssueMap; displayProperties: IIssueDisplayProperties | undefined; @@ -89,9 +88,8 @@ const KanbanIssueDetailsBlock: React.FC = observer((prop ); }); -export const KanbanIssueBlock: React.FC = memo((props) => { +export const KanbanIssueBlock: React.FC = observer((props) => { const { - peekIssueId, issueId, issuesMap, displayProperties, @@ -107,14 +105,14 @@ export const KanbanIssueBlock: React.FC = memo((props) => { const { router: { workspaceSlug }, } = useApplication(); - const { peekIssue, setPeekIssue } = useIssueDetail(); + const { getIsIssuePeeked, setPeekIssue } = useIssueDetail(); const handleIssuePeekOverview = (issue: TIssue) => workspaceSlug && issue && issue.project_id && issue.id && - peekIssue?.issueId !== issue.id && + !getIsIssuePeeked(issue.id) && setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id }); const issue = issuesMap[issueId]; @@ -184,9 +182,11 @@ export const KanbanIssueBlock: React.FC = memo((props) => { ref={cardRef} className={cn( "block rounded border-[0.5px] outline-[0.5px] outline-transparent w-full border-custom-border-200 bg-custom-background-100 text-sm transition-all hover:border-custom-border-400", - { "hover:cursor-pointer": isDragAllowed }, - { "border border-custom-primary-70 hover:border-custom-primary-70": peekIssueId === issue.id }, - { "bg-custom-background-80 z-[100]": isCurrentBlockDragging } + { + "hover:cursor-pointer": isDragAllowed, + "border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issue.id), + "bg-custom-background-80 z-[100]": isCurrentBlockDragging, + } )} target="_blank" onClick={() => handleIssuePeekOverview(issue)} diff --git a/web/components/issues/issue-layouts/kanban/blocks-list.tsx b/web/components/issues/issue-layouts/kanban/blocks-list.tsx index c352e6b5c..d4c69ab0e 100644 --- a/web/components/issues/issue-layouts/kanban/blocks-list.tsx +++ b/web/components/issues/issue-layouts/kanban/blocks-list.tsx @@ -8,7 +8,6 @@ interface IssueBlocksListProps { sub_group_id: string; columnId: string; issuesMap: IIssueMap; - peekIssueId?: string; issueIds: string[]; displayProperties: IIssueDisplayProperties | undefined; isDragDisabled: boolean; @@ -23,7 +22,6 @@ const KanbanIssueBlocksListMemo: React.FC = (props) => { sub_group_id, columnId, issuesMap, - peekIssueId, issueIds, displayProperties, isDragDisabled, @@ -47,7 +45,6 @@ const KanbanIssueBlocksListMemo: React.FC = (props) => { return ( = observer((props) => { const cycle = useCycle(); const moduleInfo = useModule(); const projectState = useProjectState(); - const { peekIssue } = useIssueDetail(); const list = getGroupByColumns( group_by as GroupByColumnTypes, @@ -176,7 +166,6 @@ const GroupByKanBan: React.FC = observer((props) => { groupId={subList.id} issuesMap={issuesMap} issueIds={issueIds} - peekIssueId={peekIssue?.issueId ?? ""} displayProperties={displayProperties} sub_group_by={sub_group_by} group_by={group_by} diff --git a/web/components/issues/issue-layouts/kanban/kanban-group.tsx b/web/components/issues/issue-layouts/kanban/kanban-group.tsx index d1161be2e..d3bb21114 100644 --- a/web/components/issues/issue-layouts/kanban/kanban-group.tsx +++ b/web/components/issues/issue-layouts/kanban/kanban-group.tsx @@ -23,7 +23,6 @@ import { KanbanIssueBlocksList, KanBanQuickAddIssueForm } from "."; interface IKanbanGroup { groupId: string; issuesMap: IIssueMap; - peekIssueId?: string; issueIds: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues; displayProperties: IIssueDisplayProperties | undefined; sub_group_by: TIssueGroupByOptions | undefined; @@ -56,7 +55,6 @@ export const KanbanGroup = (props: IKanbanGroup) => { issuesMap, displayProperties, issueIds, - peekIssueId, isDragDisabled, updateIssue, quickActions, @@ -176,7 +174,6 @@ export const KanbanGroup = (props: IKanbanGroup) => { sub_group_id={sub_group_id} columnId={groupId} issuesMap={issuesMap} - peekIssueId={peekIssueId} issueIds={(issueIds as TGroupedIssues)?.[groupId] || []} displayProperties={displayProperties} isDragDisabled={isDragDisabled} diff --git a/web/components/issues/issue-layouts/list/block.tsx b/web/components/issues/issue-layouts/list/block.tsx index d1fe3ffd7..8f50c57e6 100644 --- a/web/components/issues/issue-layouts/list/block.tsx +++ b/web/components/issues/issue-layouts/list/block.tsx @@ -27,14 +27,14 @@ export const IssueBlock: React.FC = observer((props: IssueBlock router: { workspaceSlug }, } = useApplication(); const { getProjectIdentifierById } = useProject(); - const { peekIssue, setPeekIssue } = useIssueDetail(); + const { getIsIssuePeeked, setPeekIssue } = useIssueDetail(); const handleIssuePeekOverview = (issue: TIssue) => workspaceSlug && issue && issue.project_id && issue.id && - peekIssue?.issueId !== issue.id && + !getIsIssuePeeked(issue.id) && setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id }); const issue = issuesMap[issueId]; @@ -49,8 +49,8 @@ export const IssueBlock: React.FC = observer((props: IssueBlock className={cn( "min-h-12 relative flex flex-col md:flex-row md:items-center gap-3 bg-custom-background-100 p-3 text-sm", { - "border border-custom-primary-70 hover:border-custom-primary-70": peekIssue && peekIssue.issueId === issue.id, - "last:border-b-transparent": peekIssue?.issueId !== issue.id, + "border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issue.id), + "last:border-b-transparent": !getIsIssuePeeked(issue.id), } )} > diff --git a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx index c34878254..27e2c36eb 100644 --- a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx +++ b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx @@ -148,7 +148,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => { const { workspaceSlug } = router.query; //hooks const { getProjectIdentifierById } = useProject(); - const { peekIssue, setPeekIssue } = useIssueDetail(); + const { getIsIssuePeeked, setPeekIssue } = useIssueDetail(); const { isMobile } = usePlatformOS(); // states const [isMenuActive, setIsMenuActive] = useState(false); @@ -159,7 +159,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => { issue && issue.project_id && issue.id && - peekIssue?.issueId !== issue.id && + !getIsIssuePeeked(issue.id) && setPeekIssue({ workspaceSlug: workspaceSlug.toString(), projectId: issue.project_id, issueId: issue.id }); const { subIssues: subIssuesStore, issue } = useIssueDetail(); @@ -200,12 +200,8 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => { className={cn( "sticky group left-0 h-11 w-[28rem] flex items-center bg-custom-background-100 text-sm after:absolute border-r-[0.5px] z-10 border-custom-border-200", { - "border-b-[0.5px]": peekIssue?.issueId !== issueDetail.id, - }, - { - "border border-custom-primary-70 hover:border-custom-primary-70": peekIssue?.issueId === issueDetail.id, - }, - { + "border-b-[0.5px]": !getIsIssuePeeked(issueDetail.id), + "border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issueDetail.id), "shadow-[8px_22px_22px_10px_rgba(0,0,0,0.05)]": isScrolled.current, } )} diff --git a/web/components/issues/sub-issues/issue-list-item.tsx b/web/components/issues/sub-issues/issue-list-item.tsx index a2eaad398..7d974cf8a 100644 --- a/web/components/issues/sub-issues/issue-list-item.tsx +++ b/web/components/issues/sub-issues/issue-list-item.tsx @@ -42,7 +42,7 @@ export const IssueListItem: React.FC = observer((props) => { } = props; const { - peekIssue, + getIsIssuePeeked, setPeekIssue, issue: { getIssueById }, subIssues: { subIssueHelpersByIssueId, setSubIssueHelpers }, @@ -65,7 +65,7 @@ export const IssueListItem: React.FC = observer((props) => { issue && issue.project_id && issue.id && - peekIssue?.issueId !== issue.id && + !getIsIssuePeeked(issue.id) && setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id }); if (!issue) return <>; diff --git a/web/store/issue/issue-details/root.store.ts b/web/store/issue/issue-details/root.store.ts index a9672655b..f6ad0a307 100644 --- a/web/store/issue/issue-details/root.store.ts +++ b/web/store/issue/issue-details/root.store.ts @@ -54,6 +54,8 @@ export interface IIssueDetail isDeleteAttachmentModalOpen: boolean; // computed isAnyModalOpen: boolean; + // helper actions + getIsIssuePeeked: (issueId: string) => boolean; // actions setPeekIssue: (peekIssue: TPeekIssue | undefined) => void; toggleCreateIssueModal: (value: boolean) => void; @@ -156,6 +158,9 @@ export class IssueDetail implements IIssueDetail { ); } + // helper actions + getIsIssuePeeked = (issueId: string) => this.peekIssue?.issueId === issueId; + // actions setPeekIssue = (peekIssue: TPeekIssue | undefined) => (this.peekIssue = peekIssue); toggleCreateIssueModal = (value: boolean) => (this.isCreateIssueModalOpen = value);