refactor: update from pr

graasp · Apr 11, 2024 · 0e7390a · 0e7390a
1 parent 6830b66
commit 0e7390a
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 36 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -83,11 +83,10 @@ const App = (): JSX.Element => {
     RecycledItemsScreen,
     withAuthorizationProps,
   );
-  const MapWithAuthorization = MapItemsScreen;
 
   return (
     <Routes>
-      <Route path={MAP_ITEMS_PATH} element={<MapWithAuthorization />} />
+      <Route path={MAP_ITEMS_PATH} element={<MapItemsScreen />} />
       <Route
         element={
           <Main>

diff --git a/src/components/item/MapView.tsx b/src/components/item/MapView.tsx
@@ -1,4 +1,4 @@
-import { Typography } from '@mui/material';
+import { Stack, Typography } from '@mui/material';
 
 import { Map } from '@graasp/map';
 import { type DiscriminatedItem, redirect } from '@graasp/sdk';
@@ -13,35 +13,39 @@ type Props = {
   height?: string;
 };
 
-const MapView = ({ parentId, title, height = '80vh' }: Props): JSX.Element => {
+const MapView = ({ parentId, title, height = '100vh' }: Props): JSX.Element => {
   const { data: currentMember } = hooks.useCurrentMember();
 
   return (
-    <>
-      {title && (
-        <Typography variant="h4" sx={{ wordWrap: 'break-word' }}>
-          {title}
-        </Typography>
-      )}
-      <div style={{ width: '100%', height }}>
-        <Map
-          useDeleteItemGeolocation={mutations.useDeleteItemGeolocation}
-          usePostItem={mutations.usePostItem}
-          useRecycleItems={mutations.useRecycleItems}
-          useAddressFromGeolocation={hooks.useAddressFromGeolocation}
-          useSuggestionsForAddress={hooks.useSuggestionsForAddress}
-          useItemsInMap={hooks.useItemsInMap}
-          viewItem={(item) => {
-            redirect(window, buildGraaspPlayerView(item.id), {
-              name: buildPlayerTabName(item.id),
-              openInNewTab: true,
-            });
-          }}
-          currentMember={currentMember}
-          itemId={parentId}
-        />
-      </div>
-    </>
+    <Stack height={height}>
+      <Stack>
+        {title && (
+          <Typography variant="h4" sx={{ wordWrap: 'break-word' }}>
+            {title}
+          </Typography>
+        )}
+      </Stack>
+      <Stack flex={1}>
+        <div style={{ width: '100%', height: '100%' }}>
+          <Map
+            useDeleteItemGeolocation={mutations.useDeleteItemGeolocation}
+            usePostItem={mutations.usePostItem}
+            useRecycleItems={mutations.useRecycleItems}
+            useAddressFromGeolocation={hooks.useAddressFromGeolocation}
+            useSuggestionsForAddress={hooks.useSuggestionsForAddress}
+            useItemsInMap={hooks.useItemsInMap}
+            viewItem={(item) => {
+              redirect(window, buildGraaspPlayerView(item.id), {
+                name: buildPlayerTabName(item.id),
+                openInNewTab: true,
+              });
+            }}
+            currentMember={currentMember}
+            itemId={parentId}
+          />
+        </div>
+      </Stack>
+    </Stack>
   );
 };
 

diff --git a/src/components/main/Items.tsx b/src/components/main/Items.tsx
@@ -77,7 +77,8 @@ const Items = ({
   });
   switch (mode) {
     case ItemLayoutMode.Map:
-      return <MapView title={title} parentId={parentId} />;
+      // todo: change when we deal with item screen
+      return <MapView title={title} parentId={parentId} height="90%" />;
     case ItemLayoutMode.Grid:
       return (
         <ItemsGrid

diff --git a/src/components/pages/MapItemsScreen.tsx b/src/components/pages/MapItemsScreen.tsx
@@ -6,12 +6,7 @@ import MapView from '../item/MapView';
 const MapItemScreen = (): JSX.Element | null => {
   const [urlSearchParams] = useSearchParams();
 
-  return (
-    <MapView
-      parentId={urlSearchParams.get('parentId') ?? undefined}
-      height="100vh"
-    />
-  );
+  return <MapView parentId={urlSearchParams.get('parentId') ?? undefined} />;
 };
 
 export default MapItemScreen;