IO-1138 Offline detection.

client/src/App/App.container.jsx

@@ -14,6 +14,7 @@ if (process.env.NODE_ENV === "production") LogRocket.init("gvfvfw/bodyshopapp");
 
 export default function AppContainer() {
   const { t } = useTranslation();
+
   return (
     <ApolloProvider client={client}>
       <ConfigProvider

client/src/App/App.jsx

@@ -1,3 +1,4 @@
+import { Button, Result } from "antd";
 import React, { lazy, Suspense, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -8,6 +9,8 @@ import ErrorBoundary from "../components/error-boundary/error-boundary.component
 import LoadingSpinner from "../components/loading-spinner/loading-spinner.component";
 import AboutPage from "../pages/about/about.page";
 import TechPageContainer from "../pages/tech/tech.page.container";
+import { setOnline } from "../redux/application/application.actions";
+import { selectOnline } from "../redux/application/application.selectors";
 import { checkUserSession } from "../redux/user/user.actions";
 import { selectCurrentUser } from "../redux/user/user.selectors";
 import PrivateRoute from "../utils/private-route";
@@ -27,12 +30,14 @@ const MobilePaymentContainer = lazy(() =>
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
+  online: selectOnline,
 });
 const mapDispatchToProps = (dispatch) => ({
   checkUserSession: () => dispatch(checkUserSession()),
+  setOnline: (isOnline) => dispatch(setOnline(isOnline)),
 });
 
-export function App({ checkUserSession, currentUser }) {
+export function App({ checkUserSession, currentUser, online, setOnline }) {
   useEffect(() => {
     checkUserSession();
   }, [checkUserSession]);
@@ -42,10 +47,38 @@ export function App({ checkUserSession, currentUser }) {
 
   const { t } = useTranslation();
 
+  window.addEventListener("offline", function (e) {
+    console.log("Internet connection lost.");
+    setOnline(false);
+  });
+
+  window.addEventListener("online", function (e) {
+    setOnline(true);
+  });
+
   if (currentUser.authorized === null) {
     return <LoadingSpinner message={t("general.labels.loggingin")} />;
   }
 
+  if (!online)
+    return (
+      <Result
+        status="warning"
+        title={t("general.labels.nointernet")}
+        subTitle={t("general.labels.nointernet_sub")}
+        extra={
+          <Button
+            type="primary"
+            onClick={() => {
+              window.location.reload();
+            }}
+          >
+            {t("general.actions.refresh")}
+          </Button>
+        }
+      />
+    );
+
   return (
     <Switch>
       <Suspense fallback={<LoadingSpinner message="ImEX Online" />}>