robbyson-frontend-library 1.0.118 → 1.0.119

package/dist/components/pages/base-app-page.component.js

@@ -27,6 +27,7 @@ import { IoC } from "../../ioc";
 import { PageContainer, Header, Title, ContextMenu, Content, LeftArrowLarge, GenericButton, } from "./base-app-page.styles";
 import { RobbysonNavigate } from "../../utils";
 import { QueryParamsFactory } from "../../factories/query-params.factory";
+import { ErrorBoundary } from "./error-boundary";
 var BaseAppPage = /** @class */ (function (_super) {
     __extends(BaseAppPage, _super);
     function BaseAppPage(props) {
@@ -105,7 +106,8 @@ var BaseAppPage = /** @class */ (function (_super) {
                             ? this._baseAppPageTitle
                             : this.translate(this.headerLocale) }, this.translate(this.headerLocale))),
                 !this._avoidContextMenu && (React.createElement(ContextMenu, { className: "body-2-book" }, this.contextMenu()))),
-            React.createElement(Content, { contentMarginTop: this._contentMarginTop, usePageHeader: this._usePageHeader, avoidContextMenu: this._avoidContextMenu }, this.renderPage())));
+            React.createElement(Content, { contentMarginTop: this._contentMarginTop, usePageHeader: this._usePageHeader, avoidContextMenu: this._avoidContextMenu },
+                React.createElement(ErrorBoundary, null, this.renderPage()))));
     };
     return BaseAppPage;
 }(React.Component));

package/dist/components/pages/error-boundary.js

@@ -0,0 +1,49 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import React from "react";
+import { IoC } from "../../ioc";
+var ErrorBoundary = /** @class */ (function (_super) {
+    __extends(ErrorBoundary, _super);
+    function ErrorBoundary(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            hasError: false,
+        };
+        _this._localeService = IoC.GetInstance("LocaleService");
+        return _this;
+    }
+    ErrorBoundary.getDerivedStateFromError = function () {
+        return { hasError: true };
+    };
+    ErrorBoundary.prototype.componentDidCatch = function (error, stack) {
+        if (process.env.NODE_ENV === "development") {
+            console.log({ error: error, stack: stack });
+        }
+    };
+    ErrorBoundary.prototype.render = function () {
+        if (this.state.hasError) {
+            return (React.createElement("div", { className: "d-flex w-100 h-100 justify-content-center align-items-center  text-center" },
+                React.createElement("div", null,
+                    React.createElement("h6", { className: "mb-2" }, this._localeService.getLocaleByHandle("access_page_error_title")),
+                    React.createElement("span", { className: "body-1-book" }, this._localeService.getLocaleByHandle("access_page_error_subtitle")))));
+        }
+        else {
+            return React.createElement(React.Suspense, null, this.props.children);
+        }
+    };
+    return ErrorBoundary;
+}(React.Component));
+export { ErrorBoundary };

package/dist/utils/layout.utils.js

@@ -5,6 +5,9 @@ var LayoutUtils = /** @class */ (function () {
     LayoutUtils.isMobile = function () {
         return window.innerWidth <= LayoutDimensions.width.horizontalIpadMini;
     };
+    LayoutUtils.isSmallerMobiles = function () {
+        return window.innerWidth <= LayoutDimensions.width.smallerMobiles;
+    };
     return LayoutUtils;
 }());
 export { LayoutUtils };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "robbyson-frontend-library",
-    "version": "1.0.118",
+    "version": "1.0.119",
     "description": "Robbyson frontend Library",
     "main": "./dist/index.js",
     "license": "MIT",

package/src/components/pages/base-app-page.component.tsx

@@ -12,6 +12,7 @@ import {
 } from "./base-app-page.styles";
 import { RobbysonNavigate } from "../../utils";
 import { QueryParamsFactory } from "../../factories/query-params.factory";
+import { ErrorBoundary } from "./error-boundary";
 
 export abstract class BaseAppPage<T, T1> extends React.Component<T, T1> {
     protected headerLocale: string = "Header Locale";
@@ -141,7 +142,7 @@ export abstract class BaseAppPage<T, T1> extends React.Component<T, T1> {
                     usePageHeader={this._usePageHeader}
                     avoidContextMenu={this._avoidContextMenu}
                 >
-                    {this.renderPage()}
+                    <ErrorBoundary>{this.renderPage()}</ErrorBoundary>
                 </Content>
             </PageContainer>
         );

package/src/components/pages/error-boundary.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { ILocaleService } from "../../services";
+import { IoC } from "../../ioc";
+
+interface ErrorBoundaryProps {
+    children: React.ReactNode;
+}
+
+interface ErrorBoundaryState {
+    hasError: boolean;
+}
+
+export class ErrorBoundary extends React.Component<
+    ErrorBoundaryProps,
+    ErrorBoundaryState
+> {
+    readonly state: ErrorBoundaryState = {
+        hasError: false,
+    };
+
+    private _localeService: ILocaleService;
+
+    constructor(props: ErrorBoundaryProps) {
+        super(props)
+        this._localeService = IoC.GetInstance<ILocaleService>("LocaleService");
+    }
+
+    static getDerivedStateFromError() {
+        return { hasError: true };
+    }
+
+    componentDidCatch(error: any, stack: any) {
+        if (process.env.NODE_ENV === "development") {
+            console.log({ error, stack });
+        }
+    }
+
+    public render() {
+        if (this.state.hasError) {
+            return (
+                <div className="d-flex w-100 h-100 justify-content-center align-items-center  text-center">
+                    <div>
+                        <h6 className="mb-2">{this._localeService.getLocaleByHandle("access_page_error_title")}</h6>
+                        <span className="body-1-book">
+                           {this._localeService.getLocaleByHandle("access_page_error_subtitle")}
+                        </span>
+                    </div>
+                </div> 
+            );
+        } else {
+            return <React.Suspense>{this.props.children}</React.Suspense>;
+        }
+    }
+}

package/src/utils/layout.utils.ts

@@ -4,4 +4,8 @@ export class LayoutUtils {
     static isMobile(): boolean {
         return window.innerWidth <= LayoutDimensions.width.horizontalIpadMini;
     }
+
+    static isSmallerMobiles(): boolean {
+        return window.innerWidth <= LayoutDimensions.width.smallerMobiles;
+    }
 }