[Glitch] Fix explore page reloading when you navigate back to it in web UI

Port d9503a1965 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/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 'flavours/glitch/actions/trends';
 import { DismissableBanner } from 'flavours/glitch/components/dismissable_banner';
 import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
+import { WithRouterPropTypes } from 'flavours/glitch/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/flavours/glitch/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 'flavours/glitch/actions/trends';
 import { DismissableBanner } from 'flavours/glitch/components/dismissable_banner';
 import StatusList from 'flavours/glitch/components/status_list';
 import { getStatusList } from 'flavours/glitch/selectors';
+import { WithRouterPropTypes } from 'flavours/glitch/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/flavours/glitch/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, dismissSuggestion } from 'flavours/glitch/actions/suggestions';
 import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
 import AccountCard from 'flavours/glitch/features/directory/components/account_card';
+import { WithRouterPropTypes } from 'flavours/glitch/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));
   }
 
@@ -57,4 +67,4 @@ class Suggestions extends PureComponent {
 
 }
 
-export default connect(mapStateToProps)(Suggestions);
+export default connect(mapStateToProps)(withRouter(Suggestions));

app/javascript/flavours/glitch/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 'flavours/glitch/actions/trends';
 import { DismissableBanner } from 'flavours/glitch/components/dismissable_banner';
 import { ImmutableHashtag as Hashtag } from 'flavours/glitch/components/hashtag';
 import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
+import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
 
 
 
@@ -24,10 +27,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());
   }
 
@@ -65,4 +75,4 @@ class Tags extends PureComponent {
 
 }
 
-export default connect(mapStateToProps)(Tags);
+export default connect(mapStateToProps)(withRouter(Tags));