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 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();
});
......
......@@ -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",
},
]
}
......
......@@ -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,
......
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 {
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);
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 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);
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 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));
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 {
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));
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 {
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));
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';
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);
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);
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