Implement correct replace, popTo actions, restore reducer

Author: Pavel Aksonov

.eslintrc.js

@@ -1,78 +1,59 @@
 module.exports = {
   extends: 'airbnb',
-  plugins: [
-    'react',
-    'jest'
-  ],
+  plugins: ['react', 'jest'],
   env: {
-    "jest/globals": true
+    'jest/globals': true,
   },
   parser: 'babel-eslint',
   rules: {
-    "no-new-func": "warn",
-    "jest/no-disabled-tests": "warn",
-    "jest/no-focused-tests": "error",
-    "jest/no-identical-title": "error",
-    "jest/valid-expect": "error",
-
-    "react/forbid-prop-types": "warn",
-    "react/prop-types": "off",
-    "react/require-default-props": "off",
-    "react/no-unused-prop-types": "off",
+    'no-new-func': 'warn',
+    'jest/no-disabled-tests': 'warn',
+    'jest/no-focused-tests': 'error',
+    'jest/no-identical-title': 'error',
+    'jest/valid-expect': 'error',
 
+    'react/forbid-prop-types': 'warn',
+    'react/prop-types': 'off',
+    'react/require-default-props': 'off',
+    'react/no-unused-prop-types': 'off',
+    'no-param-reassign': 0,
     'no-console': 0,
     'new-cap': 0,
     'no-underscore-dangle': 0,
     'no-use-before-define': 0,
-    'max-len': ["error", 180],
+    'max-len': ['error', 180],
     'import/no-unresolved': [
       2,
       {
-        ignore: [
-          '^react$',
-          '^react-native$',
-          '^react-native/',
-        ],
+        ignore: ['^react$', '^react-native$', '^react-native/'],
       },
     ],
-    "import/no-cycle": "warn",
-    "import/no-self-import": "warn",
+    'import/no-cycle': 'warn',
+    'import/no-self-import': 'warn',
     'react/jsx-filename-extension': [
       1,
       {
-        extensions: [
-          '.js',
-          '.jsx',
-        ],
+        extensions: ['.js', '.jsx'],
       },
     ],
     'import/no-extraneous-dependencies': [
       'error',
       {
-        'devDependencies': true,
-      }
+        devDependencies: true,
+      },
     ],
     'no-bitwise': [
       'error',
       {
-        'allow': ['^'],
+        allow: ['^'],
       },
     ],
-    'no-restricted-syntax': [
-      'error',
-      'ForInStatement',
-      'LabeledStatement',
-      'WithStatement',
-    ],
+    'no-restricted-syntax': ['error', 'ForInStatement', 'LabeledStatement', 'WithStatement'],
   },
   settings: {
     'import/resolver': {
       node: {
-        extensions: [
-          '.js',
-          '.android.js',
-          '.ios.js',
-        ],
+        extensions: ['.js', '.android.js', '.ios.js'],
       },
     },
     node: true,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-router-flux",
-  "version": "4.0.0-beta.33",
+  "version": "4.0.0-beta.40",
   "description": "React Native Router using Flux architecture",
   "repository": {
     "type": "git",

src/Reducer.js

@@ -0,0 +1,44 @@
+import isEqual from 'lodash.isequal';
+import { NavigationActions, StackActions } from 'react-navigation';
+import navigationStore from './navigationStore';
+import * as ActionConst from './ActionConst';
+import { getActiveState, popPrevious } from './State';
+
+export function reducer(state, action) {
+  const { type, routeName } = action;
+  if (type === ActionConst.POP_TO) {
+    let nextScene = '';
+    let newState = state;
+    let currentState = state;
+    while (newState && nextScene !== routeName) {
+      newState = navigationStore.getStateForAction(StackActions.pop(), currentState);
+      if (newState) {
+        nextScene = getActiveState(newState).routeName;
+        if (isEqual(currentState, newState)) {
+          console.warn(`popTo called with an unknown routeName: ${routeName}`);
+          break;
+        }
+        if (nextScene !== routeName) {
+          currentState = newState;
+        }
+      }
+    }
+    return nextScene === routeName ? newState : state;
+  }
+  if (type === ActionConst.REPLACE) {
+    const newState = navigationStore.getStateForAction(
+      NavigationActions.navigate({
+        routeName,
+        params: action.params,
+      }),
+      state,
+    );
+    const res = popPrevious(newState, routeName);
+    return res;
+  }
+  return navigationStore.getStateForAction(action, state) || state;
+}
+
+export default function createReducer() {
+  return reducer;
+}

src/Router.js

@@ -92,7 +92,7 @@ class App extends React.Component {
 }
 
 const Router = ({
-  sceneStyle, onStateChange, scenes, uriPrefix, navigator, getSceneStyle, children, onDeepLink, wrapBy, ...props
+  createReducer, sceneStyle, onStateChange, scenes, uriPrefix, navigator, getSceneStyle, children, onDeepLink, wrapBy, ...props
 }) => {
   const data = { ...props };
   if (getSceneStyle) {
@@ -102,6 +102,8 @@ const Router = ({
     data.cardStyle = sceneStyle;
   }
   const AppNavigator = scenes || navigator || navigationStore.create(children, data, wrapBy);
+  navigationStore.reducer = createReducer && createReducer(props);
+  navigationStore.setCustomReducer(AppNavigator);
   if (onStateChange) {
     navigationStore.onStateChange = onStateChange;
   }
@@ -114,6 +116,7 @@ Router.propTypes = {
   wrapBy: PropTypes.func,
   getSceneStyle: PropTypes.func,
   sceneStyle: ViewPropTypes.style,
+  createReducer: PropTypes.func,
   children: PropTypes.element,
   uriPrefix: PropTypes.string,
   onDeepLink: PropTypes.func,

src/State.js

@@ -30,6 +30,21 @@ export function getActiveState(param, parent) {
   return getActiveState(state.routes[state.index], { ...state, parent });
 }
 
+export function getParent(state, routeName, parent) {
+  if (state.routeName === routeName) {
+    return parent;
+  }
+  if (!state.routes) {
+    return null;
+  }
+  for (let i = 0; i < state.routes.length; i += 1) {
+    const res = getParent(state.routes[i], routeName, state);
+    if (res) {
+      return res;
+    }
+  }
+  return null;
+}
 export function inject(state, key, index, routes) {
   if (!state.routes) {
     return state;
@@ -43,13 +58,11 @@ export function inject(state, key, index, routes) {
   return { ...state, routes: state.routes.map(x => inject(x, key, index, routes)) };
 }
 
-export function popPrevious(state) {
-  const activeState = getActiveState(state);
-  if (activeState.parent && activeState.parent.index) {
-    const {
-      parent,
-      parent: { key, index },
-    } = activeState;
+export function popPrevious(state, routeName) {
+  const parent = getParent(state, routeName);
+  console.log('FOUND PARENT:', JSON.stringify(parent));
+  const { key, index } = parent;
+  if (index) {
     const routes = [...parent.routes.slice(0, index - 1), ...parent.routes.slice(index)];
     const newState = inject(state, key, index - 1, routes);
     return newState;

src/index.js

@@ -1,5 +1,6 @@
 import * as ActionConst from './ActionConst';
 import Router from './Router';
+import Reducer from './Reducer';
 import Scene from './Scene';
 import Actions from './navigationStore';
 import Modal from './Modal';
@@ -11,5 +12,5 @@ import Overlay from './Overlay';
 import pathParser from './pathParser';
 
 export {
-  ActionConst, Router, Scene, Actions, Modal, Lightbox, Stack, Drawer, Tabs, Overlay, pathParser,
+  Reducer, ActionConst, Router, Scene, Actions, Modal, Lightbox, Stack, Drawer, Tabs, Overlay, pathParser,
 };

src/navigationStore.js

@@ -10,6 +10,7 @@ import {
   DrawerActions,
 } from 'react-navigation';
 import PropTypes from 'prop-types';
+import { reducer } from './Reducer';
 import * as ActionConst from './ActionConst';
 import { OnEnter, OnExit, assert } from './Util';
 import { LeftButton, RightButton, BackButton } from './NavBar';
@@ -471,6 +472,10 @@ const defaultSuccess = () => {};
 const defaultFailure = () => {};
 
 class NavigationStore {
+  getStateForAction = null;
+
+  reducer = null;
+
   _navigator = null;
 
   refs = {};
@@ -485,6 +490,11 @@ class NavigationStore {
 
   onStateChange;
 
+  setCustomReducer = (Navigator) => {
+    this.getStateForAction = Navigator.router.getStateForAction;
+    Navigator.router.getStateForAction = (cmd, state) => (this.reducer ? this.reducer(state, cmd) : reducer(state, cmd));
+  };
+
   onNavigationStateChange = async (prevState, currentState, action) => {
     this.state = currentState;
     this.prevState = prevState;
@@ -827,12 +837,12 @@ class NavigationStore {
 
   push = (routeName, data) => {
     const params = filterParam(data);
-    this.dispatch(StackActions.push({ routeName, params }));
+    this.dispatch({ type: NavigationActions.NAVIGATE, routeName, params });
   };
 
   jump = (routeName, data) => {
     const params = filterParam(data);
-    this.dispatch(NavigationActions.navigate({ routeName, params }));
+    this.dispatch({ type: NavigationActions.NAVIGATE, routeName, params });
   };
 
   drawerOpen = () => {
@@ -878,9 +888,7 @@ class NavigationStore {
 
   replace = (routeName, data) => {
     const params = filterParam(data);
-    this.dispatch(
-      StackActions.replace({ routeName, params }),
-    );
+    this.dispatch({ type: ActionConst.REPLACE, routeName, params });
   };
 
   reset = (routeName, data) => {