84 lines
2.6 KiB
JavaScript
84 lines
2.6 KiB
JavaScript
import { useCallback, useEffect, useRef, useState } from 'react'
|
|
|
|
export default function useLazyProfileFeaturedArtworks({ username, initialFeaturedArtworks, enabled }) {
|
|
const hasInitialValue = Array.isArray(initialFeaturedArtworks)
|
|
const [items, setItems] = useState(() => hasInitialValue ? initialFeaturedArtworks : [])
|
|
const [loaded, setLoaded] = useState(hasInitialValue)
|
|
const [loading, setLoading] = useState(false)
|
|
const [error, setError] = useState(false)
|
|
const requestKeyRef = useRef(username)
|
|
const requestedRef = useRef(hasInitialValue)
|
|
const abortRef = useRef(null)
|
|
|
|
useEffect(() => {
|
|
if (requestKeyRef.current === username) return undefined
|
|
|
|
abortRef.current?.abort()
|
|
abortRef.current = null
|
|
requestKeyRef.current = username
|
|
requestedRef.current = false
|
|
setItems([])
|
|
setLoaded(false)
|
|
setLoading(false)
|
|
setError(false)
|
|
|
|
return undefined
|
|
}, [username])
|
|
|
|
useEffect(() => {
|
|
if (!hasInitialValue || requestKeyRef.current !== username) return
|
|
|
|
abortRef.current?.abort()
|
|
abortRef.current = null
|
|
requestedRef.current = true
|
|
setItems(initialFeaturedArtworks)
|
|
setLoaded(true)
|
|
setLoading(false)
|
|
setError(false)
|
|
}, [hasInitialValue, initialFeaturedArtworks, username])
|
|
|
|
const load = useCallback(async () => {
|
|
if (!enabled || hasInitialValue || requestedRef.current || !username) return
|
|
|
|
requestedRef.current = true
|
|
const controller = new AbortController()
|
|
const requestKey = requestKeyRef.current
|
|
abortRef.current = controller
|
|
setLoading(true)
|
|
setError(false)
|
|
|
|
try {
|
|
const response = await fetch(`/api/profile/${encodeURIComponent(username)}/featured-artworks`, {
|
|
headers: { Accept: 'application/json' },
|
|
credentials: 'same-origin',
|
|
signal: controller.signal,
|
|
})
|
|
|
|
if (!response.ok) throw new Error('Featured artworks could not be loaded.')
|
|
|
|
const payload = await response.json()
|
|
if (requestKey !== requestKeyRef.current || controller.signal.aborted) return
|
|
|
|
setItems(Array.isArray(payload?.data) ? payload.data : [])
|
|
setLoaded(true)
|
|
} catch (caught) {
|
|
if (caught?.name === 'AbortError' || requestKey !== requestKeyRef.current) return
|
|
requestedRef.current = false
|
|
setError(true)
|
|
} finally {
|
|
if (requestKey === requestKeyRef.current) {
|
|
abortRef.current = null
|
|
setLoading(false)
|
|
}
|
|
}
|
|
}, [enabled, hasInitialValue, username])
|
|
|
|
useEffect(() => {
|
|
if (enabled) load()
|
|
}, [enabled, load])
|
|
|
|
useEffect(() => () => abortRef.current?.abort(), [])
|
|
|
|
return { items, loaded, loading, error, retry: load }
|
|
}
|