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
6 changed files with 55 additions and 0 deletions

View file

@ -64,6 +64,17 @@ export function doHistoryBack() {
if (!history.state) return;
history.back();
dispatch({
type: types.HISTORY_BACK,
kauffj commented 2017-07-13 21:40:57 +02:00 (Migrated from github.com)
Review

Is this supposed to be HISTORY_BACK_COMPLETED? If not, I don't think doHistoryBackCompleted ever happens. If so, I don't think we're guaranteed the render happens while navigatingBack is true.

The other relevant code to know here (if you haven't discovered it already) is the popstate event listener in ui/js/main.js. This is what history.back() is triggering.

Is this supposed to be `HISTORY_BACK_COMPLETED`? If not, I don't think `doHistoryBackCompleted` ever happens. If so, I don't think we're guaranteed the render happens while `navigatingBack` is true. The other relevant code to know here (if you haven't discovered it already) is the popstate event listener in `ui/js/main.js`. This is what history.back() is triggering.
});
};
}
export function doHistoryBackCompleted() {
return function(dispatch, getState) {
dispatch({
type: types.HISTORY_BACK_COMPLETED,
});
};
}

View file

@ -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";

View file

@ -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);

View file

@ -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);
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).
}
componentWillUnmount() {
this.props.cancelResolvingUris();
window.removeEventListener("scroll", this.scrollListener);
}
render() {

View file

@ -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);

View file

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