ih-portal/demo/services/NavigationCollection.jsx

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

import React, { Component, PropTypes } from 'react';
import ObjectInspector from 'react-object-inspector';

const { func, object } = PropTypes;

const PAGELET_NAME = 'UC_DROPDOWN_LAUNCHER';

export default class NavigationCollection extends Component {
  componentDidMount() {
    const { navigationCollection: navCol } = this.props;

    if (!navCol || (navCol.lastAction && navCol.lastAction.status === 'error') || !navCol.data) {
      const requestParams = {
        url: __PAGELET_URL__,
        auth: [__USERNAME__, __PASSWORD__],
      };

      this.props.fetch(requestParams, PAGELET_NAME);
    }
  }

  invalidateNavigationCollection(pageletName = PAGELET_NAME) {
    const requestParams = {
      url: __PAGELET_URL__,
      auth: [__USERNAME__, __PASSWORD__],
    };

    this.props.invalidate(requestParams, pageletName);
  }

  copyToClipboard() {
    const copyText = JSON.stringify(this.props.navigationCollection.data);
    window.prompt('Copy Response:', copyText);
  }

  render() {
    let isFetching = false;
    let hasData = false;
    let responseDisp = '';

    if (this.props.navigationCollection) {
      isFetching = this.props.navigationCollection.isFetching;

      /**
       * If the request returns with an error then use mockData. This prevents an erroring request
       * from hindering development.
       */
      if (this.props.navigationCollection.lastAction && this.props.navigationCollection.lastAction.status === 'error') {
        hasData = true;
        const mockData = require('../../assets/mockData/NavigationCollection.js');
        responseDisp = (
          <div>
            <p>Request Error, reading data from static source: '../../assets/mockData/NavigationCollection.js'</p>
            <ObjectInspector data={mockData} />
            <br />
            <p>Actual Request Response (this is what gets copied):</p>
            <ObjectInspector data={this.props.navigationCollection.data} />
          </div>
        );
      } else if (this.props.navigationCollection.data) {
        hasData = true;
        responseDisp = <ObjectInspector data={this.props.navigationCollection.data} />;
      }
    }

    return (
      <div>
        <h2>Navigation Collection Service</h2>
        <input className="invalidateBtn" type="button" value="Invalidate Navigation Collection" onClick={() => this.invalidateNavigationCollection()} />
        <input className="copyBtn" type="button" value="Copy Response" onClick={() => this.copyToClipboard()} disabled={isFetching || !hasData} />
        <br /><br />
        {isFetching ? <p>Fetching Data...</p> : responseDisp}
        <br />
      </div>
    );
  }
}

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