Code styling fixes

front/src/api/announcements/types.ts

@@ -4,7 +4,7 @@ import { AnnouncementResponse, isAnnouncementResponse } from '../announcement/ty
 type AnnouncementsResponse = AnnouncementResponse[]
 
 const isAnnouncementsResponse = (obj: unknown): obj is AnnouncementsResponse => (
-    isArrayOf<AnnouncementResponse>(obj, isAnnouncementResponse)
+    isArrayOf(obj, isAnnouncementResponse)
 )
 
 export type {

front/src/api/trashbox/types.ts

@@ -14,7 +14,7 @@ const isTrashbox = (obj: unknown): obj is Trashbox => (
         'Lat': 'number',
         'Lng': 'number',
         'Address': 'string',
-        'Categories': obj => isArrayOf<string>(obj, isString),
+        'Categories': obj => isArrayOf(obj, isString),
     })
 )
 

front/src/components/AuthForm.tsx

@@ -51,7 +51,11 @@ const AuthForm = ({ goBack }: AuthFormProps) => {
                 <Form.Check>
                     <Form.Check.Input type='checkbox' required />
                     <Form.Check.Label>
-                        Я согласен с <a href={`${document.location.origin}/privacy_policy.pdf`} target='_blank'>условиями обработки персональных данных</a>
+                        Я согласен с{' '}
+                        <a
+                            href={`${document.location.origin}/privacy_policy.pdf`}
+                            target='_blank'
+                        >условиями обработки персональных данных</a>
                     </Form.Check.Label>
                 </Form.Check>
             </Form.Group>

front/src/components/CardLayout.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react'
 import { Card } from 'react-bootstrap'
 
-import { BackHeader } from '.'
+import BackHeader from './BackHeader'
 
 type CardLayoutProps = {
     text: string,

front/src/components/CategoryPreview.tsx

@@ -1,4 +1,4 @@
-import { StoriesPreview } from '.'
+import StoriesPreview from './StoriesPreview'
 import { UserCategoriesNames, UserCategory, composeUserCategoriesFilters } from '../assets/userCategories'
 import { useAnnouncements } from '../hooks/api'
 import { gotError, gotResponse } from '../hooks/useFetch'

front/src/components/LocationMarker.tsx

@@ -11,7 +11,6 @@ type LocationMarkerProps = {
 }
 
 function LocationMarker({ address, position, setPosition }: LocationMarkerProps) {
-
     const map = useMapEvents({
         dragend: () => {
             setPosition(map.getCenter())

front/src/components/MapClickHandler.tsx

@@ -3,7 +3,7 @@ import { LatLng } from 'leaflet'
 
 import { SetState } from '../utils/types'
 
-function ClickHandler({ setPosition }: { setPosition: SetState<LatLng> }) {
+function MapClickHandler({ setPosition }: { setPosition: SetState<LatLng> }) {
     const map = useMapEvent('click', (e) => {
         setPosition(e.latlng)
         map.setView(e.latlng)
@@ -12,4 +12,4 @@ function ClickHandler({ setPosition }: { setPosition: SetState<LatLng> }) {
     return null
 }
 
-export default ClickHandler
+export default MapClickHandler

front/src/components/index.ts

@@ -5,7 +5,7 @@ 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 MapClickHandler } from './MapClickHandler'
 export { default as AuthForm } from './AuthForm'
 export { default as BackHeader } from './BackHeader'
 export { default as CategoryPreview } from './CategoryPreview'
@@ -15,3 +15,4 @@ export { default as SignOut } from './SignOut'
 export { default as Poetry } from './Poetry'
 export { default as SelectDisposalTrashbox } from './SelectDisposalTrashbox'
 export { default as StarRating } from './StarRating'
+export { default as CardLayout } from './CardLayout'

front/src/hooks/api/useAddAnnouncement.ts

@@ -1,4 +1,4 @@
-import { useSendWithButton } from '..'
+import useSendWithButton from '../useSendWithButton'
 import { composePutAnnouncementURL, processPutAnnouncement } from '../../api/putAnnouncement'
 import { isPutAnnouncementResponse } from '../../api/putAnnouncement/types'
 

front/src/hooks/api/useAnnouncements.ts

@@ -1,4 +1,4 @@
-import { useFetch } from '../'
+import useFetch from '../useFetch'
 import { FiltersType } from '../../utils/filters'
 import { composeAnnouncementsURL, initialAnnouncements, processAnnouncements } from '../../api/announcements'
 import { isAnnouncementsResponse } from '../../api/announcements/types'

front/src/hooks/api/useDispose.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-import { useSendWithButton } from '..'
+import useSendWithButton from '../useSendWithButton'
 import { composeDisposeBody, composeDisposeURL, processDispose } from '../../api/dispose'
 import { DisposeParams, isDisposeResponse } from '../../api/dispose/types'
 

front/src/hooks/api/useOsmAddress.ts

@@ -1,6 +1,6 @@
 import { LatLng } from 'leaflet'
 
-import { useFetch } from '../'
+import useFetch from '../useFetch'
 import { composeOsmAddressURL, processOsmAddress } from '../../api/osmAddress'
 import { isOsmAddressResponse } from '../../api/osmAddress/types'
 

front/src/hooks/api/useRemoveAnnouncement.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-import { useSendWithButton } from '..'
+import useSendWithButton from '../useSendWithButton'
 import { composeRemoveAnnouncementURL, processRemoveAnnouncement } from '../../api/removeAnnouncement'
 import { isRemoveAnnouncementResponse } from '../../api/removeAnnouncement/types'
 

front/src/hooks/api/useSendRate.ts

@@ -1,4 +1,4 @@
-import { useSend } from '..'
+import useSend from '../useSend'
 import { composeSendRateURL, processSendRate } from '../../api/sendRate'
 import { isSendRateResponse } from '../../api/sendRate/types'
 

front/src/hooks/api/useSignIn.ts

@@ -1,4 +1,4 @@
-import { useSendWithButton } from '..'
+import useSendWithButton from '../useSendWithButton'
 import { composeTokenURL, processToken } from '../../api/token'
 import { isTokenResponse } from '../../api/token/types'
 import { setToken } from '../../utils/auth'

front/src/hooks/api/useSignUp.ts

@@ -1,4 +1,4 @@
-import { useSendWithButton } from '..'
+import useSendWithButton from '../useSendWithButton'
 import { composeSignUpURL, processSignUp } from '../../api/signup'
 import { isSignUpResponse } from '../../api/signup/types'
 

front/src/hooks/useSendWithButton.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-import { useSend } from '.'
+import useSend from './useSend'
 import useSendButtonCaption from './useSendButtonCaption'
 
 function useSendWithButton<R, T extends NonNullable<unknown>>(

front/src/pages/AddPage.tsx

@@ -4,13 +4,12 @@ import { MapContainer, TileLayer } from 'react-leaflet'
 import { latLng } from 'leaflet'
 import { useNavigate } from 'react-router-dom'
 
-import { ClickHandler, LocationMarker } from '../components'
+import { MapClickHandler, LocationMarker, CardLayout } from '../components'
 import { useAddAnnouncement } from '../hooks/api'
 import { categories, categoryNames } from '../assets/category'
 import { stations, lines, lineNames } from '../assets/metro'
 import { fallbackError, gotResponse } from '../hooks/useFetch'
 import { useOsmAddresses } from '../hooks/api'
-import CardLayout from '../components/CardLayout'
 
 const styles = {
     map: {
@@ -92,7 +91,7 @@ function AddPage() {
                                 setPosition={setAddressPosition}
                             />}
 
-                            <ClickHandler
+                            <MapClickHandler
                                 setPosition={setAddressPosition}
                             />
                         </MapContainer>
@@ -102,7 +101,12 @@ function AddPage() {
 
                 <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'>

front/src/pages/HomePage.tsx

@@ -3,12 +3,11 @@ import Stories from 'react-insta-stories'
 import { Story } from 'react-insta-stories/dist/interfaces'
 
 import { BottomNavBar, AnnouncementDetails, Filters } from '../components'
-import { useFilters, useStoryDimensions } from '../hooks'
+import { useFilters, useStoryDimensions, useStoryIndex } from '../hooks'
 import { useAnnouncements } from '../hooks/api'
 import { Announcement } from '../api/announcement/types'
 import { categoryGraphics } from '../assets/category'
 import { UseFetchReturn, gotError } from '../hooks/useFetch'
-import { useStoryIndex } from '../hooks'
 
 import puffSpinner from '../assets/puff.svg'
 
@@ -45,13 +44,14 @@ function fallbackGenerateStories(announcements: UseFetchReturn<Announcement[]>)
 
 const fallbackStory = (text = '', isError = false): Story[] => [{
     content: ({ action }) => {
+        // ESLint can't detect that it is a component
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useEffect(() => {
             action('pause')
         }, [action])
 
         return (
-            <div style={styles.center} className={isError ? 'text-danger' : ''}>
+            <div className={`m-auto ${isError ? 'text-danger' : ''}`}>
                 {text || <img src={puffSpinner} />}
             </div>
         )
@@ -64,9 +64,6 @@ const styles = {
         justifyContent: 'center',
         backgroundColor: 'rgb(17, 17, 17)',
     } as CSSProperties,
-    center: {
-        margin: 'auto',
-    } as CSSProperties,
 }
 
 function HomePage() {
@@ -83,7 +80,12 @@ function HomePage() {
     const index = useStoryIndex(announcements.data?.length)
 
     return (<>
-        <Filters filter={filter} setFilter={index.withReset(setFilter)} filterShown={filterShown} setFilterShown={setFilterShown} />
+        <Filters
+            filter={filter}
+            setFilter={index.withReset(setFilter)}
+            filterShown={filterShown}
+            setFilterShown={setFilterShown}
+        />
         <div style={styles.container}>
             <Stories
                 currentIndex={index.n}
@@ -98,7 +100,10 @@ function HomePage() {
                 keyboardNavigation={true}
             />
         </div>
-        <BottomNavBar toggleFilters={setFilterShown} width={width} />
+        <BottomNavBar
+            toggleFilters={setFilterShown}
+            width={width}
+        />
     </>)
 }
 

front/src/pages/LoginPage.tsx

@@ -1,7 +1,6 @@
 import { useNavigate } from 'react-router-dom'
 
-import { AuthForm } from '../components'
+import { AuthForm, CardLayout } from '../components'
-import CardLayout from '../components/CardLayout'
 
 function LoginPage() {
     const navigate = useNavigate()