sidebar.js

/** @jsx React.DOM */

var React = require('react');
var Link = require('react-router').Link;
var Reflux = require('reflux');
var PodcastActions = require('../reflux/podcast_actions.js');
var PodcastStore = require('../reflux/podcast_store.js');

var Sidebar = React.createClass({
  mixins: [ Reflux.listenTo(PodcastStore, 'onSubscriptionChange') ],
  getInitialState: function () {
    return { items: [] };
  },
  componentDidMount: function () {
    PodcastActions.init();
  },
  onSubscriptionChange: function (result) {
    this.setState({
      items: Object
        .keys(result.subscriptions)
        .map(function (x) { return result.subscriptions[x]; })
    });
  },
  render: function () {
    var subscriptions = 'You have not subscribed to any podcasts yet!';
    if (this.state.items.length > 0) {
      subscriptions = this.state.items.map(function (podcast, i) {
        return (
            <Link to='podcast' params={{id:podcast.id}} className="item" key={i}>
              <img src={podcast.image} alt={podcast.title} />
            </Link>
            );
      });
    }

    return (
        <div id="sidebar">
          <h2>Your subscriptions</h2>
          <p className="subscriptions">{subscriptions}</p>
          <Link to='/' className="add-podcast">Add new podcast</Link>
        </div>
        );
  }
});

module.exports = Sidebar;