Fix history logic #504
5 changed files with 78 additions and 84 deletions
|
@ -32,6 +32,7 @@ Web UI version numbers should always match the corresponding version of LBRY App
|
|||
* Support claims no longer show up on Published page (#384)
|
||||
* Fixed rendering of small prices (#461)
|
||||
* Fixed incorrect URI in Downloads/Published page (#460)
|
||||
* Fixed backward / forward logic of history (#499)
|
||||
* Fixed menu bug (#503)
|
||||
|
||||
### Deprecated
|
||||
|
|
|
@ -29,8 +29,6 @@ export function doNavigate(path, params = {}, options = {}) {
|
|||
let url = path;
|
||||
if (params) url = `${url}?${toQueryString(params)}`;
|
||||
|
||||
dispatch(doChangePath(url));
|
||||
|
||||
const state = getState();
|
||||
const pageTitle = selectPageTitle(state);
|
||||
const historyState = history.state;
|
||||
|
@ -38,6 +36,8 @@ export function doNavigate(path, params = {}, options = {}) {
|
|||
dispatch(
|
||||
doHistoryPush({ params, page: historyState.page + 1 }, pageTitle, url)
|
||||
);
|
||||
|
||||
dispatch(doChangePath(url));
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -60,7 +60,7 @@ export function doChangePath(path, options = {}) {
|
|||
dispatch({
|
||||
type: types.CHANGE_PATH,
|
||||
data: {
|
||||
path,
|
||||
path: path.replace(/^#/, ""),
|
||||
},
|
||||
});
|
||||
|
||||
|
@ -83,17 +83,17 @@ export function doChangePath(path, options = {}) {
|
|||
|
||||
export function doHistoryBack() {
|
||||
return function(dispatch, getState) {
|
||||
// Get back history from stack
|
||||
// Get backward history from stack
|
||||
const back = selectHistoryBack(getState());
|
||||
|
||||
if (back) {
|
||||
// Set location
|
||||
dispatch(doChangePath(back.location));
|
||||
|
||||
dispatch({
|
||||
type: types.HISTORY_NAVIGATE,
|
||||
data: { page: back },
|
||||
type: types.HISTORY_BACKWARD,
|
||||
data: { location: back },
|
||||
});
|
||||
|
||||
// Set location
|
||||
dispatch(doChangePath(back));
|
||||
}
|
||||
};
|
||||
}
|
||||
|
@ -104,13 +104,13 @@ export function doHistoryForward() {
|
|||
const forward = selectHistoryForward(getState());
|
||||
|
||||
if (forward) {
|
||||
// Set location
|
||||
dispatch(doChangePath(forward.location));
|
||||
|
||||
dispatch({
|
||||
type: types.HISTORY_NAVIGATE,
|
||||
data: { page: forward },
|
||||
type: types.HISTORY_FORWARD,
|
||||
data: { location: forward },
|
||||
});
|
||||
|
||||
// Set location
|
||||
dispatch(doChangePath(forward));
|
||||
}
|
||||
};
|
||||
}
|
||||
|
@ -303,23 +303,16 @@ export function doDaemonReady() {
|
|||
return function(dispatch, getState) {
|
||||
const path = window.location.hash || "#/discover";
|
||||
const params = parseQueryParams(path.split("?")[1] || "");
|
||||
|
||||
// Get first page
|
||||
const page = {
|
||||
index: 0,
|
||||
location: path.replace(/^#/, ""),
|
||||
};
|
||||
const location = path.replace(/^#/, "");
|
||||
|
||||
history.replaceState(
|
||||
{ params, is_first_page: true, page: 1 },
|
||||
document.title,
|
||||
`${path}`
|
||||
);
|
||||
|
||||
dispatch(doAuthenticate());
|
||||
dispatch({
|
||||
type: types.DAEMON_READY,
|
||||
data: { page },
|
||||
});
|
||||
dispatch({ type: types.DAEMON_READY, data: { location } });
|
||||
dispatch(doFetchDaemonSettings());
|
||||
dispatch(doFileList());
|
||||
};
|
||||
|
|
|
@ -2,6 +2,8 @@ export const CHANGE_PATH = "CHANGE_PATH";
|
|||
export const OPEN_MODAL = "OPEN_MODAL";
|
||||
export const CLOSE_MODAL = "CLOSE_MODAL";
|
||||
export const HISTORY_NAVIGATE = "HISTORY_NAVIGATE";
|
||||
export const HISTORY_BACKWARD = "HISTORY_BACKWARD";
|
||||
export const HISTORY_FORWARD = "HISTORY_FORWARD";
|
||||
export const SHOW_SNACKBAR = "SHOW_SNACKBAR";
|
||||
export const REMOVE_SNACKBAR_SNACK = "REMOVE_SNACKBAR_SNACK";
|
||||
export const WINDOW_FOCUSED = "WINDOW_FOCUSED";
|
||||
|
|
|
@ -24,19 +24,17 @@ const defaultState = {
|
|||
daemonReady: false,
|
||||
hasSignature: false,
|
||||
badgeNumber: 0,
|
||||
history: { index: 0, stack: [] },
|
||||
history: {
|
||||
stack: { backward: [], forward: [] },
|
||||
currentPage: "/discover",
|
||||
},
|
||||
volume: sessionStorage.getItem("volume") || 1,
|
||||
};
|
||||
|
||||
reducers[types.DAEMON_READY] = function(state, action) {
|
||||
const { history } = state;
|
||||
const { page } = action.data;
|
||||
history.stack.push(page);
|
||||
|
||||
return Object.assign({}, state, {
|
||||
daemonReady: true,
|
||||
history,
|
||||
});
|
||||
history.currentPage = action.data.location.replace(/[?]$/, "");
|
||||
return Object.assign({}, state, { daemonReady: true, history });
|
||||
};
|
||||
|
||||
reducers[types.DAEMON_VERSION_MATCH] = function(state, action) {
|
||||
|
@ -172,51 +170,63 @@ reducers[types.WINDOW_FOCUSED] = function(state, action) {
|
|||
};
|
||||
|
||||
reducers[types.HISTORY_NAVIGATE] = (state, action) => {
|
||||
let page = false;
|
||||
let location = false;
|
||||
|
||||
// Get history from state
|
||||
const { history } = state;
|
||||
const { currentPage } = history;
|
||||
|
||||
if (action.data.page) {
|
||||
// Get page
|
||||
page = action.data.page;
|
||||
} else if (action.data.location) {
|
||||
// Get new location
|
||||
location = action.data.location;
|
||||
}
|
||||
const location = action.data.location.replace(/[?]$/, "");
|
||||
|
||||
// Add new location to stack
|
||||
if (location) {
|
||||
const lastItem = history.stack.length - 1;
|
||||
// Check for duplicated
|
||||
let is_duplicate = currentPage === location;
|
||||
|
||||
// Check for duplicated
|
||||
let is_duplicate = lastItem > -1
|
||||
? history.stack[lastItem].location === location
|
||||
: false;
|
||||
|
||||
if (!is_duplicate) {
|
||||
// Create new page
|
||||
page = {
|
||||
index: history.stack.length,
|
||||
location,
|
||||
};
|
||||
|
||||
// Update index
|
||||
history.index = history.stack.length;
|
||||
|
||||
// Add to stack
|
||||
history.stack.push(page);
|
||||
}
|
||||
} else if (page) {
|
||||
// Update index
|
||||
history.index = page.index;
|
||||
if (!is_duplicate) {
|
||||
history.stack.backward.push(currentPage);
|
||||
history.stack.forward = [];
|
||||
history.currentPage = location;
|
||||
}
|
||||
|
||||
return Object.assign({}, state, {
|
||||
history,
|
||||
isBackDisabled: history.index === 0, // First page
|
||||
isForwardDisabled: history.index === history.stack.length - 1, // Last page
|
||||
isBackDisabled: history.stack.backward.length === 0, // First page
|
||||
isForwardDisabled: history.stack.forward.length === 0, // Last page });
|
||||
});
|
||||
};
|
||||
|
||||
reducers[types.HISTORY_BACKWARD] = (state, action) => {
|
||||
// Get history from state
|
||||
const { history } = state;
|
||||
const { currentPage } = history;
|
||||
|
||||
let { location } = action.data;
|
||||
|
||||
// Update history
|
||||
history.stack.forward.push(currentPage);
|
||||
//history.stack.backward.pop();
|
||||
history.currentPage = location;
|
||||
|
||||
return Object.assign({}, state, {
|
||||
history,
|
||||
isBackDisabled: history.stack.backward.length === 0, // First page
|
||||
isForwardDisabled: history.stack.forward.length === 0, // Last page });
|
||||
});
|
||||
};
|
||||
|
||||
reducers[types.HISTORY_FORWARD] = (state, action) => {
|
||||
// Get history from state
|
||||
const { history } = state;
|
||||
const { currentPage } = history;
|
||||
|
||||
let { location } = action.data;
|
||||
|
||||
// Update history
|
||||
history.stack.backward.push(currentPage);
|
||||
// history.stack.forward.pop();
|
||||
history.currentPage = location;
|
||||
|
||||
return Object.assign({}, state, {
|
||||
history,
|
||||
isBackDisabled: history.stack.backward.length === 0, // First page
|
||||
isForwardDisabled: history.stack.forward.length === 0, // Last page });
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
@ -239,25 +239,13 @@ export const selectIsForwardDisabled = createSelector(
|
|||
);
|
||||
|
||||
export const selectHistoryBack = createSelector(_selectState, state => {
|
||||
const { history } = state;
|
||||
const index = history.index - 1;
|
||||
|
||||
// Check if page exists
|
||||
if (index > -1) {
|
||||
// Get back history
|
||||
return history.stack[index];
|
||||
}
|
||||
const { stack } = state.history;
|
||||
return stack.backward.pop();
|
||||
});
|
||||
|
||||
export const selectHistoryForward = createSelector(_selectState, state => {
|
||||
const { history } = state;
|
||||
const index = history.index + 1;
|
||||
|
||||
// Check if page exists
|
||||
if (index <= history.stack.length) {
|
||||
// Get forward history
|
||||
return history.stack[index];
|
||||
}
|
||||
const { stack } = state.history;
|
||||
return stack.forward.pop();
|
||||
});
|
||||
|
||||
export const selectVolume = createSelector(_selectState, state => state.volume);
|
||||
|
|
Loading…
Reference in a new issue