@epcare/esm-referal-laboratory-app/src/components/overlay/hook.ts

Laboratory microfrontend for OpenMRS 3.x

import { getGlobalStore } from '@openmrs/esm-framework';
import { useEffect, useState } from 'react';

interface OverlayStore {
  isOverlayOpen: boolean;
  component?: any;
  header: string;
}

const initialState = { isOverlayOpen: false, component: Function, header: '' };

const getOverlayStore = () => {
  return getGlobalStore('laboratory', initialState);
};

export const launchOverlay = (headerTitle: string, componentToRender) => {
  const store = getOverlayStore();
  store.setState({
    isOverlayOpen: true,
    component: componentToRender,
    header: headerTitle,
  });
};

export const closeOverlay = () => {
  const store = getOverlayStore();
  store.setState({ component: null, isOverlayOpen: false });
};

export const useOverlay = () => {
  const [overlay, setOverlay] = useState<OverlayStore>();

  useEffect(() => {
    function update(state: OverlayStore) {
      setOverlay(state);
    }

    update(getOverlayStore().getState());
    getOverlayStore().subscribe(update);
  }, []);

  return {
    isOverlayOpen: overlay?.isOverlayOpen,
    component: overlay?.component,
    header: overlay?.header,
  };
};