ih-portal/src/tabs/DashboardTabProvider.jsx

A project for connecting interaction hub services with catalyst-ui components

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';

import { mapStateToProps, mapDispatchToProps } from '../propMaps.js';

import TodoListProv from '../pagelets/TodoListProv.jsx';
import NavigationDrawerCollectionProv from '../pagelets/NavigationDrawerCollectionProv.jsx';
import ServiceIndicatorsProv from '../pagelets/ServiceIndicatorsProv.jsx';
import AccountSummaryProv from '../../src/pagelets/AccountSummaryProv.jsx';
import NewsFeedProv from '../pagelets/NewsFeedProv.jsx';
import { Contacts, Schedule } from 'catalyst-ui';

import { Card, CardTitle } from 'material-ui';
import catalystLogo from '../content/catalystlogo.png';


import Dialog from 'material-ui/lib/dialog';
import FlatButton from 'material-ui/lib/flat-button';

class DashboardTabProvider extends Component {

  constructor(props) {
    super(props);

    this.state = {
      dialogOpen: false,
    };

    this.handleDialogDismiss = this.handleDialogDismiss.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    const store = nextProps.storeStates;
    const hasNegativeServiceIndicator = store.serviceIndicators.data ?
      store.serviceIndicators.data.items
        .filter((item) => item.posSrvcIndicator === 'N').length > 0 : false;
    if (hasNegativeServiceIndicator && sessionStorage.getItem('dialogShow') !== 'true') {
      this.setState({ dialogOpen: true });
    }
  }

  handleDialogDismiss() {
    this.setState({ dialogOpen: false });
    sessionStorage.setItem('dialogShow', 'true');
  }

  render() {
    const {
      activityGuide,
      checklist,
      navigationCollection,
      serviceIndicators,
      studentAccount,
      newsFeed,
    } = this.props.storeStates;

    const {
      fetchActivityGuide,
      invalidateActivityGuide,
      fetchChecklist,
      invalidateChecklist,
      fetchNavigationCollection,
      invalidateNavigationCollection,
      fetchServiceIndicators,
      invalidateServiceIndicators,
      fetchStudentAccount,
      invalidateStudentAccount,
      fetchNews,
      invalidateNews,
    } = this.props.storeDispatchers;

    const actions = [
      <FlatButton
        label="Ok"
        primary
        keyboardFocused
        onTouchTap={() => this.handleDialogDismiss()}
      />,
    ];

    return (
      <div key="TabProvider">
        <div className="">
          <div className="small-12 medium-4 large-3 columns ">
            <NavigationDrawerCollectionProv
              navigationCollection={navigationCollection}
              pageletName="ADMN_QUICK_LINKS_STUDE1090317"
              pageletTitle="Quick Links"
              fetch={fetchNavigationCollection}
              invalidate={invalidateNavigationCollection}
            />
            <br/>
            <Contacts title="Helpful Contacts" />
            <br/>
          </div>
          <div className="small-12 medium-8 large-5 columns">
            <Schedule ClassScheduleUrl={__VIEW_SCHEDULE_URL__} />
            <br/>
            <AccountSummaryProv
              summary={studentAccount}
              fetch={fetchStudentAccount}
              invalidate={invalidateStudentAccount}
              />
            <br/>
            <NewsFeedProv
              newsFeed={newsFeed}
              fetch={fetchNews}
              invalidate={invalidateNews}
              pageletName="UCI_STUDENT_DASHBOARD_NEWS"
              />
          </div>
          <div className="small-12 medium-8 large-4 columns">
            <TodoListProv
              checklist={checklist}
              fetchChecklist={fetchChecklist}
              invalidateChecklist={invalidateChecklist}
              activityGuide={activityGuide}
              fetchActivityGuide={fetchActivityGuide}
              invalidateActivityGuide={invalidateActivityGuide}
            />
            <br/>
            <ServiceIndicatorsProv
              serviceIndicators={serviceIndicators}
              fetch={fetchServiceIndicators}
              invalidate={invalidateServiceIndicators}
            />
            <br/>
            <Card>
              <CardTitle
                title={<span style={{color: '#e00122'}}>Need Help?</span>}
                style={{
                  borderBottomWidth: 1,
                  borderBottomStyle: 'solid',
                  borderBottomColor: '#E0E0E0'
                }}
              />
                <div style={{margin: 20 }}>
                <ul>
                  <li><a target="_new" href="http://www.uc.edu/catalyst/tips-tricks.html">Catalyst tips and tricks</a> provide how-to videos and step-by-step instructions to help you navigate Catalyst.</li>
                  <li><strong>Catalyst tutorials</strong> (<em>see Quick Links on the left</em>) contain helpful videos.</li>
                </ul>
                </div>
            </Card>
            <br />
          </div>
        </div>
        <Dialog
          open={this.state.dialogOpen}
          title="Negative Service Indicator"
          actions={actions}
          modal
          autoScrollBodyContent
          onRequestClose={this.handleDialogDismiss}
        >
          <div style={{ padding: 10 }}>
          You have a service indicator that may impact the ability to register for classes.
          </div>
          <ServiceIndicatorsProv
            serviceIndicators={serviceIndicators}
            fetch={fetchServiceIndicators}
            invalidate={invalidateServiceIndicators}
          />
        </Dialog>
      </div>
    );
  }
}

DashboardTabProvider.propTypes = {
  storeStates: PropTypes.object,
  storeDispatchers: PropTypes.object,
};

export default connect(mapStateToProps, mapDispatchToProps)(DashboardTabProvider);
export { DashboardTabProvider as DashboardTabProviderDumb };