From 4e3f86521e3b7eb2da1bd586a2cd948b11d6863b Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sun, 27 Aug 2017 14:52:34 -0600 Subject: [PATCH] rewrite back / forward implementation --- ui/js/actions/app.js | 39 ++++++-------- ui/js/constants/action_types.js | 2 + ui/js/reducers/app.js | 90 ++++++++++++++++++++------------- ui/js/selectors/app.js | 20 ++------ 4 files changed, 76 insertions(+), 75 deletions(-) diff --git a/ui/js/actions/app.js b/ui/js/actions/app.js index 3a800e2ce..befa3fba3 100644 --- a/ui/js/actions/app.js +++ b/ui/js/actions/app.js @@ -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)); }; } @@ -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()); }; diff --git a/ui/js/constants/action_types.js b/ui/js/constants/action_types.js index e44102c54..c32a3d2e9 100644 --- a/ui/js/constants/action_types.js +++ b/ui/js/constants/action_types.js @@ -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"; diff --git a/ui/js/reducers/app.js b/ui/js/reducers/app.js index 1da95020a..689891f6f 100644 --- a/ui/js/reducers/app.js +++ b/ui/js/reducers/app.js @@ -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) { @@ -174,41 +172,61 @@ reducers[types.WINDOW_FOCUSED] = function(state, action) { reducers[types.HISTORY_NAVIGATE] = (state, action) => { // Get history from state const { history } = state; + const { currentPage } = history; - let { location, page } = action.data; + const location = action.data.location.replace(/[?]$/, ""); - // Add new location to stack - if (location) { - const lastIndex = history.stack.length - 1; - const lastPage = history.stack[lastIndex].location; + // Check for duplicated + let is_duplicate = currentPage === location; - // Check for duplicated - let is_duplicate = lastIndex > -1 - ? lastPage.replace(/[?]$/, "") === location.replace(/[?]$/, "") - : 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 }); }); }; diff --git a/ui/js/selectors/app.js b/ui/js/selectors/app.js index 1ad6a81b9..fa6a84967 100644 --- a/ui/js/selectors/app.js +++ b/ui/js/selectors/app.js @@ -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);