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/components/AnnouncementDetails.jsx

@@ -1,18 +1,19 @@
 import { Modal, Button } from 'react-bootstrap'
 import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'
 
+import LineDot from './LineDot'
 import { categoryNames } from '../assets/category'
 import { useBook } from '../hooks/api'
 
 function AnnouncementDetails({ close, announcement: { id, name, category, bestBy, description, lat, lng, address, metro } }) {
-    const {handleBook, status: bookStatus} = useBook(id)
+    const { handleBook, status: bookStatus } = useBook(id)
 
     return (
         <div
-            className="modal show"
-            style={{ display: 'flex', position: 'initial', alignItems: "center" }}
+            className="modal"
+            style={{ display: 'flex', alignItems: "center", justifyContent: "center" }}
         >
-            <Modal.Dialog style={{minWidth: "50vw"}}>
+            <Modal.Dialog style={{ minWidth: "50vw" }}>
                 <Modal.Header closeButton onHide={close}>
                     <Modal.Title>
                         Подробнее
@@ -35,14 +36,18 @@ function AnnouncementDetails({ close, announcement: { id, name, category, bestBy
                         />
 
                         <Marker position={[lat, lng]}>
-                            <Popup>{address + "\n" + metro}</Popup>
+                            <Popup>
+                                {address}
+                                <br />
+                                <LineDot station={metro} /> {metro}
+                            </Popup>
                         </Marker>
                     </MapContainer>
                 </Modal.Body>
 
                 <Modal.Footer>
                     <Button variant='success' onClick={handleBook}>
-                        {bookStatus || "Забронировать"} 
+                        {bookStatus || "Забронировать"}
                     </Button>
                 </Modal.Footer>
             </Modal.Dialog>

front/src/components/ClickHandler.jsx

@@ -0,0 +1,12 @@
+import { useMapEvent } from "react-leaflet"
+
+function ClickHandler({ setPosition }) {
+    const map = useMapEvent('click', (e) => {
+        setPosition(e.latlng)
+        map.setView(e.latlng)
+    })
+
+    return null
+}
+
+export default ClickHandler

front/src/components/Filters.jsx

@@ -1,7 +1,7 @@
 import { Button, Form, Modal } from "react-bootstrap"
 
 import { categoryNames } from "../assets/category"
-import { metros } from '../assets/metro'
+import { stations, lines } from '../assets/metro'
 
 function Filters({ filter, setFilter, filterShown, setFilterShown }) {
 
@@ -55,11 +55,13 @@ function Filters({ filter, setFilter, filterShown, setFilterShown }) {
                             <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>

front/src/components/LineDot.jsx

@@ -0,0 +1,12 @@
+import { colors, lines } from '../assets/metro'
+import { lineByName } from '../utils/metro'
+
+function LineDot({ station }) {
+    const line = lineByName(station)
+    const lineTitle = lines[line]
+    const color = colors[line]
+
+    return <span title={`${lineTitle} ветка`} style={{ color: color }}>&#11044;</span>
+}
+
+export default LineDot

front/src/components/index.js

@@ -0,0 +1,19 @@
+import AnnouncementDetails from "./AnnouncementDetails"
+import BottomNavBar from "./BottomNavBar"
+import Filters from "./Filters"
+import LineDot from "./LineDot"
+import LocationMarker from './LocationMarker'
+import TrashboxMarkers from './TrashboxMarkers'
+import WithToken from './WithToken'
+import ClickHandler from './ClickHandler'
+
+export {
+    AnnouncementDetails,
+    BottomNavBar,
+    Filters,
+    LineDot,
+    LocationMarker,
+    TrashboxMarkers,
+    WithToken,
+    ClickHandler,
+}