Code styling changes

front/src/pages/AddPage.tsx

@@ -1,15 +1,14 @@
-import { FormEventHandler, useEffect, useState } from "react"
-import { Form, Button, Card } from "react-bootstrap"
+import { FormEventHandler, useEffect, useState } from 'react'
+import { Form, Button, Card } from 'react-bootstrap'
 import { MapContainer, TileLayer } from 'react-leaflet'
-import { latLng } from "leaflet"
+import { latLng } from 'leaflet'
 
-import { ClickHandler, LocationMarker, TrashboxMarkers } from "../components"
-import { useAddAnnouncement, useTrashboxes } from "../hooks/api"
-
-import { categories, categoryNames } from "../assets/category"
-import { stations, lines, lineNames } from "../assets/metro"
-import { isObject } from "../utils/types"
-import { handleHTTPErrors } from "../utils"
+import { ClickHandler, LocationMarker, TrashboxMarkers } from '../components'
+import { useAddAnnouncement, useTrashboxes } from '../hooks/api'
+import { isObject } from '../utils/types'
+import { handleHTTPErrors } from '../utils'
+import { categories, categoryNames } from '../assets/category'
+import { stations, lines, lineNames } from '../assets/metro'
 
 function AddPage() {
     const [addressPosition, setAddressPosition] = useState(latLng(59.972, 30.3227))
@@ -21,13 +20,13 @@ function AddPage() {
     useEffect(() => {
         void (async () => {
             try {
-                const res = await fetch(location.protocol + "//nominatim.openstreetmap.org/search?format=json&q=" + address)
+                const res = await fetch(location.protocol + '//nominatim.openstreetmap.org/search?format=json&q=' + address)
 
                 handleHTTPErrors(res)
 
                 const fetchData: unknown = await res.json()
 
-                console.log("f", fetchData)
+                console.log('f', fetchData)
 
             } catch (err) {
                 console.error(err)
@@ -44,8 +43,8 @@ function AddPage() {
 
                 const fetchData: unknown = await res.json()
 
-                if (!isObject<{ display_name: string }>(fetchData, { "display_name": "string" })) {
-                    throw new Error("Malformed server response")
+                if (!isObject<{ display_name: string }>(fetchData, { 'display_name': 'string' })) {
+                    throw new Error('Malformed server response')
                 }
 
                 setAddress(fetchData.display_name)
@@ -64,27 +63,27 @@ function AddPage() {
 
         const formData = new FormData(event.currentTarget)
 
-        formData.append("latitude", addressPosition.lat.toString())
-        formData.append("longtitude", addressPosition.lng.toString())
-        formData.append("address", address)
-        formData.set("bestBy", new Date((formData.get("bestBy") as number | null) || 0).getTime().toString())
+        formData.append('latitude', addressPosition.lat.toString())
+        formData.append('longtitude', addressPosition.lng.toString())
+        formData.append('address', address)
+        formData.set('bestBy', new Date((formData.get('bestBy') as number | null) || 0).getTime().toString())
 
         void doAdd(formData)
     }
 
     return (
-        <Card className="m-4" style={{ height: 'calc(100vh - 3rem)' }}>
-            <Card.Body style={{ overflowY: "auto" }} >
+        <Card className='m-4' style={{ height: 'calc(100vh - 3rem)' }}>
+            <Card.Body style={{ overflowY: 'auto' }} >
                 <Form onSubmit={handleSubmit}>
-                    <Form.Group className="mb-3" controlId="name">
+                    <Form.Group className='mb-3' controlId='name'>
                         <Form.Label>Заголовок объявления</Form.Label>
-                        <Form.Control type="text" required name="name" />
+                        <Form.Control type='text' required name='name' />
                     </Form.Group>
 
-                    <Form.Group className="mb-3" controlId="category">
+                    <Form.Group className='mb-3' controlId='category'>
                         <Form.Label>Категория</Form.Label>
-                        <Form.Select required name="category">
-                            <option value="" hidden>
+                        <Form.Select required name='category'>
+                            <option value='' hidden>
                                 Выберите категорию
                             </option>
                             {categories.map(category =>
@@ -93,23 +92,23 @@ function AddPage() {
                         </Form.Select>
                     </Form.Group>
 
-                    <Form.Group className="mb-3" controlId="bestBy">
+                    <Form.Group className='mb-3' controlId='bestBy'>
                         <Form.Label>Срок годности</Form.Label>
-                        <Form.Control type="date" required name="bestBy" />
+                        <Form.Control type='date' required name='bestBy' />
                     </Form.Group>
 
-                    <Form.Group className="mb-3" controlId="address">
+                    <Form.Group className='mb-3' controlId='address'>
                         <Form.Label>Адрес выдачи</Form.Label>
-                        <div className="mb-3">
+                        <div className='mb-3'>
                             <MapContainer
                                 scrollWheelZoom={false}
-                                style={{ width: "100%", height: 400 }}
+                                style={{ width: '100%', height: 400 }}
                                 center={addressPosition}
                                 zoom={13}
                             >
                                 <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'
                                 />
                                 <LocationMarker
                                     address={address}
@@ -124,26 +123,26 @@ function AddPage() {
                         <p>Адрес: {address}</p>
                     </Form.Group>
 
-                    <Form.Group className="mb-3" controlId="description">
+                    <Form.Group className='mb-3' controlId='description'>
                         <Form.Label>Описание</Form.Label>
-                        <Form.Control as="textarea" name="description" rows={3} placeholder="Укажите свои контакты, а так же, когда вам будет удобно передать продукт" />
+                        <Form.Control as='textarea' name='description' rows={3} placeholder='Укажите свои контакты, а так же, когда вам будет удобно передать продукт' />
                     </Form.Group>
 
-                    <Form.Group className="mb-3" controlId="src">
+                    <Form.Group className='mb-3' controlId='src'>
                         <Form.Label>Иллюстрация (фото или видео)</Form.Label>
                         <Form.Control
-                            type="file"
-                            name="src"
-                            accept="video/mp4,video/mkv, video/x-m4v,video/*, image/*"
-                            capture="environment"
+                            type='file'
+                            name='src'
+                            accept='video/mp4,video/mkv, video/x-m4v,video/*, image/*'
+                            capture='environment'
                         />
                     </Form.Group>
-                    <Form.Group className="mb-3" controlId="metro">
+                    <Form.Group className='mb-3' controlId='metro'>
                         <Form.Label>
                             Станция метро
                         </Form.Label>
-                        <Form.Select name="metro">
-                            <option value="">
+                        <Form.Select name='metro'>
+                            <option value=''>
                                 Укажите ближайщую станцию метро
                             </option>
                             {lines.map(
@@ -157,9 +156,9 @@ function AddPage() {
                         </Form.Select>
                     </Form.Group>
 
-                    <Form.Group className="mb-3" controlId="password">
+                    <Form.Group className='mb-3' controlId='password'>
                         <Form.Label>Пункт сбора мусора</Form.Label>
-                        <div className="mb-3">
+                        <div className='mb-3'>
                             {trashboxes.loading
                                 ? (
                                     <div style={{ height: 400 }}>
@@ -169,19 +168,19 @@ function AddPage() {
                                     trashboxes.error ? (
                                         <p
                                             style={{ height: 400 }}
-                                            className="text-danger"
+                                            className='text-danger'
                                         >{trashboxes.error}</p>
                                     ) : (
                                         <MapContainer
                                             scrollWheelZoom={false}
-                                            style={{ width: "100%", height: 400 }}
+                                            style={{ width: '100%', height: 400 }}
                                             center={addressPosition}
                                             zoom={13}
-                                            className=""
+                                            className=''
                                         >
                                             <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'
                                             />
                                             <TrashboxMarkers
                                                 trashboxes={trashboxes.data}
@@ -201,7 +200,7 @@ function AddPage() {
                         )}
                     </Form.Group>
 
-                    <Button variant="success" type="submit">
+                    <Button variant='success' type='submit'>
                         {status}
                     </Button>
                 </Form>

front/src/pages/HomePage.tsx

@@ -1,22 +1,21 @@
 import { useEffect, useState } from 'react'
 import Stories from 'react-insta-stories'
+import { Story } from 'react-insta-stories/dist/interfaces'
 
 import { BottomNavBar, AnnouncementDetails, Filters } from '../components'
 import { useStoryDimensions } from '../hooks'
 import { useHomeAnnouncementList } from '../hooks/api'
 import { defaultFilters } from '../utils/filters'
-
+import { Announcement } from '../hooks/api/useHomeAnnouncementList'
 import puffSpinner from '../assets/puff.svg'
 import { categoryGraphics } from '../assets/category'
-import { Announcement } from '../hooks/api/useHomeAnnouncementList'
-import { Story } from 'react-insta-stories/dist/interfaces'
 
 function generateStories(announcements: Announcement[]): Story[] {
     return announcements.map(announcement => {
         return ({
             id: announcement.id,
             url: announcement.src || categoryGraphics[announcement.category],
-            type: announcement.src?.endsWith("mp4") ? "video" : undefined,
+            type: announcement.src?.endsWith('mp4') ? 'video' : undefined,
             seeMore: ({ close }: { close: () => void }) => <AnnouncementDetails close={close} announcement={announcement} />
         })
     })
@@ -32,7 +31,7 @@ function fallbackGenerateStories(announcementsFetch: ReturnType<typeof useHomeAn
         return fallbackStory(announcementsFetch.error, true)
 
     if (stories.length === 0)
-        return fallbackStory("Здесь пока пусто")
+        return fallbackStory('Здесь пока пусто')
 
     return stories
 }
@@ -43,7 +42,7 @@ const fallbackStory = (text = '', isError = false): Story[] => [{
         useEffect(() => { action('pause') }, [action])
 
         return (
-            <div style={{ margin: 'auto' }} className={isError ? "text-danger" : ''}>
+            <div style={{ margin: 'auto' }} className={isError ? 'text-danger' : ''}>
                 {text || <img src={puffSpinner} />}
             </div>
         )
@@ -62,7 +61,7 @@ function HomePage() {
 
     return (<>
         <Filters filter={filter} setFilter={setFilter} filterShown={filterShown} setFilterShown={setFilterShown} />
-        <div style={{ display: "flex", justifyContent: "center", backgroundColor: "rgb(17, 17, 17)" }}>
+        <div style={{ display: 'flex', justifyContent: 'center', backgroundColor: 'rgb(17, 17, 17)' }}>
             <Stories
                 stories={stories}
                 defaultInterval={11000}

front/src/pages/LoginPage.tsx

@@ -1,9 +1,9 @@
 import { FormEventHandler } from 'react'
-import { Card, Tabs, Tab } from "react-bootstrap"
-import { useNavigate } from "react-router-dom";
+import { Card, Tabs, Tab } from 'react-bootstrap'
+import { useNavigate } from 'react-router-dom';
 
-import { useAuth } from "../hooks/api";
-import { setToken } from "../utils/auth";
+import { useAuth } from '../hooks/api';
+import { setToken } from '../utils/auth';
 import { AuthForm } from '../components';
 
 function LoginPage() {
@@ -24,22 +24,22 @@ function LoginPage() {
             password: formData.get('password') as string
         }
 
-        const token = import.meta.env.PROD ? await doAuth(data, newAccount) : "a"
+        const token = import.meta.env.PROD ? await doAuth(data, newAccount) : 'a'
 
         if (token) {
             setToken(token)
-            navigate("/")
+            navigate('/')
         }
     }
 
     return (
-        <Card className="m-4">
+        <Card className='m-4'>
             <Card.Body>
-                <Tabs defaultActiveKey="register" fill justify className="mb-3">
-                    <Tab eventKey="register" title="Регистрация">
+                <Tabs defaultActiveKey='register' fill justify className='mb-3'>
+                    <Tab eventKey='register' title='Регистрация'>
                         <AuthForm handleAuth={handleAuth(true)} register={true} loading={loading} error={error} />
                     </Tab>
-                    <Tab eventKey="login" title="Вход">
+                    <Tab eventKey='login' title='Вход'>
                         <AuthForm handleAuth={handleAuth(false)} register={false} loading={loading} error={error} />
                     </Tab>
                 </Tabs>
@@ -48,4 +48,4 @@ function LoginPage() {
     )
 }
 
-export default LoginPage
+export default LoginPage

front/src/pages/UserPage.tsx

@@ -1,9 +1,9 @@
-import { Link } from "react-router-dom"
+import { Link } from 'react-router-dom'
 
 function UserPage() {
     /* TODO */
 
-    return <h1>For Yet Go <Link to="/">Home</Link></h1>
+    return <h1>For Yet Go <Link to='/'>Home</Link></h1>
 }
 
 export default UserPage