Simplified states react hook manager for the animations around the process of data fetching/loading.

use-fetcher.tsx

'use strict';

import React from 'react';

// A state hook that supports 5 fetcher states:
//
// @see [Data Fetching/Loading Animations · Issue #2 · zhanbei/uzbei.com](https://github.com/zhanbei/uzbei.com/issues/2)
// ref [streamich/react-use: React Hooks - Github](https://github.com/streamich/react-use)
// ref [rehooks/awesome-react-hooks: Awesome React Hooks - Github](https://github.com/rehooks/awesome-react-hooks)
//
// 1. Loading
// 2. Refreshing
// 3. Error
// 4. Empty Data
// 5. Real Data
export interface IFetcher {
	loading: boolean;
	initializing: boolean;
	data?: any;
	error?: any;
	message: string;
}

const init: IFetcher = {
	loading: false,
	initializing: true,
	data: undefined,
	error: undefined,
	message: 'Loading resources...',
};

// Load immediately with following refreshes.
export const useNewFetcher = (): [IFetcher, (data?: any, error?: any) => any, () => any] => {
	const [fetcher, setStatus] = React.useState(init);
	const fetched = (data: any, error: any) => setStatus({loading: false, initializing: false, data, error, message: error ? 'Error Encountered!' : (data ? '' : 'Empty Data Fetched!')});
	const refreshing = () => setStatus({loading: true, initializing: false, data: undefined, error: undefined, message: fetcher.initializing ? 'Loading Data...' : 'Refreshing resources...'});
	// const error = (error: any) => setStatus({...fetcher, loading: false, data: undefined, error});
	return [fetcher, fetched, refreshing];
};