cluedin-widget/plugin/auth/App.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.

import React, { Component, PropTypes } from 'react';
import SignIn from './pages/Signin.jsx';
import LoggedInPage from './pages/LoggedInPage.jsx';
import SelectClientId from './pages/SelectClientId.jsx';
import Theme from '../../theme';
import { connect } from 'react-redux';
import radium from 'radium';
import ChromeMenu from './pages/ChromeMenu.jsx';

const style = {
  app: {
    height: '100%',
    padding: '15px',
    margin: '0 auto',
    fontFamily: '\'Lato\', sans-serif',
  },
  regularStyle: {
    backgroundColor: Theme.colors.mainColor,
    padding: '75px 15px 50px 15px',
  },
  pluginStyle: {
    backgroundColor: Theme.colors.lightBgColor,
  },
};

class App extends Component {

  static propTypes = {
    clientId: PropTypes.string,
    teamDomainInfo: PropTypes.object,
    done: PropTypes.bool,
    mode: PropTypes.string,
  };

  render() {
    const {
      clientId,
      teamDomainInfo,
      done,
      mode,
      token,
    } = this.props;

    const appClasses = [style.app];

    if (mode === 'chrome') {
      appClasses.push(style.pluginStyle);
    } else {
      appClasses.push(style.regularStyle);
    }

    let page = (<SelectClientId />);

    if (done && clientId) {
      page = (
        <div style={appClasses}>
          <LoggedInPage />
        </div>
      );
    }

    if (clientId || (teamDomainInfo && !teamDomainInfo.isAvailable)) {
      page = (<SignIn />);
    }

    if (mode === 'chrome' && clientId && token) {
      page = (<ChromeMenu />);
    }

    return (
      <div style={appClasses}>
        {page}
      </div>
    );
  }
}

const select = (state) => ({
  clientId: state.auth.clientId,
  teamDomainInfo: state.auth.teamDomainInfo,
  done: state.auth.done,
  mode: state.auth.mode,
  token: state.core.token,
});

export default connect(select)(radium(App));