Search airports and draw the departure and the arrival

client/src/App.js

@@ -1,26 +1,69 @@
-import {MapContainer, Marker, Popup, TileLayer} from 'react-leaflet'
+import {useState} from "react"
+
+import {Icon} from 'leaflet'
+import {Polyline, MapContainer, Marker, TileLayer} from 'react-leaflet'
 
 import './App.css';
 
-function Map() {
+function Map({dep, arr}) {
+    const redIcon = new Icon({
+        iconUrl: "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png",
+        iconSize: [25, 41],
+        iconAnchor: [12, 41],
+        popupAnchor: [1, -34],
+        shadowSize: [41, 41]
+    })
+    const greenIcon = new Icon({
+        iconUrl: "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png",
+        iconSize: [25, 41],
+        iconAnchor: [12, 41],
+        popupAnchor: [1, -34],
+        shadowSize: [41, 41]
+    })
     return (
-        <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false} style={{height: "600px"}}>
+        <MapContainer center={[46.449, 2.210]} zoom={6} style={{height: "600px"}}>
             <TileLayer
-            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                attribution="&copy; Les contributeur⋅rices d'<a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a>"
                 url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
             />
-          <Marker position={[51.505, -0.09]}>
+            <Marker position={dep} icon={redIcon} />
-            <Popup>
+            <Marker position={arr} icon={greenIcon} />
-              A pretty CSS3 popup. <br /> Easily customizable.
+            <Polyline positions={[dep, arr]} />
-            </Popup>
-          </Marker>
         </MapContainer>
     )
 }
 
-function App() {
+function AirportSearch({name, updateFun}) {
+    const [airports, setAirports] = useState([])
+
+    function autocomplete(event) {
+        const target = event.target
+        const value = target.value
+        fetch(`/api/airports?search=${value}`).then(resp => resp.json()).then(setAirports)
+    }
+
     return <>
-        <Map></Map>
+        <datalist id={name + "-list"}>
+            {airports.map(airport => <>
+                <option value={airport.icao_code}
+                        data-lat={airport.lat}
+                        data-lng={airport.lng}
+                        onClick={updateFun([airport.lat, airport.lng])}>{airport.name}</option>
+            </>)}
+        </datalist>
+        <input type="hidden" name={name + "-icao"}/>
+        <input name={name} list={name + "-list"} onChange={autocomplete}/>
+    </>
+}
+
+function App() {
+    const [dep, setDep] = useState([0, 0])
+    const [arr, setArr] = useState([0, 0])
+
+    return <>
+        <Map dep={dep} arr={arr}></Map>
+        <AirportSearch name={"departure"} updateFun={setDep}></AirportSearch>
+        <AirportSearch name={"arrival"} updateFun={setArr}></AirportSearch>
     </>
 }