Move Redux connect to wrapping Container components and relocate several screen

__tests__/ui/components/navigator/Sidebar.spec.js

 import React from 'react';
 import renderer from 'react-test-renderer';
-import configureStore from 'redux-mock-store';
 import Sidebar from '../../../../app/ui/components/sidebar/Sidebar';
-import reducer from '../../../../app/reducers';
-
-const mockNavigation = {
-  navigate: jest.fn(),
-};
 
 describe('Sidebar component', () => {
-  const mockStore = configureStore(reducer);
-  const initialState = {
-    navigation: {
-      currentScene: 'home',
-    },
-    session: {
-      displayName: 'Lorem ipsum',
-      photo: 'photo',
-      token: 'token123',
-    },
-  };
-  const store = mockStore(initialState);
-
   it('renders correctly', () => {
     const tree = renderer
-      .create(<Sidebar store={store} navigation={mockNavigation} activeItemKey="unknown" />)
+      .create(<Sidebar
+        activeItemKey="Welcome"
+        photo="photo"
+        displayName="Lorem ipsum"
+        openCalendar={jest.fn()}
+        openSettings={jest.fn()}
+        openWelcome={jest.fn()}
+        openMemberList={jest.fn()}
+        loadProfile={jest.fn()}
+      />)
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
-});
\ No newline at end of file
+});

__tests__/ui/components/navigator/__snapshots__/Sidebar.spec.js.snap

@@ -165,7 +165,7 @@ exports[`Sidebar component renders correctly 1`] = `
           style={
             Array [
               Object {
-                "color": "#313131",
+                "color": "#E62272",
                 "fontSize": 24,
               },
               Array [
@@ -196,7 +196,7 @@ exports[`Sidebar component renders correctly 1`] = `
                 "fontWeight": "600",
               },
               Object {
-                "color": "#313131",
+                "color": "#E62272",
               },
             ]
           }

app/navigation.js

@@ -6,17 +6,17 @@ import {
   DrawerActions,
 } from 'react-navigation';
 
-import Login from './ui/screens/user/Login';
-import Welcome from './ui/screens/welcome/Welcome';
-import Event from './ui/screens/events/Event';
-import Calendar from './ui/screens/events/Calendar';
-import Profile from './ui/screens/user/Profile';
-import Pizza from './ui/screens/pizza/Pizza';
-import Registration from './ui/screens/events/Registration';
-import MemberList from './ui/screens/memberList/MemberList';
+import Login from './ui/screens/login/LoginScreenContainer';
+import Welcome from './ui/screens/welcome/WelcomeScreenContainer';
+import Event from './ui/screens/events/EventScreenContainer';
+import Calendar from './ui/screens/events/CalendarScreenContainer';
+import Profile from './ui/screens/profile/ProfileScreenContainer';
+import Pizza from './ui/screens/pizza/PizzaScreenContainer';
+import Registration from './ui/screens/events/RegistrationScreenContainer';
+import MemberList from './ui/screens/memberList/MemberListScreenContainer';
 import SplashScreen from './ui/screens/splash/SplashScreen';
-import Settings from './ui/screens/settings/Settings';
-import Sidebar from './ui/components/sidebar/Sidebar';
+import Settings from './ui/screens/settings/SettingsScreenContainer';
+import Sidebar from './ui/components/sidebar/SidebarContainer';
 
 const MainNavigator = createDrawerNavigator({
   Welcome,

app/ui/components/memberView/MemberViewContainer.js

+import { connect } from 'react-redux';
+import * as profileActions from '../../../actions/profile';
+import MemberView from './MemberView';
+
+const mapDispatchToProps = dispatch => ({
+  loadProfile: pk => dispatch(profileActions.profile(pk)),
+});
+
+export default connect(() => ({}), mapDispatchToProps)(MemberView);

app/ui/components/sidebar/Sidebar.js

@@ -4,16 +4,9 @@ import {
   Alert, Image, ImageBackground, Text, TouchableHighlight, View,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import { connect } from 'react-redux';
 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 * 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');
@@ -126,18 +119,4 @@ Sidebar.propTypes = {
   openMemberList: PropTypes.func.isRequired,
 };
 
-const mapStateToProps = state => ({
-  displayName: state.session.displayName,
-  photo: state.session.photo,
-});
-
-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()),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(translate('components/sidebar/Sidebar')(Sidebar));
+export default translate('components/sidebar/Sidebar')(Sidebar);

app/ui/components/sidebar/SidebarContainer.js

+import { connect } from 'react-redux';
+import { settingsActions } from '../../../actions/settings';
+import * as profileActions from '../../../actions/profile';
+import * as welcomeActions from '../../../actions/welcome';
+import * as calendarActions from '../../../actions/calendar';
+import * as loginActions from '../../../actions/session';
+import * as membersActions from '../../../actions/members';
+import Sidebar from './Sidebar';
+
+const mapStateToProps = state => ({
+  displayName: state.session.displayName,
+  photo: state.session.photo,
+});
+
+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()),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Sidebar);

