Commit 1c36bf20 authored by Gijs Hendriksen's avatar Gijs Hendriksen Committed by Wietse Kuipers
Browse files

Added support for pizza, registration status and Moment

parent 5065dde9
......@@ -49,11 +49,11 @@ export function welcome(eventList) {
return {
type: types.WELCOME,
eventList,
}
};
}
export function retrieveShortlist(token) {
return dispatch => {
return (dispatch) => {
const data = {
method: 'GET',
headers: {
......@@ -65,15 +65,15 @@ export function retrieveShortlist(token) {
return fetch(`${url}/api/events/shortlist/`, data)
.then(
response => response.json()
response => response.json(),
)
.then(
responseJson => dispatch(welcome(responseJson))
responseJson => dispatch(welcome(responseJson)),
)
.catch(
() => dispatch(welcome([])),
);
}
};
}
function getUserInfo(token) {
......
......@@ -170,6 +170,7 @@ Calendar.propTypes = {
location: React.PropTypes.string,
price: React.PropTypes.string,
registered: React.PropTypes.bool,
pizza: React.PropTypes.bool,
})).isRequired,
calendarFetched: React.PropTypes.bool.isRequired,
retrieveCalendar: React.PropTypes.func.isRequired,
......
......@@ -42,6 +42,7 @@ EventCard.propTypes = {
price: React.PropTypes.string,
pk: React.PropTypes.number,
registered: React.PropTypes.bool,
pizza: React.PropTypes.bool,
}).isRequired,
loadEvent: React.PropTypes.func.isRequired,
token: React.PropTypes.string.isRequired,
......
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { connect } from 'react-redux';
import Moment from 'moment';
import 'moment/locale/nl';
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));
const getInfo = (event) => {
Moment.locale('nl');
const start = Moment(event.start);
const end = Moment(event.end);
if (start.isSame(end, 'day')) {
return (
<Text style={styles.eventInfo}>
{`${start.format('HH:mm')} - ${end.format('HH:mm')} | ${event.location}`}
</Text>
);
}
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}>
<View>
<Text style={styles.eventInfo}>
{`${start.format('D MMMM HH:mm')} - ${end.format('D MMMM HH:mm')}`}
</Text>
<Text style={styles.eventInfo}>{event.location}</Text>
</View>
);
};
const EventDetailCard = props => (
<View style={styles.card}>
<Text style={styles.eventTitle}>{props.event.title}</Text>
{getInfo(props.event)}
<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>
{props.event.pizza ? (
<TouchableOpacity
onPress={() => props.loadEvent(props.event.pk, props.token)}
onPress={() => console.log('NOT YET IMPLEMENTED')}
style={styles.button}
>
<Text
style={styles.moreInfo}
>MEER INFO</Text>
<Text style={styles.orderPizza}>PIZZA</Text>
</TouchableOpacity>
</View>
) : null}
</View>
);
};
{props.event.registered === null ? null : (
<View
style={[
styles.indicator,
props.event.registered ? styles.registered : styles.unregistered]}
/>
)
}
</View>
);
EventDetailCard.propTypes = {
event: React.PropTypes.shape({
......@@ -49,6 +74,7 @@ EventDetailCard.propTypes = {
price: React.PropTypes.string,
pk: React.PropTypes.number,
registered: React.PropTypes.bool,
pizza: React.PropTypes.bool,
}).isRequired,
loadEvent: React.PropTypes.func.isRequired,
token: React.PropTypes.string.isRequired,
......
import React, { Component } from 'react';
import { View, Text, Button, SectionList, TouchableOpacity } from 'react-native';
import { View, Text, SectionList, TouchableOpacity } from 'react-native';
import { connect } from 'react-redux';
import Moment from 'moment';
import 'moment/locale/nl';
import EventDetailCard from './EventDetailCard';
import { retrieveShortlist } from '../actions/login';
import { navigate } from '../actions/navigation';
import styles from './style/welcome';
// TODO add Moment support
const eventListToSections = eventLists => {
const eventListToSections = (eventLists) => {
Moment.locale('nl');
return eventLists.map(eventList => ({
key: eventList[0].start,
key: Moment(eventList[0].start).calendar(null, {
sameDay: '[Vandaag]',
nextDay: '[Morgen]',
nextWeek: 'dddd D MMMM',
lastDay: '[Gisteren]',
lastWeek: 'dddd D MMMM',
sameElse: 'dddd D MMMM',
}),
data: eventList,
}));
};
......@@ -53,7 +62,7 @@ class Welcome extends Component {
};
render() {
if (this.props.eventList.length == 0) {
if (this.props.eventList.length === 0) {
return (
<View>
<Text>
......@@ -92,6 +101,7 @@ Welcome.propTypes = {
price: React.PropTypes.string,
pk: React.PropTypes.number,
registered: React.PropTypes.bool,
pizza: React.PropTypes.bool,
}))).isRequired,
token: React.PropTypes.string.isRequired,
retrieveShortlist: React.PropTypes.func.isRequired,
......
......@@ -18,7 +18,7 @@ const styles = StyleSheet.create({
fontSize: 14,
lineHeight: 24,
color: colors.black,
opacity: 0.8
opacity: 0.8,
},
eventInfo: {
fontFamily: 'sans-serif-medium',
......@@ -41,6 +41,7 @@ const styles = StyleSheet.create({
},
button: {
backgroundColor: colors.white,
marginRight: 28,
},
moreInfo: {
fontFamily: 'sans-serif-medium',
......@@ -48,6 +49,25 @@ const styles = StyleSheet.create({
color: colors.black,
opacity: 0.5,
},
orderPizza: {
fontFamily: 'sans-serif-medium',
fontSize: 14,
color: colors.darkMagenta,
},
indicator: {
position: 'absolute',
top: 16,
right: 16,
height: 16,
width: 16,
borderRadius: 8,
},
registered: {
backgroundColor: colors.magenta,
},
unregistered: {
backgroundColor: colors.gray,
},
});
export default styles;
......@@ -26,8 +26,8 @@ const styles = StyleSheet.create({
footerText: {
fontFamily: 'sans-serif-medium',
fontSize: 14,
color: colors.magenta,
}
color: colors.darkMagenta,
},
});
export default styles;
\ No newline at end of file
export default styles;
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