From 9176eb014f893038f134741094f4863f51577441 Mon Sep 17 00:00:00 2001
From: Emmy D'Anello <emmy@luemy.eu>
Date: Wed, 11 Dec 2024 01:53:28 +0100
Subject: [PATCH] =?UTF-8?q?Prototype=20de=20r=C3=A9cup=C3=A9ration=20des?=
 =?UTF-8?q?=20derni=C3=A8res=20positions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/components/GeolocationProvider.tsx |  3 +-
 client/components/Map.web.tsx             | 39 ++++++++++++++++++++++-
 client/utils/background.ts                |  2 +-
 3 files changed, 41 insertions(+), 3 deletions(-)

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() {
       <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}
+  </>
+}
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()