Merge branch 'reactions-page' into 'develop'

Reactions page improvements

See merge request soapbox-pub/soapbox-fe!736

app/soapbox/components/column_back_button.js

@@ -16,10 +16,8 @@ export default class ColumnBackButton extends React.PureComponent {
   handleClick = () => {
     const { to } = this.props;
 
-    if (to) {
-      this.context.router.history.push(to);
-    } else if (window.history && window.history.length === 1) {
-      this.context.router.history.push('/');
+    if (window.history && window.history.length === 1) {
+      this.context.router.history.push(to ? to : '/');
     } else {
       this.context.router.history.goBack();
     }

app/soapbox/features/reactions/index.js

@@ -13,7 +13,6 @@ import AccountContainer from '../../containers/account_container';
 import Column from '../ui/components/column';
 import ScrollableList from '../../components/scrollable_list';
 import { makeGetStatus } from '../../selectors';
-import { NavLink } from 'react-router-dom';
 
 const mapStateToProps = (state, props) => {
   const getStatus = makeGetStatus();
@@ -38,11 +37,15 @@ const mapStateToProps = (state, props) => {
 export default @connect(mapStateToProps)
 class Reactions extends ImmutablePureComponent {
 
+  static contextTypes = {
+    router: PropTypes.object.isRequired,
+  };
+
   static propTypes = {
     params: PropTypes.object.isRequired,
-    dispatch: PropTypes.array.isRequired,
-    reactions: PropTypes.array,
-    accounts: PropTypes.array,
+    dispatch: PropTypes.func.isRequired,
+    reactions: ImmutablePropTypes.orderedSet,
+    accounts: ImmutablePropTypes.orderedSet,
     status: ImmutablePropTypes.map,
   };
 
@@ -61,6 +64,13 @@ class Reactions extends ImmutablePureComponent {
     }
   }
 
+  handleFilterChange = (reaction) => () => {
+    const { params } = this.props;
+    const { username, statusId } = params;
+
+    this.context.router.history.replace(`/@${username}/posts/${statusId}/reactions/${reaction}`);
+  };
+
   render() {
     const { params, reactions, accounts, status } = this.props;
     const { username, statusId } = params;
@@ -90,8 +100,8 @@ class Reactions extends ImmutablePureComponent {
         {
           reactions.size > 0 && (
             <div className='reaction__filter-bar'>
-              <NavLink to={`/@${username}/posts/${statusId}/reactions`} exact>All</NavLink>
-              {reactions?.map(reaction => <NavLink to={`/@${username}/posts/${statusId}/reactions/${reaction.name}`}>{reaction.name} {reaction.count}</NavLink>)}
+              <button onClick={this.handleFilterChange('')}>All</button>
+              {reactions?.filter(reaction => reaction.count).map(reaction => <button key={reaction.name} onClick={this.handleFilterChange(reaction.name)}>{reaction.name} {reaction.count}</button>)}
             </div>
           )
         }