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

Fixed useSend loading flow on abort

Browse Source 
Made data null on error
Made it remain in loading state on refetch and remount abortion
This commit is contained in:
Dmitriy Shishkov 2023-08-12 01:32:02 +03:00
parent 3bf00cea6a
commit b12f19ac51
Signed by: dm1sh
GPG Key ID: 027994B0AA357688
5 changed files with 60 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/hooks/api/useSignIn.ts
View File

@ -20,7 +20,7 @@ function useSignIn() {
body: formData,
})
if (token !== undefined) {
if (token !== null && token !== undefined) {
setToken(token)
return true

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

@ -20,7 +20,7 @@ type UseFetchLoading = {
} & UseFetchShared
type UseFetchErrored = {
data: undefined,
data: null,
loading: false,
error: string,
} & UseFetchShared
@ -32,8 +32,7 @@ const gotError = <T>(res: UseFetchReturn<T>): res is UseFetchErrored => (
)
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 {
function fallbackError<T>(res: UseFetchReturn<T>): T | string | null | undefined {
return (
gotError(res) ? res.error : res.data
)
@ -62,7 +61,6 @@ function useFetch<R, T extends NonNullable<unknown>>(
needAuth,
guardResponse,
processResponse,
true,
params,
)
@ -70,10 +68,14 @@ function useFetch<R, T extends NonNullable<unknown>>(
setFetchLoading(true)
doSend().then(
data => {
if (data !== undefined) {
if (data !== undefined && data !== null) {
setData(data)
console.log('Got data', data)
}
if (data !== undefined) {
setFetchLoading(false)
}
setFetchLoading(false)
}
).catch( // must never occur
err => import.meta.env.DEV && console.error('Failed to do fetch request', err)
@ -93,7 +95,7 @@ function useFetch<R, T extends NonNullable<unknown>>(
if (error !== null) {
return {
data: undefined,
data: null,
loading: fetchLoading,
error,
refetch,

49
front/src/hooks/useSend.ts
View File

@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { getToken } from '../utils/auth'
import { handleHTTPErrors, isAborted } from '../utils'
import { AbortError, handleHTTPErrors, isAborted } from '../utils'
function useSend<R, T extends NonNullable<unknown>>(
url: string,
@ -10,17 +10,19 @@ function useSend<R, T extends NonNullable<unknown>>(
needAuth: boolean,
guardResponse: (data: unknown) => data is R,
processResponse: (data: R) => T,
startWithLoading = false,
defaultParams?: Omit<RequestInit, 'method'>,
) {
const [loading, setLoading] = useState(startWithLoading)
const [loading, setLoading] = useState(false)
const [error, setError] = useState<string | null>(null)
const navigate = useNavigate()
const abortControllerRef = useRef<AbortController>()
useEffect(() => () => abortControllerRef.current?.abort(), [])
useEffect(() => () => {
const reason = new AbortError('unmount')
abortControllerRef.current?.abort(reason)
}, [])
/** Don't use in useEffect. If you need request result, go with useFetch instead */
const doSend = useCallback(async (urlProps?: Record<string, string>, params?: Omit<RequestInit, 'method'>) => {
@ -28,7 +30,8 @@ function useSend<R, T extends NonNullable<unknown>>(
setError(null)
if (abortControllerRef.current) {
abortControllerRef.current.abort()
const reason = new AbortError('resent')
abortControllerRef.current.abort(reason)
}
const abortController = new AbortController()
@ -45,7 +48,7 @@ function useSend<R, T extends NonNullable<unknown>>(
if (token === null) {
navigate('/login')
return undefined
return null
}
headers.append('Authorization', `Bearer ${token}`)
@ -73,21 +76,33 @@ function useSend<R, T extends NonNullable<unknown>>(
return processResponse(data)
} catch (err) {
if (err instanceof Error && !isAborted(err)) {
if (err instanceof TypeError) {
setError('Ошибка сети')
} else {
setError(err.message)
}
if (err instanceof Error) {
if (isAborted<T>(err)) {
if (err.message !== 'resent') {
setLoading(false)
}
if (import.meta.env.DEV) {
console.error(url, params, err)
if (err.fallback !== undefined) {
return err.fallback
}
return undefined
} else {
if (err instanceof TypeError) {
setError('Ошибка сети')
} else {
setError(err.message)
}
if (import.meta.env.DEV) {
console.error(url, params, err)
}
setLoading(false)
}
}
setLoading(false)
return undefined
return null
}
}, [defaultParams, needAuth, navigate, url, method, guardResponse, processResponse])

4
front/src/hooks/useSendButtonCaption.ts
View File

@ -11,8 +11,8 @@ function useSendButtonCaption(
const [disabled, setDisabled] = useState(false)
const [title, setTitle] = useState(initial)
const update = useCallback(<T extends NonNullable<unknown>>(data: T | undefined) => {
if (data !== undefined) {
const update = useCallback(<T extends NonNullable<unknown>>(data: T | null | undefined) => {
if (data !== undefined) { // not loading
setCaption(result)
setTitle('Отправить ещё раз')

18
front/src/utils/index.ts
View File

@ -1,7 +1,21 @@
const isAborted = (err: Error) => (
const isAborted = <T>(err: Error): err is AbortError<T> => (
err.name === 'AbortError'
)
type AbortErrorMessage = 'resent' | 'unmount' | 'cancel'
class AbortError<T> extends DOMException {
readonly fallback: T | undefined
message: AbortErrorMessage
constructor(message: AbortErrorMessage, fallback?: T) {
super(message, 'AbortError')
this.message = message
this.fallback = fallback
}
}
function handleHTTPErrors(res: Response) {
if (!res.ok) {
switch (res.status) {
@ -16,4 +30,4 @@ function handleHTTPErrors(res: Response) {
}
}
export { isAborted, handleHTTPErrors }
export { isAborted, AbortError, handleHTTPErrors }