cluedin-widget/core/components/bootstrap.jsx

This project contains all the pages needed for browsing entities and searching them. The aim is to replace the CluedIn.Webapp project with this one when all the pages ( including the Admin page ) will be ported to REACT.

var __cluedIn = window.__cluedIn || {};

import React from 'react';
import ReactDOM from 'react-dom';
import ReactIntl from 'react-intl';
import localesInfo from '../../locales/en.js';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import { syncHistoryWithStore, routerReducer, routerMiddleware } from 'react-router-redux';
import { createStore, applyMiddleware, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import reducers from '../reducers/index';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import CluedInApp from './cluedinapp.jsx';
import MainApp from './MainApp.jsx';
import Index from './pages/Index.jsx';
import SearchPage from './pages/SearchPage.jsx';
import EntityDefaultPage from './pages/EntityDefaultPage.jsx';
import Routers from './MainAppRoute.jsx';
import config from '../config';
import injectTapEventPlugin from 'react-tap-event-plugin';
import { linkRealTimeWithStore } from '../realtime';

const loggerMiddleware = createLogger();

let timeOut;
let IntlProvider = ReactIntl.IntlProvider;

const routignMiddleware = routerMiddleware(browserHistory);

const createStoreWithMiddleware = applyMiddleware(
  thunkMiddleware,
  loggerMiddleware,
  routignMiddleware
)(createStore);

const initialState = {
  core: {
    token: config.getCurrentToken(),
    widgetConfiguration: void 0,
    org: config.clientId,
    connectedData: [],
    unauthorized: false,
    isFetchingConnectedData: true,
  },
};

const reducer = combineReducers(Object.assign(reducers, {
  routing: routerReducer,
}));

const store = createStoreWithMiddleware(reducer, initialState);
const history = syncHistoryWithStore(browserHistory, store);

linkRealTimeWithStore(store);

var getDomDestoyer = (DOMElement) => {
  return function () {
    ReactDOM.unmountComponentAtNode(DOMElement);
    DOMElement.__injected = false;
  };
};

var inject = (DOMElement) => {

  DOMElement.__injected = true;
  let timeStamp = Date.now();

  DOMElement.addEventListener('cluedIn_destroy', getDomDestoyer(DOMElement), false);

  var typeAttribute = DOMElement.getAttribute(config.DOM.typeAttribute);
  var id = DOMElement.getAttribute(config.DOM.idAttribute);

  ReactDOM.render(
    <Provider store={store}>
      <IntlProvider locale={localesInfo.locale} messages={localesInfo.messages}>
        <CluedInApp type={typeAttribute} index={timeStamp} entityId={id}></CluedInApp>
      </IntlProvider>
    </Provider>,
    DOMElement
  );
};

var checkIfCluedInPresent = () => {
  var cluedInElements = document.querySelectorAll('cluedin');

  if (cluedInElements) {
    cluedInElements = Array.prototype.slice.apply(cluedInElements, [0]);

    cluedInElements.forEach((cluedIn, index)=> {
      if (cluedIn && !cluedIn.__injected) {
        inject(cluedIn, index);
      }
    });
  }
};

timeOut = setInterval(checkIfCluedInPresent, 200);

__cluedIn.injectWithFrame = (DOMElement) => {
  injectTapEventPlugin();

  let routeContent;

  if (Routers.length > 0) {
    routeContent = Routers;
  }

  ReactDOM.render(
    <Provider store={store}>
      <IntlProvider locale={localesInfo.locale} messages={localesInfo.messages}>
        <Router onUpdate={() => window.scrollTo(0, 0)} history={history}>
          <Route path="/" component={MainApp}>
            <IndexRoute component={Index}/>
            <Route path="search/:q" component={SearchPage}/>
            <Route path="entity/:id" component={EntityDefaultPage}/>
            {routeContent}
          </Route>
        </Router>
      </IntlProvider>
    </Provider>,
    DOMElement
  );
};