refactor: apply PR requested changes

graasp · Sep 27, 2024 · 8ac8fed · 8ac8fed
1 parent 4766945
commit 8ac8fed
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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} />;