Use history API to retain scrollY when navigating back

ui/js/actions/app.js

@@ -33,11 +33,11 @@ export function doNavigate(path, params = {}) {
 
     const state = getState();
     const pageTitle = selectPageTitle(state);
-    dispatch(doHistoryPush(params, pageTitle, url));
+    dispatch(doHistoryPush({ params }, pageTitle, url));
   };
 }
 
-export function doChangePath(path) {
+export function doChangePath(path, options = {}) {
   return function(dispatch, getState) {
     dispatch({
       type: types.CHANGE_PATH,
@@ -48,8 +48,12 @@ export function doChangePath(path) {
 
     const state = getState();
     const pageTitle = selectPageTitle(state);
+    const scrollY = options.scrollY;
+
     window.document.title = pageTitle;
-    window.scrollTo(0, 0);
+
+    if (scrollY) window.scrollTo(0, scrollY);
+    else window.scrollTo(0, 0);
 
     const currentPage = selectCurrentPage(state);
     if (currentPage === "search") {
@@ -67,10 +71,26 @@ export function doHistoryBack() {
   };
 }
 
-export function doHistoryPush(params, title, relativeUrl) {
+export function doHistoryPush(currentState, title, relativeUrl) {
   return function(dispatch, getState) {
     title += " - LBRY";
-    history.pushState(params, title, `#${relativeUrl}`);
+    history.pushState(currentState, title, `#${relativeUrl}`);
+  };
+}
+
+export function doRecordScroll(scroll) {
+  return function(dispatch, getState) {
+    const state = getState();
+    const historyState = history.state;
+
+    if (!historyState) return;
+
+    historyState.scrollY = scroll;
+    history.replaceState(
+      historyState,
+      document.title,
+      `#${state.app.currentPath}`
+    );
   };
 }
 
@@ -219,6 +239,7 @@ export function doAlertError(errorList) {
 
 export function doDaemonReady() {
   return function(dispatch, getState) {
+    history.replaceState({}, document.title, `#/discover`);
     dispatch(doAuthenticate());
     dispatch({
       type: types.DAEMON_READY,

ui/js/component/app/index.js

@@ -2,7 +2,11 @@ import React from "react";
 import { connect } from "react-redux";
 
 import { selectCurrentModal } from "selectors/app";
-import { doCheckUpgradeAvailable, doAlertError } from "actions/app";
+import {
+  doCheckUpgradeAvailable,
+  doAlertError,
+  doRecordScroll,
+} from "actions/app";
 import { doUpdateBalance } from "actions/wallet";
 import App from "./view";
 
@@ -14,6 +18,7 @@ const perform = dispatch => ({
   alertError: errorList => dispatch(doAlertError(errorList)),
   checkUpgradeAvailable: () => dispatch(doCheckUpgradeAvailable()),
   updateBalance: balance => dispatch(doUpdateBalance(balance)),
+  recordScroll: scrollPosition => dispatch(doRecordScroll(scrollPosition)),
 });
 
 export default connect(select, perform)(App);

ui/js/component/app/view.jsx

@@ -21,6 +21,14 @@ class App extends React.PureComponent {
     lbry.balanceSubscribe(balance => {
       this.props.updateBalance(balance);
     });
+
+    this.scrollListener = () => this.props.recordScroll(window.scrollY);
+
+    window.addEventListener("scroll", this.scrollListener);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("scroll", this.scrollListener);
   }
 
   render() {

ui/js/main.js

@@ -37,10 +37,10 @@ window.addEventListener("popstate", (event, param) => {
 
   if (hash !== "") {
     const url = hash.split("#")[1];
-    const params = event.state;
+    const { params, scrollY } = event.state || {};
     const queryString = toQueryString(params);
 
-    app.store.dispatch(doChangePath(`${url}?${queryString}`));
+    app.store.dispatch(doChangePath(`${url}?${queryString}`, { scrollY }));
   } else {
     app.store.dispatch(doChangePath("/discover"));
   }