ih-portal/demo/services/ServiceCall.createClass_template.jsx

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

import React, { PropTypes } from 'react';
const { func, object } = PropTypes;

export default React.createClass({
  propTypes: {
    serviceState: object,
    fetch: func,
    invalidate: func,
  },

  componentWillMount() {
    const serviceParams = {
      // The parameters used for the call
    };

    this.props.fetch(serviceParams);
  },

  invalidateServiceCall() {
    const fetchParams = {
      /**
       * The parameters that will be used to refresh the data. This usually is the same as the
       * parameters that were used to originally fetch the data.
       */
    };

    this.props.invalidate(fetchParams);
  },

  copyToClipboard() {
    const copyText = this.refs.responseObject.getDOMNode().innerHTML;
    window.prompt('Copy Response:', copyText);
  },

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

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

      if (this.props.serviceState.data) {
        hasData = true;
        const json = JSON.stringify(this.props.serviceState.data);
        responseDisp = <pre ref="responseObject">{json}</pre>;
      }
    }

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