ih-portal/src/pagelets/TodoListProv.jsx

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

import React, { Component, PropTypes } from 'react';
import { Checklist } from 'catalyst-ui';

import { toArray } from '../utils/Array.js';

/**
 * This provider combines Checklist and Activity Guide items into one to-do list.
 */
export default class TodoListProv extends Component {
  constructor() {
    super(...arguments);

    this.fetch = this.fetch.bind(this);
    this.invalidate = this.invalidate.bind(this);
    this.isFetching = this.isFetching.bind(this);

    this.fetchChecklist = this.fetchChecklist.bind(this);
    this.invalidateChecklist = this.invalidateChecklist.bind(this);

    this.fetchActivityGuide = this.fetchActivityGuide.bind(this);
    this.invalidateActivityGuide = this.invalidateActivityGuide.bind(this);

    this.getTodoList = this.getTodoList.bind(this);
  }

  componentDidMount() {
    const { activityGuide, checklist } = this.props;

    if (!checklist ||
      (checklist.lastAction && checklist.lastAction.status === 'error') ||
      !checklist.data) {
      this.fetchChecklist();
    }

    if (!activityGuide ||
      (activityGuide.lastAction && activityGuide.lastAction.status === 'error') ||
      !activityGuide.data) {
      this.fetchActivityGuide();
    }
  }

  isFetching() {
    const { activityGuide, checklist } = this.props;

    if (!checklist || !activityGuide) {
      return false;
    }

    return (checklist.isFetching || activityGuide.isFetching);
  }

  fetch() {
    this.props.fetchChecklist();
    this.props.fetchActivityGuide();
  }

  invalidate() {
    this.props.invalidateChecklist();
    this.props.invalidateActivityGuide();
  }

  fetchChecklist() {
    const requestParams = {
      url: __CHECKLIST_URL__,
      auth: [__USERNAME__, __PASSWORD__],
    };

    this.props.fetchChecklist(requestParams);
  }

  invalidateChecklist() {
    const requestParams = {
      url: __CHECKLIST_URL__,
      auth: [__USERNAME__, __PASSWORD__],
    };

    this.props.invalidateChecklist(requestParams);
  }

  fetchActivityGuide() {
    const requestParams = {
      url: __ACTIVITY_GUIDE_URL__,
      auth: [__USERNAME__, __PASSWORD__],
    };

    this.props.fetchActivityGuide(requestParams);
  }

  invalidateActivityGuide() {
    const requestParams = {
      url: __ACTIVITY_GUIDE_URL__,
      auth: [__USERNAME__, __PASSWORD__],
    };

    this.props.invalidateActivityGuide(requestParams);
  }

  /**
   * Combines the activity guide and checklist into one array
   * @return {array} of checklist items
   */
  getTodoList() {
    const { activityGuide, checklist } = this.props;

    if (this.isFetching()) {
      return null;
    }

    if (!checklist || !checklist.data || !activityGuide || !activityGuide.data) {
      return null;
    }

    const checklistArray = checklist.data.items = toArray(checklist.data.items);
    const activityGuideArray = toArray(activityGuide.data.ActivityGuides);

    const filteredActivityGuideArray = activityGuideArray.length > 0
      ? activityGuideArray.filter((item) => item.Name.trim() !== '')
      : [];

    const newChecklistItems = filteredActivityGuideArray.length > 0
      ? filteredActivityGuideArray.map((item) => ({
        checklistCdDescr: item.Name,
        itemStatusLovdescr: '',
        itemStatus: '',
        dueDt: item.DueDate,
        responsibleName: '',
        information: '',
        adminFunctionDescr: item.OwnerDescription,
        url: item.Url,
      }))
      : null;

    const newCheckList = newChecklistItems
      ? {
        lastAction: checklist.lastAction,
        data: {
          items: checklistArray.concat(newChecklistItems),
        },
      }
      : checklist;

    return newCheckList;
  }

  render() {
    return (
      <div className="piglet">
        <Checklist
          checklist={this.getTodoList()}
          style={this.props.style}
          isFetching={this.isFetching()}
          fetch={this.fetch}
          invalidate={this.invalidate}
        />
      </div>
    );
  }
}

TodoListProv.propTypes = {
  style: PropTypes.object,

  checklist: PropTypes.object,
  fetchChecklist: PropTypes.func.isRequired,
  invalidateChecklist: PropTypes.func.isRequired,

  activityGuide: PropTypes.object,
  fetchActivityGuide: PropTypes.func.isRequired,
  invalidateActivityGuide: PropTypes.func.isRequired,
};