gistfile1.js

var Timeline = React.createClass({
  // timeline component starts with no initial tweets/active tweet
  getInitialState: function() {
    return { tweets: [], activeTweet: {} };
  },

  // if called initially, loadTweets makes an Ajax call to the server for 20 tweets using the default
  // hashtag "#gamergate" as the primary search parameter for the twitter client
  // otherwise, the function gets called whenever the current number of tweets dips below 20 after removing a tweet

  loadTweets: function(n) {
    var count = n || 20;
    var currentTweets = this.state.tweets;
    var data = { hashtag: hashtag, count: count };

    $.ajax({
      url: "/tweets/hashtag",
      type: "GET",
      data: data,
      dataType: 'json',
      success: function(data) {
        this.setState({
          tweets: currentTweets.concat(data.tweets)
        })
      }.bind(this)
    })
  },

  // initial loading of tweets

  componentDidMount: function() {
    this.loadTweets();
    // setInterval(this.loadTweets, 10000);
  },


  // This function is bound to the Timeline component and set as a property to the
  // Tweet component. Whenever the 'onClick' event is triggered by clicking on an individual tweet,
  // that particular tweets id gets removed from the parent (Timeline) and causes the Timeline to re-render
  // without the removed tweet

  removeTweet: function(removedTweet) {
    var tweet = {
      id: removedTweet.id,
      handle: removedTweet.user.screen_name,
      tweet_timestamp: new Date(removedTweet.created_at),
      text: removedTweet.text,
      twitter_user_id: removedTweet.user.id
    }

    var user = { id: tweet.twitter_user_id, handle: tweet.handle }

    $.ajax({
      type: "POST",
      data: { tweet: tweet, twitter_user: user },
      url: "/tweets",
      dataType: 'json',
      success: function(d) {
        
      }
    })

    var tweets = this.state.tweets.filter(function(tweet){
      return tweet.id !== removedTweet.id;
    })

    if (tweets.length < 10) {
      this.loadTweets(10);
    } else {
      this.setState({tweets: tweets})
    }
  },

  // similar to the removeTweet, this function gets called after a 'mouseEnter' event. The activeTweet is set in the
  // parent component, Timeline, and then re-renders

  displayTweet: function(tweet) {
    this.setState({
      activeTweet: tweet
    })
  },

  doSomething: function(e){
    console.log(e)
  },

  render: function() {
    var self = this;
    var activeTweet = this.state.activeTweet.text === undefined ? "" : <Tweet tweet={this.state.activeTweet} />
    var tweets = this.state.tweets.map(function(tweet){
      return (
        <Tweet
          tweet={tweet}
          key={tweet.id}
          removeTweet={self.removeTweet.bind(null, tweet)}
          showTweet={self.displayTweet.bind(null, tweet)}
        />
      )
    })

    return (
      <div id='stream'>
        <div id='zoom-tweet' className='jumbotron'>
          {activeTweet}
        </div>
        <div id='tweets'>
          {tweets}
        </div>
      </div>
    )
  }
})

var Tweet = React.createClass({
  render: function() {
    var tweet = this.props.tweet;
    return (
      <div className='col-md-6'>
        <div className='panel panel-default'>
          <div className='panel-body'>
            <div className='tweet-overlay'>
              <a href='#' className='ok' value={false}><span></span></a>
            </div>
            <div>
              <span className='handle'>{tweet.user.screen_name}</span>
              <span className='portrait'>{tweet.user.portrait}</span>
            </div>
            <div className='tweet-text'>
              {tweet.text}
            </div>
          </div>
        </div>
      </div>
    )
  }
})

var HighlightTimeline = React.createClass({
  showIt: function(e) {
    e.preventDefault();
    console.log(e)
  },

  render: function() {
    return ( <Timeline onKeyPress={this.showIt} /> )
  }
})



var showTimeline = function(tag) {
  hashtag = tag || 'gamergate';

  React.render(
    <HighlightTimeline />,
    document.body
  )
}