From fc8bb223590fc5b0ff8167c690a49c24d820561b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 10 Sep 2021 00:23:49 +0200
Subject: [PATCH 1/3] Reactions page improvements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/column_back_button.js | 6 ++----
 app/soapbox/features/reactions/index.js      | 2 +-
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/components/column_back_button.js b/app/soapbox/components/column_back_button.js
index bbc2fc701..54b700b63 100644
--- a/app/soapbox/components/column_back_button.js
+++ b/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();
     }
diff --git a/app/soapbox/features/reactions/index.js b/app/soapbox/features/reactions/index.js
index 260c8726b..4eca0880b 100644
--- a/app/soapbox/features/reactions/index.js
+++ b/app/soapbox/features/reactions/index.js
@@ -91,7 +91,7 @@ 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>)}
+              {reactions?.filter(reaction => reaction.count).map(reaction => <NavLink to={`/@${username}/posts/${statusId}/reactions/${reaction.name}`}>{reaction.name} {reaction.count}</NavLink>)}
             </div>
           )
         }

From 58bdf4b1c77c132f3db2f18381b90ffd7f419beb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 10 Sep 2021 00:44:21 +0200
Subject: [PATCH 2/3] do not push filter changes to history
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/features/reactions/index.js | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/reactions/index.js b/app/soapbox/features/reactions/index.js
index 4eca0880b..0e843cd33 100644
--- a/app/soapbox/features/reactions/index.js
+++ b/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,6 +37,10 @@ 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,
@@ -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?.filter(reaction => reaction.count).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 onClick={this.handleFilterChange(reaction.name)}>{reaction.name} {reaction.count}</button>)}
             </div>
           )
         }

From 1dc78e4e95b4a19e6a7927906e1c2206fff1c9e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 10 Sep 2021 00:48:06 +0200
Subject: [PATCH 3/3] fix proptypes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/features/reactions/index.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/features/reactions/index.js b/app/soapbox/features/reactions/index.js
index 0e843cd33..8e3ab9884 100644
--- a/app/soapbox/features/reactions/index.js
+++ b/app/soapbox/features/reactions/index.js
@@ -43,9 +43,9 @@ class Reactions extends ImmutablePureComponent {
 
   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,
   };
 
@@ -101,7 +101,7 @@ class Reactions extends ImmutablePureComponent {
           reactions.size > 0 && (
             <div className='reaction__filter-bar'>
               <button onClick={this.handleFilterChange('')}>All</button>
-              {reactions?.filter(reaction => reaction.count).map(reaction => <button onClick={this.handleFilterChange(reaction.name)}>{reaction.name} {reaction.count}</button>)}
+              {reactions?.filter(reaction => reaction.count).map(reaction => <button key={reaction.name} onClick={this.handleFilterChange(reaction.name)}>{reaction.name} {reaction.count}</button>)}
             </div>
           )
         }