Source: react/hoc/WithVersionNotifier.js

import hoistNonReactStatic from "hoist-non-react-statics";
import { useCallback, useEffect, useState, forwardRef } from "@/import/react";
import useVersion from "@/shared/hook/useVersion";
import ModalWithCloseButton from "@/shared/components/variant/modal/withCloseButton";

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 withVersionNotifier(Component) {
  function WithVersionNotifier(props, ref) {
    const notifyUser = useVersion();
    const [open, setOpen] = useState(false);

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

    useEffect(() => {
      if (notifyUser && !open) {
        // Approximately hide the notification for about 10 seconds before showing it again.
        const timer = setTimeout(() => {
          setOpen(true);
        }, 10 * 1000);
        return () => {
          clearTimeout(timer);
        };
      }
    }, [notifyUser, open]);

    const buttonCallback = useCallback(() => {
      if (typeof window !== "undefined") {
        window.location.reload(true);
      }
    }, []);

    return (
      <>
        <ModalWithCloseButton
          title="Herlaad de pagina"
          description="Er is een nieuwe versie van de applicatie beschikbaar. Herlaad de pagina om verder te gaan."
          buttonText="Herlaad de pagina"
          open={open}
          setOpen={setOpen}
          buttonAction={buttonCallback}
        />
        <Component {...props} ref={ref} />
      </>
    );
  }
  hoistNonReactStatic(WithVersionNotifier, Component);
  WithVersionNotifier.displayName = `WithVersionNotifier(${getDisplayName(Component)})`;
  return forwardRef(WithVersionNotifier);
}

export default withVersionNotifier;