github.com/muhammedhassanm/blockchain@v0.0.0-20200120143007-697261defd4d/blockapps-ba-master/ui/src/components/App/index.js (about)

     1  import React, { Component } from 'react';
     2  import { connect } from 'react-redux';
     3  import Toolbar from 'react-md/lib/Toolbars';
     4  import NavigationDrawer from 'react-md/lib/NavigationDrawers';
     5  import Button from 'react-md/lib/Buttons';
     6  import FontIcon from 'react-md/lib/FontIcons';
     7  import { Link } from 'react-router';
     8  import LoadingBar from 'react-redux-loading-bar';
     9  import Snackbar from 'react-md/lib/Snackbars';
    10  import UserBadge from './components/UserBadge/';
    11  import mixpanel from 'mixpanel-browser';
    12  import { resetUserMessage, setUserMessage } from '../UserMessage/user-message.action';
    13  import { getExplorerUrl } from '../ExplorerUrl/explorer.actions';
    14  import { userLogout } from '../../scenes/Login/login.actions';
    15  import './App.css';
    16  
    17  mixpanel.init('17bfafc2d7d8643cfe775c63898f4ced');
    18  
    19  class App extends Component {
    20  
    21    componentWillMount() {
    22      this.props.getExplorerUrl();
    23    }
    24  
    25    handleLogoutClick = (e) => {
    26      mixpanel.track('logout click');
    27      this.props.userLogout();
    28      this.props.setUserMessage('You logged out');
    29    };
    30  
    31    // get type of app bar based on login state
    32    getAppBar(title, navItems) {
    33      if (this.props.login.authenticated) {
    34        mixpanel.alias(this.props.login.username); // FIXME Should only make this call once on user signup
    35        mixpanel.identify(this.props.login.username);
    36        return (
    37          <NavigationDrawer
    38            defaultVisible={false}
    39            navItems={navItems}
    40            drawerTitle="Menu"
    41            mobileDrawerType={NavigationDrawer.DrawerTypes.TEMPORARY}
    42            tabletDrawerType={NavigationDrawer.DrawerTypes.PERSISTENT}
    43            desktopDrawerType={NavigationDrawer.DrawerTypes.PERSISTENT}
    44            toolbarTitle={<span id="app-title"> {title} </span>}
    45            toolbarActions={<UserBadge username={this.props.login.username} role={this.props.login.role} />}
    46          >
    47            <LoadingBar style={{ position: 'fixed', zIndex: 15 }} />
    48            {this.props.children}
    49          </NavigationDrawer>
    50        )
    51      }
    52      else {
    53        return (
    54          <div>
    55            <Toolbar
    56              colored
    57              title={title}
    58              className="md-paper md-paper--2"
    59              actions={
    60                <Button flat
    61                  href={this.props.explorerUrl}
    62                  target="_blank"
    63                  label="Explorer">explore
    64                </Button>
    65              }
    66            />
    67            <LoadingBar />
    68            {this.props.children}
    69          </div>
    70        )
    71      }
    72    }
    73  
    74    render() {
    75      let navItems = [];
    76      const location = this.props.location;
    77      const routes = this.props.routes;
    78  
    79      if (
    80        this.props.login.authenticated
    81        && routes
    82        && routes.length > 1
    83        && routes[1].childRoutes
    84      ) {
    85        routes[1].childRoutes.forEach(
    86          route => {
    87            //only add route if there is a name property
    88            if (
    89              !route.name
    90              || (route['role-access'] && this.props.login.role !== route['role-access'])
    91            ) { return; }
    92            navItems.push({
    93              component: Link,
    94              to: route.path,
    95              primaryText: route.name,
    96              active: route.path === location.pathname,
    97              leftIcon: <FontIcon>{route.icon}</FontIcon>
    98            });
    99          }
   100        );
   101      }
   102  
   103      navItems.push(
   104        { component: Link, className: "mobile-sidebar-menu", icon: "playlist_add_check", primaryText: "Settings" },
   105        { component: Link, className: "mobile-sidebar-menu", onClick: () => this.handleLogoutClick(), icon: "playlist_add_check", primaryText: "Logout" });
   106  
   107      return (
   108        <section>
   109          {this.getAppBar("Supply Chain", navItems)}
   110          <Snackbar
   111            toasts={
   112              this.props.userMessage
   113                ? [{ text: this.props.userMessage.toString(), action: 'Dismiss' }]
   114                : []
   115            }
   116            onDismiss={() => { this.props.resetUserMessage() }} />
   117        </section>
   118      )
   119    }
   120  }
   121  
   122  function mapStateToProps(state) {
   123    return {
   124      routing: state.routing,
   125      login: state.login,
   126      userMessage: state.userMessage,
   127      explorerUrl: state.explorerUrl.explorerUrl,
   128    };
   129  }
   130  
   131  export default connect(mapStateToProps, { setUserMessage, resetUserMessage, userLogout, getExplorerUrl })(App);