From d0afa486c70d9ddecefee60b9add3127f9b35d05 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 13 Feb 2023 10:32:02 +0530
Subject: [PATCH] feat: drag and drop an issue to delete (#270)

* feat: drag and drop an issue to delete

* style: repositioned trash box
---
 .../components/core/board-view/all-boards.tsx |  69 ++-
 .../core/board-view/single-board.tsx          |  32 +-
 .../core/board-view/single-issue.tsx          | 168 +++---
 apps/app/components/core/issues-view.tsx      | 556 ++++++++++--------
 4 files changed, 447 insertions(+), 378 deletions(-)

diff --git a/apps/app/components/core/board-view/all-boards.tsx b/apps/app/components/core/board-view/all-boards.tsx
index 9aa29e7c4..d4e995403 100644
--- a/apps/app/components/core/board-view/all-boards.tsx
+++ b/apps/app/components/core/board-view/all-boards.tsx
@@ -1,5 +1,3 @@
-// react-beautiful-dnd
-import { DragDropContext, DropResult } from "react-beautiful-dnd";
 // hooks
 import useIssueView from "hooks/use-issue-view";
 // components
@@ -15,7 +13,7 @@ type Props = {
   addIssueToState: (groupTitle: string, stateId: string | null) => void;
   openIssuesListModal?: (() => void) | null;
   handleDeleteIssue: (issue: IIssue) => void;
-  handleOnDragEnd: (result: DropResult) => void;
+  handleTrashBox: (isDragging: boolean) => void;
   userAuth: UserAuth;
 };
 
@@ -27,7 +25,7 @@ export const AllBoards: React.FC<Props> = ({
   addIssueToState,
   openIssuesListModal,
   handleDeleteIssue,
-  handleOnDragEnd,
+  handleTrashBox,
   userAuth,
 }) => {
   const { groupedByIssues, groupByProperty: selectedGroup, orderBy } = useIssueView(issues);
@@ -36,42 +34,41 @@ export const AllBoards: React.FC<Props> = ({
     <>
       {groupedByIssues ? (
         <div className="h-[calc(100vh-157px)] lg:h-[calc(100vh-115px)] w-full">
-          <DragDropContext onDragEnd={handleOnDragEnd}>
-            <div className="h-full w-full overflow-hidden">
-              <div className="h-full w-full">
-                <div className="flex h-full gap-x-4 overflow-x-auto overflow-y-hidden">
-                  {Object.keys(groupedByIssues).map((singleGroup, index) => {
-                    const stateId =
-                      selectedGroup === "state_detail.name"
-                        ? states?.find((s) => s.name === singleGroup)?.id ?? null
-                        : null;
+          <div className="h-full w-full overflow-hidden">
+            <div className="h-full w-full">
+              <div className="flex h-full gap-x-4 overflow-x-auto overflow-y-hidden">
+                {Object.keys(groupedByIssues).map((singleGroup, index) => {
+                  const stateId =
+                    selectedGroup === "state_detail.name"
+                      ? states?.find((s) => s.name === singleGroup)?.id ?? null
+                      : null;
 
-                    const bgColor =
-                      selectedGroup === "state_detail.name"
-                        ? states?.find((s) => s.name === singleGroup)?.color
-                        : "#000000";
+                  const bgColor =
+                    selectedGroup === "state_detail.name"
+                      ? states?.find((s) => s.name === singleGroup)?.color
+                      : "#000000";
 
-                    return (
-                      <SingleBoard
-                        key={index}
-                        type={type}
-                        bgColor={bgColor}
-                        groupTitle={singleGroup}
-                        groupedByIssues={groupedByIssues}
-                        selectedGroup={selectedGroup}
-                        members={members}
-                        addIssueToState={() => addIssueToState(singleGroup, stateId)}
-                        handleDeleteIssue={handleDeleteIssue}
-                        openIssuesListModal={openIssuesListModal ?? null}
-                        orderBy={orderBy}
-                        userAuth={userAuth}
-                      />
-                    );
-                  })}
-                </div>
+                  return (
+                    <SingleBoard
+                      key={index}
+                      type={type}
+                      bgColor={bgColor}
+                      groupTitle={singleGroup}
+                      groupedByIssues={groupedByIssues}
+                      selectedGroup={selectedGroup}
+                      members={members}
+                      addIssueToState={() => addIssueToState(singleGroup, stateId)}
+                      handleDeleteIssue={handleDeleteIssue}
+                      openIssuesListModal={openIssuesListModal ?? null}
+                      orderBy={orderBy}
+                      handleTrashBox={handleTrashBox}
+                      userAuth={userAuth}
+                    />
+                  );
+                })}
               </div>
             </div>
-          </DragDropContext>
+          </div>
         </div>
       ) : (
         <div className="flex h-full w-full items-center justify-center">Loading...</div>
diff --git a/apps/app/components/core/board-view/single-board.tsx b/apps/app/components/core/board-view/single-board.tsx
index 82d789a07..2063f6e14 100644
--- a/apps/app/components/core/board-view/single-board.tsx
+++ b/apps/app/components/core/board-view/single-board.tsx
@@ -29,6 +29,7 @@ type Props = {
   handleDeleteIssue: (issue: IIssue) => void;
   openIssuesListModal?: (() => void) | null;
   orderBy: NestedKeyOf<IIssue> | "manual" | null;
+  handleTrashBox: (isDragging: boolean) => void;
   userAuth: UserAuth;
 };
 
@@ -43,6 +44,7 @@ export const SingleBoard: React.FC<Props> = ({
   handleDeleteIssue,
   openIssuesListModal,
   orderBy,
+  handleTrashBox,
   userAuth,
 }) => {
   // collapse/expand
@@ -89,17 +91,27 @@ export const SingleBoard: React.FC<Props> = ({
               {...provided.droppableProps}
             >
               {groupedByIssues[groupTitle].map((issue, index: number) => (
-                <SingleBoardIssue
-                  key={index}
+                <Draggable
+                  key={issue.id}
+                  draggableId={issue.id}
                   index={index}
-                  type={type}
-                  issue={issue}
-                  selectedGroup={selectedGroup}
-                  properties={properties}
-                  handleDeleteIssue={handleDeleteIssue}
-                  orderBy={orderBy}
-                  userAuth={userAuth}
-                />
+                  isDragDisabled={selectedGroup === "created_by"}
+                >
+                  {(provided, snapshot) => (
+                    <SingleBoardIssue
+                      key={index}
+                      provided={provided}
+                      snapshot={snapshot}
+                      type={type}
+                      issue={issue}
+                      properties={properties}
+                      handleDeleteIssue={handleDeleteIssue}
+                      orderBy={orderBy}
+                      handleTrashBox={handleTrashBox}
+                      userAuth={userAuth}
+                    />
+                  )}
+                </Draggable>
               ))}
               <span
                 style={{
diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx
index 59786ea7c..945592788 100644
--- a/apps/app/components/core/board-view/single-issue.tsx
+++ b/apps/app/components/core/board-view/single-issue.tsx
@@ -1,13 +1,13 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useEffect } from "react";
 
 import Link from "next/link";
 import { useRouter } from "next/router";
 
-import useSWR, { mutate } from "swr";
+import { mutate } from "swr";
 
 // react-beautiful-dnd
 import {
-  Draggable,
+  DraggableProvided,
   DraggableStateSnapshot,
   DraggingStyle,
   NotDraggingStyle,
@@ -37,24 +37,26 @@ import {
 import { CYCLE_ISSUES, MODULE_ISSUES, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
 
 type Props = {
-  index: number;
   type?: string;
+  provided: DraggableProvided;
+  snapshot: DraggableStateSnapshot;
   issue: IIssue;
-  selectedGroup: NestedKeyOf<IIssue> | null;
   properties: Properties;
   handleDeleteIssue: (issue: IIssue) => void;
   orderBy: NestedKeyOf<IIssue> | "manual" | null;
+  handleTrashBox: (isDragging: boolean) => void;
   userAuth: UserAuth;
 };
 
 export const SingleBoardIssue: React.FC<Props> = ({
-  index,
   type,
+  provided,
+  snapshot,
   issue,
-  selectedGroup,
   properties,
   handleDeleteIssue,
   orderBy,
+  handleTrashBox,
   userAuth,
 }) => {
   const router = useRouter();
@@ -151,90 +153,84 @@ export const SingleBoardIssue: React.FC<Props> = ({
 
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
+  useEffect(() => {
+    if (snapshot.isDragging) handleTrashBox(snapshot.isDragging);
+  }, [snapshot, handleTrashBox]);
+
   return (
-    <Draggable
-      key={issue.id}
-      draggableId={issue.id}
-      index={index}
-      isDragDisabled={selectedGroup === "created_by"}
+    <div
+      className={`rounded border bg-white shadow-sm ${
+        snapshot.isDragging ? "border-theme bg-indigo-50 shadow-lg" : ""
+      }`}
+      ref={provided.innerRef}
+      {...provided.draggableProps}
+      {...provided.dragHandleProps}
+      style={getStyle(provided.draggableProps.style, snapshot)}
     >
-      {(provided, snapshot) => (
-        <div
-          className={`rounded border bg-white shadow-sm ${
-            snapshot.isDragging ? "border-theme bg-indigo-50 shadow-lg" : ""
-          }`}
-          ref={provided.innerRef}
-          {...provided.draggableProps}
-          {...provided.dragHandleProps}
-          style={getStyle(provided.draggableProps.style, snapshot)}
-        >
-          <div className="group/card relative select-none p-2">
-            {!isNotAllowed && (
-              <div className="absolute top-1.5 right-1.5 z-10 opacity-0 group-hover/card:opacity-100">
-                <button
-                  type="button"
-                  className="grid h-7 w-7 place-items-center rounded bg-white p-1 text-red-500 outline-none duration-300 hover:bg-red-50"
-                  onClick={() => handleDeleteIssue(issue)}
-                >
-                  <TrashIcon className="h-4 w-4" />
-                </button>
+      <div className="group/card relative select-none p-2">
+        {!isNotAllowed && (
+          <div className="absolute top-1.5 right-1.5 z-10 opacity-0 group-hover/card:opacity-100">
+            <button
+              type="button"
+              className="grid h-7 w-7 place-items-center rounded bg-white p-1 text-red-500 outline-none duration-300 hover:bg-red-50"
+              onClick={() => handleDeleteIssue(issue)}
+            >
+              <TrashIcon className="h-4 w-4" />
+            </button>
+          </div>
+        )}
+        <Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
+          <a>
+            {properties.key && (
+              <div className="mb-2 text-xs font-medium text-gray-500">
+                {issue.project_detail.identifier}-{issue.sequence_id}
               </div>
             )}
-            <Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
-              <a>
-                {properties.key && (
-                  <div className="mb-2 text-xs font-medium text-gray-500">
-                    {issue.project_detail.identifier}-{issue.sequence_id}
-                  </div>
-                )}
-                <h5
-                  className="mb-3 text-sm group-hover:text-theme"
-                  style={{ lineClamp: 3, WebkitLineClamp: 3 }}
-                >
-                  {issue.name}
-                </h5>
-              </a>
-            </Link>
-            <div className="flex flex-wrap items-center gap-x-1 gap-y-2 text-xs">
-              {properties.priority && (
-                <ViewPrioritySelect
-                  issue={issue}
-                  partialUpdateIssue={partialUpdateIssue}
-                  isNotAllowed={isNotAllowed}
-                  position="left"
-                />
-              )}
-              {properties.state && (
-                <ViewStateSelect
-                  issue={issue}
-                  partialUpdateIssue={partialUpdateIssue}
-                  isNotAllowed={isNotAllowed}
-                />
-              )}
-              {properties.due_date && (
-                <ViewDueDateSelect
-                  issue={issue}
-                  partialUpdateIssue={partialUpdateIssue}
-                  isNotAllowed={isNotAllowed}
-                />
-              )}
-              {properties.sub_issue_count && (
-                <div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
-                  {issue.sub_issues_count}{" "}
-                  {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
-                </div>
-              )}
-              {properties.assignee && (
-                <ViewAssigneeSelect
-                  issue={issue}
-                  partialUpdateIssue={partialUpdateIssue}
-                  isNotAllowed={isNotAllowed}
-                />
-              )}
+            <h5
+              className="mb-3 text-sm group-hover:text-theme"
+              style={{ lineClamp: 3, WebkitLineClamp: 3 }}
+            >
+              {issue.name}
+            </h5>
+          </a>
+        </Link>
+        <div className="flex flex-wrap items-center gap-x-1 gap-y-2 text-xs">
+          {properties.priority && (
+            <ViewPrioritySelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              isNotAllowed={isNotAllowed}
+              position="left"
+            />
+          )}
+          {properties.state && (
+            <ViewStateSelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              isNotAllowed={isNotAllowed}
+            />
+          )}
+          {properties.due_date && (
+            <ViewDueDateSelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              isNotAllowed={isNotAllowed}
+            />
+          )}
+          {properties.sub_issue_count && (
+            <div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
+              {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
             </div>
-          </div>
+          )}
+          {properties.assignee && (
+            <ViewAssigneeSelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              isNotAllowed={isNotAllowed}
+            />
+          )}
         </div>
-      )}
-    </Draggable>
+      </div>
+    </div>
   );
 };
diff --git a/apps/app/components/core/issues-view.tsx b/apps/app/components/core/issues-view.tsx
index ec4c5b688..2edb7f804 100644
--- a/apps/app/components/core/issues-view.tsx
+++ b/apps/app/components/core/issues-view.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import useSWR, { mutate } from "swr";
 
 // react-beautiful-dnd
-import { DropResult } from "react-beautiful-dnd";
+import { DragDropContext, DropResult } from "react-beautiful-dnd";
 // services
 import issuesService from "services/issues.service";
 import stateService from "services/state.service";
@@ -16,6 +16,9 @@ import useIssueView from "hooks/use-issue-view";
 // components
 import { AllLists, AllBoards } from "components/core";
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
+import StrictModeDroppable from "components/dnd/StrictModeDroppable";
+// icons
+import { TrashIcon } from "@heroicons/react/24/outline";
 // helpers
 import { getStatesList } from "helpers/state.helper";
 // types
@@ -58,6 +61,9 @@ export const IssuesView: React.FC<Props> = ({
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
   const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
 
+  // trash box
+  const [trashBox, setTrashBox] = useState(false);
+
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
 
@@ -78,271 +84,308 @@ export const IssuesView: React.FC<Props> = ({
       : null
   );
 
+  const handleDeleteIssue = useCallback(
+    (issue: IIssue) => {
+      setDeleteIssueModal(true);
+      setIssueToDelete(issue);
+    },
+    [setDeleteIssueModal, setIssueToDelete]
+  );
+
   const handleOnDragEnd = useCallback(
     (result: DropResult) => {
+      setTrashBox(false);
+
       if (!result.destination || !workspaceSlug || !projectId) return;
 
       const { source, destination } = result;
 
       const draggedItem = groupedByIssues[source.droppableId][source.index];
 
-      if (source.droppableId !== destination.droppableId) {
-        const sourceGroup = source.droppableId; // source group id
-        const destinationGroup = destination.droppableId; // destination group id
+      if (destination.droppableId === "trashBox") {
+        handleDeleteIssue(draggedItem);
+      } else {
+        if (source.droppableId !== destination.droppableId) {
+          const sourceGroup = source.droppableId; // source group id
+          const destinationGroup = destination.droppableId; // destination group id
 
-        if (!sourceGroup || !destinationGroup) return;
+          if (!sourceGroup || !destinationGroup) return;
 
-        if (selectedGroup === "priority") {
-          // update the removed item for mutation
-          draggedItem.priority = destinationGroup;
+          if (selectedGroup === "priority") {
+            // update the removed item for mutation
+            draggedItem.priority = destinationGroup;
 
-          if (cycleId)
-            mutate<CycleIssueResponse[]>(
-              CYCLE_ISSUES(cycleId as string),
+            if (cycleId)
+              mutate<CycleIssueResponse[]>(
+                CYCLE_ISSUES(cycleId as string),
+                (prevData) => {
+                  if (!prevData) return prevData;
+                  const updatedIssues = prevData.map((issue) => {
+                    if (issue.issue_detail.id === draggedItem.id) {
+                      return {
+                        ...issue,
+                        issue_detail: {
+                          ...draggedItem,
+                          priority: destinationGroup,
+                        },
+                      };
+                    }
+                    return issue;
+                  });
+                  return [...updatedIssues];
+                },
+                false
+              );
+
+            if (moduleId)
+              mutate<ModuleIssueResponse[]>(
+                MODULE_ISSUES(moduleId as string),
+                (prevData) => {
+                  if (!prevData) return prevData;
+                  const updatedIssues = prevData.map((issue) => {
+                    if (issue.issue_detail.id === draggedItem.id) {
+                      return {
+                        ...issue,
+                        issue_detail: {
+                          ...draggedItem,
+                          priority: destinationGroup,
+                        },
+                      };
+                    }
+                    return issue;
+                  });
+                  return [...updatedIssues];
+                },
+                false
+              );
+
+            mutate<IssueResponse>(
+              PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
               (prevData) => {
                 if (!prevData) return prevData;
-                const updatedIssues = prevData.map((issue) => {
-                  if (issue.issue_detail.id === draggedItem.id) {
+
+                const updatedIssues = prevData.results.map((issue) => {
+                  if (issue.id === draggedItem.id)
                     return {
-                      ...issue,
-                      issue_detail: {
-                        ...draggedItem,
-                        priority: destinationGroup,
-                      },
+                      ...draggedItem,
+                      priority: destinationGroup,
                     };
-                  }
+
                   return issue;
                 });
-                return [...updatedIssues];
+
+                return {
+                  ...prevData,
+                  results: updatedIssues,
+                };
               },
               false
             );
 
-          if (moduleId)
-            mutate<ModuleIssueResponse[]>(
-              MODULE_ISSUES(moduleId as string),
-              (prevData) => {
-                if (!prevData) return prevData;
-                const updatedIssues = prevData.map((issue) => {
-                  if (issue.issue_detail.id === draggedItem.id) {
-                    return {
-                      ...issue,
-                      issue_detail: {
-                        ...draggedItem,
-                        priority: destinationGroup,
-                      },
-                    };
-                  }
-                  return issue;
-                });
-                return [...updatedIssues];
-              },
-              false
-            );
+            // patch request
+            issuesService
+              .patchIssue(workspaceSlug as string, projectId as string, draggedItem.id, {
+                priority: destinationGroup,
+              })
+              .then((res) => {
+                if (cycleId) mutate(CYCLE_ISSUES(cycleId as string));
+                if (moduleId) mutate(MODULE_ISSUES(moduleId as string));
 
-          mutate<IssueResponse>(
-            PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
-            (prevData) => {
-              if (!prevData) return prevData;
-
-              const updatedIssues = prevData.results.map((issue) => {
-                if (issue.id === draggedItem.id)
-                  return {
-                    ...draggedItem,
-                    priority: destinationGroup,
-                  };
-
-                return issue;
+                mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
               });
+          } else if (selectedGroup === "state_detail.name") {
+            const destinationState = states?.find((s) => s.name === destinationGroup);
+            const destinationStateId = destinationState?.id;
 
-              return {
-                ...prevData,
-                results: updatedIssues,
-              };
-            },
-            false
-          );
+            // update the removed item for mutation
+            if (!destinationStateId || !destinationState) return;
+            draggedItem.state = destinationStateId;
+            draggedItem.state_detail = destinationState;
 
-          // patch request
-          issuesService
-            .patchIssue(workspaceSlug as string, projectId as string, draggedItem.id, {
-              priority: destinationGroup,
-            })
-            .then((res) => {
-              if (cycleId) mutate(CYCLE_ISSUES(cycleId as string));
-              if (moduleId) mutate(MODULE_ISSUES(moduleId as string));
+            if (cycleId)
+              mutate<CycleIssueResponse[]>(
+                CYCLE_ISSUES(cycleId as string),
+                (prevData) => {
+                  if (!prevData) return prevData;
+                  const updatedIssues = prevData.map((issue) => {
+                    if (issue.issue_detail.id === draggedItem.id) {
+                      return {
+                        ...issue,
+                        issue_detail: {
+                          ...draggedItem,
+                          state_detail: destinationState,
+                          state: destinationStateId,
+                        },
+                      };
+                    }
+                    return issue;
+                  });
+                  return [...updatedIssues];
+                },
+                false
+              );
 
-              mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
-            });
-        } else if (selectedGroup === "state_detail.name") {
-          const destinationState = states?.find((s) => s.name === destinationGroup);
-          const destinationStateId = destinationState?.id;
+            if (moduleId)
+              mutate<ModuleIssueResponse[]>(
+                MODULE_ISSUES(moduleId as string),
+                (prevData) => {
+                  if (!prevData) return prevData;
+                  const updatedIssues = prevData.map((issue) => {
+                    if (issue.issue_detail.id === draggedItem.id) {
+                      return {
+                        ...issue,
+                        issue_detail: {
+                          ...draggedItem,
+                          state_detail: destinationState,
+                          state: destinationStateId,
+                        },
+                      };
+                    }
+                    return issue;
+                  });
+                  return [...updatedIssues];
+                },
+                false
+              );
 
-          // update the removed item for mutation
-          if (!destinationStateId || !destinationState) return;
-          draggedItem.state = destinationStateId;
-          draggedItem.state_detail = destinationState;
-
-          if (cycleId)
-            mutate<CycleIssueResponse[]>(
-              CYCLE_ISSUES(cycleId as string),
+            mutate<IssueResponse>(
+              PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
               (prevData) => {
                 if (!prevData) return prevData;
-                const updatedIssues = prevData.map((issue) => {
-                  if (issue.issue_detail.id === draggedItem.id) {
+
+                const updatedIssues = prevData.results.map((issue) => {
+                  if (issue.id === draggedItem.id)
                     return {
-                      ...issue,
-                      issue_detail: {
-                        ...draggedItem,
-                        state_detail: destinationState,
-                        state: destinationStateId,
-                      },
+                      ...draggedItem,
+                      state_detail: destinationState,
+                      state: destinationStateId,
                     };
-                  }
+
                   return issue;
                 });
-                return [...updatedIssues];
+
+                return {
+                  ...prevData,
+                  results: updatedIssues,
+                };
               },
               false
             );
 
-          if (moduleId)
-            mutate<ModuleIssueResponse[]>(
-              MODULE_ISSUES(moduleId as string),
-              (prevData) => {
-                if (!prevData) return prevData;
-                const updatedIssues = prevData.map((issue) => {
-                  if (issue.issue_detail.id === draggedItem.id) {
-                    return {
-                      ...issue,
-                      issue_detail: {
-                        ...draggedItem,
-                        state_detail: destinationState,
-                        state: destinationStateId,
-                      },
-                    };
-                  }
-                  return issue;
-                });
-                return [...updatedIssues];
-              },
-              false
-            );
+            // patch request
+            issuesService
+              .patchIssue(workspaceSlug as string, projectId as string, draggedItem.id, {
+                state: destinationStateId,
+              })
+              .then((res) => {
+                if (cycleId) mutate(CYCLE_ISSUES(cycleId as string));
+                if (moduleId) mutate(MODULE_ISSUES(moduleId as string));
 
-          mutate<IssueResponse>(
-            PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
-            (prevData) => {
-              if (!prevData) return prevData;
-
-              const updatedIssues = prevData.results.map((issue) => {
-                if (issue.id === draggedItem.id)
-                  return {
-                    ...draggedItem,
-                    state_detail: destinationState,
-                    state: destinationStateId,
-                  };
-
-                return issue;
+                mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
               });
-
-              return {
-                ...prevData,
-                results: updatedIssues,
-              };
-            },
-            false
-          );
-
-          // patch request
-          issuesService
-            .patchIssue(workspaceSlug as string, projectId as string, draggedItem.id, {
-              state: destinationStateId,
-            })
-            .then((res) => {
-              if (cycleId) mutate(CYCLE_ISSUES(cycleId as string));
-              if (moduleId) mutate(MODULE_ISSUES(moduleId as string));
-
-              mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
-            });
+          }
         }
       }
     },
-    [workspaceSlug, cycleId, moduleId, groupedByIssues, projectId, selectedGroup, states]
+    [
+      workspaceSlug,
+      cycleId,
+      moduleId,
+      groupedByIssues,
+      projectId,
+      selectedGroup,
+      states,
+      handleDeleteIssue,
+    ]
   );
 
-  const addIssueToState = (groupTitle: string, stateId: string | null) => {
-    setCreateIssueModal(true);
-    if (selectedGroup)
-      setPreloadedData({
-        state: stateId ?? undefined,
-        [selectedGroup]: groupTitle,
-        actionType: "createIssue",
+  const addIssueToState = useCallback(
+    (groupTitle: string, stateId: string | null) => {
+      setCreateIssueModal(true);
+      if (selectedGroup)
+        setPreloadedData({
+          state: stateId ?? undefined,
+          [selectedGroup]: groupTitle,
+          actionType: "createIssue",
+        });
+      else setPreloadedData({ actionType: "createIssue" });
+    },
+    [setCreateIssueModal, setPreloadedData, selectedGroup]
+  );
+
+  const handleEditIssue = useCallback(
+    (issue: IIssue) => {
+      setEditIssueModal(true);
+      setIssueToEdit({
+        ...issue,
+        actionType: "edit",
+        cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null,
+        module: issue.issue_module ? issue.issue_module.module : null,
       });
-    else setPreloadedData({ actionType: "createIssue" });
-  };
+    },
+    [setEditIssueModal, setIssueToEdit]
+  );
 
-  const handleEditIssue = (issue: IIssue) => {
-    setEditIssueModal(true);
-    setIssueToEdit({
-      ...issue,
-      actionType: "edit",
-      cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null,
-      module: issue.issue_module ? issue.issue_module.module : null,
-    });
-  };
+  const removeIssueFromCycle = useCallback(
+    (bridgeId: string) => {
+      if (!workspaceSlug || !projectId) return;
 
-  const handleDeleteIssue = (issue: IIssue) => {
-    setDeleteIssueModal(true);
-    setIssueToDelete(issue);
-  };
+      mutate<CycleIssueResponse[]>(
+        CYCLE_ISSUES(cycleId as string),
+        (prevData) => prevData?.filter((p) => p.id !== bridgeId),
+        false
+      );
 
-  const removeIssueFromCycle = (bridgeId: string) => {
-    if (!workspaceSlug || !projectId) return;
+      issuesService
+        .removeIssueFromCycle(
+          workspaceSlug as string,
+          projectId as string,
+          cycleId as string,
+          bridgeId
+        )
+        .then((res) => {
+          console.log(res);
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+    },
+    [workspaceSlug, projectId, cycleId]
+  );
 
-    mutate<CycleIssueResponse[]>(
-      CYCLE_ISSUES(cycleId as string),
-      (prevData) => prevData?.filter((p) => p.id !== bridgeId),
-      false
-    );
+  const removeIssueFromModule = useCallback(
+    (bridgeId: string) => {
+      if (!workspaceSlug || !projectId) return;
 
-    issuesService
-      .removeIssueFromCycle(
-        workspaceSlug as string,
-        projectId as string,
-        cycleId as string,
-        bridgeId
-      )
-      .then((res) => {
-        console.log(res);
-      })
-      .catch((e) => {
-        console.log(e);
-      });
-  };
+      mutate<ModuleIssueResponse[]>(
+        MODULE_ISSUES(moduleId as string),
+        (prevData) => prevData?.filter((p) => p.id !== bridgeId),
+        false
+      );
 
-  const removeIssueFromModule = (bridgeId: string) => {
-    if (!workspaceSlug || !projectId) return;
+      modulesService
+        .removeIssueFromModule(
+          workspaceSlug as string,
+          projectId as string,
+          moduleId as string,
+          bridgeId
+        )
+        .then((res) => {
+          console.log(res);
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+    },
+    [workspaceSlug, projectId, moduleId]
+  );
 
-    mutate<ModuleIssueResponse[]>(
-      MODULE_ISSUES(moduleId as string),
-      (prevData) => prevData?.filter((p) => p.id !== bridgeId),
-      false
-    );
-
-    modulesService
-      .removeIssueFromModule(
-        workspaceSlug as string,
-        projectId as string,
-        moduleId as string,
-        bridgeId
-      )
-      .then((res) => {
-        console.log(res);
-      })
-      .catch((e) => {
-        console.log(e);
-      });
-  };
+  const handleTrashBox = useCallback(
+    (isDragging: boolean) => {
+      if (isDragging && !trashBox) setTrashBox(true);
+    },
+    [trashBox, setTrashBox]
+  );
 
   return (
     <>
@@ -364,38 +407,59 @@ export const IssuesView: React.FC<Props> = ({
         isOpen={deleteIssueModal}
         data={issueToDelete}
       />
-      {issueView === "list" ? (
-        <AllLists
-          type={type}
-          issues={issues}
-          states={states}
-          members={members}
-          addIssueToState={addIssueToState}
-          handleEditIssue={handleEditIssue}
-          handleDeleteIssue={handleDeleteIssue}
-          openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
-          removeIssue={
-            type === "cycle"
-              ? removeIssueFromCycle
-              : type === "module"
-              ? removeIssueFromModule
-              : null
-          }
-          userAuth={userAuth}
-        />
-      ) : (
-        <AllBoards
-          type={type}
-          issues={issues}
-          states={states}
-          members={members}
-          addIssueToState={addIssueToState}
-          openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
-          handleDeleteIssue={handleDeleteIssue}
-          handleOnDragEnd={handleOnDragEnd}
-          userAuth={userAuth}
-        />
-      )}
+
+      <div className="relative">
+        <DragDropContext onDragEnd={handleOnDragEnd}>
+          <StrictModeDroppable droppableId="trashBox">
+            {(provided, snapshot) => (
+              <div
+                className={`${
+                  trashBox ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
+                } fixed z-20 top-12 left-1/2 -translate-x-1/2 flex items-center gap-2 bg-red-100 border-2 border-red-500 p-3 text-xs rounded ${
+                  snapshot.isDraggingOver ? "bg-red-500 text-white" : ""
+                } duration-200`}
+                ref={provided.innerRef}
+                {...provided.droppableProps}
+              >
+                <TrashIcon className="h-3 w-3" />
+                Drop issue here to delete
+              </div>
+            )}
+          </StrictModeDroppable>
+          {issueView === "list" ? (
+            <AllLists
+              type={type}
+              issues={issues}
+              states={states}
+              members={members}
+              addIssueToState={addIssueToState}
+              handleEditIssue={handleEditIssue}
+              handleDeleteIssue={handleDeleteIssue}
+              openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
+              removeIssue={
+                type === "cycle"
+                  ? removeIssueFromCycle
+                  : type === "module"
+                  ? removeIssueFromModule
+                  : null
+              }
+              userAuth={userAuth}
+            />
+          ) : (
+            <AllBoards
+              type={type}
+              issues={issues}
+              states={states}
+              members={members}
+              addIssueToState={addIssueToState}
+              openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
+              handleDeleteIssue={handleDeleteIssue}
+              handleTrashBox={handleTrashBox}
+              userAuth={userAuth}
+            />
+          )}
+        </DragDropContext>
+      </div>
     </>
   );
 };