Modified to use redux store and return to previous scroll position only upon back navigation
This commit is contained in:
parent
89b58aa588
commit
187ac405fe
6 changed files with 45 additions and 8 deletions
|
@ -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,
|
||||||
|
});
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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";
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -191,3 +191,8 @@ export const selectBadgeNumber = createSelector(
|
||||||
_selectState,
|
_selectState,
|
||||||
state => state.badgeNumber
|
state => state.badgeNumber
|
||||||
);
|
);
|
||||||
|
|
||||||
|
export const selectNavigatingBack = createSelector(
|
||||||
|
_selectState,
|
||||||
|
state => state.navigatingBack
|
||||||
|
);
|
||||||
|
|
Loading…
Add table
Reference in a new issue