Fixed useSend loading flow on abort

Made data null on error
Made it remain in loading state on refetch and remount abortion

front/src/hooks/api/useSignIn.ts

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

front/src/hooks/useFetch.ts

@@ -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,11 +68,15 @@ 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)
                 }
+            }
         ).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,

front/src/hooks/useSend.ts

@@ -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,7 +76,18 @@ function useSend<R, T extends NonNullable<unknown>>(
             return processResponse(data)
 
         } catch (err) {
-            if (err instanceof Error && !isAborted(err)) {
+            if (err instanceof Error) {
+                if (isAborted<T>(err)) {
+                    if (err.message !== 'resent') {
+                        setLoading(false)
+                    }
+
+                    if (err.fallback !== undefined) {
+                        return err.fallback
+                    }
+
+                    return undefined
+                } else {
                     if (err instanceof TypeError) {
                         setError('Ошибка сети')
                     } else {
@@ -83,11 +97,12 @@ function useSend<R, T extends NonNullable<unknown>>(
                     if (import.meta.env.DEV) {
                         console.error(url, params, err)
                     }
-            }
 
                     setLoading(false)
+                }
+            }
 
-            return undefined
+            return null
         }
     }, [defaultParams, needAuth, navigate, url, method, guardResponse, processResponse])
 

front/src/hooks/useSendButtonCaption.ts

@@ -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('Отправить ещё раз')
 

front/src/utils/index.ts

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