fixed react-navigation/react-navigation#271

Nexters · Feb 7, 2018 · 4ddd8cc · 4ddd8cc
1 parent 12ae658
commit 4ddd8cc
Show file tree

Hide file tree

Showing 22 changed files with 318 additions and 197 deletions.
diff --git a/package.json b/package.json
@@ -44,7 +44,9 @@
     "transformIgnorePatterns": [
       "node_modules/(?!react-native|native-base|expo|@expo|react-navigation|native-base-shoutem-theme|@shoutem/theme|@shoutem/animation|@shoutem/ui|tcomb-form-native)"
     ],
-    "setupFiles": ["./jest/setup.js"]
+    "setupFiles": [
+      "./jest/setup.js"
+    ]
   },
   "dependencies": {
     "@expo/vector-icons": "^6.2.2",
@@ -72,6 +74,7 @@
     "react-native-vector-icons": "^4.5.0",
     "react-native-web": "^0.3.2",
     "react-navigation": "^1.0.0-beta.27",
+    "react-navigation-redux-helpers": "^1.0.1",
     "react-redux": "^5.0.6",
     "redux": "^3.7.2",
     "redux-logger": "^3.0.6",
@@ -80,7 +83,10 @@
   },
   "config": {
     "react-native-storybook-loader": {
-      "searchDir": ["./src", "./packages"],
+      "searchDir": [
+        "./src",
+        "./packages"
+      ],
       "pattern": "**/*.story.js",
       "outputFile": "./src/storybook/storyLoader.js"
     }

diff --git a/src/components/Button/BackButton.js b/src/components/Button/BackButton.js
@@ -7,23 +7,22 @@ import PropTypes from 'prop-types';
 class BackButton extends PureComponent {
   static propTypes = {
     iconSize: PropTypes.number,
-    iconColor: PropTypes.string
+    iconColor: PropTypes.string,
+    onPress: PropTypes.func
   };
 
   static defaultProps = {
     iconSize: 32,
-    iconColor: ''
+    iconColor: '',
+    onPress: () => {}
   };
 
   render() {
-    const { iconSize, iconColor } = this.props;
+    const { iconSize, iconColor, onPress } = this.props;
 
     return (
-      <Button { ...this.props } transparent>
-        <FeatherIcon
-          name="arrow-left"
-          size={ iconSize }
-          color={ iconColor || EStyleSheet.value('$firstColor') } />
+      <Button onPress={ onPress } transparent>
+        <FeatherIcon name="arrow-left" size={ iconSize } color={ iconColor || EStyleSheet.value('$firstColor') } />
       </Button>
     );
   }

diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -1,20 +1,10 @@
 import React, { Component } from 'react';
-import {
-  Container,
-  Header as NativeHeader,
-  Left,
-  Body,
-  Right,
-  Button,
-  Icon,
-  Title,
-  Text,
-  Content
-} from 'native-base';
+import { Container, Header as NativeHeader, Left, Body, Right, Button, Icon, Title, Text, Content } from 'native-base';
 import { Col, Row, Grid } from 'react-native-easy-grid';
+import EStyleSheet from 'react-native-extended-stylesheet';
 import EntyoIcon from 'react-native-vector-icons/Entypo';
+import FeatherIcon from 'react-native-vector-icons/Feather';
 import PropTypes from 'prop-types';
-import styles from './styles';
 
 class Header extends Component {
   static propsTypes = {
@@ -25,29 +15,45 @@ class Header extends Component {
     title: 'Header'
   };
   render() {
-    const { title } = this.props;
+    const { title, onMyPagePress } = this.props;
 
     return (
       <NativeHeader
         style={ styles.headerContainer }
-        androidStatusBarColor={ styles.headerContainer._backgroundColor }
+        androidStatusBarColor={ EStyleSheet.value('$backgroundColor') }
         iosBarStyle="light-content">
         <Left>
-          <Button transparent>
-            <Icon name="menu" />
+          <Button onPress={ onMyPagePress } transparent>
+            <FeatherIcon name="user" size={ 24 } />
           </Button>
         </Left>
         <Body>
-          <Title>{title}</Title>
+          <Title style={ styles.headerTitle }>{title}</Title>
         </Body>
         <Right>
           <Button transparent>
-            <EntyoIcon size={ 20 } name="direction" />
+            <EntyoIcon name="direction" color={ EStyleSheet.value('$secondColor') } size={ 24 } />
           </Button>
         </Right>
       </NativeHeader>
     );
   }
 }
 
+const styles = EStyleSheet.create({
+  headerContainer: {
+    backgroundColor: '$backgroundColor',
+    paddingTop: 38,
+    paddingLeft: '$screenPadding',
+    paddingRight: 20,
+    paddingBottom: 17,
+    borderColor: '#181818',
+    borderBottomWidth: 0.3
+  },
+  headerTitle: {
+    fontSize: 18,
+    color: '$thirdColor'
+  }
+});
+
 export default Header;
diff --git a/src/components/Header/SubHeader.js b/src/components/Header/SubHeader.js
@@ -1,19 +1,8 @@
 import React, { Component } from 'react';
-import {
-  Container,
-  Header as NativeHeader,
-  Left,
-  Body,
-  Right,
-  Button,
-  Title,
-  Text,
-  Content
-} from 'native-base';
+import { Container, Header as NativeHeader, Left, Body, Right, Button, Title, Text, Content } from 'native-base';
 import { Col, Row, Grid } from 'react-native-easy-grid';
 import EStyleSheet from 'react-native-extended-stylesheet';
 import PropTypes from 'prop-types';
-import styles from './styles';
 import { BackButton } from '../Button';
 
 class SubHeader extends Component {
@@ -25,15 +14,15 @@ class SubHeader extends Component {
     title: ''
   };
   render() {
-    const { title } = this.props;
+    const { title, onBackPress } = this.props;
 
     return (
       <NativeHeader
         style={ styles.headerContainer }
-        androidStatusBarColor={ styles.headerContainer._backgroundColor }
+        androidStatusBarColor={ EStyleSheet.value('$backgroundColor') }
         iosBarStyle="light-content">
         <Left>
-          <BackButton />
+          <BackButton onPress={ onBackPress } />
         </Left>
         <Body>
           <Title>{title}</Title>
@@ -46,4 +35,10 @@ class SubHeader extends Component {
   }
 }
 
+const styles = EStyleSheet.create({
+  subHeaderRightText: {
+    color: '$thirdColor'
+  }
+});
+
 export default SubHeader;
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -1,6 +1,5 @@
 import Header from './Header';
 import SubHeader from './SubHeader';
 import TitleHeader from './TitleHeader';
-import styles from './styles';
 
-export { Header, SubHeader, TitleHeader, styles };
+export { Header, SubHeader, TitleHeader };
diff --git a/src/components/Header/styles.js b/src/components/Header/styles.js
diff --git a/src/configs/store.js b/src/configs/store.js
@@ -6,6 +6,7 @@ import { RESET_STATE } from '@redux-offline/redux-offline/lib/constants';
 import createSagaMiddleware from 'redux-saga';
 import { createLogger } from 'redux-logger';
 import { composeWithDevTools } from 'redux-devtools-extension';
+import { createReduxBoundAddListener, createReactNavigationReduxMiddleware } from 'react-navigation-redux-helpers';
 import { reducers } from '../ducks/index';
 import rootSaga from '../sagas';
 
@@ -14,14 +15,18 @@ const customConfig = {
   effect: (effect, _action) => (effect.url ? effect.url() : Promise.reject())
 };
 
-export default function configureStore(initialState = {}) {
-  const createOfflineStore = offline(customConfig)(createStore);
+const initialState = {};
+const createOfflineStore = offline(customConfig)(createStore);
 
-  const sagaMiddleware = createSagaMiddleware();
-  const middleware = [sagaMiddleware, createOfflineMiddleware(customConfig)]; // createLogger(),
+const sagaMiddleware = createSagaMiddleware();
+const middleware = [
+  createReactNavigationReduxMiddleware('root', state => state.nav),
+  sagaMiddleware,
+  createOfflineMiddleware(customConfig)
+]; // createLogger(),
+export const addNavigationListener = createReduxBoundAddListener('root');
 
-  const applyMiddlewares = composeWithDevTools(applyMiddleware(...middleware));
-  const store = createOfflineStore(reducers, initialState, applyMiddlewares);
-  sagaMiddleware.run(rootSaga);
-  return store;
-}
+const applyMiddlewares = composeWithDevTools(applyMiddleware(...middleware));
+const store = createOfflineStore(reducers, initialState, applyMiddlewares);
+sagaMiddleware.run(rootSaga);
+export default store;
diff --git a/src/ducks/auth.js b/src/ducks/auth.js
@@ -13,39 +13,27 @@ export const types = {
   TOGGLE_USER_TYPE: 'TOGGLE_USER_TYPE'
 };
 
-const loginActions = {
-  fetch: action(types.LOGIN[FETCH]),
-  success: action(types.LOGIN[SUCCESS]),
-  failure: action(types.LOGIN[FAILURE])
-};
-
 export const fetchLogin = googleInfo => ({
-  ...loginActions.fetch,
+  ...action(types.LOGIN[FETCH]),
   ...createMetaOffline({
     effect: { url: _.partial(agent.Login.login, googleInfo) },
-    commit: loginActions.success,
-    rollback: loginActions.failure
+    commit: action(types.LOGIN[SUCCESS]),
+    rollback: action(types.LOGIN[FAILURE])
   })
 });
 
-const googleLoginActions = {
-  fetch: action(types.GOOGLE_LOGIN[FETCH], { loading: true }),
-  success: action(types.GOOGLE_LOGIN[SUCCESS], {
-    loading: false,
-    loaded: true
-  }),
-  failure: action(types.GOOGLE_LOGIN[FAILURE], {
-    loading: false,
-    loaded: false
-  })
-};
-
 export const fetchGoogleLogin = config => ({
-  ...googleLoginActions.fetch,
+  ...action(types.GOOGLE_LOGIN[FETCH], { loading: true }),
   ...createMetaOffline({
     effect: { url: _.partial(Expo.Google.logInAsync, config) },
-    commit: googleLoginActions.success,
-    rollback: googleLoginActions.failure
+    commit: action(types.GOOGLE_LOGIN[SUCCESS], {
+      loading: false,
+      loaded: true
+    }),
+    rollback: action(types.GOOGLE_LOGIN[FAILURE], {
+      loading: false,
+      loaded: false
+    })
   })
 });
 

diff --git a/src/ducks/host.js b/src/ducks/host.js
@@ -17,18 +17,12 @@ export const types = {
   HOST: createFetchTypes('HOST')
 };
 
-const actions = {
-  fetch: action(types.HOST[FETCH]),
-  success: action(types.HOST[SUCCESS]),
-  failure: action(types.HOST[FAILURE])
-};
-
 export const fetchHostByType = type => ({
-  ...actions.fetch,
+  ...action(types.HOST[FETCH]),
   ...createMetaOffline({
     effect: { url: _.partial(agent.Host.findByType, type) },
-    commit: actions.success,
-    rollback: actions.failure
+    commit: action(types.HOST[SUCCESS]),
+    rollback: action(types.HOST[FAILURE])
   })
 });
 
@@ -44,7 +38,6 @@ const hostReducer = {
   [types.HOST[FAILURE]]: state =>
     // TODO faker data.
     initialState
-
 };
 
 export const reducers = createReducer(initialState, {

diff --git a/src/ducks/index.js b/src/ducks/index.js
@@ -2,8 +2,10 @@ import { combineReducers } from 'redux';
 import { reducers as auth } from './auth';
 import { reducers as load } from './load';
 import { reducers as host } from './host';
+import { reducers as nav } from './nav';
 
 export const reducers = combineReducers({
+  nav,
   auth,
   load,
   host

diff --git a/src/ducks/nav.js b/src/ducks/nav.js
@@ -1,16 +1,20 @@
-import { LOADED, LOADING } from './constants';
+import { StackNavigator, addNavigationHelpers, NavigationActions } from 'react-navigation';
+import { Navigator } from '../navigators/AppNavigator';
 import { createReducer } from './reducerHelper';
 
-const initialState = {
-  loading: false
+const getCurrentRouteName = state => {
+  const route = state.routes[state.index];
+  return typeof route.index === 'undefined' ? route.routeName : getCurrentRouteName(route);
 };
-
-const loadReducer = {
-  [LOADING]: (state, { loading }) => ({ ...state, loading })
+export const reducers = (state, action) => {
+  // Simply return the original `state` if `nextState` is null or undefined.
+  const nextState = Navigator.router.getStateForAction(action, state);
+  // console.log(state, action);
+  // prevents navigating twice to the same route
+  if (state && nextState) {
+    const stateRouteName = getCurrentRouteName(state);
+    const nextStateRouteName = getCurrentRouteName(nextState);
+    return stateRouteName === nextStateRouteName ? state : nextState;
+  }
+  return nextState || state;
 };
-
-export const reducers = createReducer(initialState, {
-  ...loadReducer
-});
-
-export const getLoading = state => state.load.loading;
diff --git a/src/index.js b/src/index.js
@@ -7,6 +7,7 @@ import configureStore from './configs/store';
 import AppNavigator from './navigators/AppNavigator';
 import StorybookUI from './storybook';
 
+
 EStyleSheet.build({
   $firstColor: '#45464a',
   $secondColor: '#9b9b9b',
@@ -41,10 +42,9 @@ class App extends Component {
     if (!this.state.isReady) {
       return <Expo.AppLoading />;
     }
-    const NavComponent = AppNavigator({ initialRouteName: 'Detail' });
     return (
-      <Provider store={ configureStore() }>
-        <NavComponent />
+      <Provider store={ configureStore }>
+        <AppNavigator />
       </Provider>
     );
   }