Navigation only after login screen

app/actions/actionTypes.js

@@ -3,3 +3,4 @@ export const BACK = 'BACK';
 export const LOGINPROGRESS = 'LOGINPROGRESS';
 export const LOGINSUCCESS = 'LOGINSUCCESS';
 export const LOGINFAILURE = 'LOGINFAILURE';
+export const OPENDRAWER = 'OPENDRAWER';

app/actions/navigation.js

@@ -12,3 +12,10 @@ export function back() {
     type: types.BACK,
   };
 }
+
+export function updateDrawer(drawerState) {
+  return {
+    type: types.OPENDRAWER,
+    drawerOpen: drawerState,
+  };
+}

app/components/Agenda.js

+import React from 'react';
+import { Text, View } from 'react-native';
+
+const Agenda = () =>
+  <View>
+    <Text>
+      Algemene Ledenvergadering
+    </Text>
+    <Text>
+      Lunchlezing Rijksoverheid
+    </Text>
+    <Text>
+      Benefietborrel
+    </Text>
+  </View>
+;
+
+export default Agenda;

app/components/Sidebar.js

@@ -11,8 +11,7 @@ const Sidebar = props =>
   >
     <Text style={styles.header}>MENU</Text>
     <Text onPress={() => props.navigate('welcome')} style={styles.button} >Welcome</Text>
-    <Text onPress={() => props.navigate('events')} style={styles.button} >Events</Text>
-    <Text onPress={() => props.navigate('authenticate')} style={styles.button} >Authenticate</Text>
+    <Text onPress={() => props.navigate('agenda')} style={styles.button} >Agenda</Text>
   </View>
 ;
 

app/components/navigator.js

 import React from 'react';
 import { connect } from 'react-redux';
 import Drawer from 'react-native-drawer';
-import * as actions from '../actions/navigation';
 import Login from './Login';
 import Welcome from './Welcome';
 import Sidebar from './Sidebar';
+import Agenda from './Agenda';
+
+import * as actions from '../actions/navigation';
 
 const mapStateToProps = state => ({
   currentScene: state.navigation.currentScene,
-  loggedIn: state.navigation.token != '',
+  loggedIn: state.navigation.loggedIn,
+  drawerOpen: state.navigation.drawerOpen,
 });
 
 const mapDispatchToProps = dispatch => ({
-  navigate: scene => dispatch(actions.navigate(scene)),
+  updateDrawer: isOpen => dispatch(actions.updateDrawer(isOpen)),
 });
 
-const sceneToComponent = scene => {
+const sceneToComponent = (scene) => {
   switch (scene) {
     case 'welcome':
       return <Welcome />;
-    // case 'events':
-    //   return <Events />;
-    // case 'authenticate':
-    //   return <Authenticeren />
+    case 'agenda':
+      return <Agenda />;
     default:
       return <Welcome />;
   }
 };
 
-const ReduxNavigator = props => {
-  if (props.loggedIn) {
-    return <Drawer
+const ReduxNavigator = (props) => {
+  const { currentScene, loggedIn, drawerOpen, updateDrawer } = props;
+  if (loggedIn) {
+    return (<Drawer
       type="displace"
       content={<Sidebar />}
       openDrawerOffset={0.4}
@@ -38,18 +40,22 @@ const ReduxNavigator = props => {
       panCloseMask={0.2}
       panThreshold={0.3}
       tweenHandler={ratio => ({ main: { opacity: (2 - ratio) / 2 } })}
+      open={drawerOpen}
+      onOpen={() => updateDrawer(true)}
+      onClose={() => updateDrawer(false)}
       tapToClose
     >
-      {sceneToComponent(props.currentScene)}
-    </Drawer>;
-  } else {
-    return <Login />;
+      {sceneToComponent(currentScene)}
+    </Drawer>);
   }
+  return <Login />;
 };
 
 ReduxNavigator.propTypes = {
   currentScene: React.PropTypes.string.isRequired,
   loggedIn: React.PropTypes.bool.isRequired,
+  drawerOpen: React.PropTypes.bool.isRequired,
+  updateDrawer: React.PropTypes.func.isRequired,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(ReduxNavigator);

app/reducers/navigation.js

@@ -2,35 +2,40 @@ import * as types from '../actions/actionTypes';
 
 const initialState = {
   previousScenes: [],
-  currentScene: 'login',
+  currentScene: 'welcome',
   loggedIn: false,
+  drawerOpen: false,
 };
 
 
 export default function navigate(state = initialState, action = {}) {
-  const { currentScene, previousScenes, loggedIn } = state;
+  const { currentScene, previousScenes, loggedIn, drawerOpen } = state;
   switch (action.type) {
-    case types.LOGIN:
-      if (action.success) {
+    case types.LOGINSUCCESS: {
+      return {
+        ...initialState,
+        loggedIn: true,
+      };
+    }
+    case types.BACK: {
+      if (drawerOpen) {
         return {
-          previousScenes: [
-            ...previousScenes,
-            currentScene,
-          ],
-          currentScene: 'welcome',
-          loggedIn,
+          ...state,
+          drawerOpen: false,
         };
       }
-      return state;
-    case types.BACK: {
       const scene = previousScenes.pop();
       return {
         previousScenes,
         currentScene: scene,
         loggedIn,
+        drawerOpen,
       };
     }
     case types.NAVIGATE: {
+      if (action.scene === currentScene) {
+        return state;
+      }
       return {
         previousScenes: [
           ...previousScenes,
@@ -38,6 +43,13 @@ export default function navigate(state = initialState, action = {}) {
         ],
         currentScene: action.scene,
         loggedIn,
+        drawerOpen: false,
+      };
+    }
+    case types.OPENDRAWER: {
+      return {
+        ...state,
+        drawerOpen: action.drawerOpen,
       };
     }
     default: