Modified to use redux store and return to previous scroll position only upon back navigation

This commit is contained in:
Akinwale Ariwodola 2017-07-13 16:32:32 +01:00
parent 89b58aa588
commit 187ac405fe
6 changed files with 45 additions and 8 deletions

View file

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

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,9 +1,9 @@
import React from "react";
import lbry from "lbry.js";
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 => {
@ -42,18 +42,22 @@ class DiscoverPage extends React.PureComponent {
}
componentDidMount() {
const scrollY = parseInt(getSession("prefs_scrolly"));
if (!isNaN(scrollY)) {
const restoreScrollPosition = () => {
window.scrollTo(0, scrollY);
};
setTimeout(restoreScrollPosition, 100);
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() {
setSession("prefs_scrolly", window.scrollY);
lbry.setClientSetting("prefs_scrolly", window.scrollY);
}
componentWillUnmount() {

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