Improved loading handling

2023-07-31 14:55:12 +03:00 · 2023-07-31 14:55:12 +03:00 · e7327945e3
commit e7327945e3
parent 9b35a54ae9
6 changed files with 85 additions and 35 deletions
--- a/front/src/components/CategoryPreview.tsx
+++ b/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>
    )
--- a/front/src/components/Points.tsx
+++ b/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 = {
--- a/front/src/hooks/useFetch.ts
+++ b/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>) => (
-    gotError(res) ? res.error : res.data
+function fallbackError<T>(res: UseFetchSucced<T> | UseFetchErrored): T | string
+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 {
-        ...(
-            error === null ? ({
-                data: data!, error: null,
-            }) : ({ data: undefined, error })
-        ),
+        data: data!,
        loading,
+        error,
        refetch,
    }
 }
@ -74,4 +104,4 @@ export type { UseFetchReturn }

 export default useFetch

-export { gotError, fallbackError }
+export { gotError, gotResponse, fallbackError }
--- a/front/src/pages/AddPage.tsx
+++ b/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>
--- a/front/src/pages/HomePage.tsx
+++ b/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' : ''}>
--- a/front/src/pages/UserPage.tsx
+++ b/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) ? (
-                    user.error
+                gotResponse(user) ? (
+                    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} />
            ))}