From 8ac8fed126fc6ec0abad7c9fa95ce24b52db125e Mon Sep 17 00:00:00 2001
From: kim <kim.phanhoang@epfl.ch>
Date: Fri, 27 Sep 2024 09:47:02 +0200
Subject: [PATCH] refactor: apply PR requested changes

---
 src/components/item/FolderContent.tsx         | 15 +++++------
 src/components/main/list/useDragSelection.tsx | 26 ++++++++++++++++++-
 src/components/pages/RecycledItemsScreen.tsx  | 16 +++++-------
 src/components/pages/home/HomeScreen.tsx      | 15 +++++------
 4 files changed, 43 insertions(+), 29 deletions(-)

diff --git a/src/components/item/FolderContent.tsx b/src/components/item/FolderContent.tsx
index 23a082687..975814933 100644
--- a/src/components/item/FolderContent.tsx
+++ b/src/components/item/FolderContent.tsx
@@ -29,7 +29,10 @@ import {
   SelectionContextProvider,
   useSelectionContext,
 } from '../main/list/SelectionContext';
-import { useDragSelection } from '../main/list/useDragSelection';
+import {
+  DragContainerStack,
+  useDragSelection,
+} from '../main/list/useDragSelection';
 import { DesktopMap } from '../map/DesktopMap';
 import NoItemFilters from '../pages/NoItemFilters';
 import { OutletType } from '../pages/item/type';
@@ -75,13 +78,7 @@ const Content = ({
   if (items?.length) {
     return (
       <>
-        <Stack
-          // this is a hack to allow selection dragging from margin
-          mx={-100}
-          px={100}
-          height="100%"
-          id={CONTAINER_ID}
-        >
+        <DragContainerStack id={CONTAINER_ID}>
           <ItemsTable
             selectedIds={selectedIds}
             enableMoveInBetween={sortBy === SortingOptionsForFolder.Order}
@@ -100,7 +97,7 @@ const Content = ({
               />
             </Stack>
           )}
-        </Stack>
+        </DragContainerStack>
         {DragSelection}
       </>
     );
diff --git a/src/components/main/list/useDragSelection.tsx b/src/components/main/list/useDragSelection.tsx
index b75c12876..f7b7ee989 100644
--- a/src/components/main/list/useDragSelection.tsx
+++ b/src/components/main/list/useDragSelection.tsx
@@ -1,4 +1,6 @@
-import { useState } from 'react';
+import { ReactNode, useState } from 'react';
+
+import { Stack } from '@mui/material';
 
 import { PRIMARY_COLOR } from '@graasp/ui';
 
@@ -12,6 +14,28 @@ import { ITEM_CARD_CLASS } from '@/config/selectors';
 
 import { useSelectionContext } from './SelectionContext';
 
+export const DragContainerStack = ({
+  gap,
+  id,
+  children,
+}: {
+  gap?: number;
+  id: string;
+  children: ReactNode;
+}): JSX.Element => (
+  <Stack
+    // this is a hack to allow selection dragging from margin
+    // 100 is artbitrary big
+    mx={-100}
+    px={100}
+    height="100%"
+    id={id}
+    gap={gap}
+  >
+    {children}
+  </Stack>
+);
+
 export const useDragSelection = ({
   elementClass = ITEM_CARD_CLASS,
   containerId,
diff --git a/src/components/pages/RecycledItemsScreen.tsx b/src/components/pages/RecycledItemsScreen.tsx
index 99c88a5f1..0e219fbaa 100644
--- a/src/components/pages/RecycledItemsScreen.tsx
+++ b/src/components/pages/RecycledItemsScreen.tsx
@@ -21,7 +21,10 @@ import {
   SelectionContextProvider,
   useSelectionContext,
 } from '../main/list/SelectionContext';
-import { useDragSelection } from '../main/list/useDragSelection';
+import {
+  DragContainerStack,
+  useDragSelection,
+} from '../main/list/useDragSelection';
 import ItemCard from '../table/ItemCard';
 import SortingSelect from '../table/SortingSelect';
 import { SortingOptions } from '../table/types';
@@ -93,14 +96,7 @@ const RecycledItemsScreenContent = ({
               </Stack>
             )}
           </Stack>
-          <Stack
-            // this is a hack to allow selection dragging from margin
-            mx={-100}
-            px={100}
-            id={CONTAINER_ID}
-            gap={1}
-            height="100%"
-          >
+          <DragContainerStack id={CONTAINER_ID}>
             {
               // render the filtered data and when it is empty display that nothing matches the search
               filteredData?.length ? (
@@ -127,7 +123,7 @@ const RecycledItemsScreenContent = ({
                 </Alert>
               )
             }
-          </Stack>
+          </DragContainerStack>
         </Stack>
         {DragSelection}
       </>
diff --git a/src/components/pages/home/HomeScreen.tsx b/src/components/pages/home/HomeScreen.tsx
index 0f76f3332..4c858b336 100644
--- a/src/components/pages/home/HomeScreen.tsx
+++ b/src/components/pages/home/HomeScreen.tsx
@@ -17,7 +17,10 @@ import {
   SelectionContextProvider,
   useSelectionContext,
 } from '@/components/main/list/SelectionContext';
-import { useDragSelection } from '@/components/main/list/useDragSelection';
+import {
+  DragContainerStack,
+  useDragSelection,
+} from '@/components/main/list/useDragSelection';
 import { ITEM_PAGE_SIZE } from '@/config/constants';
 import { ShowOnlyMeChangeType } from '@/config/types';
 import { ItemLayoutMode, Ordering } from '@/enums';
@@ -107,13 +110,7 @@ const HomeScreenContent = ({ searchText }: { searchText: string }) => {
         ? data.pages.map(({ data: d }) => d.length).reduce((a, b) => a + b, 0)
         : 0;
       content = (
-        <Stack
-          // this is a hack to allow selection dragging from margin
-          mx={-100}
-          px={100}
-          id={CONTAINER_ID}
-          height="100%"
-        >
+        <DragContainerStack id={CONTAINER_ID}>
           <ItemsTable
             canMove={!searchText}
             id={ACCESSIBLE_ITEMS_TABLE_ID}
@@ -136,7 +133,7 @@ const HomeScreenContent = ({ searchText }: { searchText: string }) => {
               <NewItemButton type="icon" />
             </Stack>
           )}
-        </Stack>
+        </DragContainerStack>
       );
     } else if (itemTypes.length || searchText) {
       content = <NoItemFilters searchText={searchText} />;