Move all navigation to navigation saga

app/actions/calendar.js

+export const OPEN = 'CALENDAR_OPEN';
 export const REFRESH = 'CALENDAR_REFRESH';
 export const SUCCESS = 'CALENDAR_SUCCESS';
 export const FAILURE = 'CALENDAR_FAILURE';
 export const FETCHING = 'CALENDAR_FETCHING';
 
+export function open() {
+  return {
+    type: OPEN,
+  };
+}
+
 export function refresh() {
   return {
     type: REFRESH,

app/actions/members.js

@@ -5,7 +5,7 @@ export const FAILURE = 'MEMBERS_FAILURE';
 export const MORE = 'MEMBERS_MORE';
 export const MORE_SUCCESS = 'MEMBERS_MORE_SUCCESS';
 
-export function members(keywords) {
+export function members(keywords = null) {
   return {
     type: MEMBERS,
     payload: { keywords },

app/actions/navigation.js

-export const NAVIGATE = 'NAVIGATE_NAVIGATE';
 export const BACK = 'NAVIGATE_BACK';
-export const OPENDRAWER = 'NAVIGATE_OPENDRAWER';
+export const TOGGLE_DRAWER = 'NAVIGATE_TOGGLE_DRAWER';
 
-export function navigate(scene, newSection = false) {
-  return {
-    type: NAVIGATE,
-    payload: { scene, newSection },
-  };
-}
-
-export function back() {
+export function goBack() {
   return {
     type: BACK,
   };
 }
 
-export function updateDrawer(drawerState) {
+export function toggleDrawer() {
   return {
-    type: OPENDRAWER, payload: { drawerOpen: drawerState },
+    type: TOGGLE_DRAWER,
   };
 }

app/actions/settings.js

 // Actions are grouped based on the settings sections
 
 export const settingsActions = {
+  OPEN: 'SETTINGS_OPEN',
   INIT_START: 'SETTINGS_INIT_START',
   INIT_COMPLETE: 'SETTINGS_INIT_COMPLETE',
+  open: () => ({
+    type: settingsActions.OPEN,
+  }),
   initStart: () => ({
     type: settingsActions.INIT_START,
   }),

app/actions/welcome.js

+export const OPEN = 'WELCOME_OPEN';
 export const REFRESH = 'WELCOME_REFRESH';
 export const SUCCESS = 'WELCOME_SUCCESS';
 export const FAILURE = 'WELCOME_FAILURE';
 
+export function open() {
+  return {
+    type: OPEN,
+  };
+}
+
 export function refresh() {
   return {
     type: REFRESH,

app/navigation.js

@@ -3,6 +3,7 @@ import {
   createStackNavigator,
   createSwitchNavigator,
   NavigationActions,
+  DrawerActions,
 } from 'react-navigation';
 
 import Login from './ui/screens/user/Login';
@@ -63,9 +64,16 @@ function goBack() {
   );
 }
 
+function toggleDrawer() {
+  navigator.dispatch(
+    DrawerActions.toggleDrawer(),
+  );
+}
+
 export default {
   AppNavigator,
   navigate,
   goBack,
+  toggleDrawer,
   setTopLevelNavigator,
 };

app/reducers/registration.js

@@ -7,7 +7,7 @@ const initialState = {
 };
 
 
-export default function navigate(state = initialState, action = {}) {
+export default function reducer(state = initialState, action = {}) {
   switch (action.type) {
     case registrationActions.SHOW_FIELDS: {
       return {

app/sagas/index.js

 import { all, fork } from 'redux-saga/effects';
 
 import sessionSaga from './session';
-import routerSaga from './router';
+import navigationSaga from './navigation';
 import eventSaga from './event';
 import profileSaga from './profile';
 import welcomeSaga from './welcome';
@@ -16,7 +16,7 @@ import settingsSaga from './settings';
 const sagas = function* sagas() {
   yield all([
     fork(sessionSaga),
-    fork(routerSaga),
+    fork(navigationSaga),
     fork(eventSaga),
     fork(profileSaga),
     fork(welcomeSaga),

app/sagas/router.js → app/sagas/navigation.js

 import { takeEvery, call } from 'redux-saga/effects';
+import * as navigationActions from '../actions/navigation';
 import * as eventActions from '../actions/event';
 import * as profileActions from '../actions/profile';
 import * as pizzaActions from '../actions/pizza';
 import * as registrationActions from '../actions/registration';
 import * as sessionActions from '../actions/session';
+import * as calendarActions from '../actions/calendar';
+import * as membersActions from '../actions/members';
+import * as welcomeActions from '../actions/welcome';
+import { settingsActions } from '../actions/settings';
 import NavigationService from '../navigation';
 
-function* event() {
-  yield call(NavigationService.navigate, 'Event');
-}
-
-function* profile() {
-  yield call(NavigationService.navigate, 'Profile');
-}
-
-function* registration() {
-  yield call(NavigationService.navigate, 'Registration');
-}
-
-function* pizza() {
-  yield call(NavigationService.navigate, 'Pizza');
-}
-
-function* signedIn() {
-  yield call(NavigationService.navigate, 'SignedIn');
-}
-
-function* auth() {
-  yield call(NavigationService.navigate, 'Auth');
+function* navigate(routeName) {
+  yield call(NavigationService.navigate, routeName);
 }
 
 function* back() {
   yield call(NavigationService.goBack);
 }
 
+function* toggleDrawer() {
+  yield call(NavigationService.toggleDrawer);
+}
+
 const routerSaga = function* eventSaga() {
-  yield takeEvery(eventActions.EVENT, event);
-  yield takeEvery(profileActions.PROFILE, profile);
-  yield takeEvery(registrationActions.FIELDS, registration);
+  yield takeEvery(navigationActions.BACK, back);
+  yield takeEvery(navigationActions.TOGGLE_DRAWER, toggleDrawer);
+  yield takeEvery(welcomeActions.OPEN, navigate, 'Welcome');
+  yield takeEvery(settingsActions.OPEN, navigate, 'Settings');
+  yield takeEvery(calendarActions.OPEN, navigate, 'Calendar');
+  yield takeEvery(membersActions.MEMBERS, navigate, 'MemberList');
+  yield takeEvery(eventActions.EVENT, navigate, 'Event');
+  yield takeEvery(profileActions.PROFILE, navigate, 'Profile');
+  yield takeEvery(registrationActions.FIELDS, navigate, 'Registration');
   yield takeEvery(registrationActions.SUCCESS, back);
-  yield takeEvery(pizzaActions.PIZZA, pizza);
-  yield takeEvery(sessionActions.SIGNED_IN, signedIn);
-  yield takeEvery([sessionActions.TOKEN_INVALID, sessionActions.SIGN_OUT], auth);
+  yield takeEvery(pizzaActions.PIZZA, navigate, 'Pizza');
+  yield takeEvery(sessionActions.SIGNED_IN, navigate, 'SignedIn');
+  yield takeEvery([sessionActions.TOKEN_INVALID, sessionActions.SIGN_OUT], navigate, 'Auth');
 };
 
 export default routerSaga;

app/ui/components/sidebar/Sidebar.js

@@ -9,8 +9,12 @@ import { translate } from 'react-i18next';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import styles from './style/Sidebar';
 import * as loginActions from '../../../actions/session';
-import Colors from '../../style/Colors';
 import * as profileActions from '../../../actions/profile';
+import * as calendarActions from '../../../actions/calendar';
+import * as membersActions from '../../../actions/members';
+import * as welcomeActions from '../../../actions/welcome';
+import { settingsActions } from '../../../actions/settings';
+import Colors from '../../style/Colors';
 
 const background = require('../../../assets/img/huygens.jpg');
 
@@ -25,28 +29,28 @@ const logoutPrompt = props => () => Alert.alert(
 const Sidebar = (props) => {
   const buttons = [
     {
-      onPress: () => props.navigation.navigate('Welcome'),
+      onPress: () => props.openWelcome(),
       iconName: 'home',
       text: props.t('Welcome'),
       style: {},
       routeName: 'Welcome',
     },
     {
-      onPress: () => props.navigation.navigate('Calendar'),
+      onPress: () => props.openCalendar(),
       iconName: 'event',
       text: props.t('Calendar'),
       style: {},
       routeName: 'Calendar',
     },
     {
-      onPress: () => props.navigation.navigate('MemberList'),
+      onPress: () => props.openMemberList(),
       iconName: 'people',
       text: props.t('Member List'),
       style: {},
       routeName: 'MemberList',
     },
     {
-      onPress: () => props.navigation.navigate('Settings'),
+      onPress: () => props.openSettings(),
       iconName: 'settings',
       text: props.t('Settings'),
       style: {},
@@ -116,7 +120,10 @@ Sidebar.propTypes = {
   photo: PropTypes.string.isRequired,
   loadProfile: PropTypes.func.isRequired,
   t: PropTypes.func.isRequired,
-  navigation: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  openCalendar: PropTypes.func.isRequired,
+  openWelcome: PropTypes.func.isRequired,
+  openSettings: PropTypes.func.isRequired,
+  openMemberList: PropTypes.func.isRequired,
 };
 
 const mapStateToProps = state => ({
@@ -126,6 +133,10 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
   loadProfile: () => dispatch(profileActions.profile()),
+  openCalendar: () => dispatch(calendarActions.open()),
+  openMemberList: () => dispatch(membersActions.members()),
+  openWelcome: () => dispatch(welcomeActions.open()),
+  openSettings: () => dispatch(settingsActions.open()),
   signOut: () => dispatch(loginActions.signOut()),
 });
 

app/ui/screens/memberList/SearchHeader.js

@@ -11,12 +11,13 @@ import {
   View,
 } from 'react-native';
 import PropTypes from 'prop-types';
-import { withNavigation } from 'react-navigation';
+import { connect } from 'react-redux';
 
 import Icon from 'react-native-vector-icons/MaterialIcons';
 
 import styles from './style/SearchHeader';
 import Colors from '../../style/Colors';
+import * as navigationActions from '../../../actions/navigation';
 
 class SearchBar extends Component {
   constructor(props) {
@@ -40,11 +41,11 @@ class SearchBar extends Component {
   }
 
   getLeftIcon = () => {
-    const { navigation } = this.props;
+    const { toggleDrawer } = this.props;
     const { isSearching } = this.state;
     return (
       <TouchableOpacity
-        onPress={() => (isSearching ? this.updateSearch(false) : navigation.openDrawer())}
+        onPress={() => (isSearching ? this.updateSearch(false) : toggleDrawer())}
       >
         <Icon
           name={isSearching ? 'arrow-back' : 'menu'}
@@ -178,7 +179,11 @@ SearchBar.propTypes = {
   searchText: PropTypes.string.isRequired,
   search: PropTypes.func.isRequired,
   searchKey: PropTypes.string.isRequired,
-  navigation: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  toggleDrawer: PropTypes.func.isRequired,
 };
 
-export default withNavigation(SearchBar);
+const mapDispatchToProps = dispatch => ({
+  toggleDrawer: () => dispatch(navigationActions.toggleDrawer()),
+});
+
+export default connect(() => ({}), mapDispatchToProps)(SearchBar);

app/ui/screens/user/Profile.js

@@ -21,6 +21,8 @@ import StandardHeader from '../../components/standardHeader/StandardHeader';
 import LoadingScreen from '../../components/loadingScreen/LoadingScreen';
 import ErrorScreen from '../../components/errorScreen/ErrorScreen';
 
+import * as navigationActions from '../../../actions/navigation';
+
 import Colors from '../../style/Colors';
 
 import { STATUSBAR_HEIGHT } from '../../components/standardHeader/style/StandardHeader';
@@ -228,7 +230,7 @@ class Profile extends Component {
         </Animated.View>
         <Animated.View style={[styles.appBar, appBarBorderStyle]}>
           <TouchableOpacity
-            onPress={this.props.navigation.goBack}
+            onPress={this.props.goBack}
           >
             <Icon
               name="arrow-back"
@@ -319,7 +321,7 @@ Profile.propTypes = {
   success: PropTypes.bool.isRequired,
   hasLoaded: PropTypes.bool.isRequired,
   t: PropTypes.func.isRequired,
-  navigation: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  goBack: PropTypes.func.isRequired,
 };
 
 const mapStateToProps = state => ({
@@ -328,4 +330,8 @@ const mapStateToProps = state => ({
   hasLoaded: state.profile.hasLoaded,
 });
 
-export default connect(mapStateToProps, () => ({}))(translate('screens/user/Profile')(Profile));
+const mapDispatchToProps = dispatch => ({
+  goBack: () => dispatch(navigationActions.goBack()),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(translate('screens/user/Profile')(Profile));

app/ui/screens/welcome/Welcome.js

@@ -11,7 +11,6 @@ import {
 import { connect } from 'react-redux';
 import { translate } from 'react-i18next';
 import Moment from 'moment';
-import { withNavigation } from 'react-navigation';
 import EventDetailCard from './EventDetailCard';
 import LoadingScreen from '../../components/loadingScreen/LoadingScreen';
 import ErrorScreen from '../../components/errorScreen/ErrorScreen';
@@ -19,6 +18,7 @@ import ErrorScreen from '../../components/errorScreen/ErrorScreen';
 import * as welcomeActions from '../../../actions/welcome';
 import styles from './style/Welcome';
 import { withStandardHeader } from '../../components/standardHeader/StandardHeader';
+import * as calendarActions from '../../../actions/calendar';
 
 const eventListToSections = (eventList, t) => {
   const calendarFormat = {
@@ -53,7 +53,7 @@ const eventListToSections = (eventList, t) => {
 
 const Footer = props => (
   <TouchableOpacity
-    onPress={() => props.navigation.navigate('Calendar')}
+    onPress={props.openCalendar}
     style={styles.footer}
   >
     <Text style={styles.footerText}>
@@ -63,11 +63,15 @@ const Footer = props => (
 );
 
 Footer.propTypes = {
-  navigation: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  openCalendar: PropTypes.func.isRequired,
   t: PropTypes.func.isRequired,
 };
 
-const FooterComponent = withNavigation(translate('screens/welcome/Welcome')(Footer));
+const mapDispatchToFooterProps = dispatch => ({
+  openCalendar: () => dispatch(calendarActions.open()),
+});
+
+const FooterComponent = connect(() => ({}), mapDispatchToFooterProps)(translate('screens/welcome/Welcome')(Footer));
 
 class Welcome extends Component {
   handleRefresh = () => {