contiago-toolbar/app/app.js

One of the options for outputting content from contiago xml-server

/**
 * app.js
 *
 * This is the entry file for the application, only setup and boilerplate
 * code.
 */

// Import all the third party stuff
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import StateRouterProvider from 'utils/router/stateRouteProvider';
import { createRouter } from 'utils/router/withStateRouter';
import FontFaceObserver from 'fontfaceobserver';
import 'sanitize.css/sanitize.css';

// import '!!style-loader!css-loader!vendor/css/fonts.css';

// Import root app
import App from 'containers/App';

// Import Language Provider
import LanguageProvider from 'containers/LanguageProvider';

import config from '../config.json';
import configureStore from './configureStore';

const openSansRegularObserver = new FontFaceObserver('Open Sans Regular');
const openSansBoldObserver = new FontFaceObserver('Open Sans Bold');
const openSansSemiBoldObserver = new FontFaceObserver('Open Sans SemiBold');
const openSansCondensedLightObserver = new FontFaceObserver('Open Sans Condensed Light');

openSansRegularObserver.load().then(() => {}, () => {});
openSansBoldObserver.load().then(() => {}, () => {});
openSansSemiBoldObserver.load().then(() => {}, () => {});
openSansCondensedLightObserver.load().then(() => {}, () => {});

// Import i18n messages
import { translationMessages } from './i18n';

// Import CSS reset and Global Styles
import './global-styles';


const fetchOutputAccessToken = () => {
  const rootScript = document.querySelector(`#${config['toolbar.script.id']}`);
  const outputAccessToken = rootScript.getAttribute(`${config['toolbar.script.token.attribute']}`);
  localStorage.setItem(config['toolbar.access.token.header.name'], outputAccessToken);
  const isSandbox = rootScript.getAttribute(`${config['toolbar.sandbox.attribute.name']}`);
  localStorage.setItem(config['toolbar.sandbox.attribute.name'], `${isSandbox === null ? '' : 'true'}`);
  return outputAccessToken;
};

// Create redux store with history
const initialState = { global: { outputAccessToken: fetchOutputAccessToken(), toolbarPosition: { top: localStorage.getItem('toolbarTopPosition') || 40, right: localStorage.getItem('toolbarRightPosition') || 40 } } };
const store = configureStore(initialState);
const router = createRouter(store);

const ROOT_APP_ID = 'modal-root';
const getOrCreateRootElement = () => {
  let root = document.querySelector(`#${ROOT_APP_ID}`);
  if (!root) {
    const body = document.querySelector('body');
    root = document.createElement('div');
    root.id = ROOT_APP_ID;
    body.appendChild(root);
  }
  return root;
};

const MOUNT_NODE = getOrCreateRootElement();

const render = (messages) => {
  ReactDOM.render(
    <Provider store={store}>
      <LanguageProvider messages={messages}>
        <StateRouterProvider router={router}>
          <App />
        </StateRouterProvider>
      </LanguageProvider>
    </Provider>,
    MOUNT_NODE
  );
};

if (module.hot) {
  // Hot reloadable React components and translation json files
  // modules.hot.accept does not accept dynamic dependencies,
  // have to be constants at compile-time
  module.hot.accept(['./i18n', 'containers/App'], () => {
    ReactDOM.unmountComponentAtNode(MOUNT_NODE);
    render(translationMessages);
  });
}

// Chunked polyfill for browsers without Intl support
if (!window.Intl) {
  (new Promise((resolve) => {
    resolve(import('intl'));
  }))
    .then(() => Promise.all([
      import('intl/locale-data/jsonp/en.js'),
      import('intl/locale-data/jsonp/de.js'),
    ]))
    .then(() => render(translationMessages))
    .catch((err) => {
      throw err;
    });
} else {
  render(translationMessages);
}