feat: update map (#1248)

* feat: update map

* refactor: add view item in map

* fix: disable geolocation picker for inherited geoloc

* refactor: move to map in map

* refactor: show mode for all item types

* refactor: update map

package.json

@@ -20,7 +20,7 @@
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
     "@graasp/chatbox": "3.1.0",
-    "@graasp/map": "1.12.1",
+    "@graasp/map": "1.14.0",
     "@graasp/query-client": "3.9.0",
     "@graasp/sdk": "4.12.0",
     "@graasp/translations": "1.28.0",

src/components/item/MapView.tsx

@@ -16,6 +16,7 @@ type Props = {
   title?: string;
   height?: string;
   viewItem: (item: DiscriminatedItem) => void;
+  viewItemInBuilder: (item: DiscriminatedItem) => void;
   enableGeolocation?: boolean;
 };
 
@@ -83,6 +84,7 @@ const MapView = ({
   title,
   height = '100vh',
   viewItem,
+  viewItemInBuilder,
   enableGeolocation = true,
 }: Props): JSX.Element => {
   const { data: currentMember } = hooks.useCurrentMember();
@@ -131,6 +133,7 @@ const MapView = ({
                 useSuggestionsForAddress={hooks.useSuggestionsForAddress}
                 useItemsInMap={hooks.useItemsInMap}
                 viewItem={viewItem}
+                viewItemInBuilder={viewItemInBuilder}
                 currentMember={currentMember}
                 item={parent}
                 // use builder modal to add new item if the screen is big enough

src/components/item/header/ItemHeaderActions.tsx

@@ -2,7 +2,7 @@ import { useParams } from 'react-router-dom';
 
 import { Stack } from '@mui/material';
 
-import { ItemType, PermissionLevel, PermissionLevelCompare } from '@graasp/sdk';
+import { PermissionLevel, PermissionLevelCompare } from '@graasp/sdk';
 import { ChatboxButton } from '@graasp/ui';
 
 import EditButton from '@/components/common/EditButton';
@@ -82,10 +82,7 @@ const ItemHeaderActions = (): JSX.Element => {
   return (
     <Stack direction="row">
       {renderItemActions()}
-      {
-        // show only for content with tables : root or folders
-        (item?.type === ItemType.FOLDER || !item?.id) && <ModeButton />
-      }
+      <ModeButton />
     </Stack>
   );
 };

src/components/item/settings/GeolocationPicker.tsx

@@ -64,12 +64,16 @@ const GeolocationPicker = ({
           onChangeOption={onChangeOption}
           initialValue={geoloc?.addressLabel ?? undefined}
           useSuggestionsForAddress={hooks.useSuggestionsForAddress}
+          disabled={isDisabled}
         />
-        <Tooltip title={t(BUILDER.ITEM_SETTINGS_GEOLOCATION_CLEAR)}>
-          <IconButton onClick={clearGeoloc}>
-            <Clear />
-          </IconButton>
-        </Tooltip>
+        {/* show clear only if not disabled */}
+        {!isDisabled && (
+          <Tooltip title={t(BUILDER.ITEM_SETTINGS_GEOLOCATION_CLEAR)}>
+            <IconButton onClick={clearGeoloc}>
+              <Clear />
+            </IconButton>
+          </Tooltip>
+        )}
       </Stack>
       {isDisabled && (
         <Typography variant="caption">

src/components/main/Items.tsx

@@ -1,6 +1,10 @@
+import { useNavigate } from 'react-router';
+import { useSearchParams } from 'react-router-dom';
+
 import { DiscriminatedItem, PackedItem, redirect } from '@graasp/sdk';
 
 import { buildGraaspPlayerView } from '@/config/externalPaths';
+import { buildItemPath } from '@/config/paths';
 import { buildPlayerTabName } from '@/config/selectors';
 import { ShowOnlyMeChangeType } from '@/config/types';
 
@@ -63,6 +67,8 @@ const Items = ({
   showDropzoneHelper = false,
 }: Props): JSX.Element | null => {
   const { mode } = useLayoutContext();
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
   const itemsStatuses = useItemsStatuses({
     items,
   });
@@ -71,13 +77,21 @@ const Items = ({
       const viewItem = (item: DiscriminatedItem) => {
         redirect(window, buildGraaspPlayerView(item.id), {
           name: buildPlayerTabName(item.id),
-          openInNewTab: true,
+          openInNewTab: false,
+        });
+      };
+      const viewItemInBuilder = (item: DiscriminatedItem) => {
+        // navigate to item in map
+        navigate({
+          pathname: buildItemPath(item.id),
+          search: searchParams.toString(),
         });
       };
 
       return (
         <MapView
           viewItem={viewItem}
+          viewItemInBuilder={viewItemInBuilder}
           title={title}
           parentId={parentId}
           height="90%"

src/components/pages/MapItemsScreen.tsx

@@ -1,15 +1,17 @@
-import { useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 
 import { DiscriminatedItem, redirect } from '@graasp/sdk';
 
 import { buildGraaspPlayerView } from '@/config/externalPaths';
+import { buildItemPath } from '@/config/paths';
 import { buildPlayerTabName } from '@/config/selectors';
 
 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();
+  const navigate = useNavigate();
 
   const isMobileApp = urlSearchParams.get('isMobileApp') === 'true';
   const enableGeolocation = urlSearchParams.get('enableGeolocation')
@@ -30,9 +32,25 @@ const MapItemScreen = (): JSX.Element | null => {
     }
   };
 
+  const viewItemInBuilder = (item: DiscriminatedItem) => {
+    if (isMobileApp) {
+      // todo: replace with universal/deep link? not sure it works inside iframe..
+      window.parent.postMessage(
+        JSON.stringify({ item, action: 'open-builder' }),
+      );
+    } else {
+      // navigate to item in map
+      navigate({
+        pathname: buildItemPath(item.id),
+        search: urlSearchParams.toString(),
+      });
+    }
+  };
+
   return (
     <MapView
       viewItem={viewItem}
+      viewItemInBuilder={viewItemInBuilder}
       enableGeolocation={enableGeolocation}
       parentId={urlSearchParams.get('parentId') ?? undefined}
     />

yarn.lock

@@ -1540,9 +1540,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/map@npm:1.12.1":
-  version: 1.12.1
-  resolution: "@graasp/map@npm:1.12.1"
+"@graasp/map@npm:1.14.0":
+  version: 1.14.0
+  resolution: "@graasp/map@npm:1.14.0"
   dependencies:
     "@emotion/react": "npm:11.11.4"
     "@emotion/styled": "npm:11.11.5"
@@ -1577,7 +1577,7 @@ __metadata:
     react: "*"
     react-dom: "*"
     react-i18next: ^14.0.0
-  checksum: 10/4274d83b66105867ddebcb9a515dd528d3aa18b8036461b3e35e90333180e21ea8046f49af15fc54da22b108d34f32be6f9d3e784583cb6be8c1b178357f6b1f
+  checksum: 10/ab968e938b7133fdd110406865c364c5f4bb053702bec7441e2c488402c0e98c75fb49aece3225970d9a0119b3390c5eb16248284d3ca45dfba0b66fbd729a8b
   languageName: node
   linkType: hard
 
@@ -7918,7 +7918,7 @@ __metadata:
     "@emotion/react": "npm:11.11.4"
     "@emotion/styled": "npm:11.11.5"
     "@graasp/chatbox": "npm:3.1.0"
-    "@graasp/map": "npm:1.12.1"
+    "@graasp/map": "npm:1.14.0"
     "@graasp/query-client": "npm:3.9.0"
     "@graasp/sdk": "npm:4.12.0"
     "@graasp/translations": "npm:1.28.0"