From d8ab3e00873fd97069c1513e8832d7997b04938e Mon Sep 17 00:00:00 2001
From: rahulramesha <71900764+rahulramesha@users.noreply.github.com>
Date: Thu, 9 May 2024 15:51:49 +0530
Subject: [PATCH] [WEB-1139] chore: Calendar pragmatic dnd (#4410)

* replace Pragmatic DND for calendar

* remove unnecessary check
---
 .../calendar/base-calendar-root.tsx           | 103 +++++-----
 .../issue-layouts/calendar/calendar.tsx       |  30 ++-
 .../issue-layouts/calendar/day-tile.tsx       | 112 ++++++----
 .../calendar/issue-block-root.tsx             |  41 +++-
 .../issue-layouts/calendar/issue-block.tsx    | 192 +++++++++---------
 .../issue-layouts/calendar/issue-blocks.tsx   |  67 +++---
 .../issues/issue-layouts/calendar/utils.ts    |  37 +---
 .../issue-layouts/calendar/week-days.tsx      |   7 +
 web/hooks/use-draggable-portal.ts             |  31 ---
 9 files changed, 334 insertions(+), 286 deletions(-)
 delete mode 100644 web/hooks/use-draggable-portal.ts

diff --git a/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx b/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
index ad9903747..946ae0ed4 100644
--- a/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
@@ -1,6 +1,5 @@
 import { FC } from "react";
-import { DragDropContext, DropResult } from "@hello-pangea/dnd";
-import { observer } from "mobx-react";
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { TGroupedIssues } from "@plane/types";
 // components
@@ -51,67 +50,59 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
 
   const groupedIssueIds = (issues.groupedIssueIds ?? {}) as TGroupedIssues;
 
-  const onDragEnd = async (result: DropResult) => {
-    if (!result) return;
+  const handleDragAndDrop = async (
+    issueId: string | undefined,
+    sourceDate: string | undefined,
+    destinationDate: string | undefined
+  ) => {
+    if (!issueId || !destinationDate || !sourceDate) return;
 
-    // return if not dropped on the correct place
-    if (!result.destination) return;
-
-    // return if dropped on the same date
-    if (result.destination.droppableId === result.source.droppableId) return;
-
-    if (handleDragDrop) {
-      await handleDragDrop(
-        result.source,
-        result.destination,
-        workspaceSlug?.toString(),
-        projectId?.toString(),
-        issueMap,
-        groupedIssueIds,
-        updateIssue
-      ).catch((err) => {
-        setToast({
-          title: "Error!",
-          type: TOAST_TYPE.ERROR,
-          message: err?.detail ?? "Failed to perform this action",
-        });
+    await handleDragDrop(
+      issueId,
+      sourceDate,
+      destinationDate,
+      workspaceSlug?.toString(),
+      projectId?.toString(),
+      updateIssue
+    ).catch((err) => {
+      setToast({
+        title: "Error!",
+        type: TOAST_TYPE.ERROR,
+        message: err?.detail ?? "Failed to perform this action",
       });
-    }
+    });
   };
 
   return (
     <>
       <div className="h-full w-full overflow-hidden bg-custom-background-100 pt-4">
-        <DragDropContext onDragEnd={onDragEnd}>
-          <CalendarChart
-            issuesFilterStore={issuesFilter}
-            issues={issueMap}
-            groupedIssueIds={groupedIssueIds}
-            layout={displayFilters?.calendar?.layout}
-            showWeekends={displayFilters?.calendar?.show_weekends ?? false}
-            quickActions={({ issue, parentRef, customActionButton, placement }) => (
-              <QuickActions
-                parentRef={parentRef}
-                customActionButton={customActionButton}
-                issue={issue}
-                handleDelete={async () => removeIssue(issue.project_id, issue.id)}
-                handleUpdate={async (data) => updateIssue && updateIssue(issue.project_id, issue.id, data)}
-                handleRemoveFromView={async () =>
-                  removeIssueFromView && removeIssueFromView(issue.project_id, issue.id)
-                }
-                handleArchive={async () => archiveIssue && archiveIssue(issue.project_id, issue.id)}
-                handleRestore={async () => restoreIssue && restoreIssue(issue.project_id, issue.id)}
-                readOnly={!isEditingAllowed || isCompletedCycle}
-                placements={placement}
-              />
-            )}
-            addIssuesToView={addIssuesToView}
-            quickAddCallback={issues.quickAddIssue}
-            viewId={viewId}
-            readOnly={!isEditingAllowed || isCompletedCycle}
-            updateFilters={updateFilters}
-          />
-        </DragDropContext>
+        <CalendarChart
+          issuesFilterStore={issuesFilter}
+          issues={issueMap}
+          groupedIssueIds={groupedIssueIds}
+          layout={displayFilters?.calendar?.layout}
+          showWeekends={displayFilters?.calendar?.show_weekends ?? false}
+          quickActions={({ issue, parentRef, customActionButton, placement }) => (
+            <QuickActions
+              parentRef={parentRef}
+              customActionButton={customActionButton}
+              issue={issue}
+              handleDelete={async () => removeIssue(issue.project_id, issue.id)}
+              handleUpdate={async (data) => updateIssue && updateIssue(issue.project_id, issue.id, data)}
+              handleRemoveFromView={async () => removeIssueFromView && removeIssueFromView(issue.project_id, issue.id)}
+              handleArchive={async () => archiveIssue && archiveIssue(issue.project_id, issue.id)}
+              handleRestore={async () => restoreIssue && restoreIssue(issue.project_id, issue.id)}
+              readOnly={!isEditingAllowed || isCompletedCycle}
+              placements={placement}
+            />
+          )}
+          addIssuesToView={addIssuesToView}
+          quickAddCallback={issues.quickAddIssue}
+          viewId={viewId}
+          readOnly={!isEditingAllowed || isCompletedCycle}
+          updateFilters={updateFilters}
+          handleDragAndDrop={handleDragAndDrop}
+        />
       </div>
     </>
   );
diff --git a/web/components/issues/issue-layouts/calendar/calendar.tsx b/web/components/issues/issue-layouts/calendar/calendar.tsx
index c4110bc13..a120c78d9 100644
--- a/web/components/issues/issue-layouts/calendar/calendar.tsx
+++ b/web/components/issues/issue-layouts/calendar/calendar.tsx
@@ -1,4 +1,6 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
 import { observer } from "mobx-react-lite";
 // types
 import type {
@@ -40,6 +42,11 @@ type Props = {
   layout: "month" | "week" | undefined;
   showWeekends: boolean;
   quickActions: TRenderQuickActions;
+  handleDragAndDrop: (
+    issueId: string | undefined,
+    sourceDate: string | undefined,
+    destinationDate: string | undefined
+  ) => Promise<void>;
   quickAddCallback?: (
     workspaceSlug: string,
     projectId: string,
@@ -63,6 +70,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
     groupedIssueIds,
     layout,
     showWeekends,
+    handleDragAndDrop,
     quickActions,
     quickAddCallback,
     addIssuesToView,
@@ -72,6 +80,8 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
   } = props;
   // states
   const [selectedDate, setSelectedDate] = useState<Date>(new Date());
+  //refs
+  const scrollableContainerRef = useRef<HTMLDivElement | null>(null);
   // store hooks
   const {
     issues: { viewFlags },
@@ -91,6 +101,19 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
 
   const formattedDatePayload = renderFormattedPayloadDate(selectedDate) ?? undefined;
 
+  // Enable Auto Scroll for calendar
+  useEffect(() => {
+    const element = scrollableContainerRef.current;
+
+    if (!element) return;
+
+    return combine(
+      autoScrollForElements({
+        element,
+      })
+    );
+  }, [scrollableContainerRef?.current]);
+
   if (!calendarPayload || !formattedDatePayload)
     return (
       <div className="grid h-full w-full place-items-center">
@@ -112,6 +135,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
           className={cn("flex w-full flex-col overflow-y-auto md:h-full", {
             "vertical-scrollbar scrollbar-lg": windowWidth > 768,
           })}
+          ref={scrollableContainerRef}
         >
           <CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} />
           <div className="h-full w-full">
@@ -123,6 +147,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
                       selectedDate={selectedDate}
                       setSelectedDate={setSelectedDate}
                       issuesFilterStore={issuesFilterStore}
+                      handleDragAndDrop={handleDragAndDrop}
                       key={weekIndex}
                       week={week}
                       issues={issues}
@@ -143,6 +168,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
                 selectedDate={selectedDate}
                 setSelectedDate={setSelectedDate}
                 issuesFilterStore={issuesFilterStore}
+                handleDragAndDrop={handleDragAndDrop}
                 week={issueCalendarView.allDaysOfActiveWeek}
                 issues={issues}
                 groupedIssueIds={groupedIssueIds}
@@ -175,6 +201,8 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
               addIssuesToView={addIssuesToView}
               viewId={viewId}
               readOnly={readOnly}
+              isMonthLayout={false}
+              showAllIssues
               isDragDisabled
               isMobileView
             />
diff --git a/web/components/issues/issue-layouts/calendar/day-tile.tsx b/web/components/issues/issue-layouts/calendar/day-tile.tsx
index 8f162869a..7dfcfdcac 100644
--- a/web/components/issues/issue-layouts/calendar/day-tile.tsx
+++ b/web/components/issues/issue-layouts/calendar/day-tile.tsx
@@ -1,10 +1,13 @@
-import { Droppable } from "@hello-pangea/dnd";
+import { useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { observer } from "mobx-react-lite";
 // types
 import { TGroupedIssues, TIssue, TIssueMap } from "@plane/types";
 // components
 import { CalendarIssueBlocks, ICalendarDate } from "@/components/issues";
-// constants
+import { highlightIssueOnDrop } from "@/components/issues/issue-layouts/utils";
+// helpers
 import { MONTHS_LIST } from "@/constants/calendar";
 // helpers
 import { cn } from "@/helpers/common.helper";
@@ -24,6 +27,11 @@ type Props = {
   quickActions: TRenderQuickActions;
   enableQuickIssueCreate?: boolean;
   disableIssueCreation?: boolean;
+  handleDragAndDrop: (
+    issueId: string | undefined,
+    sourceDate: string | undefined,
+    destinationDate: string | undefined
+  ) => Promise<void>;
   quickAddCallback?: (
     workspaceSlug: string,
     projectId: string,
@@ -51,12 +59,46 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
     viewId,
     readOnly = false,
     selectedDate,
+    handleDragAndDrop,
     setSelectedDate,
   } = props;
 
+  const [isDraggingOver, setIsDraggingOver] = useState(false);
+  const [showAllIssues, setShowAllIssues] = useState(false);
+
   const calendarLayout = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.layout ?? "month";
 
   const formattedDatePayload = renderFormattedPayloadDate(date.date);
+
+  const dayTileRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const element = dayTileRef.current;
+
+    if (!element) return;
+
+    return combine(
+      dropTargetForElements({
+        element,
+        getData: () => ({ date: formattedDatePayload }),
+        onDragEnter: () => {
+          setIsDraggingOver(true);
+        },
+        onDragLeave: () => {
+          setIsDraggingOver(false);
+        },
+        onDrop: ({ source, self }) => {
+          setIsDraggingOver(false);
+          const sourceData = source?.data as { id: string; date: string } | undefined;
+          const destinationData = self?.data as { date: string } | undefined;
+          handleDragAndDrop(sourceData?.id, sourceData?.date, destinationData?.date);
+          setShowAllIssues(true);
+          highlightIssueOnDrop(source?.element?.id, false);
+        },
+      })
+    );
+  }, [dayTileRef?.current, formattedDatePayload]);
+
   if (!formattedDatePayload) return null;
   const issueIdList = groupedIssueIds ? groupedIssueIds[formattedDatePayload] : null;
 
@@ -65,13 +107,19 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
   const isToday = date.date.toDateString() === new Date().toDateString();
   const isSelectedDate = date.date.toDateString() == selectedDate.toDateString();
 
+  const isWeekend = date.date.getDay() === 0 || date.date.getDay() === 6;
+  const isMonthLayout = calendarLayout === "month";
+
+  const normalBackground = isWeekend ? "bg-custom-background-90" : "bg-custom-background-100";
+  const draggingOverBackground = isWeekend ? "bg-custom-background-80" : "bg-custom-background-90";
+
   return (
     <>
-      <div className="group relative flex h-full w-full flex-col bg-custom-background-90">
+      <div ref={dayTileRef} className="group relative flex h-full w-full flex-col bg-custom-background-90">
         {/* header */}
         <div
           className={`hidden flex-shrink-0 items-center justify-end px-2 py-1.5 text-right text-xs md:flex ${
-            calendarLayout === "month" // if month layout, highlight current month days
+            isMonthLayout // if month layout, highlight current month days
               ? date.is_current_month
                 ? "font-medium"
                 : "text-custom-text-300"
@@ -93,44 +141,38 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
         </div>
 
         {/* content */}
-        <div className="hidden h-full w-full md:block">
-          <Droppable droppableId={formattedDatePayload} isDropDisabled={readOnly}>
-            {(provided, snapshot) => (
-              <div
-                className={`h-full w-full select-none ${
-                  snapshot.isDraggingOver || date.date.getDay() === 0 || date.date.getDay() === 6
-                    ? "bg-custom-background-90"
-                    : "bg-custom-background-100"
-                } ${calendarLayout === "month" ? "min-h-[5rem]" : ""}`}
-                {...provided.droppableProps}
-                ref={provided.innerRef}
-              >
-                <CalendarIssueBlocks
-                  date={date.date}
-                  issues={issues}
-                  issueIdList={issueIdList}
-                  quickActions={quickActions}
-                  isDragDisabled={readOnly}
-                  addIssuesToView={addIssuesToView}
-                  disableIssueCreation={disableIssueCreation}
-                  enableQuickIssueCreate={enableQuickIssueCreate}
-                  quickAddCallback={quickAddCallback}
-                  viewId={viewId}
-                  readOnly={readOnly}
-                />
-                {provided.placeholder}
-              </div>
-            )}
-          </Droppable>
+        <div className="h-full w-full hidden md:block">
+          <div
+            className={`h-full w-full select-none ${
+              isDraggingOver ? `${draggingOverBackground} opacity-70` : normalBackground
+            } ${isMonthLayout ? "min-h-[5rem]" : ""}`}
+          >
+            <CalendarIssueBlocks
+              date={date.date}
+              issues={issues}
+              issueIdList={issueIdList}
+              showAllIssues={showAllIssues}
+              setShowAllIssues={setShowAllIssues}
+              quickActions={quickActions}
+              isDragDisabled={readOnly}
+              addIssuesToView={addIssuesToView}
+              disableIssueCreation={disableIssueCreation}
+              enableQuickIssueCreate={enableQuickIssueCreate}
+              quickAddCallback={quickAddCallback}
+              viewId={viewId}
+              readOnly={readOnly}
+              isMonthLayout={isMonthLayout}
+            />
+          </div>
         </div>
 
         {/* Mobile view content */}
         <div
           onClick={() => setSelectedDate(date.date)}
           className={cn(
-            "mx-auto flex h-full w-full cursor-pointer flex-col items-center justify-start py-2.5 text-sm font-medium md:hidden",
+            "text-sm py-2.5 h-full w-full font-medium mx-auto flex flex-col justify-start items-center md:hidden cursor-pointer opacity-80",
             {
-              "bg-custom-background-100": date.date.getDay() !== 0 && date.date.getDay() !== 6,
+              "bg-custom-background-100": !isWeekend,
             }
           )}
         >
diff --git a/web/components/issues/issue-layouts/calendar/issue-block-root.tsx b/web/components/issues/issue-layouts/calendar/issue-block-root.tsx
index efedcf50b..df0d03845 100644
--- a/web/components/issues/issue-layouts/calendar/issue-block-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/issue-block-root.tsx
@@ -1,23 +1,54 @@
-import React from "react";
+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";
 // components
 import { TIssueMap } from "@plane/types";
 import { CalendarIssueBlock } from "@/components/issues";
+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;
-  isDragging?: boolean;
+  isDragDisabled: boolean;
 };
 
 export const CalendarIssueBlockRoot: React.FC<Props> = (props) => {
-  const { issues, issueId, quickActions, isDragging } = props;
+  const { issues, issueId, quickActions, isDragDisabled } = props;
 
-  if (!issues?.[issueId]) return null;
+  const issueRef = useRef<HTMLAnchorElement | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
 
   const issue = issues?.[issueId];
 
-  return <CalendarIssueBlock isDragging={isDragging} issue={issue} quickActions={quickActions} />;
+  useEffect(() => {
+    const element = issueRef.current;
+
+    if (!element) return;
+
+    return combine(
+      draggable({
+        element,
+        canDrag: () => !isDragDisabled,
+        getInitialData: () => ({ id: issue?.id, date: issue?.target_date }),
+        onDragStart: () => {
+          setIsDragging(true);
+        },
+        onDrop: () => {
+          setIsDragging(false);
+        },
+      })
+    );
+  }, [issueRef?.current, issue]);
+
+  useOutsideClickDetector(issueRef, () => {
+    issueRef?.current?.classList?.remove(HIGHLIGHT_CLASS);
+  });
+
+  if (!issue) return null;
+
+  return <CalendarIssueBlock isDragging={isDragging} issue={issue} quickActions={quickActions} ref={issueRef} />;
 };
diff --git a/web/components/issues/issue-layouts/calendar/issue-block.tsx b/web/components/issues/issue-layouts/calendar/issue-block.tsx
index 01d7615f3..b9cf59d0a 100644
--- a/web/components/issues/issue-layouts/calendar/issue-block.tsx
+++ b/web/components/issues/issue-layouts/calendar/issue-block.tsx
@@ -1,4 +1,5 @@
-import { useState, useRef } from "react";
+/* eslint-disable react/display-name */
+import { useState, useRef, forwardRef } from "react";
 import { observer } from "mobx-react";
 import { MoreHorizontal } from "lucide-react";
 import { TIssue } from "@plane/types";
@@ -19,106 +20,111 @@ type Props = {
   isDragging?: boolean;
 };
 
-export const CalendarIssueBlock: React.FC<Props> = observer((props) => {
-  const { issue, quickActions, isDragging = false } = props;
-  // states
-  const [isMenuActive, setIsMenuActive] = useState(false);
-  // refs
-  const blockRef = useRef(null);
-  const menuActionRef = useRef<HTMLDivElement | null>(null);
-  // hooks
-  const { workspaceSlug, projectId } = useAppRouter();
-  const { getProjectIdentifierById } = useProject();
-  const { getProjectStates } = useProjectState();
-  const { getIsIssuePeeked, setPeekIssue } = useIssueDetail();
-  const { isMobile } = usePlatformOS();
+export const CalendarIssueBlock = observer(
+  forwardRef<HTMLAnchorElement, Props>((props, ref) => {
+    const { issue, quickActions, isDragging = false } = props;
+    // states
+    const [isMenuActive, setIsMenuActive] = useState(false);
+    // refs
+    const blockRef = useRef(null);
+    const menuActionRef = useRef<HTMLDivElement | null>(null);
+    // hooks
+    const { workspaceSlug, projectId } = useAppRouter();
+    const { getProjectIdentifierById } = useProject();
+    const { getProjectStates } = useProjectState();
+    const { getIsIssuePeeked, setPeekIssue } = useIssueDetail();
+    const { isMobile } = usePlatformOS();
 
-  const stateColor = getProjectStates(issue?.project_id)?.find((state) => state?.id == issue?.state_id)?.color || "";
+    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, projectId: issue.project_id, issueId: issue.id });
+    const handleIssuePeekOverview = (issue: TIssue) =>
+      workspaceSlug &&
+      issue &&
+      issue.project_id &&
+      issue.id &&
+      !getIsIssuePeeked(issue.id) &&
+      setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id });
 
-  useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false));
+    useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false));
 
-  const customActionButton = (
-    <div
-      ref={menuActionRef}
-      className={`w-full cursor-pointer rounded p-1 text-custom-sidebar-text-400 hover:bg-custom-background-80 ${
-        isMenuActive ? "bg-custom-background-80 text-custom-text-100" : "text-custom-text-200"
-      }`}
-      onClick={() => setIsMenuActive(!isMenuActive)}
-    >
-      <MoreHorizontal className="h-3.5 w-3.5" />
-    </div>
-  );
+    const customActionButton = (
+      <div
+        ref={menuActionRef}
+        className={`w-full cursor-pointer rounded p-1 text-custom-sidebar-text-400 hover:bg-custom-background-80 ${
+          isMenuActive ? "bg-custom-background-80 text-custom-text-100" : "text-custom-text-200"
+        }`}
+        onClick={() => setIsMenuActive(!isMenuActive)}
+      >
+        <MoreHorizontal className="h-3.5 w-3.5" />
+      </div>
+    );
 
-  const isMenuActionRefAboveScreenBottom =
-    menuActionRef?.current && menuActionRef?.current?.getBoundingClientRect().bottom < window.innerHeight - 220;
+    const isMenuActionRefAboveScreenBottom =
+      menuActionRef?.current && menuActionRef?.current?.getBoundingClientRect().bottom < window.innerHeight - 220;
 
-  const placement = isMenuActionRefAboveScreenBottom ? "bottom-end" : "top-end";
+    const placement = isMenuActionRefAboveScreenBottom ? "bottom-end" : "top-end";
 
-  return (
-    <ControlLink
-      id={`issue-${issue.id}`}
-      href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
-      target="_blank"
-      onClick={() => handleIssuePeekOverview(issue)}
-      className="w-full cursor-pointer text-sm text-custom-text-100"
-      disabled={!!issue?.tempId}
-    >
-      <>
-        {issue?.tempId !== undefined && (
-          <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
-        )}
-
-        <div
-          ref={blockRef}
-          className={cn(
-            "group/calendar-block flex h-10 w-full items-center justify-between gap-1.5 rounded border-b border-custom-border-200 px-4 py-1.5 hover:border-custom-border-400 md:h-8 md:border-[0.5px] md:px-1 ",
-            {
-              "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": getIsIssuePeeked(issue.id),
-            }
+    return (
+      <ControlLink
+        id={`issue-${issue.id}`}
+        href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
+        target="_blank"
+        onClick={() => handleIssuePeekOverview(issue)}
+        className="block w-full text-sm text-custom-text-100 rounded border-b md:border-[1px] border-custom-border-200 hover:border-custom-border-400"
+        disabled={!!issue?.tempId}
+        ref={ref}
+      >
+        <>
+          {issue?.tempId !== undefined && (
+            <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
           )}
-        >
-          <div className="flex h-full items-center gap-1.5 truncate">
-            <span
-              className="h-full w-0.5 flex-shrink-0 rounded"
-              style={{
-                backgroundColor: stateColor,
-              }}
-            />
-            <div className="flex-shrink-0 text-sm text-custom-text-300 md:text-xs">
-              {getProjectIdentifierById(issue?.project_id)}-{issue.sequence_id}
-            </div>
-            <Tooltip tooltipContent={issue.name} isMobile={isMobile}>
-              <div className="truncate text-sm font-medium md:text-xs md:font-normal">{issue.name}</div>
-            </Tooltip>
-          </div>
+
           <div
-            className={`h-5 w-5 flex-shrink-0 group-hover/calendar-block:block md:hidden ${
-              isMenuActive ? "!block" : ""
-            }`}
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-            }}
+            ref={blockRef}
+            className={cn(
+              "group/calendar-block flex h-10 md:h-8 w-full items-center justify-between gap-1.5 rounded  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": getIsIssuePeeked(issue.id),
+              }
+            )}
           >
-            {quickActions({
-              issue,
-              parentRef: blockRef,
-              customActionButton,
-              placement,
-            })}
+            <div className="flex h-full items-center gap-1.5 truncate">
+              <span
+                className="h-full w-0.5 flex-shrink-0 rounded"
+                style={{
+                  backgroundColor: stateColor,
+                }}
+              />
+              <div className="flex-shrink-0 text-sm md:text-xs text-custom-text-300">
+                {getProjectIdentifierById(issue?.project_id)}-{issue.sequence_id}
+              </div>
+              <Tooltip tooltipContent={issue.name} isMobile={isMobile}>
+                <div className="truncate text-sm font-medium md:font-normal md:text-xs">{issue.name}</div>
+              </Tooltip>
+            </div>
+            <div
+              className={`flex-shrink-0 md:hidden h-5 w-5 group-hover/calendar-block:block ${
+                isMenuActive ? "!block" : ""
+              }`}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }}
+            >
+              {quickActions({
+                issue,
+                parentRef: blockRef,
+                customActionButton,
+                placement,
+              })}
+            </div>
           </div>
-        </div>
-      </>
-    </ControlLink>
-  );
-});
+        </>
+      </ControlLink>
+    );
+  })
+);
+
+CalendarIssueBlock.displayName = "CalendarIssueBlock";
diff --git a/web/components/issues/issue-layouts/calendar/issue-blocks.tsx b/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
index 86cecdf20..c04241953 100644
--- a/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
+++ b/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
@@ -1,5 +1,4 @@
-import { useState } from "react";
-import { Draggable } from "@hello-pangea/dnd";
+import { Dispatch, SetStateAction } from "react";
 import { observer } from "mobx-react-lite";
 // types
 import { TIssue, TIssueMap } from "@plane/types";
@@ -14,6 +13,9 @@ type Props = {
   date: Date;
   issues: TIssueMap | undefined;
   issueIdList: string[] | null;
+  showAllIssues: boolean;
+  setShowAllIssues?: Dispatch<SetStateAction<boolean>>;
+  isMonthLayout: boolean;
   quickActions: TRenderQuickActions;
   isDragDisabled?: boolean;
   enableQuickIssueCreate?: boolean;
@@ -35,6 +37,8 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
     date,
     issues,
     issueIdList,
+    showAllIssues,
+    setShowAllIssues,
     quickActions,
     isDragDisabled = false,
     enableQuickIssueCreate,
@@ -43,10 +47,9 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
     addIssuesToView,
     viewId,
     readOnly,
+    isMonthLayout,
     isMobileView = false,
   } = props;
-  // states
-  const [showAllIssues, setShowAllIssues] = useState(false);
 
   const formattedDatePayload = renderFormattedPayloadDate(date);
   const totalIssues = issueIdList?.length ?? 0;
@@ -55,30 +58,27 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
 
   return (
     <>
-      {issueIdList?.slice(0, showAllIssues || isMobileView ? issueIdList.length : 4).map((issueId, index) =>
-        !isMobileView ? (
-          <Draggable key={issueId} draggableId={issueId} index={index} isDragDisabled={isDragDisabled}>
-            {(provided, snapshot) => (
-              <div
-                className="relative cursor-pointer p-1 px-2"
-                {...provided.draggableProps}
-                {...provided.dragHandleProps}
-                ref={provided.innerRef}
-              >
-                <CalendarIssueBlockRoot
-                  issues={issues}
-                  issueId={issueId}
-                  quickActions={quickActions}
-                  isDragging={snapshot.isDragging}
-                />
-              </div>
-            )}
-          </Draggable>
-        ) : (
-          <CalendarIssueBlockRoot key={issueId} issues={issues} issueId={issueId} quickActions={quickActions} />
-        )
+      {issueIdList?.slice(0, showAllIssues || !isMonthLayout ? issueIdList.length : 4).map((issueId) => (
+        <div key={issueId} className="relative cursor-pointer p-1 px-2">
+          <CalendarIssueBlockRoot
+            issues={issues}
+            issueId={issueId}
+            quickActions={quickActions}
+            isDragDisabled={isDragDisabled || isMobileView}
+          />
+        </div>
+      ))}
+      {totalIssues > 4 && isMonthLayout && (
+        <div className="hidden items-center px-2.5 py-1 md:flex">
+          <button
+            type="button"
+            className="w-min whitespace-nowrap rounded px-1.5 py-1 text-xs font-medium text-custom-text-400  hover:bg-custom-background-80 hover:text-custom-text-300"
+            onClick={() => setShowAllIssues && setShowAllIssues(!showAllIssues)}
+          >
+            {showAllIssues ? "Hide" : totalIssues - 4 + " more"}
+          </button>
+        </div>
       )}
-
       {enableQuickIssueCreate && !disableIssueCreation && !readOnly && (
         <div className="border-b border-custom-border-200 px-1 py-1 md:border-none md:px-2">
           <CalendarQuickAddIssueForm
@@ -90,21 +90,10 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
             quickAddCallback={quickAddCallback}
             addIssuesToView={addIssuesToView}
             viewId={viewId}
-            onOpen={() => setShowAllIssues(true)}
+            onOpen={() => setShowAllIssues && setShowAllIssues(true)}
           />
         </div>
       )}
-      {totalIssues > 4 && (
-        <div className="hidden items-center px-2.5 py-1 md:flex">
-          <button
-            type="button"
-            className="w-min whitespace-nowrap rounded px-1.5 py-1 text-xs font-medium text-custom-text-400  hover:bg-custom-background-80 hover:text-custom-text-300"
-            onClick={() => setShowAllIssues(!showAllIssues)}
-          >
-            {showAllIssues ? "Hide" : totalIssues - 4 + " more"}
-          </button>
-        </div>
-      )}
     </>
   );
 });
diff --git a/web/components/issues/issue-layouts/calendar/utils.ts b/web/components/issues/issue-layouts/calendar/utils.ts
index fd96ff647..acba413f8 100644
--- a/web/components/issues/issue-layouts/calendar/utils.ts
+++ b/web/components/issues/issue-layouts/calendar/utils.ts
@@ -1,36 +1,21 @@
-import { DraggableLocation } from "@hello-pangea/dnd";
-import { TGroupedIssues, IIssueMap, TIssue } from "@plane/types";
+import { TIssue } from "@plane/types";
 
 export const handleDragDrop = async (
-  source: DraggableLocation,
-  destination: DraggableLocation,
+  issueId: string,
+  sourceDate: string,
+  destinationDate: string,
   workspaceSlug: string | undefined,
   projectId: string | undefined,
-  issueMap: IIssueMap,
-  issueWithIds: TGroupedIssues,
   updateIssue?: (projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>
 ) => {
-  if (!issueMap || !issueWithIds || !workspaceSlug || !projectId || !updateIssue) return;
+  if (!workspaceSlug || !projectId || !updateIssue) return;
 
-  const sourceColumnId = source?.droppableId || null;
-  const destinationColumnId = destination?.droppableId || null;
+  if (sourceDate === destinationDate) return;
 
-  if (!workspaceSlug || !projectId || !sourceColumnId || !destinationColumnId) return;
+  const updatedIssue = {
+    id: issueId,
+    target_date: destinationDate,
+  };
 
-  if (sourceColumnId === destinationColumnId) return;
-
-  // horizontal
-  if (sourceColumnId != destinationColumnId) {
-    const sourceIssues = issueWithIds[sourceColumnId] || [];
-
-    const [removed] = sourceIssues.splice(source.index, 1);
-    const removedIssueDetail = issueMap[removed];
-
-    const updatedIssue = {
-      id: removedIssueDetail?.id,
-      target_date: destinationColumnId,
-    };
-
-    return await updateIssue(projectId, updatedIssue.id, updatedIssue);
-  }
+  return await updateIssue(projectId, updatedIssue.id, updatedIssue);
 };
diff --git a/web/components/issues/issue-layouts/calendar/week-days.tsx b/web/components/issues/issue-layouts/calendar/week-days.tsx
index 0ac4d30b0..9cd107bbd 100644
--- a/web/components/issues/issue-layouts/calendar/week-days.tsx
+++ b/web/components/issues/issue-layouts/calendar/week-days.tsx
@@ -20,6 +20,11 @@ type Props = {
   quickActions: TRenderQuickActions;
   enableQuickIssueCreate?: boolean;
   disableIssueCreation?: boolean;
+  handleDragAndDrop: (
+    issueId: string | undefined,
+    sourceDate: string | undefined,
+    destinationDate: string | undefined
+  ) => Promise<void>;
   quickAddCallback?: (
     workspaceSlug: string,
     projectId: string,
@@ -38,6 +43,7 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
     issuesFilterStore,
     issues,
     groupedIssueIds,
+    handleDragAndDrop,
     week,
     quickActions,
     enableQuickIssueCreate,
@@ -80,6 +86,7 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
             addIssuesToView={addIssuesToView}
             viewId={viewId}
             readOnly={readOnly}
+            handleDragAndDrop={handleDragAndDrop}
           />
         );
       })}
diff --git a/web/hooks/use-draggable-portal.ts b/web/hooks/use-draggable-portal.ts
deleted file mode 100644
index 325f8b268..000000000
--- a/web/hooks/use-draggable-portal.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useEffect, useRef } from "react";
-import { DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd";
-import { createPortal } from "react-dom";
-
-const useDraggableInPortal = () => {
-  const self = useRef<Element>();
-
-  useEffect(() => {
-    const div = document.createElement("div");
-    div.style.position = "absolute";
-    div.style.pointerEvents = "none";
-    div.style.top = "0";
-    div.style.width = "100%";
-    div.style.height = "100%";
-    self.current = div;
-    document.body.appendChild(div);
-    return () => {
-      document.body.removeChild(div);
-    };
-  }, [self.current]);
-
-  return (render: any) => (provided: DraggableProvided, snapshot: DraggableStateSnapshot) => {
-    const element = render(provided, snapshot);
-    if (self.current && snapshot?.isDragging) {
-      return createPortal(element, self.current);
-    }
-    return element;
-  };
-};
-
-export default useDraggableInPortal;