Source: react/hoc/WithOnlineNotifier.js

import hoistNonReactStatic from "hoist-non-react-statics";
import { useIsUserOnline } from "@/shared/helper/sync/general";
import { forwardRef, useEffect, useState } from "@/import/react";
import ModalWithoutCloseButton from "@/shared/components/variant/modal/withoutCloseButton";

function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || "Element";
}

/**
 * Add a modal showing "no internet connection" when the component is mounted and the user is not online
 * @param Component
 * @returns {function({readOnly: *, [p: string]: *}): *}
 */
function withOnlineNotifier(Component) {
  function WithOnlineNotifier(props, ref) {
    const notifyUser = !useIsUserOnline();
    const [open, setOpen] = useState(false);

    useEffect(() => {
      setOpen(notifyUser);
    }, [notifyUser]);

    return (
      <>
        <ModalWithoutCloseButton
          title="Geen internetverbinding"
          description="Om verder te gaan is een internetverbinding noodzakelijk. Controleer uw internetverbinding."
          open={open}
        />
        <Component {...props} ref={ref} />
      </>
    );
  }
  hoistNonReactStatic(WithOnlineNotifier, Component);
  WithOnlineNotifier.displayName = `WithOnlineNotifier(${getDisplayName(Component)})`;
  return forwardRef(WithOnlineNotifier);
}

export default withOnlineNotifier;