polka_billy/porridger
1
0
Fork 1
Code Issues 20 Pull Requests Packages Releases Activity

Improved loading handling

Browse Source
This commit is contained in:
Dmitriy Shishkov 2023-07-31 14:55:12 +03:00
parent 9b35a54ae9
commit e7327945e3
Signed by: dm1sh
GPG Key ID: 027994B0AA357688
6 changed files with 85 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
front/src/components/CategoryPreview.tsx
View File

@ -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 ? 'Загрузка...' :
) : (
gotResponse(announcements) ? (
<StoriesPreview announcements={announcements.data} category={category} />
) : (
'Загрузка...'
)
)}
</section>
)

2
front/src/components/Points.tsx
View File

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

52
front/src/hooks/useFetch.ts
View File

@ -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
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 {
...(
error === null ? ({
data: data!, error: null,
}) : ({ data: undefined, error })
),
data: undefined,
loading,
error: null,
refetch,
}
}
if (error !== null) {
return {
data: undefined,
loading,
error,
refetch,
}
}
return {
data: data!,
loading,
error,
refetch,
}
}
@ -74,4 +104,4 @@ export type { UseFetchReturn }
export default useFetch
export { gotError, fallbackError }
export { gotError, gotResponse, fallbackError }

21
front/src/pages/AddPage.tsx
View File

@ -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>

13
front/src/pages/HomePage.tsx
View File

@ -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' : ''}>

14
front/src/pages/UserPage.tsx
View File

@ -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={
gotResponse(user) ? (
gotError(user) ? (
user.error
) : (
`${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} />
))}