fix: calendar layout mutation and code refactor (#5189)

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

@@ -203,7 +203,6 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
               </p>
               <CalendarIssueBlocks
                 date={selectedDate}
-                issues={issues}
                 issueIdList={issueIdList}
                 loadMoreIssues={loadMoreIssues}
                 getPaginationData={getPaginationData}
@@ -230,7 +229,6 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
           </p>
           <CalendarIssueBlocks
             date={selectedDate}
-            issues={issues}
             issueIdList={issueIdList}
             quickActions={quickActions}
             loadMoreIssues={loadMoreIssues}

web/core/components/issues/issue-layouts/calendar/day-tile.tsx

@@ -165,7 +165,6 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
           >
             <CalendarIssueBlocks
               date={date.date}
-              issues={issues}
               issueIdList={issueIds}
               quickActions={quickActions}
               loadMoreIssues={loadMoreIssues}

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

@@ -1,28 +1,32 @@
 import React, { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { observer } from "mobx-react";
 // components
-import { TIssueMap } from "@plane/types";
 import { CalendarIssueBlock } from "@/components/issues";
+import { useIssueDetail } from "@/hooks/store";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 import { TRenderQuickActions } from "../list/list-view-types";
 import { HIGHLIGHT_CLASS } from "../utils";
 // types
 
 type Props = {
-  issues: TIssueMap | undefined;
   issueId: string;
   quickActions: TRenderQuickActions;
   isDragDisabled: boolean;
 };
 
-export const CalendarIssueBlockRoot: React.FC<Props> = (props) => {
-  const { issues, issueId, quickActions, isDragDisabled } = props;
+export const CalendarIssueBlockRoot: React.FC<Props> = observer((props) => {
+  const { issueId, quickActions, isDragDisabled } = props;
 
   const issueRef = useRef<HTMLAnchorElement | null>(null);
   const [isDragging, setIsDragging] = useState(false);
 
-  const issue = issues?.[issueId];
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
+
+  const issue = getIssueById(issueId);
 
   useEffect(() => {
     const element = issueRef.current;
@@ -51,4 +55,4 @@ export const CalendarIssueBlockRoot: React.FC<Props> = (props) => {
   if (!issue) return null;
 
   return <CalendarIssueBlock isDragging={isDragging} issue={issue} quickActions={quickActions} ref={issueRef} />;
-};
+});

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

@@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import { TIssue, TIssueMap, TPaginationData } from "@plane/types";
+import { TIssue, TPaginationData } from "@plane/types";
 // components
 import { CalendarQuickAddIssueForm, CalendarIssueBlockRoot } from "@/components/issues";
 // helpers
@@ -10,7 +10,6 @@ import { TRenderQuickActions } from "../list/list-view-types";
 
 type Props = {
   date: Date;
-  issues: TIssueMap | undefined;
   loadMoreIssues: (dateString: string) => void;
   getPaginationData: (groupId: string | undefined) => TPaginationData | undefined;
   getGroupIssueCount: (groupId: string | undefined) => number | undefined;
@@ -28,7 +27,6 @@ type Props = {
 export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
   const {
     date,
-    issues,
     issueIdList,
     quickActions,
     loadMoreIssues,
@@ -62,7 +60,6 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
       {issueIdList?.map((issueId) => (
         <div key={issueId} className="relative cursor-pointer p-1 px-2">
           <CalendarIssueBlockRoot
-            issues={issues}
             issueId={issueId}
             quickActions={quickActions}
             isDragDisabled={isDragDisabled || isMobileView}