From 8d6a357a7fe0314d7c675f20afa18c1fac7460f2 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Tue, 21 Feb 2023 19:11:54 +0530
Subject: [PATCH] refactor: manual ordering bugs (#312)

---
 .../core/board-view/single-board.tsx          |  4 +-
 .../core/board-view/single-issue.tsx          |  2 +-
 apps/app/components/core/issues-view.tsx      | 49 +++++++++++++------
 3 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/apps/app/components/core/board-view/single-board.tsx b/apps/app/components/core/board-view/single-board.tsx
index bf8694890..5fee43c88 100644
--- a/apps/app/components/core/board-view/single-board.tsx
+++ b/apps/app/components/core/board-view/single-board.tsx
@@ -86,7 +86,7 @@ export const SingleBoard: React.FC<Props> = ({
         <StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
           {(provided, snapshot) => (
             <div
-              className={`relative mt-3 h-full space-y-3 px-3 pb-3 ${
+              className={`relative mt-3 h-full px-3 pb-3 ${
                 snapshot.isDraggingOver ? "bg-indigo-50 bg-opacity-50" : ""
               } ${!isCollapsed ? "hidden" : "block"}`}
               ref={provided.innerRef}
@@ -104,7 +104,7 @@ export const SingleBoard: React.FC<Props> = ({
                       snapshot.isDraggingOver ? "block" : "hidden"
                     } top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 text-xs whitespace-nowrap bg-white p-2 rounded pointer-events-none z-[99999999]`}
                   >
-                    This board is order by {orderBy}
+                    This board is ordered by {orderBy}
                   </div>
                 </>
               )}
diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx
index 7f6f7d025..b8be079c5 100644
--- a/apps/app/components/core/board-view/single-issue.tsx
+++ b/apps/app/components/core/board-view/single-issue.tsx
@@ -188,7 +188,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
 
   return (
     <div
-      className={`rounded border bg-white shadow-sm ${
+      className={`rounded border bg-white shadow-sm mb-3 ${
         snapshot.isDragging ? "border-theme bg-indigo-50 shadow-lg" : ""
       }`}
       ref={provided.innerRef}
diff --git a/apps/app/components/core/issues-view.tsx b/apps/app/components/core/issues-view.tsx
index de63aef01..98526a2b0 100644
--- a/apps/app/components/core/issues-view.tsx
+++ b/apps/app/components/core/issues-view.tsx
@@ -116,20 +116,41 @@ export const IssuesView: React.FC<Props> = ({
           const destinationGroupArray = groupedByIssues[destination.droppableId];
 
           if (destinationGroupArray.length !== 0) {
-            if (destination.index === 0) newSortOrder = destinationGroupArray[0].sort_order - 10000;
-            else if (
-              (source.droppableId !== destination.droppableId &&
-                destination.index === destinationGroupArray.length) ||
-              (source.droppableId === destination.droppableId &&
-                destination.index === destinationGroupArray.length - 1)
-            )
-              newSortOrder =
-                destinationGroupArray[destinationGroupArray.length - 1].sort_order + 10000;
-            else
-              newSortOrder =
-                (destinationGroupArray[destination.index - 1].sort_order +
-                  destinationGroupArray[destination.index].sort_order) /
-                2;
+            // check if dropping in the same group
+            if (source.droppableId === destination.droppableId) {
+              // check if dropping at beginning
+              if (destination.index === 0)
+                newSortOrder = destinationGroupArray[0].sort_order - 10000;
+              // check if dropping at last
+              else if (destination.index === destinationGroupArray.length - 1)
+                newSortOrder =
+                  destinationGroupArray[destinationGroupArray.length - 1].sort_order + 10000;
+              else {
+                if (destination.index > source.index)
+                  newSortOrder =
+                    (destinationGroupArray[source.index + 1].sort_order +
+                      destinationGroupArray[source.index + 2].sort_order) /
+                    2;
+                else if (destination.index < source.index)
+                  newSortOrder =
+                    (destinationGroupArray[source.index - 1].sort_order +
+                      destinationGroupArray[source.index - 2].sort_order) /
+                    2;
+              }
+            } else {
+              // check if dropping at beginning
+              if (destination.index === 0)
+                newSortOrder = destinationGroupArray[0].sort_order - 10000;
+              // check if dropping at last
+              else if (destination.index === destinationGroupArray.length)
+                newSortOrder =
+                  destinationGroupArray[destinationGroupArray.length - 1].sort_order + 10000;
+              else
+                newSortOrder =
+                  (destinationGroupArray[destination.index - 1].sort_order +
+                    destinationGroupArray[destination.index].sort_order) /
+                  2;
+            }
           }
 
           draggedItem.sort_order = newSortOrder;