Disabling not working 'locate me' button on desktops

Problematy · Sep 6, 2024 · 30d12b2 · 30d12b2
1 parent 1786780
commit 30d12b2
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,9 @@
 # x.x.x
 - Feature: Suggesting new points button
 
+# 0.2.3
+- Fix: Disabled the navigate me button on desktop (it was not working) 
+
 # 0.2.2
 - Fix: No more typo in reporting issues
 - Fix: Navigate me button have pin in third party maps

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@problematy/goodmap",
-    "version": "0.2.2",
+    "version": "0.2.3",
     "engines": {
         "node": ">=16.0.0"
     },
@@ -70,6 +70,7 @@
         "npm": "^10.2.4",
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
+        "react-device-detect": "^2.2.3",
         "react-dom": "^18.2.0",
         "react-leaflet": "^4.2.1",
         "react-leaflet-cluster": "^2.1.0",

diff --git a/src/components/MarkerPopup/MarkerPopup.jsx b/src/components/MarkerPopup/MarkerPopup.jsx
@@ -5,6 +5,7 @@ import { Marker, Popup } from 'react-leaflet';
 import { buttonStyleSmall } from '../../styles/buttonStyle';
 import ExploreIcon from '@mui/icons-material/Explore';
 import { ReportProblemForm } from './ReportProblemForm';
+import { isMobile } from 'react-device-detect';
 
 const isCustomValue = value => typeof value === 'object' && !(value instanceof Array);
 
@@ -31,6 +32,27 @@ PopupDataRow.propTypes = {
     ]).isRequired,
 };
 
+const NavigateMeButton = ({ place }) => {
+    return (
+        <a
+            href={`geo:${place.position[0]},${place.position[1]}?q=${place.position[0]},${place.position[1]}`}
+            style={{ textDecoration: 'none' }}
+        >
+            <p
+                style={{
+                    ...buttonStyleSmall,
+                    justifyContent: 'center',
+                    display: 'flex',
+                    alignItems: 'center',
+                }}
+            >
+                <ExploreIcon style={{ color: 'white', marginRight: '10px' }} />
+                <span>Navigate me</span>
+            </p>
+        </a>
+    );
+};
+
 export const MarkerContent = ({ place }) => {
     const categoriesWithSubcategories = Object.entries(place.data);
     const [showForm, setShowForm] = useState(false);
@@ -44,22 +66,7 @@ export const MarkerContent = ({ place }) => {
                 <p className="point-subtitle mt-0 mb-2">{place.subtitle}</p>
                 {categoriesWithSubcategories.map(mapDataToPopupContent)}
             </div>
-            <a
-                href={`geo:${place.position[0]},${place.position[1]}?q=${place.position[0]},${place.position[1]}`}
-                style={{ textDecoration: 'none' }}
-            >
-                <p
-                    style={{
-                        ...buttonStyleSmall,
-                        justifyContent: 'center',
-                        display: 'flex',
-                        alignItems: 'center',
-                    }}
-                >
-                    <ExploreIcon style={{ color: 'white', marginRight: '10px' }} />
-                    <span>Navigate me</span>
-                </p>
-            </a>
+            {isMobile && <NavigateMeButton place={place} />}
 
             <p onClick={toggleForm} style={{ cursor: 'pointer', textAlign: 'right', color: 'red' }}>
                 report a problem