Refactoring the StreamTweet component

StreamTweet renders a tweet image that a user can click on to add it to a collection of tweets. You might have already guessed that we’re going to create and dispatch a new action when a user clicks on that tweet image.

First, import the CollectionActionCreators module to the StreamTweet component:

import CollectionActionCreators from ‘../actions/CollectionActionCreators’;

Then, add a new addTweetToCollection() method to it:

addTweetToCollection = tweet => {
  CollectionActionCreators.addTweetToCollection(tweet);
}

The addTweetToCollection() callback function should be invoked when a user clicks on a tweet image. Let’s take a look at this line in the render() method:

<Tweet
  tweet={tweet}
  onImageClick={onAddTweetToCollection}
/>

Replace the preceding code with the following line of code:

<Tweet
  tweet={tweet}
  onImageClick={this.addTweetToCollection}
/>

Finally, we need to replace the following line:

const { tweet, onAddTweetToCollection ...