@oneuptime/common 7.0.4257 → 7.0.4260

package/UI/Components/MasterPage/MasterPage.tsx

@@ -1,5 +1,6 @@
 import PageError from "../Error/PageError";
 import PageLoader from "../Loader/PageLoader";
+import OfflineIndicator from "../Offline/OfflineIndicator";
 import TopSection from "../TopSection/TopSection";
 import React, { FunctionComponent, ReactElement } from "react";
 
@@ -19,6 +20,8 @@ export interface ComponentProps {
 const MasterPage: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const [isOnline, setIsOnline] = React.useState(true);
+
   if (props.isLoading) {
     return (
       <React.Fragment>
@@ -37,20 +40,29 @@ const MasterPage: FunctionComponent<ComponentProps> = (
 
   return (
     <React.Fragment>
-      <div className={props.className}>
-        <div className={props.makeTopSectionUnstick ? "" : "sticky top-0 z-10"}>
-          <TopSection
-            hideHeader={props.hideHeader}
-            className={props.topSectionClassName}
-            header={props.header}
-            navbar={props.navBar}
-          />
-        </div>
+      {isOnline && (
+        <div className={props.className}>
+          <div
+            className={props.makeTopSectionUnstick ? "" : "sticky top-0 z-10"}
+          >
+            <TopSection
+              hideHeader={props.hideHeader}
+              className={props.topSectionClassName}
+              header={props.header}
+              navbar={props.navBar}
+            />
+          </div>
 
-        {props.children}
+          {props.children}
 
-        {props.footer && props.footer}
-      </div>
+          {props.footer && props.footer}
+        </div>
+      )}
+      <OfflineIndicator
+        onOnlineOfflineChange={(isOnline: boolean) => {
+          return setIsOnline(isOnline);
+        }}
+      />
     </React.Fragment>
   );
 };

package/UI/Components/Offline/OfflineIndicator.tsx

@@ -0,0 +1,54 @@
+import React, { useState, useEffect, ReactElement } from "react";
+import EmptyState from "../EmptyState/EmptyState";
+import IconProp from "../../../Types/Icon/IconProp";
+import { VoidFunction } from "../../../Types/FunctionTypes";
+
+interface OfflineIndicatorProps {
+  onOnlineOfflineChange?: (isOnline: boolean) => void;
+}
+
+type OfflineIndicatorComponent = React.FC<OfflineIndicatorProps>;
+
+const OfflineIndicator: OfflineIndicatorComponent = ({
+  onOnlineOfflineChange,
+}: OfflineIndicatorProps): ReactElement => {
+  const [isOnline, setIsOnline] = useState(navigator.onLine);
+
+  useEffect(() => {
+    const handleOnline: VoidFunction = () => {
+      setIsOnline(true);
+      onOnlineOfflineChange?.(true);
+    };
+
+    const handleOffline: VoidFunction = () => {
+      setIsOnline(false);
+      onOnlineOfflineChange?.(false);
+    };
+
+    window.addEventListener("online", handleOnline);
+    window.addEventListener("offline", handleOffline);
+
+    // Call with initial state
+    onOnlineOfflineChange?.(navigator.onLine);
+
+    return () => {
+      window.removeEventListener("online", handleOnline);
+      window.removeEventListener("offline", handleOffline);
+    };
+  }, [onOnlineOfflineChange]);
+
+  return (
+    <div>
+      {!isOnline && (
+        <EmptyState
+          id="offline-indicator"
+          title="You are offline"
+          description="Please check your internet connection."
+          icon={IconProp.NoSignal}
+        />
+      )}
+    </div>
+  );
+};
+
+export default OfflineIndicator;

package/build/dist/UI/Components/MasterPage/MasterPage.js

@@ -1,8 +1,10 @@
 import PageError from "../Error/PageError";
 import PageLoader from "../Loader/PageLoader";
+import OfflineIndicator from "../Offline/OfflineIndicator";
 import TopSection from "../TopSection/TopSection";
 import React from "react";
 const MasterPage = (props) => {
+    const [isOnline, setIsOnline] = React.useState(true);
     if (props.isLoading) {
         return (React.createElement(React.Fragment, null,
             React.createElement(PageLoader, { isVisible: true })));
@@ -12,11 +14,14 @@ const MasterPage = (props) => {
             React.createElement(PageError, { message: props.error })));
     }
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: props.className },
+        isOnline && (React.createElement("div", { className: props.className },
             React.createElement("div", { className: props.makeTopSectionUnstick ? "" : "sticky top-0 z-10" },
                 React.createElement(TopSection, { hideHeader: props.hideHeader, className: props.topSectionClassName, header: props.header, navbar: props.navBar })),
             props.children,
-            props.footer && props.footer)));
+            props.footer && props.footer)),
+        React.createElement(OfflineIndicator, { onOnlineOfflineChange: (isOnline) => {
+                return setIsOnline(isOnline);
+            } })));
 };
 export default MasterPage;
 //# sourceMappingURL=MasterPage.js.map

