From 68a211d00e625eee0ee28d65a2d9f54555100524 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Mon, 22 Jul 2024 19:12:52 +0530
Subject: [PATCH] fix: calendar layout mutation and code refactor (#5189)

---
 .../issues/issue-layouts/calendar/calendar.tsx   |  2 --
 .../issues/issue-layouts/calendar/day-tile.tsx   |  1 -
 .../issue-layouts/calendar/issue-block-root.tsx  | 16 ++++++++++------
 .../issue-layouts/calendar/issue-blocks.tsx      |  5 +----
 4 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/web/core/components/issues/issue-layouts/calendar/calendar.tsx b/web/core/components/issues/issue-layouts/calendar/calendar.tsx
index 4f5da6507..1a17edbd0 100644
--- a/web/core/components/issues/issue-layouts/calendar/calendar.tsx
+++ b/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}
diff --git a/web/core/components/issues/issue-layouts/calendar/day-tile.tsx b/web/core/components/issues/issue-layouts/calendar/day-tile.tsx
index 9fec8302d..54a638480 100644
--- a/web/core/components/issues/issue-layouts/calendar/day-tile.tsx
+++ b/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}
diff --git a/web/core/components/issues/issue-layouts/calendar/issue-block-root.tsx b/web/core/components/issues/issue-layouts/calendar/issue-block-root.tsx
index df0d03845..6826f8196 100644
--- a/web/core/components/issues/issue-layouts/calendar/issue-block-root.tsx
+++ b/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} />;
-};
+});
diff --git a/web/core/components/issues/issue-layouts/calendar/issue-blocks.tsx b/web/core/components/issues/issue-layouts/calendar/issue-blocks.tsx
index 64f3c92f3..3d0c4cce2 100644
--- a/web/core/components/issues/issue-layouts/calendar/issue-blocks.tsx
+++ b/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}