ih-portal/demo/services/Courses.jsx

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

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

export default class Courses extends Component {
  constructor() {
    super(...arguments);

    this.invalidateCourses = this.invalidateCourses.bind(this);
    this.copyToClipboard = this.copyToClipboard.bind(this);
  }

  componentDidMount() {
    const { courses } = this.props;
    if (!courses || (courses.lastAction && courses.lastAction.status === 'error') || !courses.data) {
      const requestParams = {
        url: __COURSES_URL__,
        auth: [__USERNAME__, __PASSWORD__],
      };
      const institution = 'UCINN';
      const subject = 'OM';

      this.props.fetch(requestParams, subject, institution);
    }
  }

  invalidateCourses() {
    const requestParams = {
      url: __COURSES_URL__,
      auth: [__USERNAME__, __PASSWORD__],
    };
    const institution = 'UCINN';
    const subject = '15MATH';

    this.props.invalidate(requestParams, subject, institution);
  }

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

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

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

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

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

const { func, object } = PropTypes;
Courses.propTypes = {
  courses: object,
  fetch: func.isRequired,
  invalidate: func.isRequired,
};