Improved loading handling

front/src/components/CategoryPreview.tsx

@@ -1,7 +1,7 @@
 import { StoriesPreview } from '.'
 import { UserCategoriesNames, UserCategory, composeUserCategoriesFilters } from '../assets/userCategories'
 import { useAnnouncements } from '../hooks/api'
-import { gotError } from '../hooks/useFetch'
+import { gotError, gotResponse } from '../hooks/useFetch'
 
 type CategoryPreviewProps = {
     category: UserCategory,
@@ -15,8 +15,12 @@ function CategoryPreview({ category }: CategoryPreviewProps) {
             <h4 className='fw-bold'>{UserCategoriesNames[category]}</h4>
             {gotError(announcements) ? (
                 <p className='text-danger'>{announcements.error}</p>
-            ) : (announcements.loading ? 'Загрузка...' :
+            ) : (
-                <StoriesPreview announcements={announcements.data} category={category} />
+                gotResponse(announcements) ? (
+                    <StoriesPreview announcements={announcements.data} category={category} />
+                ) : (
+                    'Загрузка...'
+                )
             )}
         </section>
     )

front/src/components/Points.tsx

@@ -3,7 +3,7 @@ import { CSSProperties } from 'react'
 import handStarsIcon from '../assets/handStars.svg'
 
 type PointsProps = {
-    points: number,
+    points: number | string,
 }
 
 const styles = {

front/src/hooks/useFetch.ts

@@ -3,29 +3,44 @@ import { useEffect, useState } from 'react'
 import useSend from './useSend'
 
 type UseFetchShared = {
-    loading: boolean,
     abort?: () => void,
     refetch: () => void,
 }
 
 type UseFetchSucced<T> = {
-    error: null,
     data: T,
+    loading: false,
+    error: null,
+} & UseFetchShared
+
+type UseFetchLoading = {
+    data: undefined,
+    loading: true,
+    error: null,
 } & UseFetchShared
 
 type UseFetchErrored = {
-    error: string,
     data: undefined,
+    loading: false,
+    error: string,
 } & UseFetchShared
 
-type UseFetchReturn<T> = UseFetchSucced<T> | UseFetchErrored
+type UseFetchReturn<T> = UseFetchSucced<T> | UseFetchLoading | UseFetchErrored
 
 const gotError = <T>(res: UseFetchReturn<T>): res is UseFetchErrored => (
     typeof res.error === 'string'
 )
 
-const fallbackError = <T>(res: UseFetchReturn<T>) => (
+function fallbackError<T>(res: UseFetchSucced<T> | UseFetchErrored): T | string
-    gotError(res) ? res.error : res.data
+function fallbackError<T>(res: UseFetchReturn<T>): T | string | undefined
+function fallbackError<T>(res: UseFetchReturn<T>): T | string | undefined {
+    return (
+        gotError(res) ? res.error : res.data
+    )
+}
+
+const gotResponse = <T>(res: UseFetchReturn<T>): res is UseFetchSucced<T> | UseFetchErrored => (
+    !res.loading
 )
 
 function useFetch<R, T extends NonNullable<unknown>>(
@@ -59,13 +74,28 @@ function useFetch<R, T extends NonNullable<unknown>>(
 
     useEffect(refetch, [doSend])
 
+    if (loading === true) {
+        return {
+            data: undefined,
+            loading,
+            error: null,
+            refetch,
+        }
+    }
+
+    if (error !== null) {
+        return {
+            data: undefined,
+            loading,
+            error,
+            refetch,
+        }
+    }
+
     return {
-        ...(
+        data: data!,
-            error === null ? ({
-                data: data!, error: null,
-            }) : ({ data: undefined, error })
-        ),
         loading,
+        error,
         refetch,
     }
 }
@@ -74,4 +104,4 @@ export type { UseFetchReturn }
 
 export default useFetch
 
-export { gotError, fallbackError }
+export { gotError, gotResponse, fallbackError }

front/src/pages/AddPage.tsx

@@ -8,7 +8,7 @@ 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 { fallbackError, gotError } from '../hooks/useFetch'
+import { fallbackError, gotError, gotResponse } from '../hooks/useFetch'
 import { useOsmAddresses } from '../hooks/api'
 import CardLayout from '../components/CardLayout'
 
@@ -89,17 +89,18 @@ function AddPage() {
                                 attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                                 url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
                             />
-                            <LocationMarker
+                            {gotResponse(address) && <LocationMarker
                                 address={fallbackError(address)}
                                 position={addressPosition}
                                 setPosition={setAddressPosition}
-                            />
+                            />}
+
                             <ClickHandler
                                 setPosition={setAddressPosition}
                             />
                         </MapContainer>
                     </div>
-                    <p>Адрес: {fallbackError(address)}</p>
+                    <p>Адрес: {gotResponse(address) ? fallbackError(address) : 'Загрузка...'}</p>
                 </Form.Group>
 
                 <Form.Group className='mb-3' controlId='description'>
@@ -138,12 +139,8 @@ function AddPage() {
                 <Form.Group className='mb-3' controlId='trashbox'>
                     <Form.Label>Пункт сбора мусора</Form.Label>
                     <div className='mb-3'>
-                        {trashboxes.loading
+                        {gotResponse(trashboxes)
                             ? (
-                                <div style={styles.map}>
-                                    <p>Загрузка...</p>
-                                </div>
-                            ) : (
                                 gotError(trashboxes) ? (
                                     <p
                                         style={styles.map}
@@ -167,10 +164,14 @@ function AddPage() {
                                         />
                                     </MapContainer>
                                 )
+                            ) : (
+                                <div style={styles.map}>
+                                    <p>Загрузка...</p>
+                                </div>
                             )
                         }
                     </div>
-                    {!gotError(trashboxes) && selectedTrashbox.index > -1 ? (
+                    {gotResponse(trashboxes) && !gotError(trashboxes) && selectedTrashbox.index > -1 ? (
                         <p>Выбран пункт сбора мусора на {
                             trashboxes.data[selectedTrashbox.index].Address
                         } с категорией {selectedTrashbox.category}</p>

front/src/pages/HomePage.tsx

@@ -26,16 +26,19 @@ function generateStories(announcements: Announcement[], refresh: () => void): St
 }
 
 function fallbackGenerateStories(announcements: UseFetchReturn<Announcement[]>) {
-    if (announcements.loading)
+    if (announcements.loading) {
         return fallbackStory()
+    }
 
-    if (gotError(announcements))
+    if (gotError(announcements)) {
         return fallbackStory(announcements.error, true)
+    }
 
     const stories = generateStories(announcements.data, announcements.refetch)
 
-    if (stories.length === 0)
+    if (stories.length === 0) {
         return fallbackStory('Здесь пока пусто')
+    }
 
     return stories
 }
@@ -43,7 +46,9 @@ function fallbackGenerateStories(announcements: UseFetchReturn<Announcement[]>)
 const fallbackStory = (text = '', isError = false): Story[] => [{
     content: ({ action }) => {
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        useEffect(() => { action('pause') }, [action])
+        useEffect(() => { 
+            action('pause') 
+        }, [action])
 
         return (
             <div style={styles.center} className={isError ? 'text-danger' : ''}>

front/src/pages/UserPage.tsx

@@ -3,7 +3,7 @@ import { Container } from 'react-bootstrap'
 import { useUser } from '../hooks/api'
 import { userCategories } from '../assets/userCategories'
 import { BackHeader, CategoryPreview, Points, SignOut } from '../components'
-import { gotError } from '../hooks/useFetch'
+import { gotError, gotResponse } from '../hooks/useFetch'
 
 function UserPage() {
     const user = useUser()
@@ -11,16 +11,26 @@ function UserPage() {
     return (
         <Container style={{ maxWidth: 'calc(100vh*9/16)' }}>
             <BackHeader text={
-                gotError(user) ? (
+                gotResponse(user) ? (
-                    user.error
+                    gotError(user) ? (
+                        user.error
+                    ) : (
+                        `${user.data.name}, с нами с ${new Date(user.data.regDate).toLocaleDateString('ru')}`
+                    )
                 ) : (
-                    `${user.data.name}, с нами с ${new Date(user.data.regDate).toLocaleDateString('ru')}`
+                    'Загрузка...'
                 )
             }>
                 <SignOut />
             </BackHeader>
 
-            <Points points={gotError(user) ? -1 : user.data?.points} />
+            <Points points={
+                gotResponse(user) ? (
+                    gotError(user) ? -1 : user.data?.points
+                ) : (
+                    'Загрузка...'
+                )
+            } />
             {userCategories.map(cat => (
                 <CategoryPreview key={cat} category={cat} />
             ))}