diff --git a/src/app/features/itineraries/components/pages/suggestions/Suggestions.tsx b/src/app/features/itineraries/components/pages/suggestions/Suggestions.tsx new file mode 100644 index 000000000..0a6610a5d --- /dev/null +++ b/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 = ({ 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 && } + { items.length > 0 + ? + : !isBusy + ?

Geen resultaten gevonden.

+ : null + } + + ) +} + +export default Suggestions diff --git a/src/app/features/itineraries/components/pages/suggestions/SuggestionsPage.tsx b/src/app/features/itineraries/components/pages/suggestions/SuggestionsPage.tsx index 84f7d33c9..a4f956d98 100644 --- a/src/app/features/itineraries/components/pages/suggestions/SuggestionsPage.tsx +++ b/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() - 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() + const { location, isBusy } = useGeoLocation() return ( Voeg een zaak toe aan je looplijst { isBusy && } - { items.length > 0 - ? - : !isBusy - ?

Geen resultaten gevonden.

- : null - } + { itineraryId && !isBusy && ( + + )}
) } diff --git a/src/app/features/shared/hooks/useGeoLocation/useGeoLocation.ts b/src/app/features/shared/hooks/useGeoLocation/useGeoLocation.ts new file mode 100644 index 000000000..9eea4ccbc --- /dev/null +++ b/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(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 } +} diff --git a/src/app/state/rest/index.ts b/src/app/state/rest/index.ts index 5d1c06327..013c0f44c 100644 --- a/src/app/state/rest/index.ts +++ b/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