package/build/dist/UI/Components/MasterPage/MasterPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"MasterPage.js","sourceRoot":"","sources":["../../../../../UI/Components/MasterPage/MasterPage.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAC3C,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,KAA0C,MAAM,OAAO,CAAC;AAe/D,MAAM,UAAU,GAAsC,CACpD,KAAqB,EACP,EAAE;IAChB,IAAI,KAAK,CAAC,SAAS,EAAE,CAAC;QACpB,OAAO,CACL,oBAAC,KAAK,CAAC,QAAQ;YACb,oBAAC,UAAU,IAAC,SAAS,EAAE,IAAI,GAAI,CAChB,CAClB,CAAC;IACJ,CAAC;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;QAChB,OAAO,CACL,oBAAC,KAAK,CAAC,QAAQ;YACb,oBAAC,SAAS,IAAC,OAAO,EAAE,KAAK,CAAC,KAAK,GAAI,CACpB,CAClB,CAAC;IACJ,CAAC;IAED,OAAO,CACL,oBAAC,KAAK,CAAC,QAAQ;QACb,6BAAK,SAAS,EAAE,KAAK,CAAC,SAAS;YAC7B,6BAAK,SAAS,EAAE,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB;gBACpE,oBAAC,UAAU,IACT,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,SAAS,EAAE,KAAK,CAAC,mBAAmB,EACpC,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,MAAM,EAAE,KAAK,CAAC,MAAM,GACpB,CACE;YAEL,KAAK,CAAC,QAAQ;YAEd,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,CACzB,CACS,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"MasterPage.js","sourceRoot":"","sources":["../../../../../UI/Components/MasterPage/MasterPage.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAC3C,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,gBAAgB,MAAM,6BAA6B,CAAC;AAC3D,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,KAA0C,MAAM,OAAO,CAAC;AAe/D,MAAM,UAAU,GAAsC,CACpD,KAAqB,EACP,EAAE;IAChB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAErD,IAAI,KAAK,CAAC,SAAS,EAAE,CAAC;QACpB,OAAO,CACL,oBAAC,KAAK,CAAC,QAAQ;YACb,oBAAC,UAAU,IAAC,SAAS,EAAE,IAAI,GAAI,CAChB,CAClB,CAAC;IACJ,CAAC;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;QAChB,OAAO,CACL,oBAAC,KAAK,CAAC,QAAQ;YACb,oBAAC,SAAS,IAAC,OAAO,EAAE,KAAK,CAAC,KAAK,GAAI,CACpB,CAClB,CAAC;IACJ,CAAC;IAED,OAAO,CACL,oBAAC,KAAK,CAAC,QAAQ;QACZ,QAAQ,IAAI,CACX,6BAAK,SAAS,EAAE,KAAK,CAAC,SAAS;YAC7B,6BACE,SAAS,EAAE,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB;gBAEjE,oBAAC,UAAU,IACT,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,SAAS,EAAE,KAAK,CAAC,mBAAmB,EACpC,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,MAAM,EAAE,KAAK,CAAC,MAAM,GACpB,CACE;YAEL,KAAK,CAAC,QAAQ;YAEd,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,CACzB,CACP;QACD,oBAAC,gBAAgB,IACf,qBAAqB,EAAE,CAAC,QAAiB,EAAE,EAAE;gBAC3C,OAAO,WAAW,CAAC,QAAQ,CAAC,CAAC;YAC/B,CAAC,GACD,CACa,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/build/dist/UI/Components/Offline/OfflineIndicator.js

@@ -0,0 +1,27 @@
+import React, { useState, useEffect } from "react";
+import EmptyState from "../EmptyState/EmptyState";
+import IconProp from "../../../Types/Icon/IconProp";
+const OfflineIndicator = ({ onOnlineOfflineChange, }) => {
+    const [isOnline, setIsOnline] = useState(navigator.onLine);
+    useEffect(() => {
+        const handleOnline = () => {
+            setIsOnline(true);
+            onOnlineOfflineChange === null || onOnlineOfflineChange === void 0 ? void 0 : onOnlineOfflineChange(true);
+        };
+        const handleOffline = () => {
+            setIsOnline(false);
+            onOnlineOfflineChange === null || onOnlineOfflineChange === void 0 ? void 0 : onOnlineOfflineChange(false);
+        };
+        window.addEventListener("online", handleOnline);
+        window.addEventListener("offline", handleOffline);
+        // Call with initial state
+        onOnlineOfflineChange === null || onOnlineOfflineChange === void 0 ? void 0 : onOnlineOfflineChange(navigator.onLine);
+        return () => {
+            window.removeEventListener("online", handleOnline);
+            window.removeEventListener("offline", handleOffline);
+        };
+    }, [onOnlineOfflineChange]);
+    return (React.createElement("div", null, !isOnline && (React.createElement(EmptyState, { id: "offline-indicator", title: "You are offline", description: "Please check your internet connection.", icon: IconProp.NoSignal }))));
+};
+export default OfflineIndicator;
+//# sourceMappingURL=OfflineIndicator.js.map

package/build/dist/UI/Components/Offline/OfflineIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OfflineIndicator.js","sourceRoot":"","sources":["../../../../../UI/Components/Offline/OfflineIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAgB,MAAM,OAAO,CAAC;AACjE,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,QAAQ,MAAM,8BAA8B,CAAC;AASpD,MAAM,gBAAgB,GAA8B,CAAC,EACnD,qBAAqB,GACC,EAAgB,EAAE;IACxC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IAE3D,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAiB,GAAG,EAAE;YACtC,WAAW,CAAC,IAAI,CAAC,CAAC;YAClB,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAG,IAAI,CAAC,CAAC;QAChC,CAAC,CAAC;QAEF,MAAM,aAAa,GAAiB,GAAG,EAAE;YACvC,WAAW,CAAC,KAAK,CAAC,CAAC;YACnB,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAG,KAAK,CAAC,CAAC;QACjC,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAChD,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QAElD,0BAA0B;QAC1B,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAG,SAAS,CAAC,MAAM,CAAC,CAAC;QAE1C,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YACnD,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACvD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAE5B,OAAO,CACL,iCACG,CAAC,QAAQ,IAAI,CACZ,oBAAC,UAAU,IACT,EAAE,EAAC,mBAAmB,EACtB,KAAK,EAAC,iBAAiB,EACvB,WAAW,EAAC,wCAAwC,EACpD,IAAI,EAAE,QAAQ,CAAC,QAAQ,GACvB,CACH,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@oneuptime/common",
-    "version": "7.0.4257",
+    "version": "7.0.4260",
     "description": "",
     "main": "index.js",
     "scripts": {