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; if (!history.state) return;
history.back(); 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 OPEN_MODAL = "OPEN_MODAL";
export const CLOSE_MODAL = "CLOSE_MODAL"; export const CLOSE_MODAL = "CLOSE_MODAL";
export const HISTORY_BACK = "HISTORY_BACK"; export const HISTORY_BACK = "HISTORY_BACK";
export const HISTORY_BACK_COMPLETED = "HISTORY_BACK_COMPLETED";
export const SHOW_SNACKBAR = "SHOW_SNACKBAR"; export const SHOW_SNACKBAR = "SHOW_SNACKBAR";
export const REMOVE_SNACKBAR_SNACK = "REMOVE_SNACKBAR_SNACK"; export const REMOVE_SNACKBAR_SNACK = "REMOVE_SNACKBAR_SNACK";
export const WINDOW_FOCUSED = "WINDOW_FOCUSED"; export const WINDOW_FOCUSED = "WINDOW_FOCUSED";

View file

@ -1,20 +1,24 @@
import React from "react"; import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { doHistoryBackCompleted } from "actions/app";
import { doFetchFeaturedUris, doCancelAllResolvingUris } from "actions/content"; import { doFetchFeaturedUris, doCancelAllResolvingUris } from "actions/content";
import { import {
selectFeaturedUris, selectFeaturedUris,
selectFetchingFeaturedUris, selectFetchingFeaturedUris,
} from "selectors/content"; } from "selectors/content";
import { selectNavigatingBack } from "selectors/app";
import DiscoverPage from "./view"; import DiscoverPage from "./view";
const select = state => ({ const select = state => ({
featuredUris: selectFeaturedUris(state), featuredUris: selectFeaturedUris(state),
fetchingFeaturedUris: selectFetchingFeaturedUris(state), fetchingFeaturedUris: selectFetchingFeaturedUris(state),
isNavigatingBack: selectNavigatingBack(state),
}); });
const perform = dispatch => ({ const perform = dispatch => ({
fetchFeaturedUris: () => dispatch(doFetchFeaturedUris()), fetchFeaturedUris: () => dispatch(doFetchFeaturedUris()),
cancelResolvingUris: () => dispatch(doCancelAllResolvingUris()), cancelResolvingUris: () => dispatch(doCancelAllResolvingUris()),
finishedNavigatingBack: () => dispatch(doHistoryBackCompleted()),
}); });
export default connect(select, perform)(DiscoverPage); export default connect(select, perform)(DiscoverPage);

View file

@ -1,9 +1,9 @@
import React from "react"; import React from "react";
import lbry from "lbry.js";
import lbryio from "lbryio.js"; import lbryio from "lbryio.js";
import lbryuri from "lbryuri"; import lbryuri from "lbryuri";
import FileCard from "component/fileCard"; import FileCard from "component/fileCard";
import { BusyMessage } from "component/common.js"; import { BusyMessage } from "component/common.js";
import { setSession, getSession } from "utils";
import ToolTip from "component/tooltip.js"; import ToolTip from "component/tooltip.js";
const FeaturedCategory = props => { const FeaturedCategory = props => {
@ -42,18 +42,22 @@ class DiscoverPage extends React.PureComponent {
} }
componentDidMount() { componentDidMount() {
const scrollY = parseInt(getSession("prefs_scrolly")); if (this.props.isNavigatingBack) {
if (!isNaN(scrollY)) { const scrollY = parseInt(lbry.getClientSetting("prefs_scrolly"));
const restoreScrollPosition = () => { if (!isNaN(scrollY)) {
window.scrollTo(0, scrollY); const restoreScrollPosition = () => {
}; window.scrollTo(0, scrollY);
setTimeout(restoreScrollPosition, 100); };
setTimeout(restoreScrollPosition, 100);
}
this.props.finishedNavigatingBack();
} }
window.addEventListener("scroll", this.scrollListener); window.addEventListener("scroll", this.scrollListener);
} }
handleScroll() { handleScroll() {
setSession("prefs_scrolly", window.scrollY); lbry.setClientSetting("prefs_scrolly", window.scrollY);
} }
componentWillUnmount() { 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) { export default function reducer(state = defaultState, action) {
const handler = reducers[action.type]; const handler = reducers[action.type];
if (handler) return handler(state, action); if (handler) return handler(state, action);

View file

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