diff --git a/client/components/GeolocationProvider.tsx b/client/components/GeolocationProvider.tsx index a5a89ca..a7f4363 100644 --- a/client/components/GeolocationProvider.tsx +++ b/client/components/GeolocationProvider.tsx @@ -3,6 +3,7 @@ import { useAuth } from '@/hooks/useAuth' import { useQueuedLocations, useUnqueueLocation } from '@/hooks/useLocation' import { useGeolocationMutation } from '@/hooks/mutations/useGeolocationMutation' import { useStartGeolocationServiceEffect } from '@/utils/geolocation' +import { Platform } from 'react-native' export default function GeolocationProvider({ children }: { children: ReactNode }) { useStartGeolocationServiceEffect() @@ -20,7 +21,7 @@ export default function GeolocationProvider({ children }: { children: ReactNode }) useEffect(() => { - if (geolocationsQueue.length === 0 || geolocationMutation.isPending) + if (geolocationsQueue.length === 0 || geolocationMutation.isPending || Platform.OS === "web") return const locToSend = geolocationsQueue[0] geolocationMutation.mutate(locToSend) diff --git a/client/components/Map.web.tsx b/client/components/Map.web.tsx index eb4ea1b..32fa375 100644 --- a/client/components/Map.web.tsx +++ b/client/components/Map.web.tsx @@ -1,8 +1,10 @@ +import { useAuth } from "@/hooks/useAuth" import { useLastOwnLocation } from "@/hooks/useLocation" +import { useQuery } from "@tanstack/react-query" import { circle } from "@turf/circle" import { type Map as MaplibreGLMap } from "maplibre-gl" import { RLayer, RMap, RMarker, RNavigationControl, RSource, useMap } from "maplibre-react-components" -import { useState } from "react" +import { useEffect, useMemo, useState } from "react" export default function Map() { return ( @@ -16,6 +18,7 @@ export default function Map() { + ) } @@ -37,3 +40,37 @@ function UserLocation() { {marker} } + +function DownloadedLocation() { + const auth = useAuth() + const query = useQuery({ + queryKey: ['get-last-locations'], + queryFn: () => fetch(`${process.env.EXPO_PUBLIC_TRAINTRAPE_MOI_SERVER}/geolocations/last-locations/`, { + method: "GET", + headers: { + "Authorization": `Bearer ${auth.token}`, + "Content-Type": "application/json", + }} + ).then(resp => resp.json()), + }) + useEffect(() => { + const interval = setInterval(() => query.refetch(), 5000) + return () => clearInterval(interval) + }, []) + console.log(query.data) + const userLocation = query.isSuccess ? query.data[0] : { longitude: 0, latitude: 0, accuracy: 0 } + const [firstUserPositionFetched, setFirstUserPositionFetched] = useState(false) + const map: MaplibreGLMap = useMap() + if (userLocation != null && !firstUserPositionFetched) { + setFirstUserPositionFetched(true) + map.flyTo({center: [userLocation.longitude, userLocation.latitude], zoom: 15}) + } + const accuracyCircle = useMemo(() => circle([userLocation?.longitude ?? 0, userLocation?.latitude ?? 0], userLocation?.accuracy ?? 0, {steps: 64, units: 'meters'}), [userLocation]) + const marker = userLocation ? : <> + return <> + + + + {marker} + +} diff --git a/client/utils/background.ts b/client/utils/background.ts index fc290f8..b1a2bb9 100644 --- a/client/utils/background.ts +++ b/client/utils/background.ts @@ -4,7 +4,7 @@ import { Platform } from 'react-native' import { useEffect } from 'react' const BACKGROUND_FETCH_TASK = "background-fetch" -const BACKGROUND_FETCH_INTERVAL = 60 +const BACKGROUND_FETCH_INTERVAL = 60000 async function backgroundUpdate() { const now = Date.now()