Split metro stations by lines and their indication

Fixed details dialog size
Added map location setting by click
Reorganized hooks and components imports with index.js
Removed orphane error indication on homepage

front/src/pages/AddPage.jsx

@@ -1,13 +1,13 @@
 import { useEffect, useState } from "react"
 import { Form, Button, Card } from "react-bootstrap"
 import { MapContainer, TileLayer } from 'react-leaflet'
+import { latLng } from "leaflet"
+
+import { ClickHandler, LocationMarker, TrashboxMarkers } from "../components"
+import { useAddAnnouncement, useTrashboxes } from "../hooks/api"
 
 import { categoryNames } from "../assets/category"
-import { latLng } from "leaflet"
-import { metros } from "../assets/metro"
-import LocationMarker from "../components/LocationMarker"
-import TrashboxMarkers from "../components/TrashboxMarkers"
-import { useAddAnnouncement, useTrashboxes } from "../hooks/api"
+import { stations, lines } from "../assets/metro"
 
 function AddPage() {
     const [addressPosition, setAddressPosition] = useState(latLng(59.972, 30.3227))
@@ -46,7 +46,7 @@ function AddPage() {
         })()
     }, [addressPosition])
 
-    const {doAdd, status} = useAddAnnouncement()
+    const { doAdd, status } = useAddAnnouncement()
 
     const handleSubmit = (event) => {
         event.preventDefault()
@@ -107,6 +107,9 @@ function AddPage() {
                                     position={addressPosition}
                                     setPosition={setAddressPosition}
                                 />
+                                <ClickHandler
+                                    setPosition={setAddressPosition}
+                                />
                             </MapContainer>
                         </div>
                         <p>Адрес: {address}</p>
@@ -134,11 +137,13 @@ function AddPage() {
                             <option value="">
                                 Укажите ближайщую станцию метро
                             </option>
-                            {Object.entries(metros).map(
-                                ([branch, stations]) =>
-                                    stations.map(metro =>
-                                        <option key={metro} value={metro}>{metro}</option>
-                                    )
+                            {Object.entries(stations).map(
+                                ([line, stations]) =>
+                                    <optgroup key={line} label={lines[line]}>
+                                        {Array.from(stations).map(metro =>
+                                            <option key={metro} value={metro}>{metro}</option>
+                                        )}
+                                    </optgroup>
                             )}
                         </Form.Select>
                     </Form.Group>