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>

front/src/pages/HomePage.jsx

@@ -1,11 +1,8 @@
 import { useEffect, useState } from 'react'
 import Stories from 'react-insta-stories'
 
-import BottomNavBar from '../components/BottomNavBar'
-import useStoryDimensions from '../hooks/useStoryDimensions'
-import AnnouncementDetails from '../components/AnnouncementDetails'
-import Filters from '../components/Filters'
-
+import { BottomNavBar, AnnouncementDetails, Filters } from '../components'
+import { useStoryDimensions } from '../hooks'
 import { useHomeAnnouncementList } from '../hooks/api'
 
 import puffSpinner from '../assets/puff.svg'
@@ -29,21 +26,21 @@ function fallbackGenerateStories(announcementsFetch) {
         return fallbackStory()
 
     if (announcementsFetch.error)
-        return fallbackStory(announcementsFetch.error)
+        return fallbackStory(announcementsFetch.error, true)
 
-    if (stories.length == 0)
+    if (stories.length === 0)
         return fallbackStory("Здесь пока пусто")
 
     return stories
 }
 
-const fallbackStory = (text) => [{
+const fallbackStory = (text, isError = false) => [{
     content: ({ action }) => {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useEffect(() => { action('pause') }, [action])
 
         return (
-            <div style={{ margin: 'auto' }}>
+            <div style={{ margin: 'auto' }} className={isError ? "text-danger" : ''}>
                 {text || <img src={puffSpinner} />}
             </div>
         )
@@ -66,22 +63,14 @@ function HomePage() {
     return (<>
         <Filters filter={filter} setFilter={setFilter} filterShown={filterShown} setFilterShown={setFilterShown} />
         <div style={{ display: "flex", justifyContent: "center", backgroundColor: "rgb(17, 17, 17)" }}>
-            {announcementsFetch.error ?
-                (
-                    <div style={{ width, height, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                        <p className='text-danger'>{announcementsFetch.error}</p>
-                    </div>
-                ) : (
-                    <Stories
-                        stories={stories}
-                        defaultInterval={11000}
-                        height={height}
-                        width={width}
-                        loop={true}
-                        keyboardNavigation={true}
-                    />
-                )
-            }
+            <Stories
+                stories={stories}
+                defaultInterval={11000}
+                height={height}
+                width={width}
+                loop={true}
+                keyboardNavigation={true}
+            />
         </div>
         <BottomNavBar toggleFilters={setFilterShown} width={width} />
     </>)

front/src/pages/LoginPage.jsx

@@ -1,5 +1,6 @@
 import { Form, Button, Card, Tabs, Tab } from "react-bootstrap"
 import { useNavigate } from "react-router-dom";
+
 import { useAuth } from "../hooks/api";
 import { setToken } from "../utils/auth";