Fix history logic #504

Closed
btzr-io wants to merge 5 commits from patch-2 into master
5 changed files with 78 additions and 84 deletions

View file

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

View file

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

View file

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

View file

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

View file

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