Use history API to retain scrollY when navigating back
This commit is contained in:
parent
a7c4df9393
commit
739bf6adf5
4 changed files with 42 additions and 8 deletions
|
@ -33,11 +33,11 @@ export function doNavigate(path, params = {}) {
|
||||||
|
|
||||||
const state = getState();
|
const state = getState();
|
||||||
const pageTitle = selectPageTitle(state);
|
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) {
|
return function(dispatch, getState) {
|
||||||
dispatch({
|
dispatch({
|
||||||
type: types.CHANGE_PATH,
|
type: types.CHANGE_PATH,
|
||||||
|
@ -48,8 +48,12 @@ export function doChangePath(path) {
|
||||||
|
|
||||||
const state = getState();
|
const state = getState();
|
||||||
const pageTitle = selectPageTitle(state);
|
const pageTitle = selectPageTitle(state);
|
||||||
|
const scrollY = options.scrollY;
|
||||||
|
|
||||||
window.document.title = pageTitle;
|
window.document.title = pageTitle;
|
||||||
window.scrollTo(0, 0);
|
|
||||||
|
if (scrollY) window.scrollTo(0, scrollY);
|
||||||
|
else window.scrollTo(0, 0);
|
||||||
|
|
||||||
const currentPage = selectCurrentPage(state);
|
const currentPage = selectCurrentPage(state);
|
||||||
if (currentPage === "search") {
|
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) {
|
return function(dispatch, getState) {
|
||||||
title += " - LBRY";
|
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() {
|
export function doDaemonReady() {
|
||||||
return function(dispatch, getState) {
|
return function(dispatch, getState) {
|
||||||
|
history.replaceState({}, document.title, `#/discover`);
|
||||||
dispatch(doAuthenticate());
|
dispatch(doAuthenticate());
|
||||||
dispatch({
|
dispatch({
|
||||||
type: types.DAEMON_READY,
|
type: types.DAEMON_READY,
|
||||||
|
|
|
@ -2,7 +2,11 @@ import React from "react";
|
||||||
import { connect } from "react-redux";
|
import { connect } from "react-redux";
|
||||||
|
|
||||||
import { selectCurrentModal } from "selectors/app";
|
import { selectCurrentModal } from "selectors/app";
|
||||||
import { doCheckUpgradeAvailable, doAlertError } from "actions/app";
|
import {
|
||||||
|
doCheckUpgradeAvailable,
|
||||||
|
doAlertError,
|
||||||
|
doRecordScroll,
|
||||||
|
} from "actions/app";
|
||||||
import { doUpdateBalance } from "actions/wallet";
|
import { doUpdateBalance } from "actions/wallet";
|
||||||
import App from "./view";
|
import App from "./view";
|
||||||
|
|
||||||
|
@ -14,6 +18,7 @@ const perform = dispatch => ({
|
||||||
alertError: errorList => dispatch(doAlertError(errorList)),
|
alertError: errorList => dispatch(doAlertError(errorList)),
|
||||||
checkUpgradeAvailable: () => dispatch(doCheckUpgradeAvailable()),
|
checkUpgradeAvailable: () => dispatch(doCheckUpgradeAvailable()),
|
||||||
updateBalance: balance => dispatch(doUpdateBalance(balance)),
|
updateBalance: balance => dispatch(doUpdateBalance(balance)),
|
||||||
|
recordScroll: scrollPosition => dispatch(doRecordScroll(scrollPosition)),
|
||||||
});
|
});
|
||||||
|
|
||||||
export default connect(select, perform)(App);
|
export default connect(select, perform)(App);
|
||||||
|
|
|
@ -21,6 +21,14 @@ class App extends React.PureComponent {
|
||||||
lbry.balanceSubscribe(balance => {
|
lbry.balanceSubscribe(balance => {
|
||||||
this.props.updateBalance(balance);
|
this.props.updateBalance(balance);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
this.scrollListener = () => this.props.recordScroll(window.scrollY);
|
||||||
|
|
||||||
|
window.addEventListener("scroll", this.scrollListener);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
window.removeEventListener("scroll", this.scrollListener);
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
|
@ -37,10 +37,10 @@ window.addEventListener("popstate", (event, param) => {
|
||||||
|
|
||||||
if (hash !== "") {
|
if (hash !== "") {
|
||||||
const url = hash.split("#")[1];
|
const url = hash.split("#")[1];
|
||||||
const params = event.state;
|
const { params, scrollY } = event.state || {};
|
||||||
const queryString = toQueryString(params);
|
const queryString = toQueryString(params);
|
||||||
|
|
||||||
app.store.dispatch(doChangePath(`${url}?${queryString}`));
|
app.store.dispatch(doChangePath(`${url}?${queryString}`, { scrollY }));
|
||||||
} else {
|
} else {
|
||||||
app.store.dispatch(doChangePath("/discover"));
|
app.store.dispatch(doChangePath("/discover"));
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue