Verified Commit 2026fc9d authored by Sébastiaan Versteeg's avatar Sébastiaan Versteeg
Browse files

Move all navigation to navigation saga

parent 194500ef
export const OPEN = 'CALENDAR_OPEN';
export const REFRESH = 'CALENDAR_REFRESH'; export const REFRESH = 'CALENDAR_REFRESH';
export const SUCCESS = 'CALENDAR_SUCCESS'; export const SUCCESS = 'CALENDAR_SUCCESS';
export const FAILURE = 'CALENDAR_FAILURE'; export const FAILURE = 'CALENDAR_FAILURE';
export const FETCHING = 'CALENDAR_FETCHING'; export const FETCHING = 'CALENDAR_FETCHING';
export function open() {
return {
type: OPEN,
};
}
export function refresh() { export function refresh() {
return { return {
type: REFRESH, type: REFRESH,
......
...@@ -5,7 +5,7 @@ export const FAILURE = 'MEMBERS_FAILURE'; ...@@ -5,7 +5,7 @@ export const FAILURE = 'MEMBERS_FAILURE';
export const MORE = 'MEMBERS_MORE'; export const MORE = 'MEMBERS_MORE';
export const MORE_SUCCESS = 'MEMBERS_MORE_SUCCESS'; export const MORE_SUCCESS = 'MEMBERS_MORE_SUCCESS';
export function members(keywords) { export function members(keywords = null) {
return { return {
type: MEMBERS, type: MEMBERS,
payload: { keywords }, payload: { keywords },
......
export const NAVIGATE = 'NAVIGATE_NAVIGATE';
export const BACK = 'NAVIGATE_BACK'; export const BACK = 'NAVIGATE_BACK';
export const OPENDRAWER = 'NAVIGATE_OPENDRAWER'; export const TOGGLE_DRAWER = 'NAVIGATE_TOGGLE_DRAWER';
export function navigate(scene, newSection = false) { export function goBack() {
return {
type: NAVIGATE,
payload: { scene, newSection },
};
}
export function back() {
return { return {
type: BACK, type: BACK,
}; };
} }
export function updateDrawer(drawerState) { export function toggleDrawer() {
return { return {
type: OPENDRAWER, payload: { drawerOpen: drawerState }, type: TOGGLE_DRAWER,
}; };
} }
// Actions are grouped based on the settings sections // Actions are grouped based on the settings sections
export const settingsActions = { export const settingsActions = {
OPEN: 'SETTINGS_OPEN',
INIT_START: 'SETTINGS_INIT_START', INIT_START: 'SETTINGS_INIT_START',
INIT_COMPLETE: 'SETTINGS_INIT_COMPLETE', INIT_COMPLETE: 'SETTINGS_INIT_COMPLETE',
open: () => ({
type: settingsActions.OPEN,
}),
initStart: () => ({ initStart: () => ({
type: settingsActions.INIT_START, type: settingsActions.INIT_START,
}), }),
......
export const OPEN = 'WELCOME_OPEN';
export const REFRESH = 'WELCOME_REFRESH'; export const REFRESH = 'WELCOME_REFRESH';
export const SUCCESS = 'WELCOME_SUCCESS'; export const SUCCESS = 'WELCOME_SUCCESS';
export const FAILURE = 'WELCOME_FAILURE'; export const FAILURE = 'WELCOME_FAILURE';
export function open() {
return {
type: OPEN,
};
}
export function refresh() { export function refresh() {
return { return {
type: REFRESH, type: REFRESH,
......
...@@ -3,6 +3,7 @@ import { ...@@ -3,6 +3,7 @@ import {
createStackNavigator, createStackNavigator,
createSwitchNavigator, createSwitchNavigator,
NavigationActions, NavigationActions,
DrawerActions,
} from 'react-navigation'; } from 'react-navigation';
import Login from './ui/screens/user/Login'; import Login from './ui/screens/user/Login';
...@@ -63,9 +64,16 @@ function goBack() { ...@@ -63,9 +64,16 @@ function goBack() {
); );
} }
function toggleDrawer() {
navigator.dispatch(
DrawerActions.toggleDrawer(),
);
}
export default { export default {
AppNavigator, AppNavigator,
navigate, navigate,
goBack, goBack,
toggleDrawer,
setTopLevelNavigator, setTopLevelNavigator,
}; };
...@@ -7,7 +7,7 @@ const initialState = { ...@@ -7,7 +7,7 @@ const initialState = {
}; };
export default function navigate(state = initialState, action = {}) { export default function reducer(state = initialState, action = {}) {
switch (action.type) { switch (action.type) {
case registrationActions.SHOW_FIELDS: { case registrationActions.SHOW_FIELDS: {
return { return {
......
import { all, fork } from 'redux-saga/effects'; import { all, fork } from 'redux-saga/effects';
import sessionSaga from './session'; import sessionSaga from './session';
import routerSaga from './router'; import navigationSaga from './navigation';
import eventSaga from './event'; import eventSaga from './event';
import profileSaga from './profile'; import profileSaga from './profile';
import welcomeSaga from './welcome'; import welcomeSaga from './welcome';
...@@ -16,7 +16,7 @@ import settingsSaga from './settings'; ...@@ -16,7 +16,7 @@ import settingsSaga from './settings';
const sagas = function* sagas() { const sagas = function* sagas() {
yield all([ yield all([
fork(sessionSaga), fork(sessionSaga),
fork(routerSaga), fork(navigationSaga),
fork(eventSaga), fork(eventSaga),
fork(profileSaga), fork(profileSaga),
fork(welcomeSaga), fork(welcomeSaga),
......
import { takeEvery, call } from 'redux-saga/effects'; import { takeEvery, call } from 'redux-saga/effects';
import * as navigationActions from '../actions/navigation';
import * as eventActions from '../actions/event'; import * as eventActions from '../actions/event';
import * as profileActions from '../actions/profile'; import * as profileActions from '../actions/profile';
import * as pizzaActions from '../actions/pizza'; import * as pizzaActions from '../actions/pizza';
import * as registrationActions from '../actions/registration'; import * as registrationActions from '../actions/registration';
import * as sessionActions from '../actions/session'; 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'; import NavigationService from '../navigation';
function* event() { function* navigate(routeName) {
yield call(NavigationService.navigate, 'Event'); yield call(NavigationService.navigate, routeName);
}
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* back() { function* back() {
yield call(NavigationService.goBack); yield call(NavigationService.goBack);
} }
function* toggleDrawer() {
yield call(NavigationService.toggleDrawer);
}
const routerSaga = function* eventSaga() { const routerSaga = function* eventSaga() {
yield takeEvery(eventActions.EVENT, event); yield takeEvery(navigationActions.BACK, back);
yield takeEvery(profileActions.PROFILE, profile); yield takeEvery(navigationActions.TOGGLE_DRAWER, toggleDrawer);
yield takeEvery(registrationActions.FIELDS, registration); 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(registrationActions.SUCCESS, back);
yield takeEvery(pizzaActions.PIZZA, pizza); yield takeEvery(pizzaActions.PIZZA, navigate, 'Pizza');
yield takeEvery(sessionActions.SIGNED_IN, signedIn); yield takeEvery(sessionActions.SIGNED_IN, navigate, 'SignedIn');
yield takeEvery([sessionActions.TOKEN_INVALID, sessionActions.SIGN_OUT], auth); yield takeEvery([sessionActions.TOKEN_INVALID, sessionActions.SIGN_OUT], navigate, 'Auth');
}; };
export default routerSaga; export default routerSaga;
...@@ -9,8 +9,12 @@ import { translate } from 'react-i18next'; ...@@ -9,8 +9,12 @@ import { translate } from 'react-i18next';
import Icon from 'react-native-vector-icons/MaterialIcons'; import Icon from 'react-native-vector-icons/MaterialIcons';
import styles from './style/Sidebar'; import styles from './style/Sidebar';
import * as loginActions from '../../../actions/session'; import * as loginActions from '../../../actions/session';
import Colors from '../../style/Colors';
import * as profileActions from '../../../actions/profile'; 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'); const background = require('../../../assets/img/huygens.jpg');
...@@ -25,28 +29,28 @@ const logoutPrompt = props => () => Alert.alert( ...@@ -25,28 +29,28 @@ const logoutPrompt = props => () => Alert.alert(
const Sidebar = (props) => { const Sidebar = (props) => {
const buttons = [ const buttons = [
{ {
onPress: () => props.navigation.navigate('Welcome'), onPress: () => props.openWelcome(),
iconName: 'home', iconName: 'home',
text: props.t('Welcome'), text: props.t('Welcome'),
style: {}, style: {},
routeName: 'Welcome', routeName: 'Welcome',
}, },
{ {
onPress: () => props.navigation.navigate('Calendar'), onPress: () => props.openCalendar(),
iconName: 'event', iconName: 'event',
text: props.t('Calendar'), text: props.t('Calendar'),
style: {}, style: {},
routeName: 'Calendar', routeName: 'Calendar',
}, },
{ {
onPress: () => props.navigation.navigate('MemberList'), onPress: () => props.openMemberList(),
iconName: 'people', iconName: 'people',
text: props.t('Member List'), text: props.t('Member List'),
style: {}, style: {},
routeName: 'MemberList', routeName: 'MemberList',
}, },
{ {
onPress: () => props.navigation.navigate('Settings'), onPress: () => props.openSettings(),
iconName: 'settings', iconName: 'settings',
text: props.t('Settings'), text: props.t('Settings'),
style: {}, style: {},
...@@ -116,7 +120,10 @@ Sidebar.propTypes = { ...@@ -116,7 +120,10 @@ Sidebar.propTypes = {
photo: PropTypes.string.isRequired, photo: PropTypes.string.isRequired,
loadProfile: PropTypes.func.isRequired, loadProfile: PropTypes.func.isRequired,
t: 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 => ({ const mapStateToProps = state => ({
...@@ -126,6 +133,10 @@ const mapStateToProps = state => ({ ...@@ -126,6 +133,10 @@ const mapStateToProps = state => ({
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = dispatch => ({
loadProfile: () => dispatch(profileActions.profile()), loadProfile: () => dispatch(profileActions.profile()),
openCalendar: () => dispatch(calendarActions.open()),
openMemberList: () => dispatch(membersActions.members()),
openWelcome: () => dispatch(welcomeActions.open()),
openSettings: () => dispatch(settingsActions.open()),
signOut: () => dispatch(loginActions.signOut()), signOut: () => dispatch(loginActions.signOut()),
}); });
......
...@@ -11,12 +11,13 @@ import { ...@@ -11,12 +11,13 @@ import {
View, View,
} from 'react-native'; } from 'react-native';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { withNavigation } from 'react-navigation'; import { connect } from 'react-redux';
import Icon from 'react-native-vector-icons/MaterialIcons'; import Icon from 'react-native-vector-icons/MaterialIcons';
import styles from './style/SearchHeader'; import styles from './style/SearchHeader';
import Colors from '../../style/Colors'; import Colors from '../../style/Colors';
import * as navigationActions from '../../../actions/navigation';
class SearchBar extends Component { class SearchBar extends Component {
constructor(props) { constructor(props) {
...@@ -40,11 +41,11 @@ class SearchBar extends Component { ...@@ -40,11 +41,11 @@ class SearchBar extends Component {
} }
getLeftIcon = () => { getLeftIcon = () => {
const { navigation } = this.props; const { toggleDrawer } = this.props;
const { isSearching } = this.state; const { isSearching } = this.state;
return ( return (
<TouchableOpacity <TouchableOpacity
onPress={() => (isSearching ? this.updateSearch(false) : navigation.openDrawer())} onPress={() => (isSearching ? this.updateSearch(false) : toggleDrawer())}
> >
<Icon <Icon
name={isSearching ? 'arrow-back' : 'menu'} name={isSearching ? 'arrow-back' : 'menu'}
...@@ -178,7 +179,11 @@ SearchBar.propTypes = { ...@@ -178,7 +179,11 @@ SearchBar.propTypes = {
searchText: PropTypes.string.isRequired, searchText: PropTypes.string.isRequired,
search: PropTypes.func.isRequired, search: PropTypes.func.isRequired,
searchKey: PropTypes.string.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);
...@@ -21,6 +21,8 @@ import StandardHeader from '../../components/standardHeader/StandardHeader'; ...@@ -21,6 +21,8 @@ import StandardHeader from '../../components/standardHeader/StandardHeader';
import LoadingScreen from '../../components/loadingScreen/LoadingScreen'; import LoadingScreen from '../../components/loadingScreen/LoadingScreen';
import ErrorScreen from '../../components/errorScreen/ErrorScreen'; import ErrorScreen from '../../components/errorScreen/ErrorScreen';
import * as navigationActions from '../../../actions/navigation';
import Colors from '../../style/Colors'; import Colors from '../../style/Colors';
import { STATUSBAR_HEIGHT } from '../../components/standardHeader/style/StandardHeader'; import { STATUSBAR_HEIGHT } from '../../components/standardHeader/style/StandardHeader';
...@@ -228,7 +230,7 @@ class Profile extends Component { ...@@ -228,7 +230,7 @@ class Profile extends Component {
</Animated.View> </Animated.View>
<Animated.View style={[styles.appBar, appBarBorderStyle]}> <Animated.View style={[styles.appBar, appBarBorderStyle]}>
<TouchableOpacity <TouchableOpacity
onPress={this.props.navigation.goBack} onPress={this.props.goBack}
> >
<Icon <Icon
name="arrow-back" name="arrow-back"
...@@ -319,7 +321,7 @@ Profile.propTypes = { ...@@ -319,7 +321,7 @@ Profile.propTypes = {
success: PropTypes.bool.isRequired, success: PropTypes.bool.isRequired,
hasLoaded: PropTypes.bool.isRequired, hasLoaded: PropTypes.bool.isRequired,
t: PropTypes.func.isRequired, t: PropTypes.func.isRequired,
navigation: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types goBack: PropTypes.func.isRequired,
}; };
const mapStateToProps = state => ({ const mapStateToProps = state => ({
...@@ -328,4 +330,8 @@ const mapStateToProps = state => ({ ...@@ -328,4 +330,8 @@ const mapStateToProps = state => ({
hasLoaded: state.profile.hasLoaded, 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));
...@@ -11,7 +11,6 @@ import { ...@@ -11,7 +11,6 @@ import {
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { translate } from 'react-i18next'; import { translate } from 'react-i18next';
import Moment from 'moment'; import Moment from 'moment';
import { withNavigation } from 'react-navigation';
import EventDetailCard from './EventDetailCard'; import EventDetailCard from './EventDetailCard';
import LoadingScreen from '../../components/loadingScreen/LoadingScreen'; import LoadingScreen from '../../components/loadingScreen/LoadingScreen';
import ErrorScreen from '../../components/errorScreen/ErrorScreen'; import ErrorScreen from '../../components/errorScreen/ErrorScreen';
...@@ -19,6 +18,7 @@ import ErrorScreen from '../../components/errorScreen/ErrorScreen'; ...@@ -19,6 +18,7 @@ import ErrorScreen from '../../components/errorScreen/ErrorScreen';
import * as welcomeActions from '../../../actions/welcome'; import * as welcomeActions from '../../../actions/welcome';
import styles from './style/Welcome'; import styles from './style/Welcome';
import { withStandardHeader } from '../../components/standardHeader/StandardHeader'; import { withStandardHeader } from '../../components/standardHeader/StandardHeader';
import * as calendarActions from '../../../actions/calendar';
const eventListToSections = (eventList, t) => { const eventListToSections = (eventList, t) => {
const calendarFormat = { const calendarFormat = {
...@@ -53,7 +53,7 @@ const eventListToSections = (eventList, t) => { ...@@ -53,7 +53,7 @@ const eventListToSections = (eventList, t) => {
const Footer = props => ( const Footer = props => (
<TouchableOpacity <TouchableOpacity
onPress={() => props.navigation.navigate('Calendar')} onPress={props.openCalendar}
style={styles.footer} style={styles.footer}
> >
<Text style={styles.footerText}> <Text style={styles.footerText}>
...@@ -63,11 +63,15 @@ const Footer = props => ( ...@@ -63,11 +63,15 @@ const Footer = props => (
); );
Footer.propTypes = { Footer.propTypes = {
navigation: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types openCalendar: PropTypes.func.isRequired,
t: 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 { class Welcome extends Component {
handleRefresh = () => { handleRefresh = () => {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment