[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

@@ -36,7 +36,7 @@ export const GanttChartBlock: React.FC<Props> = 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<Props> = observer((props) => {
       <div
         className={cn("relative h-full", {
           "bg-custom-background-80": isBlockActive(block.id),
-          "rounded-l border border-r-0 border-custom-primary-70 hover:border-custom-primary-70":
+          "rounded-l border border-r-0 border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(
-            peekIssue?.issueId === block.data.id,
+            block.data.id
+          ),
         })}
         onMouseEnter={() => updateActiveBlockId(block.id)}
         onMouseLeave={() => updateActiveBlockId(null)}

web/components/gantt-chart/sidebar/issues/block.tsx

@@ -25,7 +25,7 @@ export const IssuesSidebarBlock: React.FC<Props> = 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<Props> = observer((props) => {
     <div
       className={cn({
         "rounded bg-custom-background-80": snapshot.isDragging,
-        "rounded-l border border-r-0 border-custom-primary-70 hover:border-custom-primary-70":
+        "rounded-l border border-r-0 border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(
-          peekIssue?.issueId === block.data.id,
+          block.data.id
+        ),
       })}
       onMouseEnter={() => updateActiveBlockId(block.id)}
       onMouseLeave={() => updateActiveBlockId(null)}

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

@@ -27,7 +27,7 @@ export const CalendarIssueBlock: React.FC<Props> = 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<Props> = 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<Props> = 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,
-            { "bg-custom-background-100 hover:bg-custom-background-90": !isDragging },
+              "border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issue.id),
-            {
-              "border border-custom-primary-70 hover:border-custom-primary-70": peekIssue?.issueId === issue.id,
             }
           )}
         >

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

@@ -20,7 +20,7 @@ export const IssueGanttBlock: React.FC<Props> = observer((props) => {
   const { getProjectStates } = useProjectState();
   const {
     issue: { getIssueById },
-    peekIssue,
+    getIsIssuePeeked,
     setPeekIssue,
   } = useIssueDetail();
   // derived values
@@ -32,7 +32,7 @@ export const IssueGanttBlock: React.FC<Props> = 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();
 

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<IssueDetailsBlockProps> = observer((prop
   );
 });
 
-export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
+export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
   const {
-    peekIssueId,
     issueId,
     issuesMap,
     displayProperties,
@@ -107,14 +105,14 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = 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<IssueBlockProps> = 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 },
+              "hover:cursor-pointer": isDragAllowed,
-            { "bg-custom-background-80 z-[100]": isCurrentBlockDragging }
+              "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)}

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<IssueBlocksListProps> = (props) => {
     sub_group_id,
     columnId,
     issuesMap,
-    peekIssueId,
     issueIds,
     displayProperties,
     isDragDisabled,
@@ -47,7 +45,6 @@ const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
             return (
               <KanbanIssueBlock
                 key={draggableId}
-                peekIssueId={peekIssueId}
                 issueId={issueId}
                 issuesMap={issuesMap}
                 displayProperties={displayProperties}

web/components/issues/issue-layouts/kanban/default.tsx

@@ -14,16 +14,7 @@ import {
 } from "@plane/types";
 // constants
 // hooks
-import {
+import { useCycle, useKanbanView, useLabel, useMember, useModule, useProject, useProjectState } from "@/hooks/store";
-  useCycle,
-  useIssueDetail,
-  useKanbanView,
-  useLabel,
-  useMember,
-  useModule,
-  useProject,
-  useProjectState,
-} from "@/hooks/store";
 // types
 // parent components
 import { getGroupByColumns, isWorkspaceLevel } from "../utils";
@@ -95,7 +86,6 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = 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<IGroupByKanBan> = observer((props) => {
                   groupId={subList.id}
                   issuesMap={issuesMap}
                   issueIds={issueIds}
-                  peekIssueId={peekIssue?.issueId ?? ""}
                   displayProperties={displayProperties}
                   sub_group_by={sub_group_by}
                   group_by={group_by}

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}

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

@@ -27,14 +27,14 @@ export const IssueBlock: React.FC<IssueBlockProps> = 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<IssueBlockProps> = 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,
+          "border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issue.id),
-          "last:border-b-transparent": peekIssue?.issueId !== issue.id,
+          "last:border-b-transparent": !getIsIssuePeeked(issue.id),
         }
       )}
     >

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-b-[0.5px]": !getIsIssuePeeked(issueDetail.id),
-          },
+            "border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issueDetail.id),
-          {
-            "border border-custom-primary-70 hover:border-custom-primary-70": peekIssue?.issueId === issueDetail.id,
-          },
-          {
             "shadow-[8px_22px_22px_10px_rgba(0,0,0,0.05)]": isScrolled.current,
           }
         )}

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

@@ -42,7 +42,7 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
   } = props;
 
   const {
-    peekIssue,
+    getIsIssuePeeked,
     setPeekIssue,
     issue: { getIssueById },
     subIssues: { subIssueHelpersByIssueId, setSubIssueHelpers },
@@ -65,7 +65,7 @@ export const IssueListItem: React.FC<ISubIssues> = 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 <></>;

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);