Fix explore page reloading when you navigate back to it in web UI (#27489)

app/javascript/mastodon/features/explore/links.jsx

@@ -3,12 +3,15 @@ import { PureComponent } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
+import { withRouter } from 'react-router-dom';
+
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
 import { fetchTrendingLinks } from 'mastodon/actions/trends';
 import { DismissableBanner } from 'mastodon/components/dismissable_banner';
 import { LoadingIndicator } from 'mastodon/components/loading_indicator';
+import { WithRouterPropTypes } from 'mastodon/utils/react_router';
 
 import Story from './components/story';
 
@@ -23,10 +26,17 @@ class Links extends PureComponent {
     links: ImmutablePropTypes.list,
     isLoading: PropTypes.bool,
     dispatch: PropTypes.func.isRequired,
+    ...WithRouterPropTypes,
   };
 
   componentDidMount () {
-    const { dispatch } = this.props;
+    const { dispatch, links, history } = this.props;
+
+    // If we're navigating back to the screen, do not trigger a reload
+    if (history.action === 'POP' && links.size > 0) {
+      return;
+    }
+
     dispatch(fetchTrendingLinks());
   }
 
@@ -77,4 +87,4 @@ class Links extends PureComponent {
 
 }
 
-export default connect(mapStateToProps)(Links);
+export default connect(mapStateToProps)(withRouter(Links));

app/javascript/mastodon/features/explore/statuses.jsx

@@ -3,15 +3,19 @@ import { PureComponent } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
+import { withRouter } from 'react-router-dom';
+
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
 import { debounce } from 'lodash';
 
+
 import { fetchTrendingStatuses, expandTrendingStatuses } from 'mastodon/actions/trends';
 import { DismissableBanner } from 'mastodon/components/dismissable_banner';
 import StatusList from 'mastodon/components/status_list';
 import { getStatusList } from 'mastodon/selectors';
+import { WithRouterPropTypes } from 'mastodon/utils/react_router';
 
 const mapStateToProps = state => ({
   statusIds: getStatusList(state, 'trending'),
@@ -27,10 +31,17 @@ class Statuses extends PureComponent {
     hasMore: PropTypes.bool,
     multiColumn: PropTypes.bool,
     dispatch: PropTypes.func.isRequired,
+    ...WithRouterPropTypes,
   };
 
   componentDidMount () {
-    const { dispatch } = this.props;
+    const { dispatch, statusIds, history } = this.props;
+
+    // If we're navigating back to the screen, do not trigger a reload
+    if (history.action === 'POP' && statusIds.size > 0) {
+      return;
+    }
+
     dispatch(fetchTrendingStatuses());
   }
 
@@ -64,4 +75,4 @@ class Statuses extends PureComponent {
 
 }
 
-export default connect(mapStateToProps)(Statuses);
+export default connect(mapStateToProps)(withRouter(Statuses));

app/javascript/mastodon/features/explore/suggestions.jsx

@@ -3,12 +3,15 @@ import { PureComponent } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
+import { withRouter } from 'react-router-dom';
+
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
 import { fetchSuggestions } from 'mastodon/actions/suggestions';
 import { LoadingIndicator } from 'mastodon/components/loading_indicator';
 import AccountCard from 'mastodon/features/directory/components/account_card';
+import { WithRouterPropTypes } from 'mastodon/utils/react_router';
 
 const mapStateToProps = state => ({
   suggestions: state.getIn(['suggestions', 'items']),
@@ -21,10 +24,17 @@ class Suggestions extends PureComponent {
     isLoading: PropTypes.bool,
     suggestions: ImmutablePropTypes.list,
     dispatch: PropTypes.func.isRequired,
+    ...WithRouterPropTypes,
   };
 
   componentDidMount () {
-    const { dispatch } = this.props;
+    const { dispatch, suggestions, history } = this.props;
+
+    // If we're navigating back to the screen, do not trigger a reload
+    if (history.action === 'POP' && suggestions.size > 0) {
+      return;
+    }
+
     dispatch(fetchSuggestions(true));
   }
 
@@ -52,4 +62,4 @@ class Suggestions extends PureComponent {
 
 }
 
-export default connect(mapStateToProps)(Suggestions);
+export default connect(mapStateToProps)(withRouter(Suggestions));

app/javascript/mastodon/features/explore/tags.jsx

@@ -3,6 +3,8 @@ import { PureComponent } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
+import { withRouter } from 'react-router-dom';
+
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
@@ -10,6 +12,7 @@ import { fetchTrendingHashtags } from 'mastodon/actions/trends';
 import { DismissableBanner } from 'mastodon/components/dismissable_banner';
 import { ImmutableHashtag as Hashtag } from 'mastodon/components/hashtag';
 import { LoadingIndicator } from 'mastodon/components/loading_indicator';
+import { WithRouterPropTypes } from 'mastodon/utils/react_router';
 
 const mapStateToProps = state => ({
   hashtags: state.getIn(['trends', 'tags', 'items']),
@@ -22,10 +25,17 @@ class Tags extends PureComponent {
     hashtags: ImmutablePropTypes.list,
     isLoading: PropTypes.bool,
     dispatch: PropTypes.func.isRequired,
+    ...WithRouterPropTypes,
   };
 
   componentDidMount () {
-    const { dispatch } = this.props;
+    const { dispatch, history, hashtags } = this.props;
+
+    // If we're navigating back to the screen, do not trigger a reload
+    if (history.action === 'POP' && hashtags.size > 0) {
+      return;
+    }
+
     dispatch(fetchTrendingHashtags());
   }
 
@@ -63,4 +73,4 @@ class Tags extends PureComponent {
 
 }
 
-export default connect(mapStateToProps)(Tags);
+export default connect(mapStateToProps)(withRouter(Tags));