/containers/App/index.js

index.js

'use strict';

import React, {Component, PropTypes} from 'react';
import {render} from 'react-dom';
import {Router, Route, hashHistory} from 'react-router';
var SnackBar = require('../../common/snackbar.js');

// Material UI Theme
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import {blue500, grey500} from 'material-ui/styles/colors';

import {LEADS_PROFILE, loginComplete} from '../../common/actions/user.action';
import {redirectFromLogin} from '../../common/actions/navigation.action';
import {CHANGE_ROUTE, REDIRECT_FROM_LOGIN} from '../../common/actions/navigation.action';
import {SHOW_TOAST, clearToast} from '../../common/actions/notify.action';

import StartScreen from '../StartScreen';
import FronterDashboard from '../FronterDashboard';
import LeadDashboard from '../LeadDashboard';

import AdminDashboard from '../AdminDashboard';
import ManageUsers from '../../components/Admin/ManageUsers';
import RegisterUser from '../../components/Admin/RegisterUser';
import UploadFile from '../../components/Admin/UploadFile';
import ManageLists from '../../components/Admin/ManageLists';

/**
 * override light theme (defaults to light)
 *  http://www.material-ui.com/#/customization/themes
 */
const muiTheme = getMuiTheme({
  palette: {
    primary1Color: blue500,
    accent1Color: grey500
  }
});

class App extends Component {
  constructor(props) {
    super(props);
    this._handleNavigationChange = this._handleNavigationChange.bind(this);
    this._handleNotifyChange = this._handleNotifyChange.bind(this);
    this._handleStoreChange = this._handleStoreChange.bind(this);
    this._verifyAuth = this._verifyAuth.bind(this);
    this._verifyAdminAuth = this._verifyAdminAuth.bind(this);

    document.title = 'Lead Generation';
  }

  componentDidMount() {
    this.unsubscribe = this.props.store.subscribe(this._handleStoreChange.bind(this));
  }

  componentWillMount() {
    // todo: this is causing an autoLogin side effect - need to account for this
    if (localStorage[LEADS_PROFILE]) {
      let profile = JSON.parse(localStorage[LEADS_PROFILE]);

      if (profile.user && profile.user.status === 'authenticated') {
        this.props.store.dispatch(loginComplete({profile: profile}));
        if (location.hash === '') {
          this.props.store.dispatch(redirectFromLogin('/dashboard'));
        }
      }
    }
  }

  componentWillUnmount() {
    this.unsubscribe();
  }

  getChildContext() {
    return {muiTheme: getMuiTheme(muiTheme)};
  }

  _handleStoreChange() {
    var user_reducer = this.props.store.getState().user_reducer;
    var navigation_reducer = this.props.store.getState().navigation_reducer;
    var notify_reducer = this.props.store.getState().notify_reducer;

    if (user_reducer.profile && user_reducer.profile.user.status === 'authenticated') {
      localStorage[LEADS_PROFILE] = JSON.stringify(user_reducer.profile);
    } else {
      delete localStorage[LEADS_PROFILE];
    }

    this._handleNavigationChange(navigation_reducer);
    this._handleNotifyChange(notify_reducer);
  }

  _handleNavigationChange(navigation_reducer) {
    switch (navigation_reducer.type) {
      case CHANGE_ROUTE:
      case REDIRECT_FROM_LOGIN:
        return navigation_reducer.route && hashHistory.replace(navigation_reducer.route);
    }
  }

  _handleNotifyChange(notify_reducer) {
    if (notify_reducer.type === SHOW_TOAST && notify_reducer.message) {
      SnackBar.show({
        text: notify_reducer.message,
        textColor: '#FFFFFF',
        pos: 'top-right',
        actionTextColor: '#ff0000',
        backgroundColor: '#323232',
        customClass: null,
        duration: 102500,
        showActionButton: false
      });

      // always clear message after displaying - prevents further store changes from showing duplicates
      this.props.store.dispatch(clearToast());
    }
  }

  _verifyAuth(nextState, replace) {
    var user_reducer = this.props.store.getState().user_reducer;
    if (!user_reducer.profile || user_reducer.profile.user.status !== 'authenticated') {
      replace({
        pathname: '/',
        state: {nextPathname: nextState.location.pathname}
      });
    }
  }

  _verifyAdminAuth(nextState, replace) {
    var user_reducer = this.props.store.getState().user_reducer;
    if (!user_reducer.profile || !user_reducer.profile.user.is_admin) {
      replace({
        pathname: '/',
        state: {nextPathname: nextState.location.pathname}
      });
    }
  }

  render() {
    return (
      <Router history={hashHistory}>
        <Route name="root" path="/" component={StartScreen}/>
        <Route name="fronter_dashboard" path="dashboard" component={FronterDashboard} onEnter={this._verifyAuth}/>
        <Route name="lead_dashboard" path="lead" component={LeadDashboard} onEnter={this._verifyAuth}/>
        <Route name="admin_dashboard" path="admin" component={AdminDashboard} onEnter={this._verifyAdminAuth}>
          <Route name="admin_manage_users" path="users" component={ManageUsers} onEnter={this._verifyAdminAuth}/>
          <Route name="admin_register_user" path="register" component={RegisterUser} onEnter={this._verifyAdminAuth}/>
          <Route name="admin_upload_file" path="upload" component={UploadFile} onEnter={this._verifyAdminAuth}/>
          <Route name="admin_manage_lists" path="lists" component={ManageLists} onEnter={this._verifyAdminAuth}/>
        </Route>
      </Router>
    );
  }
}

App.childContextTypes = {
  muiTheme: PropTypes.object.isRequired
};

export default App;