Added support for pizza, registration status and Moment

app/actions/login.js

@@ -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) {

app/components/Calendar.js

@@ -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,

app/components/EventCard.js

@@ -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,

app/components/EventDetailCard.js

 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,

app/components/Welcome.js

 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,

app/components/style/eventDetailCard.js

@@ -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;

app/components/style/welcome.js

@@ -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;