feat: update map for mobile use (#1130)

* feat: add mobile map page

* refactor: update maps

* refactor: update from pr

package.json

@@ -20,7 +20,7 @@
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.0",
     "@graasp/chatbox": "3.1.0",
-    "@graasp/map": "1.5.0",
+    "@graasp/map": "1.6.0",
     "@graasp/query-client": "3.3.0",
     "@graasp/sdk": "4.6.0",
     "@graasp/translations": "1.25.3",

src/components/App.tsx

@@ -14,6 +14,7 @@ import {
   ITEM_PUBLISH_PATH,
   ITEM_SETTINGS_PATH,
   ITEM_SHARE_PATH,
+  MAP_ITEMS_PATH,
   PUBLISHED_ITEMS_PATH,
   RECYCLE_BIN_PATH,
   REDIRECT_PATH,
@@ -26,6 +27,7 @@ import Main from './main/Main';
 import Redirect from './main/Redirect';
 import BookmarkedItemsScreen from './pages/BookmarkedItemsScreen';
 import HomeScreen from './pages/HomeScreen';
+import MapItemsScreen from './pages/MapItemsScreen';
 import PublishedItemsScreen from './pages/PublishedItemsScreen';
 import RecycledItemsScreen from './pages/RecycledItemsScreen';
 import SharedItemsScreen from './pages/SharedItemsScreen';
@@ -84,6 +86,7 @@ const App = (): JSX.Element => {
 
   return (
     <Routes>
+      <Route path={MAP_ITEMS_PATH} element={<MapItemsScreen />} />
       <Route
         element={
           <Main>

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';
@@ -9,36 +9,43 @@ import { buildPlayerTabName } from '@/config/selectors';
 
 type Props = {
   parentId?: DiscriminatedItem['id'];
-  title: string;
+  title?: string;
+  height?: string;
 };
 
-const MapView = ({ parentId, title }: Props): JSX.Element => {
+const MapView = ({ parentId, title, height = '100vh' }: Props): JSX.Element => {
   const { data: currentMember } = hooks.useCurrentMember();
 
   return (
-    <>
-      <Typography variant="h4" sx={{ wordWrap: 'break-word' }}>
-        {title}
-      </Typography>
-      <div style={{ width: '100%', height: '80vh' }}>
-        <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>
   );
 };
 

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

src/components/pages/MapItemsScreen.tsx

@@ -0,0 +1,12 @@
+import { useSearchParams } from 'react-router-dom';
+
+import MapView from '../item/MapView';
+
+// this page is used by the mobile app to display the map
+const MapItemScreen = (): JSX.Element | null => {
+  const [urlSearchParams] = useSearchParams();
+
+  return <MapView parentId={urlSearchParams.get('parentId') ?? undefined} />;
+};
+
+export default MapItemScreen;

src/config/paths.ts

@@ -12,6 +12,7 @@ export const ITEM_ID_PARAMS = 'itemId';
 export const ITEM_SHARE_PATH = 'share';
 export const ITEM_PUBLISH_PATH = 'publish';
 export const ITEM_SETTINGS_PATH = 'settings';
+export const MAP_ITEMS_PATH = 'map';
 export const ITEM_INFORMATION_PATH = 'information';
 export const buildItemSettingsPath = (id = ':itemId'): string =>
   `${ITEMS_PATH}/${id}/${ITEM_SETTINGS_PATH}`;