From 476f2b52335e0cb9057f6edc0e0445126f0f1dc9 Mon Sep 17 00:00:00 2001
From: Thibaut Valentin <thibaut.valentin@epita.fr>
Date: Mon, 20 Jan 2025 15:21:54 +0100
Subject: [PATCH] fix: location research

---
 .../src/components/Club/LocationEditor.jsx    | 29 ++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/main/webapp/src/components/Club/LocationEditor.jsx b/src/main/webapp/src/components/Club/LocationEditor.jsx
index 086e82f..a1e99d1 100644
--- a/src/main/webapp/src/components/Club/LocationEditor.jsx
+++ b/src/main/webapp/src/components/Club/LocationEditor.jsx
@@ -98,15 +98,19 @@ export function LocationEditorModal({modal, sendData}) {
             return
 
         const delayDebounceFn = setTimeout(() => {
-            refresh(`https://api-adresse.data.gouv.fr/search/?q=${encodeURI(location)}&type=housenumber&autocomplete=1`)
+            refresh(`https://api-adresse.data.gouv.fr/search/?q=${encodeURI(location)}&type=housenumber&autocomplete=1&limit=5`)
         }, 500)
         return () => clearTimeout(delayDebounceFn)
     }, [location]);
 
     useEffect(() => {
-        if (data?.features?.length === 1) {
-            const {lat, lng} = convertLambert93ToLatLng(data.features[0].properties.x, data.features[0].properties.y)
-            setLocationObj({text: data.features[0].properties.label, lng: lng, lat: lat})
+        if (data.features?.some((e) => e.properties.label === location)) {
+            data.features.forEach((d) => {
+                if (d.properties.label === location) {
+                    const {lat, lng} = convertLambert93ToLatLng(d.properties.x, d.properties.y)
+                    setLocationObj({text: d.properties.label, lng: lng, lat: lat})
+                }
+            })
         } else {
             setLocationObj({text: "", lng: undefined, lat: undefined})
         }
@@ -144,14 +148,17 @@ export function LocationEditorModal({modal, sendData}) {
                         <div className="row">
                             <div className="input-group mb-3">
                                 <label className="input-group-text">Adresse</label>
-                                <input className="form-control" aria-autocomplete="list" aria-expanded="true" autoComplete="true"
+                                <input className="form-control" aria-autocomplete="list" aria-expanded="true"
                                        placeholder="Chercher une adresse..." aria-label="Recherche" list="addr" value={location}
                                        onChange={e => setLocation(e.target.value)}/>
-                                <datalist id="addr">
-                                    {data?.features && data.features.map((d, index) => {
-                                        return <option key={index}>{d.properties.label}</option>
+                            </div>
+                            <div className="input-group mb-3">
+                                <ul className="list-group">
+                                    {data?.features && !data.features.some((e) => e.properties.label === location) && data.features.map((d, index) => {
+                                        return <li key={index} className="list-group-item"
+                                                   onClick={() => setLocation(d.properties.label)}>{d.properties.label}</li>
                                     })}
-                                </datalist>
+                                </ul>
                             </div>
                         </div>
 
@@ -166,7 +173,9 @@ export function LocationEditorModal({modal, sendData}) {
                         </div>
                     </div>
                     <div className="modal-footer">
-                        <button type="submit" className="btn btn-primary" data-bs-dismiss="modal" disabled={locationObj.lng === undefined}>Enregistrer</button>
+                        <button type="submit" className="btn btn-primary" data-bs-dismiss="modal"
+                                disabled={locationObj.lng === undefined}>Enregistrer
+                        </button>
                         <button type="reset" className="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                     </div>
                 </div>