Won 56 test huidige locatie gebruiker ophalen in top

src/app/features/itineraries/components/pages/suggestions/Suggestions.tsx

@@ -0,0 +1,36 @@
+import React, { useMemo } from "react"
+import { useSuggestions } from "app/state/rest"
+import { useItinerary } from "app/state/rest/custom/useItinerary"
+import ItineraryItemCardList from "app/features/itineraries/components/organisms/ItineraryItemCardList/ItineraryItemCardList"
+import { casesToCardCaseProps } from "app/features/itineraries/utils/mapCaseToCardProps"
+import CenteredSpinner from "app/features/shared/components/atoms/CenteredSpinner/CenteredSpinner"
+
+type Props = {
+  itineraryId: number
+  lat?: number
+  lng?: number
+}
+
+const Suggestions: React.FC<Props> = ({ itineraryId, lat, lng }) => {
+  const { data: itinerary } = useItinerary(itineraryId)
+  const { data, isBusy } = useSuggestions(itineraryId, lat, lng)
+
+  const items = useMemo(
+    () => casesToCardCaseProps(data?.cases, itinerary, true),
+    [itinerary, data]
+  )
+
+  return (
+    <>
+      { isBusy && <CenteredSpinner explanation="Zaken ophalen…" size={ 60 } /> }
+      { items.length > 0
+        ? <ItineraryItemCardList items={ items } title="Zaken rondom de adressen in je lijst:" />
+        : !isBusy
+          ? <p>Geen resultaten gevonden.</p>
+          : null
+      }
+    </>
+  )
+}
+
+export default Suggestions

src/app/features/itineraries/components/pages/suggestions/SuggestionsPage.tsx

@@ -1,35 +1,30 @@
-import React, { useMemo } from "react"
+import React from "react"
 import { useParams } from "react-router-dom"
 import { Heading } from "@amsterdam/asc-ui"
-import { useSuggestions } from "app/state/rest"
-import { useItinerary } from "app/state/rest/custom/useItinerary"
 import DefaultLayout from "app/features/shared/components/layouts/DefaultLayout/DefaultLayout"
-import ItineraryItemCardList
-  from "app/features/itineraries/components/organisms/ItineraryItemCardList/ItineraryItemCardList"
-import { casesToCardCaseProps } from "app/features/itineraries/utils/mapCaseToCardProps"
 import CenteredSpinner from "app/features/shared/components/atoms/CenteredSpinner/CenteredSpinner"
+import Suggestions from "./Suggestions"
+import { useGeoLocation } from "app/features/shared/hooks/useGeoLocation/useGeoLocation" 
 
-type Props = {
+type Params = {
   itineraryId: string
 }
 
 const SuggestionsPage: React.FC = () => {
-  const { itineraryId } = useParams<Props>()
-  const { data: itinerary } = useItinerary(parseInt(itineraryId!))
-  const { data, isBusy } = useSuggestions(parseInt(itineraryId!))
-
-  const items = useMemo(() => casesToCardCaseProps(data?.cases, itinerary, true), [ itinerary, data ])
+  const { itineraryId } = useParams<Params>()
+  const { location, isBusy } = useGeoLocation()
 
   return (
     <DefaultLayout>
       <Heading>Voeg een zaak toe aan je looplijst</Heading>
       { isBusy && <CenteredSpinner explanation="Zaken ophalen…" size={ 60 } /> }
-      { items.length > 0
-        ? <ItineraryItemCardList items={ items } title="Zaken rondom de adressen in je lijst:" />
-        : !isBusy
-          ? <p>Geen resultaten gevonden.</p>
-          : null
-      }
+      { itineraryId && !isBusy && (
+        <Suggestions 
+          itineraryId={ parseInt(itineraryId) }
+          lat={ location?.latitude }
+          lng={ location?.longitude }
+        />
+      )}
     </DefaultLayout>
   )
 }

src/app/features/shared/hooks/useGeoLocation/useGeoLocation.ts

@@ -0,0 +1,47 @@
+import { useState, useCallback, useEffect } from "react"
+
+type Coordinates = {
+  latitude: number
+  longitude: number
+}
+
+type UseLocationReturn = {
+  location: Coordinates | null
+  isBusy: boolean
+  getLocation: () => void
+}
+
+export const useGeoLocation = (): UseLocationReturn => {
+  const [isBusy, setIsBusy] = useState(true)
+  const [location, setLocation] = useState<Coordinates | null>(null)
+
+  const getLocation = useCallback(() => {
+    if (!navigator.geolocation) {
+      console.log("TOP: Geolocation is not supported by your browser")
+      setIsBusy(false)
+      return
+    }
+
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        const { latitude, longitude } = position.coords
+        setLocation({ latitude, longitude })
+      },
+      (err) => {
+        console.log("TOP error geolocation:", err.message)
+      },
+      {
+        enableHighAccuracy: true, // Use high accuracy if available
+        timeout: 10000, // Timeout in milliseconds
+        maximumAge: 0 // Do not use cached location
+      }
+    )
+    setIsBusy(false)
+  }, [])
+
+  useEffect(() => {
+    getLocation()
+  }, [getLocation])
+
+  return { location, isBusy, getLocation }
+}

src/app/state/rest/index.ts

@@ -64,11 +64,16 @@ export const useItineraryItem = (id: number | string, options?: Options) => {
   })
 }
 
-export const useSuggestions = (itineraryId: number, options?: Options) => {
+export const useSuggestions = (
+  itineraryId: number, 
+  lat?: number, 
+  lng?: number, 
+  options?: Options
+) => {
   const handleError = useErrorHandler()
   return useApiRequest<{ cases: Case[] }>({
     ...options,
-    url: makeGatewayUrl([ "itineraries", itineraryId, "suggestions" ]),
+    url: makeGatewayUrl([ "itineraries", itineraryId, "suggestions" ], { lat, lng }),
     groupName: "itineraries",
     handleError,
     isProtected: true