RSS Map React Component

rss_map.js.jsx

var RSSMap = React.createClass({
  mixins: [ReactFireMixin],

  propTypes: {
    firebaseURL: React.PropTypes.string.isRequired,
    currentUserID: React.PropTypes.number.isRequired,
    adminUser: React.PropTypes.bool.isRequired,
    thomasArtsUser: React.PropTypes.bool.isRequired
  },

  getInitialState: function() {
    return {
      map: null,
      status: null,
      finishedArticlesCount: 0,
      articlesCount: 0
    };
  },

  resetState: function() {
    this.setState({
    });
  },

  componentDidMount: function() {
    this.loadMap();
    this.bindMapData();
  },

  componentWillUnmount: function() {
    this.firebaseRef.off();
  },

  bindMapData: function() {
    this.firebaseRef = new Firebase(this.props.firebaseURL + "rss_map");
    this.firebaseRef.on("value", function(dataSnapshot) {
      this.state.map.updateChoropleth(dataSnapshot.val());
      var finished = 0;
      var total = 0;
      var waitingStatus = 0;
      var startedStatus = 0;
      var finishedStatus = 0;
      dataSnapshot.forEach(function(state) {
        total += parseInt(state.val()['articles_count'], 10);
        finished += parseInt(state.val()['finished_articles_count'], 10);
        if(state.val()['fillKey'] == 'Waiting') {
          waitingStatus += 1;
        } else if(state.val()['fillKey'] == 'Started') {
          startedStatus += 1;
        } else if(state.val()['fillKey'] == 'Finished') {
          finishedStatus += 1;
        }
      });
      
      var status;
      if(startedStatus == 0 && waitingStatus == 0) {
      } else if(finished > 0) {
        status = 'cropping';
      } else if(startedStatus > 0 || finishedStatus > 0) {
        status = 'running';
      } else if(waitingStatus > 0) {
        status = 'resetting';
      }

      this.setState({
        finishedArticlesCount: finished,
        articlesCount: total,
        status: status
      });
      this.refs.rssFeeds.updateStatus(status);
    }.bind(this));
  },

  loadMap: function() {
    var self = this;
    this.state.map = new Datamap({
      scope: 'usa',
      element: document.getElementById('rss-map'),
      done: function(datamap) {
        datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) {
          self.handleSelectState(geography.id);
        });
      },
      geographyConfig: {
        highlightBorderColor: '#bada55',
        highlightBorderWidth: 3,
        popupTemplate: function(geography, data) {
          return '<div class="hoverinfo">' + data.finished_articles_count + '/' + data.articles_count + ' ' + geography.properties.name + ' RSS Articles importing';
        }
      },

      fills: {
        'Waiting': '#F00',
        'Started': '#FF0',
        'Finished': '#0F0',
        defaultFill: '#F00'
      },

      data: []
    });

    this.state.map.labels();
  },

  run: function() {
    this.setState({
      status: 'resetting'
    });
    $.post('/api/rss_imports', function(result) {
      this.bindMapData();
    }.bind(this));
  },

  handleSelectState: function(state_abbr) {
    this.refs.rssFeeds.handleSelectedState(state_abbr);
    this.refs.stateLinks.handleSelectedState(state_abbr);
  },

  render: function() {
    return (
      <div>
        <div id="rss-map"></div>
        { this.renderStatus() }
        <StateLinks ref="stateLinks" onSelectedState={ this.handleSelectState }/>
        <RssFeeds ref="rssFeeds" onRun={ this.run }/>
      </div>
    );
  },

  renderStatus: function() {
    if(this.state.status == 'resetting') {
      return (
        <div>Resetting Map</div>
      );
    } else if(this.state.status == 'running') {
      return (
        <div>Gathering RSS Articles</div>
      );
    } else if(this.state.status == 'cropping') {
      return (
        <div>
          <div>Cropping Images</div>
          <div>{ this.state.finishedArticlesCount } / { this.state.articlesCount }</div>
        </div>
      );
    }
  }
});