instagram.jsx

/**
 * @jsx React.DOM
 */
App.Features.instagram = (function(ig){

  var el = {};

  var Instagram = React.createClass({
    loadApi: function() {
      $.ajax({
        url: this.props.url,
        dataType: 'jsonp',
        success: function(data) {
            this.setState({ data: data.data });
            this.loadIso();
            el.$isotope.find('.loading').remove();
        }.bind(this)
      });
    },
    getInitialState: function() {
      return { data: [] };
    },
    componentWillMount: function() {
      this.loadApi();
    },
    render: function() {
      return (
        <Instablock data={this.state.data} />
      );
    },
    loadIso: function() {
      var isoVars = {
        itemSelector: '.item',
        sortBy: 'random',
        masonry: {
          columnWidth: 2,
          gutterWidth: 5
        }
      };
      return el.$isotope.isotope(isoVars);
    }
  });

  var Instablock = React.createClass({
    render: function() {
      var gramNodes = this.props.data.map(function(block) {
        return <Block key={block.id} linkUrl={block.link} captionUser={block.caption.from.username} captionText={block.caption.text} captionTimestamp={block.caption.created_time} imageUrl={block.images.low_resolution.url} />;
      });
      return (
        <div>
          {gramNodes}
        </div>
      );
    }
  });

  var Block = React.createClass({
    componentWillMount: function() {
      var rando = Math.floor( (Math.random()*20) + 1 ),
        classStr;
      rando < 7 ? classStr = 'item big-block' : classStr = 'item sm-block';
      this.props.itemClass = classStr;
      this.props.formattedTime = moment.unix(this.props.captionTimestamp).fromNow();
    },
    render: function() {
      return (
        <div className={this.props.itemClass}>
          <div className="mask">
            <a className="mask-container" href={this.props.linkUrl} target="_blank">
              <div className="bottom">
                <h4>@{this.props.captionUser}</h4>
                <h5>{this.props.formattedTime}</h5>
                <p>{this.props.captionText}</p>
              </div>
            </a>
          </div>
          <img src={this.props.imageUrl} alt={this.props.captionText} />
        </div>
      );
    }
  });

  ig.init = function() {
    el.$isotope = $('#instagram');
    React.renderComponent(
      <Instagram url="https://api.instagram.com/v1/tags/tag" />,
      document.getElementById('instagram')
    );
  }
  return ig;
}(App.Features.instagram || {}));