Added useSend hook, converted useFetch to use it

Moved useFetch
Related to #19

front/src/hooks/api/useAnnouncements.ts

@@ -1,4 +1,4 @@
-import useFetch from './useFetch'
+import { useFetch } from '../'
 import { FiltersType } from '../../utils/filters'
 import { composeAnnouncementsURL, initialAnnouncements, processAnnouncements } from '../../api/announcements'
 

front/src/hooks/api/useFetch.ts

@@ -1,130 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-
-import { handleHTTPErrors, isAborted } from '../../utils'
-import { getToken } from '../../utils/auth'
-import { useNavigate } from 'react-router-dom'
-import { SetState } from '../../utils/types'
-
-type UseFetchShared = {
-    loading: boolean,
-    abort?: () => void,
-}
-
-type UseFetchSucced<T> = {
-    error: null,
-    data: T,
-} & UseFetchShared
-
-type UseFetchErrored = {
-    error: string,
-    data: undefined
-} & UseFetchShared
-
-const gotError = <T>(res: UseFetchErrored | UseFetchSucced<T>): res is UseFetchErrored => (
-    typeof res.error === 'string'
-)
-
-const fallbackError = <T>(res: UseFetchSucced<T> | UseFetchErrored) => (
-    gotError(res) ? res.error : res.data
-)
-
-type UseFetchReturn<T> = ({
-    error: null,
-    data: T
-} | {
-    error: string,
-    data: undefined
-}) & {
-    loading: boolean,
-    setData: SetState<T | undefined>
-    abort?: (() => void)
-}
-
-const useFetch = <R, T>(
-    url: string,
-    method: RequestInit['method'],
-    needAuth: boolean,
-    guardResponse: (data: unknown) => data is R,
-    processData: (data: R) => T,
-    initialData?: T,
-    params?: RequestInit
-): UseFetchReturn<T> => {
-    const [data, setData] = useState(initialData)
-    const [loading, setLoading] = useState(true)
-    const [error, setError] = useState<string | null>(null)
-
-    const navigate = useNavigate()
-
-    const abortControllerRef = useRef<AbortController>()
-
-    useEffect(() => {
-        if (abortControllerRef.current) {
-            abortControllerRef.current.abort()
-        }
-
-        const abortController = new AbortController()
-        abortControllerRef.current = abortController
-
-        const headers = new Headers({
-            ...params?.headers
-        })
-
-        if (needAuth) {
-            const token = getToken()
-
-            if (token === null) {
-                return navigate('/login')
-            }
-
-            headers.append('Auth', `Bearer ${token}`)
-        }
-
-        fetch(url, {
-            method,
-            ...params,
-            headers,
-            signal: abortControllerRef.current.signal,
-        })
-            .then(res => {
-                handleHTTPErrors(res)
-
-                return res.json()
-            })
-            .then(data => {
-                if (!guardResponse(data)) {
-                    throw new Error('Malformed server response')
-                }
-
-                setData(processData(data))
-                setLoading(false)
-            })
-            .catch(err => {
-                if (err instanceof Error && !isAborted(err)) {
-                    setError('Ошибка сети')
-
-                    if (import.meta.env.DEV) {
-                        console.log(url, params, err)
-                    }
-                }
-
-                setLoading(false)
-            })
-
-        return () => abortControllerRef.current?.abort()
-    }, [url, method, needAuth, params, guardResponse, processData, navigate])
-
-    return {
-        ...(
-            error === null ? ({
-                data: data!, error: null
-            }) : ({ data: undefined, error })
-        ),
-        loading,
-        setData,
-        abort: abortControllerRef.current?.abort.bind(abortControllerRef.current)
-    }
-}
-
-export default useFetch
-
-export { gotError, fallbackError }

front/src/hooks/api/useOsmAddress.ts

@@ -1,6 +1,6 @@
 import { LatLng } from 'leaflet'
 
-import useFetch from './useFetch'
+import { useFetch } from '../'
 import { composeOsmAddressURL, processOsmAddress } from '../../api/osmAddress'
 import { isOsmAddressResponse } from '../../api/osmAddress/types'
 

front/src/hooks/api/useTrashboxes.ts

@@ -1,6 +1,6 @@
 import { LatLng } from 'leaflet'
 
-import useFetch from './useFetch'
+import { useFetch } from '../'
 import { composeTrashboxURL } from '../../api/trashbox'
 import { isTrashboxResponse } from '../../api/trashbox/types'
 

front/src/hooks/index.ts

@@ -1 +1,3 @@
 export { default as useStoryDimensions } from './useStoryDimensions'
+export { default as useSend } from './useSend'
+export { default as useFetch } from './useFetch'

front/src/hooks/useFetch.ts

