feat: disable zoom in button when location denied

src/pages/Maps/Content/MapView/ButtonZoomIn.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useState } from 'react'
+import { Tooltip } from 'react-tooltip'
+import { Button } from 'oa-components'
+import { logger } from 'src/logger'
+
+import { GetLocation } from '../../utils/geolocation'
+
+interface IProps {
+  setCenter: (ILatLng) => void
+  setZoom: (number) => void
+}
+
+const ZOOM_IN_TOOLTIP = 'Zoom in to your location'
+const DENIED_TOOLTIP = 'Request to get your location already denied'
+
+export const ButtonZoomIn = ({ setCenter, setZoom }: IProps) => {
+  const [isDisabled, setIsDisabled] = useState<boolean>(false)
+
+  useEffect(() => {
+    navigator.permissions.query({ name: 'geolocation' }).then((result) => {
+      if (result.state === 'denied') {
+        setIsDisabled(true)
+      }
+    })
+  }, [])
+
+  const promptUserLocation = async () => {
+    try {
+      const position = await GetLocation()
+      setCenter({
+        lat: position.coords.latitude,
+        lng: position.coords.longitude,
+      })
+    } catch (error) {
+      if (error === 'User denied geolocation prompt') {
+        setIsDisabled(true)
+      }
+      logger.error(error)
+    }
+  }
+
+  const sx = {
+    backgroundColor: 'white',
+    borderRadius: 99,
+    padding: 4,
+    ':hover': {
+      backgroundColor: 'lightgray',
+    },
+  }
+
+  return (
+    <>
+      <Button
+        data-tooltip-content={isDisabled ? DENIED_TOOLTIP : ZOOM_IN_TOOLTIP}
+        data-cy="LocationViewButton"
+        data-tooltip-id="locationButton-tooltip"
+        sx={sx}
+        onClick={() => {
+          promptUserLocation()
+          setZoom(9)
+        }}
+        disabled={isDisabled}
+        icon="gps-location"
+      />
+      <Tooltip id="locationButton-tooltip" place="left" />
+    </>
+  )
+}

src/pages/Maps/Content/MapView/MapList.tsx

@@ -97,7 +97,7 @@ export const MapList = (props: IProps) => {
             justifyContent: 'center',
             paddingBottom: 2,
             position: 'absolute',
-            zIndex: 1000,
+            zIndex: 2,
             width: '100%',
           }}
         >

src/pages/Maps/Content/MapView/MapView.tsx

@@ -1,10 +1,9 @@
 import { useEffect } from 'react'
 import { Tooltip } from 'react-tooltip'
 import { Button, Map } from 'oa-components'
-import { logger } from 'src/logger'
 import { Box, Flex } from 'theme-ui'
 
-import { GetLocation } from '../../utils/geolocation'
+import { ButtonZoomIn } from './ButtonZoomIn'
 import { Clusters } from './Cluster.client'
 import { Popup } from './Popup.client'
 
@@ -29,7 +28,6 @@ interface IProps {
   zoom: number
 }
 
-const ZOOM_IN_TOOLTIP = 'Zoom in to your location'
 const ZOOM_OUT_TOOLTIP = 'Zoom out to world view'
 
 export const MapView = (props: IProps) => {
@@ -58,18 +56,6 @@ export const MapView = (props: IProps) => {
     },
   }
 
-  const promptUserLocation = async () => {
-    try {
-      const position = await GetLocation()
-      setCenter({
-        lat: position.coords.latitude,
-        lng: position.coords.longitude,
-      })
-    } catch (error) {
-      logger.error(error)
-    }
-  }
-
   const handleLocationChange = () => {
     if (mapRef.current) {
       const boundaries = mapRef.current.leafletElement.getBounds()
@@ -111,24 +97,13 @@ export const MapView = (props: IProps) => {
           top: 0,
           right: 0,
           padding: 4,
-          zIndex: 1000,
+          zIndex: 4000,
           display: 'flex',
           flexDirection: 'column',
           gap: 2,
         }}
       >
-        <Button
-          data-tooltip-content={ZOOM_IN_TOOLTIP}
-          data-cy="LocationViewButton"
-          data-tooltip-id="locationButton-tooltip"
-          sx={buttonStyle}
-          onClick={() => {
-            promptUserLocation()
-            setZoom(9)
-          }}
-          icon="gps-location"
-        />
-        <Tooltip id="locationButton-tooltip" place="left" />
+        <ButtonZoomIn setCenter={setCenter} setZoom={setZoom} />
 
         <Button
           data-tooltip-content={ZOOM_OUT_TOOLTIP}