gistfile1.txt

$(document).ready(function(){
  initialize_giphy()
})

Array.prototype.each_slice = function (size, callback){
  for (var i = 0, l = this.length; i < l; i += size){
    callback.call(this, this.slice(i, i + size))
  }
}

var Gif = React.createClass({
  propTypes: {
    gif_url: React.PropTypes.string.isRequired,
    id: React.PropTypes.string.isRequired,
  },
  render: function() {
    return (
      React.createElement('div', {className: 'col-md-2', key: this.props.id}, React.createElement('img', { src: this.props.gif_url, className: 'img-responsive' }))
    )
  }
})

var GifList = React.createClass({
  getInitialState: function() {
    return {gifs: [], query: 'funny+cat'};
  },
  componentDidMount: function() {
    $.ajax({
      url: "http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=" + this.state.query,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({gifs: data.data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  render: function(){
    var rows = []
    rows.push(React.createElement(SearchBox, {query: this.props.query, key: 'search_box'}))
    this.state.gifs.each_slice(6, function(row){
      row_gifs = []
      row_key = row.map(function(gif){
        return gif.id
      }).join()
      console.log(row_key)
      row.forEach(function(gif){
        console.log(gif.id)
        row_gifs.push(React.createElement(Gif, {gif_url: gif.images.fixed_height.url, id: gif.id, key: gif.id}))
      })
      rows.push(
        React.createElement(GifRow, {key: row_key}, row_gifs)
      )
      console.log(rows)
    });
    return (
      React.createElement('div', null, rows)
    )
  }
})

var GifRow = React.createClass({
  render: function(){
    return (
      React.createElement(
        'div',
        {className: 'row'},
        this.props.children
      )
    )
  }
})

var SearchBox = React.createClass({
  render: function(){
    return (
      React.createElement('form', {id: 'giphy_search_form'}, React.createElement('input', {value: this.props.query}))
    )
  }
})

function initialize_giphy(query='funny+cat') {
    ReactDOM.render(React.createElement(GifList), document.getElementById('giphy'))
}