Merge pull request #331 from akinwale/issue312

Issue #312 home page scroll position on back navigation

ui/js/actions/app.js

@@ -64,6 +64,17 @@ export function doHistoryBack() {
     if (!history.state) return;
 
     history.back();
+    dispatch({
+      type: types.HISTORY_BACK,
+    });
+  };
+}
+
+export function doHistoryBackCompleted() {
+  return function(dispatch, getState) {
+    dispatch({
+      type: types.HISTORY_BACK_COMPLETED,
+    });
   };
 }
 

ui/js/constants/action_types.js

@@ -2,6 +2,7 @@ export const CHANGE_PATH = "CHANGE_PATH";
 export const OPEN_MODAL = "OPEN_MODAL";
 export const CLOSE_MODAL = "CLOSE_MODAL";
 export const HISTORY_BACK = "HISTORY_BACK";
+export const HISTORY_BACK_COMPLETED = "HISTORY_BACK_COMPLETED";
 export const SHOW_SNACKBAR = "SHOW_SNACKBAR";
 export const REMOVE_SNACKBAR_SNACK = "REMOVE_SNACKBAR_SNACK";
 export const WINDOW_FOCUSED = "WINDOW_FOCUSED";

ui/js/page/discover/index.js

@@ -1,20 +1,24 @@
 import React from "react";
 import { connect } from "react-redux";
+import { doHistoryBackCompleted } from "actions/app";
 import { doFetchFeaturedUris, doCancelAllResolvingUris } from "actions/content";
 import {
   selectFeaturedUris,
   selectFetchingFeaturedUris,
 } from "selectors/content";
+import { selectNavigatingBack } from "selectors/app";
 import DiscoverPage from "./view";
 
 const select = state => ({
   featuredUris: selectFeaturedUris(state),
   fetchingFeaturedUris: selectFetchingFeaturedUris(state),
+  isNavigatingBack: selectNavigatingBack(state),
 });
 
 const perform = dispatch => ({
   fetchFeaturedUris: () => dispatch(doFetchFeaturedUris()),
   cancelResolvingUris: () => dispatch(doCancelAllResolvingUris()),
+  finishedNavigatingBack: () => dispatch(doHistoryBackCompleted()),
 });
 
 export default connect(select, perform)(DiscoverPage);

ui/js/page/discover/view.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import lbry from "lbry.js";
 import lbryio from "lbryio.js";
 import lbryuri from "lbryuri";
 import FileCard from "component/fileCard";
@@ -37,10 +38,31 @@ const FeaturedCategory = props => {
 class DiscoverPage extends React.PureComponent {
   componentWillMount() {
     this.props.fetchFeaturedUris();
+    this.scrollListener = this.handleScroll.bind(this);
+  }
+
+  componentDidMount() {
+    if (this.props.isNavigatingBack) {
+      const scrollY = parseInt(lbry.getClientSetting("prefs_scrolly"));
+      if (!isNaN(scrollY)) {
+        const restoreScrollPosition = () => {
+          window.scrollTo(0, scrollY);
+        };
+        setTimeout(restoreScrollPosition, 100);
+      }
+
+      this.props.finishedNavigatingBack();
+    }
+    window.addEventListener("scroll", this.scrollListener);
+  }
+
+  handleScroll() {
+    lbry.setClientSetting("prefs_scrolly", window.scrollY);
   }
 
   componentWillUnmount() {
     this.props.cancelResolvingUris();
+    window.removeEventListener("scroll", this.scrollListener);
   }
 
   render() {

ui/js/reducers/app.js

@@ -141,6 +141,18 @@ reducers[types.WINDOW_FOCUSED] = function(state, action) {
   });
 };
 
+reducers[types.HISTORY_BACK] = function(state, action) {
+  return Object.assign({}, state, {
+    navigatingBack: true,
+  });
+};
+
+reducers[types.HISTORY_BACK_COMPLETED] = function(state, action) {
+  return Object.assign({}, state, {
+    navigatingBack: false,
+  });
+};
+
 export default function reducer(state = defaultState, action) {
   const handler = reducers[action.type];
   if (handler) return handler(state, action);

ui/js/selectors/app.js

@@ -191,3 +191,8 @@ export const selectBadgeNumber = createSelector(
   _selectState,
   state => state.badgeNumber
 );
+
+export const selectNavigatingBack = createSelector(
+  _selectState,
+  state => state.navigatingBack
+);