Commit 5065dde9 authored by Gijs Hendriksen's avatar Gijs Hendriksen Committed by Wietse Kuipers
Browse files

Implemented new design for welcome screen

parent 9bfc868e
......@@ -10,3 +10,4 @@ export const CALENDARERROR = 'CALENDARERROR';
export const LOADEVENTSUCCESS = 'LOADEVENTSUCCESS';
export const LOADEVENTFAILURE = 'LOADEVENTFAILURE';
export const RESETLOGINSTATE = 'RESETLOGINSTATE';
export const WELCOME = 'WELCOME';
......@@ -45,6 +45,36 @@ export function logoutSuccess() {
};
}
export function welcome(eventList) {
return {
type: types.WELCOME,
eventList,
}
}
export function retrieveShortlist(token) {
return dispatch => {
const data = {
method: 'GET',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
Authorization: `Token ${token}`,
},
};
return fetch(`${url}/api/events/shortlist/`, data)
.then(
response => response.json()
)
.then(
responseJson => dispatch(welcome(responseJson))
)
.catch(
() => dispatch(welcome([])),
);
}
}
function getUserInfo(token) {
const data = {
......
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { connect } from 'react-redux';
import * as actions from '../actions/events';
import styles from './style/eventDetailCard';
/**
* Extracts time in hh:mm format from a Date object
* TODO replace with Moment
*/
const dateToTime = date => (
`${(`0${date.getHours()}`).slice(-2)}:${(`0${date.getMinutes()}`).slice(-2)}`
);
const EventDetailCard = (props) => {
const startTime = dateToTime(new Date(props.event.start));
const endTime = dateToTime(new Date(props.event.end));
return (
<View style={styles.card}>
<Text style={styles.eventTitle}>{props.event.title}</Text>
<Text style={styles.eventInfo}>{`${startTime} - ${endTime} | ${props.event.location}`}</Text>
<Text
numberOfLines={2}
style={styles.description}
>{props.event.description}</Text>
<View style={styles.buttonList}>
<TouchableOpacity
onPress={() => props.loadEvent(props.event.pk, props.token)}
style={styles.button}
>
<Text
style={styles.moreInfo}
>MEER INFO</Text>
</TouchableOpacity>
</View>
</View>
);
};
EventDetailCard.propTypes = {
event: React.PropTypes.shape({
title: React.PropTypes.string,
description: React.PropTypes.string,
start: React.PropTypes.string,
end: React.PropTypes.string,
location: React.PropTypes.string,
price: React.PropTypes.string,
pk: React.PropTypes.number,
registered: React.PropTypes.bool,
}).isRequired,
loadEvent: React.PropTypes.func.isRequired,
token: React.PropTypes.string.isRequired,
};
const mapStateToProps = state => ({
token: state.session.token,
});
const mapDispatchToProps = dispatch => ({
loadEvent: (pk, token) => dispatch(actions.loadEvent(pk, token)),
});
export default connect(mapStateToProps, mapDispatchToProps)(EventDetailCard);
import React from 'react';
import { View, Text, Button } from 'react-native';
import React, { Component } from 'react';
import { View, Text, Button, SectionList, TouchableOpacity } from 'react-native';
import { connect } from 'react-redux';
import { logout } from '../actions/login';
import EventDetailCard from './EventDetailCard';
const Welcome = props =>
<View>
<Text>Welcome!</Text>
<Button title="Uitloggen" onPress={() => props.logout()} />
</View>;
import { retrieveShortlist } from '../actions/login';
import { navigate } from '../actions/navigation';
import styles from './style/welcome';
// TODO add Moment support
const eventListToSections = eventLists => {
return eventLists.map(eventList => ({
key: eventList[0].start,
data: eventList,
}));
};
const Footer = props => (
<TouchableOpacity
onPress={() => props.navigate('eventList')}
style={styles.footer}
>
<Text style={styles.footerText}>BEKIJK DE GEHELE AGENDA</Text>
</TouchableOpacity>
);
Footer.propTypes = {
navigate: React.PropTypes.func.isRequired,
};
const mapDispatchToPropsFooter = dispatch => ({
navigate: scene => dispatch(navigate(scene)),
});
const FooterComponent = connect(() => ({}), mapDispatchToPropsFooter)(Footer);
class Welcome extends Component {
constructor(props) {
super(props);
this.state = {
refreshing: false,
};
}
componentDidMount() {
this.handleRefresh();
}
handleRefresh = () => {
this.setState({ refreshing: true });
this.props.retrieveShortlist(this.props.token)
.then(() => this.setState({ refreshing: false }));
};
render() {
if (this.props.eventList.length == 0) {
return (
<View>
<Text>
No events found!
</Text>
</View>
);
}
return (
<View>
<SectionList
style={styles.sectionList}
renderItem={item => <EventDetailCard event={item.item} />}
renderSectionHeader={
itemHeader => <Text style={styles.sectionHeader}>{itemHeader.section.key}</Text>
}
sections={eventListToSections(this.props.eventList)}
keyExtractor={event => event.pk}
stickySectionHeadersEnabled
onRefresh={this.handleRefresh}
refreshing={this.state.refreshing}
ListFooterComponent={FooterComponent}
/>
</View>
);
}
}
Welcome.propTypes = {
logout: React.PropTypes.func.isRequired,
eventList: React.PropTypes.arrayOf(React.PropTypes.arrayOf(React.PropTypes.shape({
title: React.PropTypes.string,
description: React.PropTypes.string,
start: React.PropTypes.string,
end: React.PropTypes.string,
location: React.PropTypes.string,
price: React.PropTypes.string,
pk: React.PropTypes.number,
registered: React.PropTypes.bool,
}))).isRequired,
token: React.PropTypes.string.isRequired,
retrieveShortlist: React.PropTypes.func.isRequired,
};
const mapStateToProps = state => ({
eventList: state.welcome.eventList,
token: state.session.token,
});
const mapDispatchToProps = dispatch => ({
logout: () => dispatch(logout()),
retrieveShortlist: token => dispatch(retrieveShortlist(token)),
});
export default connect(() => ({}), mapDispatchToProps)(Welcome);
export default connect(mapStateToProps, mapDispatchToProps)(Welcome);
import { StyleSheet } from 'react-native';
import { colors } from '../../style';
const styles = StyleSheet.create({
card: {
backgroundColor: colors.white,
borderRadius: 2,
elevation: 2,
padding: 16,
marginTop: 5,
marginBottom: 5,
marginLeft: 10,
marginRight: 10,
},
eventTitle: {
fontFamily: 'sans-serif-medium',
fontSize: 14,
lineHeight: 24,
color: colors.black,
opacity: 0.8
},
eventInfo: {
fontFamily: 'sans-serif-medium',
fontSize: 14,
lineHeight: 24,
color: colors.black,
opacity: 0.5,
},
description: {
fontFamily: 'sans-serif-medium',
fontSize: 14,
lineHeight: 24,
color: colors.black,
opacity: 0.8,
marginTop: 8,
},
buttonList: {
flexDirection: 'row',
marginTop: 28,
},
button: {
backgroundColor: colors.white,
},
moreInfo: {
fontFamily: 'sans-serif-medium',
fontSize: 14,
color: colors.black,
opacity: 0.5,
},
});
export default styles;
import { StyleSheet, Dimensions } from 'react-native';
import { TOTAL_BAR_HEIGHT } from './navigator';
import { colors } from '../../style';
const styles = StyleSheet.create({
sectionList: {
backgroundColor: colors.background,
height: Dimensions.get('window').height - TOTAL_BAR_HEIGHT,
paddingTop: 11,
paddingBottom: 11,
},
sectionHeader: {
backgroundColor: colors.background,
fontFamily: 'sans-serif-medium',
fontSize: 16,
color: colors.textColour,
padding: 16,
},
footer: {
alignSelf: 'center',
marginTop: 11,
marginBottom: 16,
padding: 10,
},
footerText: {
fontFamily: 'sans-serif-medium',
fontSize: 14,
color: colors.magenta,
}
});
export default styles;
\ No newline at end of file
......@@ -2,10 +2,12 @@ import session from './session';
import navigation from './navigation';
import events from './events';
import calendar from './calendar';
import welcome from './welcome';
export {
session,
navigation,
events,
calendar,
welcome,
};
import * as types from '../actions/actionTypes';
const initialState = {
eventList: [],
};
export default function welcome(state = initialState, action = {}) {
switch (action.type) {
case types.WELCOME:
return {
eventList: action.eventList,
};
default:
return state;
}
}
Supports Markdown
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