ih-portal/demo/services/Lovs.jsx

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

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

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

  componentDidMount() {
    const { lovs } = this.props;

    if (!lovs || (lovs.lastAction && lovs.lastAction.status === 'error') || !lovs.data) {
      const requestParams = {
        url: __LOV_URL__,
        auth: [__USERNAME__, __PASSWORD__],
      };
      const lovParams = [
        {
          lovName: 'CreditLevel',
          recordname: 'ACAD_CAR_TBL',
          fieldname: 'ACAD_CAREER',
        },
      ];

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

  invalidateLovs() {
    const requestParams = {
      url: __LOV_URL__,
      auth: [__USERNAME__, __PASSWORD__],
    };
    const lovParams = [
      {
        lovName: 'CreditLevel',
        recordname: 'ACAD_CAR_TBL',
        fieldname: 'ACAD_CAREER',
      },
      {
        lovName: 'Terms',
        recordname: 'TERM_TBL',
        fieldname: 'STRM',
      },
    ];

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

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

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

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

      if (this.props.lovs.data) {
        hasData = true;
        const json = this.props.lovs.data;
        responseDisp = <ObjectInspector data={json}/>;
      }
    }

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