temporary last position fix

twentyhq · Dec 13, 2024 · 9b80864 · 9b80864
1 parent e2b7d15
commit 9b80864
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx
@@ -157,6 +157,11 @@ export const CurrentWorkspaceMemberFavorites = ({
                 ref={provided.innerRef}
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...provided.droppableProps}
+                style={{
+                  marginBottom: 15,
+                }}
+                // TODO: (Drag Drop Bug) Adding bottom margin to ensure drag-to-last-position works. Need to find better solution that doesn't affect spacing.
+                // Issue: Without margin, dragging to last position triggers next folder drop area
               >
                 {folder.favorites.map((favorite, index) => (
                   <DraggableItem

diff --git a/.../twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx b/.../twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx
@@ -30,7 +30,7 @@ import styled from '@emotion/styled';
 import { DragDropContext } from '@hello-pangea/dnd';
 
 const StyledEmptyContainer = styled.div`
-  height: 10px;
+  height: ${({ theme }) => theme.spacing(2.5)};
   width: 100%;
 `;
 

diff --git a/packages/twenty-front/src/modules/favorites/hooks/useReorderFavorite.ts b/packages/twenty-front/src/modules/favorites/hooks/useReorderFavorite.ts
@@ -1,8 +1,10 @@
 import { useSortedFavorites } from '@/favorites/hooks/useSortedFavorites';
+import { activeFavoriteFolderIdState } from '@/favorites/states/activeFavoriteFolderIdState';
 import { calculateNewPosition } from '@/favorites/utils/calculateNewPosition';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { OnDragEndResponder } from '@hello-pangea/dnd';
+import { useSetRecoilState } from 'recoil';
 import { usePrefetchedFavoritesData } from './usePrefetchedFavoritesData';
 
 export const useReorderFavorite = () => {
@@ -11,13 +13,15 @@ export const useReorderFavorite = () => {
   const { updateOneRecord: updateOneFavorite } = useUpdateOneRecord({
     objectNameSingular: CoreObjectNameSingular.Favorite,
   });
+  const setActiveFavoriteFolderId = useSetRecoilState(
+    activeFavoriteFolderIdState,
+  );
 
   const handleReorderFavorite: OnDragEndResponder = (result) => {
     const { destination, source, draggableId } = result;
 
     if (!destination) return;
 
-    // If dropped in the same location, do nothing
     if (
       destination.droppableId === source.droppableId &&
       destination.index === source.index
@@ -28,7 +32,6 @@ export const useReorderFavorite = () => {
     const draggedFavorite = favorites.find((f) => f.id === draggableId);
     if (!draggedFavorite) return;
 
-    // When dropping on a folder header (folder is closed)
     if (destination.droppableId.startsWith('folder-header-')) {
       const targetFolderId = destination.droppableId.replace(
         'folder-header-',
@@ -52,10 +55,11 @@ export const useReorderFavorite = () => {
           position: newPosition,
         },
       });
+
+      setActiveFavoriteFolderId(targetFolderId);
       return;
     }
 
-    // When moving between different lists (different folders or orphan section)
     if (destination.droppableId !== source.droppableId) {
       const newFolderId =
         destination.droppableId === 'orphan-favorites'
@@ -66,7 +70,6 @@ export const useReorderFavorite = () => {
         (favorite) => favorite.favoriteFolderId === newFolderId,
       );
 
-      // Calculate position in new list
       let newPosition;
       if (destinationFavorites.length === 0) {
         newPosition = 0;
@@ -93,7 +96,6 @@ export const useReorderFavorite = () => {
       return;
     }
 
-    // When reordering within the same list
     const currentFolderId =
       source.droppableId === 'orphan-favorites'
         ? null