withGlobal HOC

withGlobal.tsx

import { FC, useCallback } from "react";
import { useGlobal, ACTIONS, GlobalContextProps } from "../contexts/global";

export interface IGlobal extends GlobalContextProps {
  requestHandler: (requestFunction: () => {}) => Promise<any>;
}

interface IWrappedComponent {
  global: IGlobal;
}

export const withGlobal = (WrappedComponent: FC<IWrappedComponent>) => {
  const HOC = () => {
    const { state, dispatch } = useGlobal();

    const requestHandler = useCallback(
      async (requestFunction) => {
        try {
          dispatch({ type: ACTIONS.IS_LOADING, payload: true });
          return await requestFunction();
        } catch (error) {
          dispatch({
            type: ACTIONS.SHOW_ERROR,
            payload: error?.response?.data || true
          });
        } finally {
          dispatch({ type: ACTIONS.IS_LOADING, payload: false });
        }
      },
      [dispatch]
    );

    const props: IGlobal = {
      state,
      dispatch,
      requestHandler
    };

    return <WrappedComponent global={props} />;
  };

  return HOC;
};