ih-portal/src/tabs/MobileProvider.jsx

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

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { Tab, Tabs } from 'material-ui';
import SwipeableViews from 'react-swipeable-views';

import MediaQuery from 'react-responsive';

import { mapStateToProps, mapDispatchToProps } from '../propMaps.js';
import ChecklistProv from '../pagelets/ChecklistProv.jsx';
import FinancialAidProv from '../pagelets/FinancialAidProv.jsx';
import NavigationDrawerCollectionProv from '../pagelets/NavigationDrawerCollectionProv.jsx';

const { object } = PropTypes;
const dashboardStyle = {
  'background-color': '#404040'
}
class MobileProvider extends Component {

  constructor(props) {
    super(props);
    this.state = {index: 0};
    this.onChangeTabs = this.onChangeTabs.bind(this);
    this.onChangeIndex = this.onChangeIndex.bind(this);

    const serviceParams = {
      requestParams: {
        url: __PAGELET_URL__,
        auth: [__USERNAME__, __PASSWORD__],
      },
      pageletName: this.props.pageletName,
    };

    this.props.storeDispatchers.fetchNavigationCollection(serviceParams);

  }

  onChangeTabs(value) {
    this.setState({
      index: parseInt(value, 10),
    });
  }
  onChangeIndex(index) {
    this.setState({
      index: index,
    });
  }
  render() {


    const { checklist, financialAid, navigationCollection } = this.props.storeStates;
    const {
      fetchChecklist,
      invalidateChecklist,
      fetchFinancialAid,
      invalidateFinancialAid,
      fetchNavigationCollection,
      invalidateNavigationCollection,
    } = this.props.storeDispatchers;

    const index = this.state.index;

    const styles = {
      slideContainer: {
        height: '100%',
      },
      container: {
        display: 'flex',
      },

    };

    return (

      <div key="TabProvider">
        <MediaQuery query='(min-width: 40.01em)'>
          <div className="row">
            <div className="small-12 medium-6 large-4 columns ">
              <div className="">
                <NavigationDrawerCollectionProv navigationCollection={navigationCollection} pageletName="ADMN_QUICK_LINKS_HMPG1025173"  pageletTitle="Quick Links" fetch={fetchNavigationCollection} invalidate={invalidateNavigationCollection} />
              </div>
              <div className=""></div>
              <div className=""></div>
            </div>
            <div className="small-12 medium-6 large-4 columns">
              <div className=""></div>
              <div className=""></div>
              <div className=""></div>
            </div>
            <div className="small-12 medium-6 large-4 columns">
              <div className=""><ChecklistProv checklist={checklist} fetch={fetchChecklist} invalidate={invalidateChecklist} /></div>
              <div className=""></div>
              <div className=""></div>
            </div>
          </div>
        </MediaQuery>
        <MediaQuery query='(max-width: 40em)'>
          <Tabs
            tabItemContainerStyle={{position: 'fixed', bottom: 0, zIndex: 999, margin: '-4px 0px 0px 4px'}}
            inkBarStyle={{position: 'fixed', bottom: 0, zIndex: 999}}
            onChange={this.onChangeTabs} value={index + ''}
          >
            <Tab label="Links"
              style={dashboardStyle}
              contentContainerStyle={dashboardStyle}
              value="0"
            />
            <Tab label="To Do"
              style={dashboardStyle}
              contentContainerStyle={dashboardStyle}
              value="1"
            />
          <Tab label="Financial Aid Awards"
              style={dashboardStyle}
              contentContainerStyle={dashboardStyle}
              value="2"
            />
          </Tabs>


          <SwipeableViews index={index} onChangeIndex={this.onChangeIndex}
            style={Object.assign({}, styles.slideContainer, styles.container)}>
            <div style={Object.assign({}, styles.slide, styles.slide1)}>
              <NavigationDrawerCollectionProv navigationCollection={navigationCollection} pageletName="ADMN_QUICK_LINKS_HMPG1025173" fetch={fetchNavigationCollection} invalidate={invalidateNavigationCollection} />
            </div>
            <div style={Object.assign({}, styles.slide, styles.slide2)}>
              <ChecklistProv style={{paddingBottom: '48px', paddingTop: '64px'}} checklist={checklist} fetch={fetchChecklist} invalidate={invalidateChecklist} />
            </div>
            <div style={Object.assign({}, styles.slide, styles.slide3)}>
              <FinancialAidProv financialAid={financialAid} fetch={fetchFinancialAid} invalidate={invalidateFinancialAid} />
            </div>
          </SwipeableViews>

        </MediaQuery>
      </div>
    );
  }
}

MobileProvider.propTypes = {
  storeStates: object,
  storeDispatchers: object,
};

export default connect(mapStateToProps, mapDispatchToProps)(MobileProvider);
export { MobileProvider as MobileProviderDumb };