Snackbar moved to navigator, disappears after 2 seconds

app/actions/login.js

@@ -10,13 +10,26 @@ const PHOTOKEY = '@MyStore:photo';
 const defaultAvatar = `${url}/static/members/images/default-avatar.jpg`;
 
 
+export function resetLogin() {
+  return (dispatch) => {
+    setTimeout(() => {
+      dispatch({
+        type: types.RESETLOGINSTATE,
+      });
+    }, 2000);
+  };
+}
+
 export function loginSuccess(username, token, displayName, photo) {
-  return {
-    type: types.LOGINSUCCESS,
-    username,
-    token,
-    displayName,
-    photo,
+  return (dispatch) => {
+    dispatch(resetLogin());
+    return dispatch({
+      type: types.LOGINSUCCESS,
+      username,
+      token,
+      displayName,
+      photo,
+    });
   };
 }
 
@@ -28,11 +41,7 @@ export function loginProgress() {
 
 export function loginFailure() {
   return (dispatch) => {
-    setTimeout(() => {
-      dispatch({
-        type: types.RESETLOGINSTATE,
-      });
-    }, 2000);
+    dispatch(resetLogin());
     return dispatch({
       type: types.LOGINFAILURE,
     });
@@ -40,8 +49,11 @@ export function loginFailure() {
 }
 
 export function logoutSuccess() {
-  return {
-    type: types.LOGOUT,
+  return (dispatch) => {
+    dispatch(resetLogin());
+    return dispatch({
+      type: types.LOGOUT,
+    });
   };
 }
 

app/components/Login.js

@@ -2,25 +2,11 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { View, TextInput, Text, Linking, Image, TouchableOpacity, KeyboardAvoidingView } from 'react-native';
 import { connect } from 'react-redux';
-import SnackBar from 'react-native-snackbar-component';
 import styles from './style/login';
 import { url } from '../url';
 
 import * as actions from '../actions/login';
 
-const loginResult = (status) => {
-  switch (status) {
-    case 'progress':
-      return 'Logging in';
-    case 'failure':
-      return 'Login failed';
-    case 'logout':
-      return 'Logout successful';
-    default:
-      return '';
-  }
-};
-
 const image = require('./logo.png');
 
 class Login extends Component {
@@ -33,7 +19,7 @@ class Login extends Component {
   }
 
   render() {
-    const { loginState, login } = this.props;
+    const { login } = this.props;
     return (
       <KeyboardAvoidingView
         style={styles.wrapper}
@@ -64,14 +50,12 @@ class Login extends Component {
         <Text style={styles.forgotpass} onPress={() => Linking.openURL(`${url}/password_reset/`)}>
           Wachtwoord vergeten?
         </Text>
-        <SnackBar visible={loginState !== ''} textMessage={loginResult(loginState)} actionText="let's go" />
       </KeyboardAvoidingView>
     );
   }
 }
 
 Login.propTypes = {
-  loginState: PropTypes.string.isRequired,
   login: PropTypes.func.isRequired,
 };
 

app/components/navigator.js

@@ -4,6 +4,7 @@ import { Text, View, StatusBar, TouchableOpacity, BackHandler } from 'react-nati
 import { connect } from 'react-redux';
 import Drawer from 'react-native-drawer';
 import Icon from 'react-native-vector-icons/MaterialIcons';
+import SnackBar from 'react-native-snackbar-component';
 import Login from './Login';
 import Welcome from './Welcome';
 import Sidebar from './Sidebar';
@@ -14,6 +15,19 @@ import * as actions from '../actions/navigation';
 import styles from './style/navigator';
 import { colors } from '../style';
 
+const loginResult = (status) => {
+  switch (status) {
+    case 'progress':
+      return 'Logging in';
+    case 'failure':
+      return 'Login failed';
+    case 'logout':
+      return 'Logout successful';
+    default:
+      return '';
+  }
+};
+
 const sceneToComponent = (scene) => {
   switch (scene) {
     case 'welcome':
@@ -41,8 +55,8 @@ const sceneToTitle = (scene) => {
 };
 
 const ReduxNavigator = (props) => {
-  const { currentScene, loggedIn, drawerOpen, updateDrawer,
-    isFirstScene, back, navigateToWelcome } = props;
+  const { currentScene, loggedIn, drawerOpen, updateDrawer, loginState,
+          isFirstScene, back, navigateToWelcome } = props;
   BackHandler.addEventListener('hardwareBackPress', () => {
     if (!isFirstScene) {
       back();
@@ -92,6 +106,7 @@ const ReduxNavigator = (props) => {
         <Text style={styles.title}>{sceneToTitle(currentScene)}</Text>
       </View>
       {sceneToComponent(currentScene)}
+      <SnackBar visible={loginState === 'success'} textMessage={'Login success'} />
     </Drawer>);
   }
   return (
@@ -102,6 +117,7 @@ const ReduxNavigator = (props) => {
         <StatusBar backgroundColor={colors.darkMagenta} barStyle="light-content" />
       </View>
       <Login />
+      <SnackBar visible={loginState !== ''} textMessage={loginResult(loginState)} />
     </View>);
 };
 
@@ -113,6 +129,7 @@ ReduxNavigator.propTypes = {
   updateDrawer: PropTypes.func.isRequired,
   back: PropTypes.func.isRequired,
   navigateToWelcome: PropTypes.func.isRequired,
+  loginState: PropTypes.string.isRequired,
 };
 
 const mapStateToProps = state => ({
@@ -120,6 +137,7 @@ const mapStateToProps = state => ({
   loggedIn: state.navigation.loggedIn,
   drawerOpen: state.navigation.drawerOpen,
   isFirstScene: state.navigation.previousScenes.length === 0,
+  loginState: state.session.loginState,
 });
 
 const mapDispatchToProps = dispatch => ({