diff --git a/src/components/ErrorGeoLocation.jsx b/src/components/ErrorGeoLocation.jsx new file mode 100644 index 0000000..d290c87 --- /dev/null +++ b/src/components/ErrorGeoLocation.jsx @@ -0,0 +1,25 @@ +import { MdError } from "react-icons/md"; +import { Button, Text, VStack } from "@chakra-ui/react"; +import { useRouter } from "next/router"; + +export default function LoadingPage() { + const router = useRouter(); + + return ( + + + + Veillez à autoriser la géolocalisation + + + + ); +} diff --git a/src/components/layout/map/MapComponent.tsx b/src/components/layout/map/MapComponent.tsx index 985d01d..0323830 100644 --- a/src/components/layout/map/MapComponent.tsx +++ b/src/components/layout/map/MapComponent.tsx @@ -10,7 +10,7 @@ import "leaflet/dist/leaflet.css"; export default function MapComponent(props: any) { const { location, listBars } = props; - const toast = useToast({ position: "top" }); + const toast = useToast({ position: "bottom" }); const idToastError = "error_location"; @@ -43,6 +43,7 @@ export default function MapComponent(props: any) { center={location} zoom={13} minZoom={8} + zoomControl={false} style={{ width: "100vw", height: "100vw", diff --git a/src/pages/map.tsx b/src/pages/map.tsx index 4287850..37e0f15 100644 --- a/src/pages/map.tsx +++ b/src/pages/map.tsx @@ -7,6 +7,7 @@ import { useMutation, useQuery } from "@tanstack/react-query"; import LoadingPage from "@/components/LoadingPage"; import ErrorPage from "@/components/ErrorPage"; +import ErrorGeolocation from "@/components/ErrorGeolocation"; import Navbar from "@/components/Navbar"; export default function Map() { @@ -14,6 +15,8 @@ export default function Map() { null as unknown as number, null as unknown as number, ]); + + const [geolocationError, setGeolocationError] = useState(false); const toast = useToast({ position: "bottom" }); const idSaveToast = "saved_location"; const { data: session, status } = useSession(); @@ -101,16 +104,34 @@ export default function Map() { }, }); + const geolocationOptions = { + enableHighAccuracy: true, + timeout: 5000, + maximumAge: 0, + }; + useEffect(() => { - navigator.geolocation.getCurrentPosition((position) => { - setLocation([position.coords.latitude, position.coords.longitude]); - if (!loggedUser) return; - userSetLocation.mutate( - `${position.coords.latitude},${position.coords.longitude}` - ); - }); + navigator.geolocation.getCurrentPosition( + successPosition, + errorPosition, + geolocationOptions + ); }, [loggedUser]); + function successPosition(position: GeolocationPosition) { + setLocation([position.coords.latitude, position.coords.longitude]); + setGeolocationError(false); + + if (!loggedUser) return; + userSetLocation.mutate( + `${position.coords.latitude},${position.coords.longitude}` + ); + } + + function errorPosition(error: GeolocationPositionError) { + setGeolocationError(true); + } + const MapWithNoSSR = dynamic( () => import("../components/layout/map/MapComponent"), { @@ -120,10 +141,12 @@ export default function Map() { return ( <> - {isLoading || isLoadingListBars ? ( - + {geolocationError ? ( + ) : isError || isErrorListBars ? ( + ) : isLoading || isLoadingListBars ? ( + ) : ( <>