@shopgate/pwa-common/App.js

Common library for the Shopgate Connect PWA.

import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Provider } from 'react-redux';
import { CookiesProvider } from 'react-cookie';
import { loadCustomStyles } from '@shopgate/engage/styles';
import ErrorBoundary from "./components/ErrorBoundary";
import { appDidStart } from "./action-creators/app";
import I18n from "./components/I18n";
import { getIsSessionExpired } from "./selectors/user";
import logout from "./actions/user/logout";

/**
 * The application component.
 * It sets up the store and the react router. The router's children (routes) come from
 * the theme's Main.jsx file which uses this component as the root element.
 * @returns {JSX}
 */
import { jsx as _jsx } from "react/jsx-runtime";
let App = /*#__PURE__*/function (_Component) {
  function App() {
    return _Component.apply(this, arguments) || this;
  }
  _inheritsLoose(App, _Component);
  var _proto = App.prototype;
  /**
   * Registers the component for the native events and fires the onload AppCommand.
   */
  _proto.componentDidMount = function componentDidMount() {
    /**
     * Async helper function that performs optional steps before appDidStart action is dispatched
     */
    const performAppStart = async () => {
      if (getIsSessionExpired(this.props.store.getState())) {
        // Logout the user before appDidStart when session is expired
        try {
          await this.props.store.dispatch(logout(undefined, true));
        } catch (e) {
          // Noting to do here
          console.error('AppStartLogout failed', e);
        }
      }
      this.props.store.dispatch(appDidStart(`${window.location.pathname}${window.location.search}`));
    };
    performAppStart();
    loadCustomStyles();
  }

  /**
   * Renders the component.
   * @returns {JSX}
   */;
  _proto.render = function render() {
    return /*#__PURE__*/_jsx(CookiesProvider, {
      children: /*#__PURE__*/_jsx(ErrorBoundary, {
        store: this.props.store,
        isRoot: true,
        children: /*#__PURE__*/_jsx(Provider, {
          store: this.props.store,
          children: /*#__PURE__*/_jsx(I18n.Provider, {
            children: /*#__PURE__*/_jsx("div", {
              children: this.props.children
            })
          })
        })
      }, "error.root")
    });
  };
  return App;
}(Component);
export default App;