WebExJobList.jsx

import _ from 'lodash';
import AltContainer from 'alt/AltContainer';
import classnames from 'classnames';
import React from 'react';
import {Link} from 'react-router';

import BaseComponent from   'components/BaseComponent';
import alt from             'modules/Thrift/alt-inst';
import                      './WebExJobList.scss';


export default class WebExJobList extends BaseComponent {

  constructor(props) {
    super(props, WebExJobList);
  }

  static propTypes = {
    job: React.PropTypes.object.isRequired,
    jobs: React.PropTypes.array,
    idObjectCache: React.PropTypes.object
  }

  render() {
    return (
      <div className="wi-WebExJobList">
        <div className="wi-WebExJobList-Subtitle">Active Jobs</div>
        {this.getRows(false)}
        <div className="wi-WebExJobList-Subtitle">Completed Jobs</div>
        {this.getRows(true)}
      </div>
    );
  };

  getRows(completed) {
    return _.chain(this.props.jobs)
      .filter( job => {return completed === !!job.completedAt; })
      .sortBy( job => job.completedAt || 0)
      .map( job => {
        return (
          <WebExJobListItem key={job.id}
            job={job}
            activeJobId={this.props.job.id}
            idObjectCache={this.props.idObjectCache}/>
        );
      }).value();
  }
}

class WebExJobListItem extends BaseComponent {
  constructor(props) {
    super(props, WebExJobListItem);
  }

  static propTypes = {
    job: React.PropTypes.object.isRequired,
    activeJobId: React.PropTypes.string,
    idObjectCache: React.PropTypes.object
  }

  render() {
    const itemClasses = classnames('wi-WebExJobList-Item', {
      'wi-WebExJobList-Item--Active': this.props.activeJobId === this.props.job.id
    });
    return (
      <Link to="webex" params={{jobId: this.props.job.id}}>
        <div className={itemClasses}>
          <strong>{this.props.job.title}</strong><br/>
          {this.templateNameFromId(this.props.job.jobTemplateId)}<br/>
          {this.props.job.team.name}
        </div>
      </Link>
    );
  }

  templateNameFromId(id) {
    if (id in this.props.idObjectCache) {
      return this.props.idObjectCache[id].title;
    } else {
      return 'Blank template';
    }
  }
}