app/ui/screens/events/CalendarItem.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  View, Text, TouchableHighlight, Linking,
-} from 'react-native';
-import { connect } from 'react-redux';
+import { Text, TouchableHighlight, View } from 'react-native';
 import { translate } from 'react-i18next';
 import Moment from 'moment';
 
-import * as eventActions from '../../../actions/event';
-
 import styles from './style/CalendarItem';
 
 const getEventInfo = (event, t) => {
@@ -22,7 +17,7 @@ const getEventInfo = (event, t) => {
   return `${Moment(event.start).format('HH:mm')} - ${Moment(event.end).format('HH:mm')} | ${event.location}`;
 };
 
-const EventCard = props => (
+const CalendarItem = props => (
   <TouchableHighlight
     onPress={() => props.loadEvent(props.event)}
     style={styles.button}
@@ -44,7 +39,7 @@ const EventCard = props => (
   </TouchableHighlight>
 );
 
-EventCard.propTypes = {
+CalendarItem.propTypes = {
   event: PropTypes.shape({
     title: PropTypes.string,
     description: PropTypes.string,
@@ -62,14 +57,4 @@ EventCard.propTypes = {
   t: PropTypes.func.isRequired,
 };
 
-const mapDispatchToProps = dispatch => ({
-  loadEvent: (event) => {
-    if (event.partner) {
-      Linking.openURL(event.url);
-    } else {
-      dispatch(eventActions.event(event.pk));
-    }
-  },
-});
-
-export default connect(() => ({}), mapDispatchToProps)(translate('screen/events/CalendarItem')(EventCard));
+export default translate('screen/events/CalendarItem')(CalendarItem);

app/ui/screens/events/CalendarItemContainer.js

+import { Linking } from 'react-native';
+import { connect } from 'react-redux';
+import * as eventActions from '../../../actions/event';
+import CalendarItem from './CalendarItem';
+
+const mapDispatchToProps = dispatch => ({
+  loadEvent: (event) => {
+    if (event.partner) {
+      Linking.openURL(event.url);
+    } else {
+      dispatch(eventActions.event(event.pk));
+    }
+  },
+});
+
+export default connect(() => ({}), mapDispatchToProps)(CalendarItem);

app/ui/screens/events/Calendar.js → app/ui/screens/events/CalendarScreen.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import {
-  Text, View, SectionList, ScrollView, RefreshControl,
+  RefreshControl, ScrollView, SectionList, Text, View,
 } from 'react-native';
-import { connect } from 'react-redux';
 import { translate } from 'react-i18next';
 import Moment from 'moment';
 import locale from 'react-native-locale-detector';
-
-import * as calendarActions from '../../../actions/calendar';
 import EventCard from './CalendarItem';
 import LoadingScreen from '../../components/loadingScreen/LoadingScreen';
 import ErrorScreen from '../../components/errorScreen/ErrorScreen';
 
-import styles from './style/Calendar';
+import styles from './style/CalendarScreen';
 import { withStandardHeader } from '../../components/standardHeader/StandardHeader';
 
 /* eslint no-param-reassign: ["error", { "props": false }] */
@@ -124,7 +121,7 @@ const renderItem = (item) => {
   );
 };
 
-class Calendar extends Component {
+class CalendarScreen extends Component {
   componentDidMount() {
     this.props.refresh();
   }
@@ -188,7 +185,7 @@ class Calendar extends Component {
   }
 }
 
-Calendar.propTypes = {
+CalendarScreen.propTypes = {
   eventList: PropTypes.arrayOf(PropTypes.shape({
     pk: PropTypes.number,
     title: PropTypes.string,
@@ -208,14 +205,4 @@ Calendar.propTypes = {
   t: PropTypes.func.isRequired,
 };
 
-const mapStateToProps = state => ({
-  eventList: state.calendar.eventList,
-  loading: state.calendar.loading,
-  status: state.calendar.status,
-});
-
-const mapDispatchToProps = dispatch => ({
-  refresh: () => dispatch(calendarActions.refresh()),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(translate('screens/events/Calendar')(withStandardHeader(Calendar, true)));
+export default translate('screens/events/Calendar')(withStandardHeader(CalendarScreen, true));

app/ui/screens/events/CalendarScreenContainer.js

+import { connect } from 'react-redux';
+import * as calendarActions from '../../../actions/calendar';
+import CalendarScreen from './CalendarScreen';
+
+const mapStateToProps = state => ({
+  eventList: state.calendar.eventList,
+  loading: state.calendar.loading,
+  status: state.calendar.status,
+});
+
+const mapDispatchToProps = dispatch => ({
+  refresh: () => dispatch(calendarActions.refresh()),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(CalendarScreen);

app/ui/screens/events/Event.js → app/ui/screens/events/EventScreen.js

@@ -5,33 +5,27 @@ import {
   FlatList,
   Image,
   Linking,
-  Platform,
   RefreshControl,
   ScrollView,
   Text,
   TouchableHighlight,
   View,
 } from 'react-native';
-import { connect } from 'react-redux';
 import { translate } from 'react-i18next';
 import Moment from 'moment';
 import HTML from 'react-native-render-html';
 
-import styles, { memberSize } from './style/Event';
-import MemberView from '../../components/memberView/MemberView';
+import styles, { memberSize } from './style/EventScreen';
+import MemberView from '../../components/memberView/MemberViewContainer';
 import LoadingScreen from '../../components/loadingScreen/LoadingScreen';
 import ErrorScreen from '../../components/errorScreen/ErrorScreen';
 import Colors from '../../style/Colors';
 
 import { termsAndConditionsUrl } from '../../../utils/url';
-
-import * as eventActions from '../../../actions/event';
-import * as registrationActions from '../../../actions/registration';
-import * as pizzaActions from '../../../actions/pizza';
 import Button from '../../components/button/Button';
 import { withStandardHeader } from '../../components/standardHeader/StandardHeader';
 
-class Event extends Component {
+class EventScreen extends Component {
   cancelPrompt = (pk) => {
     const { data, t, cancel } = this.props;
     const cancelDeadlineDate = new Date(data.cancel_deadline);
@@ -429,7 +423,7 @@ Pizza:
   }
 }
 
-Event.propTypes = {
+EventScreen.propTypes = {
   data: PropTypes.shape({
     pk: PropTypes.number.isRequired,
     title: PropTypes.string.isRequired,
@@ -480,20 +474,4 @@ Event.propTypes = {
   t: PropTypes.func.isRequired,
 };
 
-const mapStateToProps = state => ({
-  data: state.event.data,
-  registrations: state.event.registrations,
-  status: state.event.status,
-  loading: state.event.loading,
-});
-
-const mapDispatchToProps = dispatch => ({
-  refresh: pk => dispatch(eventActions.event(pk)),
-  register: event => dispatch(registrationActions.register(event)),
-  cancel: registration => dispatch(registrationActions.cancel(registration)),
-  fields: registration => dispatch(registrationActions.retrieveFields(registration)),
-  openMaps: location => Linking.openURL(`https://maps.${Platform.OS === 'ios' ? 'apple' : 'google'}.com/maps?daddr=${location}`),
-  retrievePizzaInfo: () => dispatch(pizzaActions.retrievePizzaInfo()),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(translate('screens/events/Event')(withStandardHeader(Event)));
+export default translate('screens/events/Event')(withStandardHeader(EventScreen));

app/ui/screens/events/EventScreenContainer.js

+import { Linking, Platform } from 'react-native';
+import { connect } from 'react-redux';
+import * as pizzaActions from '../../../actions/pizza';
+import * as registrationActions from '../../../actions/registration';
+import * as eventActions from '../../../actions/event';
+import EventScreen from './EventScreen';
+
+const mapStateToProps = state => ({
+  data: state.event.data,
+  registrations: state.event.registrations,
+  status: state.event.status,
+  loading: state.event.loading,
+});
+
+const mapDispatchToProps = dispatch => ({
+  refresh: pk => dispatch(eventActions.event(pk)),
+  register: event => dispatch(registrationActions.register(event)),
+  cancel: registration => dispatch(registrationActions.cancel(registration)),
+  fields: registration => dispatch(registrationActions.retrieveFields(registration)),
+  openMaps: location => Linking.openURL(`https://maps.${Platform.OS === 'ios' ? 'apple' : 'google'}.com/maps?daddr=${location}`),
+  retrievePizzaInfo: () => dispatch(pizzaActions.retrievePizzaInfo()),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(EventScreen);

app/ui/screens/events/Registration.js → app/ui/screens/events/RegistrationScreen.js

@@ -9,20 +9,17 @@ import {
   TextInput,
   View,
 } from 'react-native';
-import { connect } from 'react-redux';
 import { translate } from 'react-i18next';
 import PropTypes from 'prop-types';
 
-import styles from './style/Registration';
+import styles from './style/RegistrationScreen';
 import Colors from '../../style/Colors';
 
 import ErrorScreen from '../../components/errorScreen/ErrorScreen';
-
-import * as registrationActions from '../../../actions/registration';
 import Button from '../../components/button/Button';
 import { withStandardHeader } from '../../components/standardHeader/StandardHeader';
 
-class Registration extends Component {
+class RegistrationScreen extends Component {
   constructor(props) {
     super(props);
     this.state = {};
@@ -171,7 +168,7 @@ class Registration extends Component {
   }
 }
 
-Registration.propTypes = {
+RegistrationScreen.propTypes = {
   registration: PropTypes.number.isRequired,
   fields: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   status: PropTypes.string.isRequired,
@@ -179,14 +176,4 @@ Registration.propTypes = {
   t: PropTypes.func.isRequired,
 };
 
-const mapStateToProps = state => ({
-  registration: state.registration.registration,
-  fields: state.registration.fields,
-  status: state.registration.status,
-});
-
-const mapDispatchToProps = dispatch => ({
-  update: (registration, fields) => dispatch(registrationActions.update(registration, fields)),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(translate('screens/events/Registration')(withStandardHeader(Registration)));
+export default translate('screens/events/Registration')(withStandardHeader(RegistrationScreen));

app/ui/screens/events/RegistrationScreenContainer.js

+import { connect } from 'react-redux';
+import * as registrationActions from '../../../actions/registration';
+import RegistrationScreen from './RegistrationScreen';
+
+const mapStateToProps = state => ({
+  registration: state.registration.registration,
+  fields: state.registration.fields,
+  status: state.registration.status,
+});
+
+const mapDispatchToProps = dispatch => ({
+  update: (registration, fields) => dispatch(registrationActions.update(registration, fields)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(RegistrationScreen);

app/ui/screens/user/Login.js → app/ui/screens/login/LoginScreen.js

@@ -3,22 +3,18 @@ import PropTypes from 'prop-types';
 import {
   ActivityIndicator,
   Image,
-  Keyboard,
   KeyboardAvoidingView,
+  LayoutAnimation,
   Linking,
   Text,
   TextInput,
   View,
-  LayoutAnimation,
 } from 'react-native';
-import { connect } from 'react-redux';
 import { translate } from 'react-i18next';
 import { url } from '../../../utils/url';
-
-import * as actions from '../../../actions/session';
 import DismissKeyboardView from '../../components/dismissKeyboardView/DismissKeyboardView';
 import Button from '../../components/button/Button';
-import styles from './style/Login';
+import styles from './style/LoginScreen';
 import Colors from '../../style/Colors';
 import { STATUS_SIGNING_IN } from '../../../reducers/session';
 
@@ -31,7 +27,7 @@ const configureNextAnimation = () => {
 };
 
 
-class Login extends Component {
+class LoginScreen extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -112,18 +108,10 @@ class Login extends Component {
   }
 }
 
-Login.propTypes = {
+LoginScreen.propTypes = {
   login: PropTypes.func.isRequired,
   t: PropTypes.func.isRequired,
   status: PropTypes.string.isRequired,
 };
 
-const mapStateToProps = state => state.session;
-const mapDispatchToProps = dispatch => ({
-  login: (username, password) => {
-    Keyboard.dismiss();
-    dispatch(actions.signIn(username, password));
-  },
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(translate(['screens/user/Login'])(Login));
+export default translate(['screens/user/Login'])(LoginScreen);

app/ui/screens/login/LoginScreenContainer.js

+import { connect } from 'react-redux';
+import { Keyboard } from 'react-native';
+import * as actions from '../../../actions/session';
+import LoginScreen from './LoginScreen';
+
+const mapStateToProps = state => state.session;
+const mapDispatchToProps = dispatch => ({
+  login: (username, password) => {
+    Keyboard.dismiss();
+    dispatch(actions.signIn(username, password));
+  },
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen);