Verified Commit 58565aa3 authored by Sébastiaan Versteeg's avatar Sébastiaan Versteeg
Browse files

Move Redux connect to wrapping Container components and relocate several screen

parent 4641c5b3
import React from 'react'; import React from 'react';
import renderer from 'react-test-renderer'; import renderer from 'react-test-renderer';
import configureStore from 'redux-mock-store';
import Sidebar from '../../../../app/ui/components/sidebar/Sidebar'; import Sidebar from '../../../../app/ui/components/sidebar/Sidebar';
import reducer from '../../../../app/reducers';
const mockNavigation = {
navigate: jest.fn(),
};
describe('Sidebar component', () => { 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', () => { it('renders correctly', () => {
const tree = renderer 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(); .toJSON();
expect(tree).toMatchSnapshot(); expect(tree).toMatchSnapshot();
}); });
}); });
\ No newline at end of file
...@@ -165,7 +165,7 @@ exports[`Sidebar component renders correctly 1`] = ` ...@@ -165,7 +165,7 @@ exports[`Sidebar component renders correctly 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#313131", "color": "#E62272",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
...@@ -196,7 +196,7 @@ exports[`Sidebar component renders correctly 1`] = ` ...@@ -196,7 +196,7 @@ exports[`Sidebar component renders correctly 1`] = `
"fontWeight": "600", "fontWeight": "600",
}, },
Object { Object {
"color": "#313131", "color": "#E62272",
}, },
] ]
} }
......
...@@ -6,17 +6,17 @@ import { ...@@ -6,17 +6,17 @@ import {
DrawerActions, DrawerActions,
} from 'react-navigation'; } from 'react-navigation';
import Login from './ui/screens/user/Login'; import Login from './ui/screens/login/LoginScreenContainer';
import Welcome from './ui/screens/welcome/Welcome'; import Welcome from './ui/screens/welcome/WelcomeScreenContainer';
import Event from './ui/screens/events/Event'; import Event from './ui/screens/events/EventScreenContainer';
import Calendar from './ui/screens/events/Calendar'; import Calendar from './ui/screens/events/CalendarScreenContainer';
import Profile from './ui/screens/user/Profile'; import Profile from './ui/screens/profile/ProfileScreenContainer';
import Pizza from './ui/screens/pizza/Pizza'; import Pizza from './ui/screens/pizza/PizzaScreenContainer';
import Registration from './ui/screens/events/Registration'; import Registration from './ui/screens/events/RegistrationScreenContainer';
import MemberList from './ui/screens/memberList/MemberList'; import MemberList from './ui/screens/memberList/MemberListScreenContainer';
import SplashScreen from './ui/screens/splash/SplashScreen'; import SplashScreen from './ui/screens/splash/SplashScreen';
import Settings from './ui/screens/settings/Settings'; import Settings from './ui/screens/settings/SettingsScreenContainer';
import Sidebar from './ui/components/sidebar/Sidebar'; import Sidebar from './ui/components/sidebar/SidebarContainer';
const MainNavigator = createDrawerNavigator({ const MainNavigator = createDrawerNavigator({
Welcome, Welcome,
......
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);
...@@ -4,16 +4,9 @@ import { ...@@ -4,16 +4,9 @@ import {
Alert, Image, ImageBackground, Text, TouchableHighlight, View, Alert, Image, ImageBackground, Text, TouchableHighlight, View,
} from 'react-native'; } from 'react-native';
import LinearGradient from 'react-native-linear-gradient'; import LinearGradient from 'react-native-linear-gradient';
import { connect } from 'react-redux';
import { translate } from 'react-i18next'; 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 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'; import Colors from '../../style/Colors';
const background = require('../../../assets/img/huygens.jpg'); const background = require('../../../assets/img/huygens.jpg');
...@@ -126,18 +119,4 @@ Sidebar.propTypes = { ...@@ -126,18 +119,4 @@ Sidebar.propTypes = {
openMemberList: PropTypes.func.isRequired, openMemberList: PropTypes.func.isRequired,
}; };
const mapStateToProps = state => ({ export default translate('components/sidebar/Sidebar')(Sidebar);
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));
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);
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { import { Text, TouchableHighlight, View } from 'react-native';
View, Text, TouchableHighlight, Linking,
} from 'react-native';
import { connect } from 'react-redux';
import { translate } from 'react-i18next'; import { translate } from 'react-i18next';
import Moment from 'moment'; import Moment from 'moment';
import * as eventActions from '../../../actions/event';
import styles from './style/CalendarItem'; import styles from './style/CalendarItem';
const getEventInfo = (event, t) => { const getEventInfo = (event, t) => {
...@@ -22,7 +17,7 @@ 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}`; return `${Moment(event.start).format('HH:mm')} - ${Moment(event.end).format('HH:mm')} | ${event.location}`;
}; };
const EventCard = props => ( const CalendarItem = props => (
<TouchableHighlight <TouchableHighlight
onPress={() => props.loadEvent(props.event)} onPress={() => props.loadEvent(props.event)}
style={styles.button} style={styles.button}
...@@ -44,7 +39,7 @@ const EventCard = props => ( ...@@ -44,7 +39,7 @@ const EventCard = props => (
</TouchableHighlight> </TouchableHighlight>
); );
EventCard.propTypes = { CalendarItem.propTypes = {
event: PropTypes.shape({ event: PropTypes.shape({
title: PropTypes.string, title: PropTypes.string,
description: PropTypes.string, description: PropTypes.string,
...@@ -62,14 +57,4 @@ EventCard.propTypes = { ...@@ -62,14 +57,4 @@ EventCard.propTypes = {
t: PropTypes.func.isRequired, t: PropTypes.func.isRequired,
}; };
const mapDispatchToProps = dispatch => ({ export default translate('screen/events/CalendarItem')(CalendarItem);
loadEvent: (event) => {
if (event.partner) {
Linking.openURL(event.url);
} else {
dispatch(eventActions.event(event.pk));
}
},
});
export default connect(() => ({}), mapDispatchToProps)(translate('screen/events/CalendarItem')(EventCard));
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);
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { import {
Text, View, SectionList, ScrollView, RefreshControl, RefreshControl, ScrollView, SectionList, Text, View,
} from 'react-native'; } from 'react-native';
import { connect } from 'react-redux';
import { translate } from 'react-i18next'; import { translate } from 'react-i18next';
import Moment from 'moment'; import Moment from 'moment';
import locale from 'react-native-locale-detector'; import locale from 'react-native-locale-detector';
import * as calendarActions from '../../../actions/calendar';
import EventCard from './CalendarItem'; import EventCard from './CalendarItem';
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 styles from './style/Calendar'; import styles from './style/CalendarScreen';
import { withStandardHeader } from '../../components/standardHeader/StandardHeader'; import { withStandardHeader } from '../../components/standardHeader/StandardHeader';
/* eslint no-param-reassign: ["error", { "props": false }] */ /* eslint no-param-reassign: ["error", { "props": false }] */
...@@ -124,7 +121,7 @@ const renderItem = (item) => { ...@@ -124,7 +121,7 @@ const renderItem = (item) => {
); );
}; };
class Calendar extends Component { class CalendarScreen extends Component {
componentDidMount() { componentDidMount() {
this.props.refresh(); this.props.refresh();
} }
...@@ -188,7 +185,7 @@ class Calendar extends Component { ...@@ -188,7 +185,7 @@ class Calendar extends Component {
} }
} }
Calendar.propTypes = { CalendarScreen.propTypes = {
eventList: PropTypes.arrayOf(PropTypes.shape({ eventList: PropTypes.arrayOf(PropTypes.shape({
pk: PropTypes.number, pk: PropTypes.number,
title: PropTypes.string, title: PropTypes.string,
...@@ -208,14 +205,4 @@ Calendar.propTypes = { ...@@ -208,14 +205,4 @@ Calendar.propTypes = {
t: PropTypes.func.isRequired, t: PropTypes.func.isRequired,
}; };
const mapStateToProps = state => ({ export default translate('screens/events/Calendar')(withStandardHeader(CalendarScreen, true));
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)));
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);
...@@ -5,33 +5,27 @@ import { ...@@ -5,33 +5,27 @@ import {
FlatList, FlatList,
Image, Image,
Linking, Linking,
Platform,
RefreshControl, RefreshControl,
ScrollView, ScrollView,
Text, Text,
TouchableHighlight, TouchableHighlight,
View, View,
} from 'react-native'; } from 'react-native';
import { connect } from 'react-redux';
import { translate } from 'react-i18next'; import { translate } from 'react-i18next';
import Moment from 'moment'; import Moment from 'moment';
import HTML from 'react-native-render-html'; import HTML from 'react-native-render-html';
import styles, { memberSize } from './style/Event'; import styles, { memberSize } from './style/EventScreen';
import MemberView from '../../components/memberView/MemberView'; import MemberView from '../../components/memberView/MemberViewContainer';
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 Colors from '../../style/Colors'; import Colors from '../../style/Colors';
import { termsAndConditionsUrl } from '../../../utils/url'; 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 Button from '../../components/button/Button';
import { withStandardHeader } from '../../components/standardHeader/StandardHeader'; import { withStandardHeader } from '../../components/standardHeader/StandardHeader';
class Event extends Component { class EventScreen extends Component {
cancelPrompt = (pk) => { cancelPrompt = (pk) => {
const { data, t, cancel } = this.props; const { data, t, cancel } = this.props;
const cancelDeadlineDate = new Date(data.cancel_deadline); const cancelDeadlineDate = new Date(data.cancel_deadline);
...@@ -429,7 +423,7 @@ Pizza: ...@@ -429,7 +423,7 @@ Pizza:
} }
} }
Event.propTypes = { EventScreen.propTypes = {
data: PropTypes.shape({ data: PropTypes.shape({
pk: PropTypes.number.isRequired, pk: PropTypes.number.isRequired,
title: PropTypes.string.isRequired, title: PropTypes.string.isRequired,
...@@ -480,20 +474,4 @@ Event.propTypes = { ...@@ -480,20 +474,4 @@ Event.propTypes = {
t: PropTypes.func.isRequired, t: PropTypes.func.isRequired,
}; };
const mapStateToProps = state => ({ export default translate('screens/events/Event')(withStandardHeader(EventScreen));
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)));
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);
...@@ -9,20 +9,17 @@ import { ...@@ -9,20 +9,17 @@ import {
TextInput, TextInput,
View, View,
} from 'react-native'; } from 'react-native';
import { connect } from 'react-redux';
import { translate } from 'react-i18next'; import { translate } from 'react-i18next';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styles from './style/Registration'; import styles from './style/RegistrationScreen';
import Colors from '../../style/Colors'; import Colors from '../../style/Colors';
import ErrorScreen from '../../components/errorScreen/ErrorScreen'; import ErrorScreen from '../../components/errorScreen/ErrorScreen';
import * as registrationActions from '../../../actions/registration';
import Button from '../../components/button/Button'; import Button from '../../components/button/Button';
import { withStandardHeader } from '../../components/standardHeader/StandardHeader'; import { withStandardHeader } from '../../components/standardHeader/StandardHeader';
class Registration extends Component { class RegistrationScreen extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {}; this.state = {};
...@@ -171,7 +168,7 @@ class Registration extends Component { ...@@ -171,7 +168,7 @@ class Registration extends Component {
} }
} }
Registration.propTypes = { RegistrationScreen.propTypes = {
registration: PropTypes.number.isRequired, registration: PropTypes.number.isRequired,
fields: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types fields: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
status: PropTypes.string.isRequired, status: PropTypes.string.isRequired,
...@@ -179,14 +176,4 @@ Registration.propTypes = { ...@@ -179,14 +176,4 @@ Registration.propTypes = {
t: PropTypes.func.isRequired, t: PropTypes.func.isRequired,
}; };
const mapStateToProps = state => ({ export default translate('screens/events/Registration')(withStandardHeader(RegistrationScreen));
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)));
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);
...@@ -3,22 +3,18 @@ import PropTypes from 'prop-types'; ...@@ -3,22 +3,18 @@ import PropTypes from 'prop-types';
import { import {
ActivityIndicator, ActivityIndicator,
Image, Image,
Keyboard,
KeyboardAvoidingView, KeyboardAvoidingView,
LayoutAnimation,
Linking, Linking,