Code styling changes

2023-07-13 18:38:31 +03:00
parent 9437c44054
commit 7b0ccc525c
33 changed files with 358 additions and 387 deletions
--- a/front/src/components/AnnouncementDetails.tsx
+++ b/front/src/components/AnnouncementDetails.tsx
@ -16,10 +16,10 @@ function AnnouncementDetails({ close, announcement: { id, name, category, bestBy

    return (
        <div
-            className="modal"
-            style={{ display: 'flex', alignItems: "center", justifyContent: "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,10 +35,10 @@ function AnnouncementDetails({ close, announcement: { id, name, category, bestBy

                    <p className='mb-3'>{description}</p>

-                    <MapContainer style={{ width: "100%", minHeight: 300 }} center={[lat, lng]} zoom={16} >
+                    <MapContainer style={{ width: '100%', minHeight: 300 }} center={[lat, lng]} zoom={16} >
                        <TileLayer
                            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-                            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                            url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
                        />

                        <Marker position={[lat, lng]}>
@ -53,7 +53,7 @@ function AnnouncementDetails({ close, announcement: { id, name, category, bestBy

                <Modal.Footer>
                    <Button variant='success' onClick={() => void handleBook()}>
-                        {bookStatus || "Забронировать"}
+                        {bookStatus || 'Забронировать'}
                    </Button>
                </Modal.Footer>
            </Modal.Dialog>
@ -61,4 +61,4 @@ function AnnouncementDetails({ close, announcement: { id, name, category, bestBy
    )
 }

-export default AnnouncementDetails
+export default AnnouncementDetails
--- a/front/src/components/AuthForm.tsx
+++ b/front/src/components/AuthForm.tsx
@ -1,5 +1,5 @@
-import { FormEventHandler } from "react"
-import { Button, Form } from "react-bootstrap"
+import { FormEventHandler } from 'react'
+import { Button, Form } from 'react-bootstrap'

 type AuthFormProps = {
    register: boolean
@ -9,43 +9,43 @@ type AuthFormProps = {
 }

 const AuthForm = ({ handleAuth, register, loading, error }: AuthFormProps) => {
-    const buttonText = loading ? "Загрузка..." : (error || (register ? "Зарегистрироваться" : "Войти"))
+    const buttonText = loading ? 'Загрузка...' : (error || (register ? 'Зарегистрироваться' : 'Войти'))
    return (
        <Form onSubmit={handleAuth}>
-            <Form.Group className="mb-3" controlId="email">
+            <Form.Group className='mb-3' controlId='email'>
                <Form.Label>Почта</Form.Label>
-                <Form.Control type="email" required />
+                <Form.Control type='email' required />
            </Form.Group>

            {register && <>
-                <Form.Group className="mb-3" controlId="name">
+                <Form.Group className='mb-3' controlId='name'>
                    <Form.Label>Имя</Form.Label>
-                    <Form.Control type="text" required />
+                    <Form.Control type='text' required />
                </Form.Group>

-                <Form.Group className="mb-3" controlId="surname">
+                <Form.Group className='mb-3' controlId='surname'>
                    <Form.Label>Фамилия</Form.Label>
-                    <Form.Control type="text" required />
+                    <Form.Control type='text' required />
                </Form.Group>
            </>}

-            <Form.Group className="mb-3" controlId="password">
+            <Form.Group className='mb-3' controlId='password'>
                <Form.Label>Пароль</Form.Label>
-                <Form.Control type="password" required />
+                <Form.Control type='password' required />
            </Form.Group>

            {register &&
-                <Form.Group className="mb-3" controlId="privacyPolicyConsent">
-                    <Form.Check label="<a>условиями обработки персональных данных</a>">
-                        <Form.Check.Input type="checkbox" required />
+                <Form.Group className='mb-3' controlId='privacyPolicyConsent'>
+                    <Form.Check>
+                        <Form.Check.Input type='checkbox' required />
                        <Form.Check.Label>
-                            Я согласен с <a href={`${document.location.origin}/privacy_policy.pdf`} target="_blank" rel="noopener noreferrer">условиями обработки персональных данных</a>
+                            Я согласен с <a href={`${document.location.origin}/privacy_policy.pdf`} target='_blank' rel='noopener noreferrer'>условиями обработки персональных данных</a>
                        </Form.Check.Label>
                    </Form.Check>
                </Form.Group>
            }

-            <Button variant="success" type="submit">
+            <Button variant='success' type='submit'>
                {buttonText}
            </Button>
        </Form>
--- a/front/src/components/BottomNavBar.tsx
+++ b/front/src/components/BottomNavBar.tsx
@ -7,22 +7,22 @@ import userIcon from '../assets/userIcon.svg'
 const navBarStyles: React.CSSProperties = {
    backgroundColor: 'var(--bs-success)',
    height: 56,
-    width: "100%",
+    width: '100%',
 }

 const navBarGroupStyles: React.CSSProperties = {
-    display: "flex",
-    flexDirection: "row",
-    height: "100%",
-    margin: "auto"
+    display: 'flex',
+    flexDirection: 'row',
+    height: '100%',
+    margin: 'auto'
 }

 const navBarElementStyles: React.CSSProperties = {
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
 }

 type BottomNavBarProps = {
@ -36,15 +36,15 @@ function BottomNavBar({ width, toggleFilters }: BottomNavBarProps) {
            <div style={{ ...navBarGroupStyles, width: width }}>

                <a style={navBarElementStyles} onClick={() => toggleFilters(true)}>
-                    <img src={filterIcon} alt="Фильтровать объявления" title='Фильтровать объявления' />
+                    <img src={filterIcon} alt='Фильтровать объявления' title='Фильтровать объявления' />
                </a>

-                <Link style={navBarElementStyles} to="/add" >
-                    <img src={addIcon} alt="Опубликовать объявление" title='Опубликовать объявление' />
+                <Link style={navBarElementStyles} to='/add' >
+                    <img src={addIcon} alt='Опубликовать объявление' title='Опубликовать объявление' />
                </Link>

-                <Link style={navBarElementStyles} to={"/user"} >
-                    <img src={userIcon} alt="Личный кабинет" title='Личный кабинет' />
+                <Link style={navBarElementStyles} to={'/user'} >
+                    <img src={userIcon} alt='Личный кабинет' title='Личный кабинет' />
                </Link>

            </div>
--- a/front/src/components/ClickHandler.tsx
+++ b/front/src/components/ClickHandler.tsx
@ -1,6 +1,7 @@
-import { useMapEvent } from "react-leaflet"
-import { SetState } from "../utils/types"
-import { LatLng } from "leaflet"
+import { useMapEvent } from 'react-leaflet'
+import { LatLng } from 'leaflet'
+
+import { SetState } from '../utils/types'

 function ClickHandler({ setPosition }: { setPosition: SetState<LatLng> }) {
    const map = useMapEvent('click', (e) => {
--- a/front/src/components/Filters.tsx
+++ b/front/src/components/Filters.tsx
@ -1,10 +1,10 @@
-import { Button, Form, Modal } from "react-bootstrap"
+import { Button, Form, Modal } from 'react-bootstrap'
+import { FormEventHandler } from 'react'

-import { categories, categoryNames } from "../assets/category"
+import { categories, categoryNames } from '../assets/category'
 import { stations, lines, lineNames } from '../assets/metro'
-import { FiltersType } from "../utils/filters"
-import { SetState } from "../utils/types"
-import { FormEventHandler } from "react"
+import { FiltersType } from '../utils/filters'
+import { SetState } from '../utils/types'

 type FiltersProps = {
    filter: FiltersType,
@ -23,8 +23,8 @@ function Filters({ filter, setFilter, filterShown, setFilterShown }: FiltersProp

        setFilter(prev => ({
            ...prev,
-            category: (formData.get("category") as (FiltersType['category'] | null)) || undefined,
-            metro: (formData.get("metro") as (FiltersType['metro'] | null)) || undefined
+            category: (formData.get('category') as (FiltersType['category'] | null)) || undefined,
+            metro: (formData.get('metro') as (FiltersType['metro'] | null)) || undefined
        }))

        setFilterShown(false)
@ -40,13 +40,13 @@ function Filters({ filter, setFilter, filterShown, setFilterShown }: FiltersProp

            <Modal.Body>
                <Form onSubmit={handleSubmit}>
-                    <Form.Group className="mb-3" controlId="categoryFilter">
+                    <Form.Group className='mb-3' controlId='categoryFilter'>
                        <Form.Label>
                            Категория
                        </Form.Label>

-                        <Form.Select name="category" defaultValue={filter.category || undefined}>
-                            <option value="">
+                        <Form.Select name='category' defaultValue={filter.category || undefined}>
+                            <option value=''>
                                Выберите категорию
                            </option>
                            {categories.map(
@ -56,13 +56,13 @@ function Filters({ filter, setFilter, filterShown, setFilterShown }: FiltersProp
                        </Form.Select>
                    </Form.Group>

-                    <Form.Group className="mb-3" controlId="metroFilter">
+                    <Form.Group className='mb-3' controlId='metroFilter'>
                        <Form.Label>
                            Станция метро
                        </Form.Label>

-                        <Form.Select name="metro" defaultValue={filter.metro || undefined}>
-                            <option value="">
+                        <Form.Select name='metro' defaultValue={filter.metro || undefined}>
+                            <option value=''>
                                Выберите станцию метро
                            </option>
                            {lines.map(
@ -76,7 +76,7 @@ function Filters({ filter, setFilter, filterShown, setFilterShown }: FiltersProp
                        </Form.Select>
                    </Form.Group>

-                    <Button variant="success" type="submit">
+                    <Button variant='success' type='submit'>
                        Отправить
                    </Button>
                </Form>
@ -85,4 +85,4 @@ function Filters({ filter, setFilter, filterShown, setFilterShown }: FiltersProp
    )
 }

-export default Filters
+export default Filters
--- a/front/src/components/LocationMarker.tsx
+++ b/front/src/components/LocationMarker.tsx
@ -1,6 +1,7 @@
-import { Marker, Popup, useMapEvents } from "react-leaflet"
+import { Marker, Popup, useMapEvents } from 'react-leaflet'
 import { LatLng } from 'leaflet'
-import { SetState } from "../utils/types"
+
+import { SetState } from '../utils/types'

 type LocationMarkerProps = {
    address: string,
@ -32,4 +33,4 @@ const LocationMarker = ({ address, position, setPosition }: LocationMarkerProps)
    )
 }

-export default LocationMarker
+export default LocationMarker
--- a/front/src/components/TrashboxMarkers.tsx
+++ b/front/src/components/TrashboxMarkers.tsx
@ -1,5 +1,6 @@
-import { Marker, Popup } from "react-leaflet"
-import { Trashbox } from "../hooks/api/useTrashboxes"
+import { Marker, Popup } from 'react-leaflet'
+
+import { Trashbox } from '../hooks/api/useTrashboxes'

 type TrashboxMarkersProps = {
    trashboxes: Trashbox[],
@ -15,7 +16,7 @@ const TrashboxMarkers = ({ trashboxes, selectTrashbox }: TrashboxMarkersProps) =
                    <p>Тип мусора: <>
                        {trashbox.Categories.map((category, j) =>
                            <span key={trashbox.Address + category}>
-                                <a href="#" onClick={() => selectTrashbox({ index, category })}>
+                                <a href='#' onClick={() => selectTrashbox({ index, category })}>
                                    {category}
                                </a>
                                {(j < trashbox.Categories.length - 1) ? ', ' : ''}
--- a/front/src/components/WithToken.tsx
+++ b/front/src/components/WithToken.tsx
@ -1,13 +1,14 @@
-import { PropsWithChildren, useEffect } from "react"
-import { getToken } from "../utils/auth"
-import { useNavigate } from "react-router-dom"
+import { PropsWithChildren, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import { getToken } from '../utils/auth'

 function WithToken({ children }: PropsWithChildren) {
    const navigate = useNavigate()

    useEffect(() => {
        if (!getToken()) {
-            return navigate("/login")
+            return navigate('/login')
        }
    }, [navigate])

--- a/front/src/components/index.ts
+++ b/front/src/components/index.ts
@ -1,21 +1,9 @@
-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'
-import AuthForm from "./AuthForm"
-
-export {
-    AnnouncementDetails,
-    BottomNavBar,
-    Filters,
-    LineDot,
-    LocationMarker,
-    TrashboxMarkers,
-    WithToken,
-    ClickHandler,
-    AuthForm,
-}
+export { default as AnnouncementDetails } from './AnnouncementDetails'
+export { default as BottomNavBar } from './BottomNavBar'
+export { default as Filters } from './Filters'
+export { default as LineDot } from './LineDot'
+export { default as LocationMarker } from './LocationMarker'
+export { default as TrashboxMarkers } from './TrashboxMarkers'
+export { default as WithToken } from './WithToken'
+export { default as ClickHandler } from './ClickHandler'
+export { default as AuthForm } from './AuthForm'