Issue #312 home page scroll position on back navigation #331

Merged
akinwale merged 3 commits from issue312 into master 2017-07-18 20:32:54 +02:00
Showing only changes of commit 52b404b552 - Show all commits

View file

@ -3,6 +3,7 @@ import lbryio from "lbryio.js";
import lbryuri from "lbryuri";
import FileCard from "component/fileCard";
import { BusyMessage } from "component/common.js";
import { setSession, getSession } from "utils";
import ToolTip from "component/tooltip.js";
const FeaturedCategory = props => {
@ -37,10 +38,27 @@ const FeaturedCategory = props => {
class DiscoverPage extends React.PureComponent {
componentWillMount() {
this.props.fetchFeaturedUris();
this.scrollListener = this.handleScroll.bind(this);
}
componentDidMount() {
const scrollY = parseInt(getSession("prefs_scrolly"));
if (!isNaN(scrollY)) {
const restoreScrollPosition = () => {
window.scrollTo(0, scrollY);
};
setTimeout(restoreScrollPosition, 100);
}
window.addEventListener("scroll", this.scrollListener);
}
handleScroll() {
setSession("prefs_scrolly", window.scrollY);
}
componentWillUnmount() {
this.props.cancelResolvingUris();
akinwale commented 2017-07-13 23:56:01 +02:00 (Migrated from github.com)
Review

@kauffj This delegates to doHistoryBackCompleted(). I called it at this point because the popstate event was not being fired after clicking the back button. Also, HISTORY_BACK occurs before CHANGE_PATH, and this happens before componentDidMount. I needed a way to reliably detect that the user navigated using the back button and being able to check the flag when the component mounts was how I could do it (although I figure there might be a better way but I'm not seeing it at this point).

@kauffj This delegates to `doHistoryBackCompleted()`. I called it at this point because the `popstate` event was not being fired after clicking the back button. Also, `HISTORY_BACK` occurs before `CHANGE_PATH`, and this happens before `componentDidMount`. I needed a way to reliably detect that the user navigated using the back button and being able to check the flag when the component mounts was how I could do it (although I figure there might be a better way but I'm not seeing it at this point).
window.removeEventListener("scroll", this.scrollListener);
}
render() {
@ -51,7 +69,7 @@ class DiscoverPage extends React.PureComponent {
(featuredUris !== undefined && Object.keys(featuredUris).length === 0));
return (
<main>
<main ref="main">
{fetchingFeaturedUris &&
<BusyMessage message={__("Fetching content")} />}
{typeof featuredUris === "object" &&