Function useLoadResourcesState

  • This function is a react hook for managing the state involved with loading resources.

    Example

    import { useLoadResourcesState } from '@oneblink/apps-react'
    const fetchResources = async () => {
    const response = await fetch(`https://some-website.com/api?data=data`)

    if (!response.ok) {
    const text = await response.text()
    throw new Error(text)
    }

    return await response.json()
    }

    const MyComponent = () => {
    const [resources, isLoading, loadError, refresh, setResult] =
    useLoadResourcesState(fetchResources)

    if (isLoading) {
    return <Loading />
    }

    if (loadError) {
    return (
    <>
    <Error message={state.error} />
    <button onClick={refresh}>Try Again</button>
    </>
    )
    }

    return (
    <>
    {resources.map((resource) => {
    // RENDER UI
    return <></>
    })}
    </>
    )
    }

    export default MyComponent

    Type Parameters

    • T

    Parameters

    • onLoad: ((abortSignal) => Promise<T[]>)

      The function that fetches your resources. Should be a Promise that returns your array of resources

        • (abortSignal): Promise<T[]>
        • Parameters

          • abortSignal: AbortSignal

          Returns Promise<T[]>

    Returns [resources: T[], isLoading: boolean, loadError: Error | null, handleRefresh: (() => void), setResult: React.Dispatch<React.SetStateAction<T[]>>]