fix: open in player mobile (#115)

* feat: open in player in mobile

* refactor: use isMobileApp, remove current loc

package.json

@@ -58,7 +58,7 @@
     "@emotion/styled": "11.11.5",
     "@graasp/sdk": "4.7.1",
     "@graasp/translations": "1.23.0",
-    "@graasp/ui": "4.9.3",
+    "@graasp/ui": "4.17.1",
     "@mui/icons-material": "5.15.15",
     "@mui/lab": "5.0.0-alpha.170",
     "@mui/material": "5.15.15",

src/components/CountryForm/CountryForm.tsx

@@ -101,6 +101,7 @@ const CountryForm = ({
           <TextField
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...params}
+            sx={{ background: 'transparent' }}
             InputProps={{
               ...params.InputProps,
               sx: { borderRadius: '15px' },

src/components/Map.css

@@ -1,11 +1,3 @@
-/* .leaflet-geosearch-bar input{
-  background-color: white;
-  color: black;
-}
-.leaflet-geosearch-bar .results{
-  color: black;
-  
-} */
 .leaflet-geosearch-bar .results div {
   text-align: start;
 }

src/components/Map.tsx

@@ -1,8 +1,6 @@
 import { useEffect, useState } from 'react';
 import { MapContainer, TileLayer } from 'react-leaflet';
 
-import { Skeleton } from '@mui/material';
-
 import { DEFAULT_LANG } from '@graasp/translations';
 
 import 'leaflet-easybutton/src/easy-button.css';
@@ -21,12 +19,6 @@ import MapContent from './map/MapContent';
 
 type Props = QueryClientContextInterface;
 
-const options = {
-  enableHighAccuracy: true,
-  timeout: 5000,
-  maximumAge: 0,
-};
-
 const Map = ({
   itemId,
   currentMember,
@@ -38,47 +30,16 @@ const Map = ({
   viewItem,
   useDeleteItemGeolocation,
   handleAddOnClick,
+  currentPosition,
 }: Props): JSX.Element => {
   const [showMap, setShowMap] = useState<boolean>(false);
-  const [hasFetchedCurrentLocation, setHasFetchedCurrentLocation] =
-    useState<boolean>(false);
-
-  const [currentPosition, setCurrentPosition] = useState<{
-    lat: number;
-    lng: number;
-  }>();
 
   useEffect(() => {
     if (currentMember) {
       i18n.changeLanguage(currentMember.extra.lang ?? DEFAULT_LANG);
     }
   }, [currentMember]);
 
-  // get current location
-  useEffect(() => {
-    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,
-    );
-  }, []);
-
-  if (!hasFetchedCurrentLocation) {
-    return <Skeleton width="100%" height="100%" />;
-  }
-
   return (
     <QueryClientContextProvider
       itemId={itemId}
@@ -91,6 +52,7 @@ const Map = ({
       viewItem={viewItem}
       handleAddOnClick={handleAddOnClick}
       useDeleteItemGeolocation={useDeleteItemGeolocation}
+      currentPosition={currentPosition}
     >
       <div
         style={{

src/components/map/CountryContent.tsx

@@ -39,7 +39,6 @@ const CountryContent = ({
           transform: 'translate(-50%, -50%)',
           position: 'absolute',
           zIndex: 450,
-          background: 'white',
           borderRadius: 15,
         }}
       >

src/components/map/ViewButton.tsx

@@ -11,9 +11,14 @@ type Props = {
 
 const ViewButton = ({ item }: Props): JSX.Element => {
   const { viewItem } = useQueryClientContext();
+
   return (
     <Tooltip title="View item in Graasp Player">
-      <IconButton onClick={() => viewItem(item)}>
+      <IconButton
+        onClick={() => {
+          viewItem(item);
+        }}
+      >
         <VisibilityIcon />
       </IconButton>
     </Tooltip>