rewrite back / forward implementation

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

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

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

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