Connected pincode with redux application state

src/config/routes.js

@@ -13,7 +13,7 @@ import { SideMenu } from '../components';
 const mainNavigation = DrawerNavigator(
   {
     [ROUTES.SCREENS.HOME]: {
-      screen: RootComponent()(BaseNavigator),
+      screen: BaseNavigator,
       navigationOptions: {
         header: () => null,
       },
@@ -26,8 +26,8 @@ const mainNavigation = DrawerNavigator(
 
 export default SwitchNavigator({
   [ROUTES.DRAWER.MAIN]: mainNavigation,
-  [ROUTES.SCREENS.EDITOR]: { screen: RootComponent()(Editor) },
   [ROUTES.SCREENS.LOGIN]: { screen: RootComponent()(Login) },
+  [ROUTES.SCREENS.EDITOR]: { screen: RootComponent()(Editor) },
   [ROUTES.SCREENS.PINCODE]: { screen: RootComponent()(PinCode) },
   [ROUTES.SCREENS.PROFILE]: { screen: RootComponent()(Profile) },
   [ROUTES.SCREENS.SPLASH]: { screen: RootComponent()(Splash) },

src/navigation/baseNavigator.js

@@ -1,20 +1,22 @@
 import React from 'react';
 import { createBottomTabNavigator } from 'react-navigation';
 import Icon from 'react-native-vector-icons/FontAwesome';
-import { Home, Notification, Profile } from '../screens';
+import {
+  Home, Notification, Profile, RootComponent,
+} from '../screens';
 
 import { PostButton } from '../components/postButton';
 
 const BaseNavigator = createBottomTabNavigator(
   {
     Home: {
-      screen: Home,
+      screen: RootComponent()(Home),
       navigationOptions: () => ({
         tabBarIcon: ({ tintColor }) => <Icon name="list" color={tintColor} size={18} />,
       }),
     },
     Notification: {
-      screen: Notification,
+      screen: RootComponent()(Notification),
       navigationOptions: () => ({
         tabBarIcon: ({ tintColor }) => <Icon name="bell-o" color={tintColor} size={18} />,
       }),
@@ -26,13 +28,13 @@ const BaseNavigator = createBottomTabNavigator(
       }),
     },
     AuthorProfile: {
-      screen: Profile,
+      screen: RootComponent()(Profile),
       navigationOptions: () => ({
         tabBarIcon: ({ tintColor }) => <Icon name="envelope-o" color={tintColor} size={18} />,
       }),
     },
     Profile: {
-      screen: Profile,
+      screen: RootComponent()(Profile),
       navigationOptions: () => ({
         tabBarIcon: ({ tintColor }) => <Icon name="credit-card" color={tintColor} size={18} />,
       }),

src/redux/actions/applicationActions.js

@@ -1,4 +1,6 @@
-import { LOGIN, LOGOUT } from '../constants/constants';
+import {
+  LOGIN, LOGOUT, OPEN_PIN_CODE_MODAL, CLOSE_PIN_CODE_MODAL,
+} from '../constants/constants';
 
 export const login = () => ({
   type: LOGIN,
@@ -7,3 +9,11 @@ export const login = () => ({
 export const logout = () => ({
   type: LOGOUT,
 });
+
+export const openPinCodeModal = () => ({
+  type: OPEN_PIN_CODE_MODAL,
+});
+
+export const closePinCodeModal = () => ({
+  type: CLOSE_PIN_CODE_MODAL,
+});

src/redux/constants/constants.js

@@ -15,3 +15,5 @@ export const FETCHING_ACCOUNT = 'FETCHING_ACCOUNT';
 export const FETCH_ACCOUNT_FAIL = 'FETCH_ACCOUNT_FAIL';
 
 export const IS_LOGGED_IN = 'IS_LOGGED_IN';
+export const OPEN_PIN_CODE_MODAL = 'OPEN_PIN_CODE_MODAL';
+export const CLOSE_PIN_CODE_MODAL = 'CLOSE_PIN_CODE_MODAL';

src/redux/reducers/applicationReducer.js

@@ -1,8 +1,11 @@
-import { LOGIN, LOGOUT } from '../constants/constants';
+import {
+  LOGIN, LOGOUT, OPEN_PIN_CODE_MODAL, CLOSE_PIN_CODE_MODAL,
+} from '../constants/constants';
 
 const initialState = {
   isLoggedIn: false, // Has any logged in user.
   loading: false, // It is lock to all screen and shows loading animation.
+  isPinCodeReqiure: false,
 };
 
 export default function (state = initialState, action) {
@@ -17,7 +20,16 @@ export default function (state = initialState, action) {
         ...state,
         isLoggedIn: false,
       };
-
+    case OPEN_PIN_CODE_MODAL:
+      return {
+        ...state,
+        isPinCodeReqiure: true,
+      };
+    case CLOSE_PIN_CODE_MODAL:
+      return {
+        ...state,
+        isPinCodeReqiure: false,
+      };
     default:
       return state;
   }

src/screens/login/screen/loginScreen.js

@@ -4,11 +4,12 @@ import {
 } from 'react-native';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import ScrollableTabView from '@esteemapp/react-native-scrollable-tab-view';
+import { connect } from 'react-redux';
 
 // Actions
 import { addPassiveAccount, failedAccount } from '../../../redux/actions/accountAction';
 import {
-  login as loginAction,
+  login as loginAction, openPinCodeModal,
 } from '../../../redux/actions/applicationActions';
 
 // Internal Components
@@ -52,7 +53,8 @@ class LoginScreen extends Component {
         if (result) {
           dispatch(addPassiveAccount(result));
           dispatch(loginAction());
-          navigation.navigate(ROUTES.SCREENS.PINCODE);
+          navigation.navigate(ROUTES.DRAWER.MAIN);
+          dispatch(openPinCodeModal());
         }
       })
       .catch((err) => {
@@ -180,4 +182,4 @@ class LoginScreen extends Component {
   }
 }
 
-export default LoginScreen;
+export default connect()(LoginScreen);

src/screens/pinCode/container/pinCodeContainer.js

@@ -4,6 +4,9 @@ import { connect } from 'react-redux';
 
 import { setUserDataWithPinCode, verifyPinCode } from '../../../providers/steem/auth';
 
+// Actions
+import { closePinCodeModal } from '../../../redux/actions/applicationActions';
+
 // Constants
 import { default as INITIAL } from '../../../constants/initial';
 import { default as ROUTES } from '../../../constants/routeNames';
@@ -51,6 +54,7 @@ class PinCodeContainer extends Component {
     const {
       currentAccount: { password, name },
       navigation,
+      dispatch,
     } = this.props;
     const { isExistUser, pinCode } = this.state;
     if (isExistUser) {
@@ -64,7 +68,8 @@ class PinCodeContainer extends Component {
       verifyPinCode(pinData)
         .then(() => {
           // TODO: make global route
-          navigation.navigate(ROUTES.DRAWER.MAIN);
+          // navigation.navigate(ROUTES.DRAWER.MAIN);
+          dispatch(closePinCodeModal());
         })
         .catch((err) => {
           alert(err);
@@ -85,7 +90,8 @@ class PinCodeContainer extends Component {
       };
       setUserDataWithPinCode(pinData).then(() => {
         AsyncStorage.setItem(INITIAL.IS_EXIST_USER, JSON.stringify(true), () => {
-          navigation.navigate(ROUTES.DRAWER.MAIN);
+          // navigation.navigate(ROUTES.DRAWER.MAIN);
+          dispatch(closePinCodeModal());
           resolve();
         });
       });

src/screens/root/container/rootContainer.js

@@ -17,11 +17,6 @@ const RootContainer = () => (WrappedComponent) => {
     render() {
       const { isPinCodeReqiure } = this.props;
 
-      const cloneProps = Object.assign({}, this.props);
-      delete cloneProps.dispatch;
-      delete cloneProps.isPinCodeReqiure;
-      delete cloneProps.navigation;
-
       return (
         <Fragment>
           <Modal
@@ -32,13 +27,13 @@ const RootContainer = () => (WrappedComponent) => {
           >
             <PinCode />
           </Modal>
-          <WrappedComponent {...cloneProps} />
+          <WrappedComponent {...this.props} />
         </Fragment>
       );
     }
   }
   const mapStateToProps = state => ({
-    isPinCodeReqiure: state.ui.isPinCodeReqiure,
+    isPinCodeReqiure: state.application.isPinCodeReqiure,
   });
 
   return connect(mapStateToProps)(RootComponent);