ih-portal/src/pagelets/LauncherNavigationCollectionProv.jsx

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

import React, { Component, PropTypes } from 'react';
import { LauncherNavigationCollection, NavigationDrawerCollection } from 'catalyst-ui';

const { func, object } = PropTypes;

export default class NavigationCollectionProv extends Component {
  componentWillMount() {
    const serviceParams = {
      requestParams: {
        url: __PAGELET_URL__,
        auth: [__USERNAME__, __PASSWORD__],
      },
      pageletName: 'UC_DROPDOWN_LAUNCHER',
    };

    this.props.fetch(serviceParams);
  }

  render() {
    let data;
    if (this.props.navigationCollection && this.props.navigationCollection.data) {
      data = this.props.navigationCollection.data;
    } else {
      data = require('../assets/mockData/NavigationCollection.js');
    }

    const { Bug, NavigationLauncher, NavigationList, NavigationListNoKids } = data;

    return (
      <div key="NavigationCollection">
        <div className="container">
          <div className="row">
            <div className="medium-4 large-4 columns">
              <div id="piglet1"><NavigationDrawerCollection ncd={NavigationList[0]} /></div>
              <div id="piglet4"><NavigationDrawerCollection ncd={Bug[0]} /></div>
            </div>
            <div className="medium-4 large-4 columns">
              <div id="piglet2"><NavigationDrawerCollection ncd={NavigationList[0]} /></div>
              <div id="piglet5"><NavigationDrawerCollection ncd={NavigationListNoKids[0]} /></div>
            </div>
            <div className="medium-4 large-4 columns">
              <div id="piglet3">
                <LauncherNavigationCollection ncd={NavigationLauncher[0]} />
              </div>
              <div id="piglet6">&nbsp;</div>
            </div>
          </div>
          <div className="row">
            <div className="medium-4 large-4 columns">
              <div id="piglet7">&nbsp;</div>
            </div>
            <div className="medium-4 large-4 columns">
              <div id="piglet8">&nbsp;</div>
            </div>
            <div className="medium-4 large-4 columns">
              <div id="piglet9">&nbsp;</div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

NavigationCollectionProv.propTypes = {
  navigationCollection: object,
  fetch: func.isRequired,
  invalidate: func.isRequired,
};