feat: send mobile-app param to 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.11.0",
+    "@graasp/map": "github:graasp/graasp-map#open-in-player-mobile",
     "@graasp/query-client": "3.5.0",
     "@graasp/sdk": "4.7.6",
     "@graasp/translations": "1.27.0",

src/components/item/MapView.tsx

@@ -1,28 +1,76 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
-import { Stack, Typography } from '@mui/material';
+import { Skeleton, Stack, Typography } from '@mui/material';
 
 import { Map } from '@graasp/map';
-import { type DiscriminatedItem, ItemGeolocation, redirect } from '@graasp/sdk';
+import { type DiscriminatedItem, ItemGeolocation } from '@graasp/sdk';
 import { useMobileView } from '@graasp/ui';
 
-import { buildGraaspPlayerView } from '@/config/externalPaths';
 import { hooks, mutations } from '@/config/queryClient';
-import { buildPlayerTabName } from '@/config/selectors';
 
 import NewItemModal from '../main/NewItemModal';
 
 type Props = {
   parentId?: DiscriminatedItem['id'];
   title?: string;
   height?: string;
+  viewItem: (item: DiscriminatedItem) => void;
 };
 
-const MapView = ({ parentId, title, height = '100vh' }: Props): JSX.Element => {
+const options = {
+  enableHighAccuracy: true,
+  timeout: 5000,
+  maximumAge: 0,
+};
+
+const useCurrentLocation = () => {
+  const [hasFetchedCurrentLocation, setHasFetchedCurrentLocation] =
+    useState<boolean>(false);
+
+  const [currentPosition, setCurrentPosition] = useState<{
+    lat: number;
+    lng: number;
+  }>();
+
+  // get current location
+  useEffect(() => {
+    if (navigator.geolocation.getCurrentPosition) {
+      const success = (pos: {
+        coords: { latitude: number; longitude: number };
+      }) => {
+        const crd = pos.coords;
+        setCurrentPosition({ lat: crd.latitude, lng: crd.longitude });
+        setHasFetchedCurrentLocation(true);
+      };
+
+      navigator.geolocation.getCurrentPosition(
+        success,
+        (err: { code: number; message: string }) => {
+          // eslint-disable-next-line no-console
+          console.warn(`ERROR(${err.code}): ${err.message}`);
+          setHasFetchedCurrentLocation(true);
+        },
+        options,
+      );
+    } else {
+      setHasFetchedCurrentLocation(true);
+    }
+  }, []);
+
+  return { hasFetchedCurrentLocation, currentPosition };
+};
+
+const MapView = ({
+  parentId,
+  title,
+  height = '100vh',
+  viewItem,
+}: Props): JSX.Element => {
   const { data: currentMember } = hooks.useCurrentMember();
   const { isMobile } = useMobileView();
   const [geolocation, setGeolocation] = useState<Partial<ItemGeolocation>>();
   const [open, setOpen] = useState(false);
+  const { hasFetchedCurrentLocation, currentPosition } = useCurrentLocation();
 
   const handleAddOnClick = (args: { location: Partial<ItemGeolocation> }) => {
     setGeolocation(args.location);
@@ -34,6 +82,10 @@ const MapView = ({ parentId, title, height = '100vh' }: Props): JSX.Element => {
     setOpen(false);
   };
 
+  if (!hasFetchedCurrentLocation) {
+    return <Skeleton width="100%" height="100%" />;
+  }
+
   return (
     <>
       <Stack height={height}>
@@ -47,18 +99,14 @@ const MapView = ({ parentId, title, height = '100vh' }: Props): JSX.Element => {
         <Stack flex={1}>
           <div style={{ width: '100%', height: '100%' }}>
             <Map
+              currentPosition={currentPosition}
               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,
-                });
-              }}
+              viewItem={viewItem}
               currentMember={currentMember}
               itemId={parentId}
               // use builder modal to add new item if the screen is big enough

src/components/main/Items.tsx

@@ -1,5 +1,7 @@
-import { DiscriminatedItem } from '@graasp/sdk';
+import { DiscriminatedItem, redirect } from '@graasp/sdk';
 
+import { buildGraaspPlayerView } from '@/config/externalPaths';
+import { buildPlayerTabName } from '@/config/selectors';
 import { ShowOnlyMeChangeType } from '@/config/types';
 
 import { hooks } from '../../config/queryClient';
@@ -76,9 +78,23 @@ const Items = ({
     itemsTags,
   });
   switch (mode) {
-    case ItemLayoutMode.Map:
-      // todo: change when we deal with item screen
-      return <MapView title={title} parentId={parentId} height="90%" />;
+    case ItemLayoutMode.Map: {
+      const viewItem = (item: DiscriminatedItem) => {
+        redirect(window, buildGraaspPlayerView(item.id), {
+          name: buildPlayerTabName(item.id),
+          openInNewTab: true,
+        });
+      };
+
+      return (
+        <MapView
+          viewItem={viewItem}
+          title={title}
+          parentId={parentId}
+          height="90%"
+        />
+      );
+    }
     case ItemLayoutMode.Grid:
       return (
         <ItemsGrid

src/components/pages/MapItemsScreen.tsx

@@ -1,12 +1,48 @@
 import { useSearchParams } from 'react-router-dom';
 
+import { DiscriminatedItem, redirect } from '@graasp/sdk';
+
+import { buildGraaspPlayerView } from '@/config/externalPaths';
+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();
 
-  return <MapView parentId={urlSearchParams.get('parentId') ?? undefined} />;
+  const isMobileApp = urlSearchParams.get('isMobileApp') === 'true';
+
+  const viewItem = (item: DiscriminatedItem) => {
+    if (isMobileApp) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      // eslint-disable-next-line no-lonely-if
+      if (window.ReactNativeWebView) {
+        // todo: replace with universal/deep link? not sure it works inside iframe..
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        window.ReactNativeWebView.postMessage(
+          JSON.stringify({ itemId: item.id, action: 'open-player' }),
+          '*',
+        );
+      } else {
+        console.error('cannot open item in mobile player');
+      }
+    } else {
+      redirect(window, buildGraaspPlayerView(item.id), {
+        name: buildPlayerTabName(item.id),
+        openInNewTab: true,
+      });
+    }
+  };
+
+  return (
+    <MapView
+      viewItem={viewItem}
+      parentId={urlSearchParams.get('parentId') ?? undefined}
+    />
+  );
 };
 
 export default MapItemScreen;