Prototype de récupération des dernières positions

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)

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() {
       <RLayer id="railwaymap-layer" type="raster" source="railwaymap-source" paint={{"raster-opacity": 0.7}} />
 
       <UserLocation />
+      <DownloadedLocation />
     </RMap>
   )
 }
@@ -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 ? <RMarker longitude={userLocation?.longitude} latitude={userLocation?.latitude} /> : <></>
+  return <>
+    <RSource id="accuracy-radius-2" type="geojson" data={accuracyCircle} />
+    <RLayer id="accuracy-radius-fill-2" type="fill" source="accuracy-radius-2" paint={{"fill-color": "pink", "fill-opacity": 0.4}} />
+    <RLayer id="accuracy-radius-border-2" type="line" source="accuracy-radius-2" paint={{"line-color": "red", "line-opacity": 0.4}} />
+    {marker}
+  </>
+}

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()