A word about `NetworkState`

By nature, the network calls are asynchronous. Therefore, in most HTTP clients, the network call results are modeled after the promises. The promises work well with javascript, yet in react components, promises makes confusions. Mycoriza prefer states to promise, as handling state is more natural.

Network State

Mycoriza introduces a new generic type NetworkState<T>. It follows predefined state flow as follows.

Network State diagram

Init: This state means that the network call is not yet initiated.
Pending: Upon initiating the call, the NetworkState moves to Pending state. Loaders can be rendered within this state
Success: NetworkState moves to this state upon a successful completion of the network call. This state contains a a property called data which contains the result of the execution.
Error: NetworkState moves to this state upon a failure of the network call. This state contains the metadata about the failure of the network call.

Typesafe Utilities

Some of those utility functions contains additional information related to the operation. To mine out this information, Mycoriza provides a set of utility functions as follows

isInit

This function checks whether the NetworkState is in init state. Usage can be listed as follows.

function MyComponent() {
    const [state] = useYoutGeneratedHook()

    if (isInit(state)) {
        return <InitStateContent/>
    }

    return null;
}

isPending

This function checks whether the NetworkState is in pending state. Usually the loaders can be rendered in this state.

function MyComponent() {
    const [state] = useYoutGeneratedHook()

    if (isPending(state)) {
        return <Loader/>
    }

    return null;
}

isSuccess

This function check whether the NetworkState is in success state. This state contains the result in the data property. It can be used as follows.

function MyComponent() {
    const [state] = useYoutGeneratedHook()

    // Following code fails as state is not confirmed to be in Success state.
    console.log(state.data)
    if (isSuccess(state)) {
        return <SuccessContent/>
    }

    return null;
}

isError

This function check whether the NetworkState is in success state. This state contains the error in the error property. It can be used as follows.

function MyComponent() {
    const [state] = useYoutGeneratedHook()

    if (isError(state)) {
        return <Error/>
    }

    return null;
}

Interoperability

While the NetworkStatess are tempting, there might be instances where you still need to use Promises. Therefore, Mycoriza provides two additional hooks to support this interoperability.

`useAsNetworkState` hook

Features like async-storage and permissions in react-native uses Promise. To port those features to the NetworkState, Mycoriza provides useAsNetworkState hook. This hook accepts a function which provides a promise, and returns the regular Mycoriza hook results. The hook can be used as below.

    function MyComponent() {
        const [state, execute] = useAsNetworkState(() => new Promise((resolve, reject) => { ... })

        useEffect(() => {
            if(isSuccess(state)) {
              //do on success
            } else if (isError(state)) {
              //do on error
            }
        }, [state.state])

        return null;
    }

`useAsPromise` hook

When dealing with asynchronous behaviors, most of the libraries out there requires promises. In order to support this functionality, Mycoriza provides useAsPromise hook. This hook accepts a regular Mycoriza generated hook result and returns a function which creates a Promise.

Each time the result function is called, it creates a promise and upon network sate change to terminated state, the promise completes. The hook can be used as below.

function MyComponent() {
    const fetchData = useAsPromise(useDataAsNetworkState());

    useEffect(() => {
        fetchData().then(data => {
          //Do on data
        }).catch(e => {
          //Do on error
        })
    }, [])

    return null;
}

`useAsNullable` hook.

useAsNullable hook is defined for a common but a specific case. Generally, a top level component in the component hierarchy handles the network status and the components in the success branch does not have any interest in the failure cases. In such components, having the status checks is unnecessary. Therefore, the useAsNullable hook is defined to convert the NetworkState to nullable value.

With useAsNullable hook, the first parameter of the result is unwrapped. if the state is a success, the data in the state is returned; otherwise, undefined is returned. This hook can be used as below.

function MyComponent() {
    const [data, fetch, clear] = useAsNullable(useDataAsNetworkState());

    useEffect(() => {
        //Fetch Data.
        fetch()
    }, [])

    return <>{!!data && <>{JSON.stringify(data)}</>}</>;
}

A word about NetworkState