From 5e61cabcdc846e20cc2c791c6bcccbbd3109f57b Mon Sep 17 00:00:00 2001
From: Emmy D'Anello <emmy@luemy.eu>
Date: Tue, 17 Dec 2024 23:06:20 +0100
Subject: [PATCH] =?UTF-8?q?Affichage=20de=20l'adresse=20estim=C3=A9e=20dan?=
 =?UTF-8?q?s=20les=20infos=20de=20la=20position=20d'une=20joueuse?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/components/Map.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/client/components/Map.tsx b/client/components/Map.tsx
index 0446c10..bdeafe9 100644
--- a/client/components/Map.tsx
+++ b/client/components/Map.tsx
@@ -2,7 +2,8 @@ import { FontAwesome5, MaterialIcons } from '@expo/vector-icons'
 import MapLibreGL, { Camera, FillLayer, LineLayer, MapView, PointAnnotation, RasterLayer, RasterSource, ShapeSource, UserLocation, UserTrackingMode } from '@maplibre/maplibre-react-native'
 import { useQuery } from '@tanstack/react-query'
 import { circle } from '@turf/circle'
-import React, { useMemo, useState } from 'react'
+import { reverseGeocodeAsync } from 'expo-location'
+import React, { useEffect, useMemo, useState } from 'react'
 import { StyleSheet } from 'react-native'
 import { Button, Dialog, FAB, Portal, Text } from 'react-native-paper'
 import { useAuth } from '@/hooks/useAuth'
@@ -136,9 +137,11 @@ function PlayerLocationDialog({ displayedPlayerId, onDismiss }: { displayedPlaye
       enabled: isAuthValid(auth),
       initialData: { data: [], meta: { currentPage: 0, lastPage: 0, nextPage: 0, prevPage: 0, total: 0, totalPerPage: 0 } },
     })
+
   const displayedPlayerLoc = useMemo(() => {
     return lastPlayerLocations.find(loc => loc.playerId === displayedPlayerId)
   }, [displayedPlayerId, lastPlayerLocations])
+
   const displayedPlayerName = useMemo(() => {
     if (!playersQuery.isSuccess || !displayedPlayerId)
       return "Chargement…"
@@ -148,6 +151,13 @@ function PlayerLocationDialog({ displayedPlayerId, onDismiss }: { displayedPlaye
     return player.name
   }, [displayedPlayerId, playersQuery])
 
+  const [address, setAddress] = useState("Adresse inconnue")
+  useEffect(() => {
+    if (!displayedPlayerLoc)
+      return setAddress("Adresse inconnue")
+    reverseGeocodeAsync(displayedPlayerLoc).then(addresses => setAddress(addresses[0].formattedAddress ?? "Adresse inconnue"))
+  }, [displayedPlayerLoc])
+
   return (
     <Dialog visible={displayedPlayerId !== null} onDismiss={onDismiss}>
       <Dialog.Title>{displayedPlayerName}</Dialog.Title>
@@ -158,6 +168,9 @@ function PlayerLocationDialog({ displayedPlayerId, onDismiss }: { displayedPlaye
         <Text>
           Précision : {displayedPlayerLoc?.accuracy.toPrecision(3)} m
         </Text>
+        <Text>
+          Adresse estimée : {address}
+        </Text>
       </Dialog.Content>
       <Dialog.Actions>
         <Button onPress={onDismiss}>