@@ -0,0 +1,75 @@
+import { useEffect, useState } from 'react'
+
+import { SetState } from '../utils/types'
+import useSend from './useSend'
+
+type UseFetchShared = {
+    loading: boolean,
+    abort?: () => void,
+}
+
+type UseFetchSucced<T> = {
+    error: null,
+    data: T,
+} & UseFetchShared
+
+type UseFetchErrored = {
+    error: string,
+    data: undefined
+} & UseFetchShared
+
+const gotError = <T>(res: UseFetchErrored | UseFetchSucced<T>): res is UseFetchErrored => (
+    typeof res.error === 'string'
+)
+
+const fallbackError = <T>(res: UseFetchSucced<T> | UseFetchErrored) => (
+    gotError(res) ? res.error : res.data
+)
+
+type UseFetchReturn<T> = ({
+    error: null,
+    data: T
+} | {
+    error: string,
+    data: undefined
+}) & {
+    loading: boolean,
+    setData: SetState<T | undefined>
+    abort?: (() => void)
+}
+
+function useFetch<R, T>(
+    url: string,
+    method: RequestInit['method'],
+    needAuth: boolean,
+    guardResponse: (data: unknown) => data is R,
+    processResponse: (data: R) => T,
+    initialData?: T,
+    params?: Omit<RequestInit, 'method'>
+): UseFetchReturn<T> {
+    const [data, setData] = useState(initialData)
+
+    const { doSend, loading, error } = useSend(url, method, needAuth, guardResponse, processResponse, params)
+
+    useEffect(() => {
+        doSend().then(
+            data => { if (data !== undefined) setData(data) }
+        ).catch(
+            err => import.meta.env.DEV && console.error('Failed to do fetch request', err)
+        )
+    }, [doSend])
+
+    return {
+        ...(
+            error === null ? ({
+                data: data!, error: null
+            }) : ({ data: undefined, error })
+        ),
+        loading,
+        setData
+    }
+}
+
+export default useFetch
+
+export { gotError, fallbackError }

front/src/hooks/useSend.ts

@@ -0,0 +1,94 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import { getToken } from '../utils/auth'
+import { handleHTTPErrors, isAborted } from '../utils'
+
+function useSend<R, T>(
+    url: string,
+    method: RequestInit['method'],
+    needAuth: boolean,
+    guardResponse: (data: unknown) => data is R,
+    processResponse: (data: R) => T,
+    defaultParams?: Omit<RequestInit, 'method'>
+) {
+    const [loading, setLoading] = useState(false)
+    const [error, setError] = useState<string | null>(null)
+
+    const navigate = useNavigate()
+
+    const abortControllerRef = useRef<AbortController>()
+
+    useEffect(() => () => abortControllerRef.current?.abort(), [])
+
+    /** 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'>) => {
+        setLoading(true)
+
+        if (abortControllerRef.current) {
+            abortControllerRef.current.abort()
+        }
+
+        const abortController = new AbortController()
+        abortControllerRef.current = abortController
+
+        const headers = new Headers({
+            ...defaultParams?.headers,
+            ...params?.headers
+        })
+
+        if (needAuth) {
+            const token = getToken()
+
+            if (token === null) {
+                navigate('/login')
+
+                return undefined
+            }
+
+            headers.append('Auth', `Bearer ${token}`)
+        }
+
+        try {
+            const res = await fetch(url + new URLSearchParams(urlProps).toString(), {
+                method,
+                ...defaultParams,
+                ...params,
+                headers,
+                signal: abortControllerRef.current.signal,
+            })
+
+            handleHTTPErrors(res)
+
+            const data: unknown = await res.json()
+
+            if (!guardResponse(data)) {
+                throw new Error('Malformed server response')
+            }
+
+            setLoading(false)
+
+            return processResponse(data)
+
+        } catch (err) {
+            if (err instanceof Error && !isAborted(err)) {
+                setError('Ошибка сети')
+
+                if (import.meta.env.DEV) {
+                    console.log(url, params, err)
+                }
+            }
+
+            setLoading(false)
+
+            return undefined
+        }
+    }, [defaultParams, needAuth, navigate, url, method, guardResponse, processResponse])
+
+    return {
+        doSend, loading, error,
+        abort: abortControllerRef.current?.abort.bind(abortControllerRef.current)
+    }
+}
+
+export default useSend

front/src/pages/AddPage.tsx

@@ -8,7 +8,7 @@ import { useAddAnnouncement, useTrashboxes } from '../hooks/api'
 import { handleHTTPErrors } from '../utils'
 import { categories, categoryNames } from '../assets/category'
 import { stations, lines, lineNames } from '../assets/metro'
-import { fallbackError, gotError } from '../hooks/api/useFetch'
+import { fallbackError, gotError } from '../hooks/useFetch'
 import { useOsmAddresses } from '../hooks/api'
 
 const styles = {

front/src/pages/HomePage.tsx

@@ -10,7 +10,7 @@ import { Announcement } from '../api/announcement/types'
 import { categoryGraphics } from '../assets/category'
 
 import puffSpinner from '../assets/puff.svg'
-import { gotError } from '../hooks/api/useFetch'
+import { gotError } from '../hooks/useFetch'
 
 function generateStories(announcements: Announcement[]): Story[] {
     return announcements.map(announcement => {
@@ -63,13 +63,15 @@ const styles = {
 }
 
 function HomePage() {
-    const { height, width } = useStoryDimensions(16 / 10)
+    const { height, width } = useStoryDimensions(16 / 9)
 
     const [filterShown, setFilterShown] = useState(false)
     const [filter, setFilter] = useState(defaultFilters)
 
     const announcementsFetch = useAnnouncements(filter)
 
+    // console.log(announcementsFetch)
+
     const stories = fallbackGenerateStories(announcementsFetch)
 
     return (<>

front/src/pages/LoginPage.tsx

@@ -28,7 +28,7 @@ function LoginPage() {
 
         if (token) {
             setToken(token)
-            navigate('/')
+            navigate(-1 - Number(import.meta.env.DEV))
         }
     }