Adding hashtags

app/assets/javascripts/components/features/account/index.jsx

@@ -47,7 +47,7 @@ const Account = React.createClass({
     this.props.dispatch(fetchAccount(Number(this.props.params.accountId)));
   },
 
-  componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps (nextProps) {
     if (nextProps.params.accountId !== this.props.params.accountId && nextProps.params.accountId) {
       this.props.dispatch(fetchAccount(Number(nextProps.params.accountId)));
     }

app/assets/javascripts/components/features/hashtag_timeline/index.jsx

@@ -0,0 +1,72 @@
+import { connect } from 'react-redux';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import StatusListContainer from '../ui/containers/status_list_container';
+import Column from '../ui/components/column';
+import {
+  refreshTimeline,
+  updateTimeline
+} from '../../actions/timelines';
+
+const HashtagTimeline = React.createClass({
+
+  propTypes: {
+    params: React.PropTypes.object.isRequired,
+    dispatch: React.PropTypes.func.isRequired
+  },
+
+  mixins: [PureRenderMixin],
+
+  _subscribe (dispatch, id) {
+    if (typeof App !== 'undefined') {
+      this.subscription = App.cable.subscriptions.create({
+        channel: 'HashtagChannel',
+        tag: id
+      }, {
+
+        received (data) {
+          dispatch(updateTimeline('tag', JSON.parse(data.message)));
+        }
+
+      });
+    }
+  },
+
+  _unsubscribe () {
+    if (typeof this.subscription !== 'undefined') {
+      this.subscription.unsubscribe();
+    }
+  },
+
+  componentWillMount () {
+    const { dispatch } = this.props;
+    const { id } = this.props.params;
+
+    dispatch(refreshTimeline('tag', true, id));
+    this._subscribe(dispatch, id);
+  },
+
+  componentWillReceiveProps (nextProps) {
+    if (nextProps.params.id !== this.props.params.id) {
+      this.props.dispatch(refreshTimeline('tag', true, nextProps.params.id));
+      this._unsubscribe();
+      this._subscribe(this.props.dispatch, nextProps.params.id);
+    }
+  },
+
+  componentWillUnmount () {
+    this._unsubscribe();
+  },
+
+  render () {
+    const { id } = this.props.params;
+
+    return (
+      <Column icon='hashtag' heading={id}>
+        <StatusListContainer type='tag' id={id} />
+      </Column>
+    );
+  },
+
+});
+
+export default connect()(HashtagTimeline);

app/assets/javascripts/components/features/ui/containers/status_list_container.jsx

@@ -1,15 +1,16 @@
-import { connect }           from 'react-redux';
-import StatusList            from '../../../components/status_list';
-import { expandTimeline }    from '../../../actions/timelines';
+import { connect } from 'react-redux';
+import StatusList from '../../../components/status_list';
+import { expandTimeline } from '../../../actions/timelines';
+import Immutable from 'immutable';
 
 const mapStateToProps = (state, props) => ({
-  statusIds: state.getIn(['timelines', props.type])
+  statusIds: state.getIn(['timelines', props.type], Immutable.List())
 });
 
 const mapDispatchToProps = function (dispatch, props) {
   return {
     onScrollToBottom () {
-      dispatch(expandTimeline(props.type));
+      dispatch(expandTimeline(props.type, props.id));
     }
   };
 };