Style event details

app/app.js

 import React, { Component } from 'react';
 import { AsyncStorage } from 'react-native';
-import { createStore, applyMiddleware, combineReducers } from 'redux';
+import { applyMiddleware, combineReducers, createStore } from 'redux';
 import { Provider } from 'react-redux';
 import thunk from 'redux-thunk';
+import Moment from 'moment';
+import 'moment/locale/nl';
 
 import * as reducers from './reducers';
 import ReduxNavigator from './components/navigator';
@@ -25,6 +27,7 @@ const pairsToObject = (obj, pair) => {
 
 class Main extends Component {
   componentDidMount() {
+    Moment.locale('nl');
     AsyncStorage.multiGet([USERNAMEKEY, TOKENKEY, DISPLAYNAMEKEY, PHOTOKEY])
       .then(
         (result) => {

app/components/Event.js

 import React from 'react';
-import { View, Text } from 'react-native';
+import { ScrollView, Text, View } from 'react-native';
 import { connect } from 'react-redux';
+import Moment from 'moment';
+import 'moment/locale/nl';
 
 import styles from './style/event';
 
+const REGISTRATION_NOT_NEEDED = -1;
+const REGISTRATION_NOT_YET_OPEN = 0;
+// eslint-disable-next-line no-unused-vars
+const REGISTRATION_OPEN = 1;
+const REGISTRATION_OPEN_NO_CANCEL = 2;
+const REGISTRATION_CLOSED = 3;
+const REGISTRATION_CLOSED_CANCEL_ONLY = 4;
+
 const Event = (props) => {
   if (props.success) {
+    const eventDesc = (data) => {
+      const startDate = Moment(data.start).format('D MMM YYYY, HH:mm');
+      const endDate = Moment(data.end).format('D MMM YYYY, HH:mm');
+
+      let text = '';
+
+      text += `Van: ${startDate}\n`;
+      text += `Tot: ${endDate}\n`;
+      text += `Locatie: ${data.location}\n`;
+      text += `Prijs: €${data.price}\n`;
+      if (data.status > REGISTRATION_NOT_NEEDED) {
+        const registrationDeadline = Moment(data.registration_end).format('D MMM YYYY, HH:m');
+        const cancelDeadline = Moment(data.cancel_deadline).format('D MMM YYYY, HH:m');
+
+        text += `Aanmelddeadline: ${registrationDeadline}\n`;
+        text += `Afmelddeadline: ${cancelDeadline}\n`;
+        text += `Aantal aanmeldingen: ${data.num_participants} aanmeldingen (${data.max_participants} max)\n`;
+
+        if (data.user_registration) {
+          let registrationState;
+          if (data.user_registration.is_late_cancellation) {
+            registrationState = 'Je bent afgemeld na de afmelddeadline';
+          } else if (data.user_registration.queue_position === null) {
+            registrationState = 'Je bent aangemeld';
+          } else if (data.user_registration.queue_position > 0) {
+            registrationState = `Wachtlijst positie ${data.user_registration.queue_position}`;
+          } else {
+            registrationState = 'Je bent afgemeld';
+          }
+
+          text += `Aanmeldstatus: ${registrationState}`;
+        }
+      }
+
+      return text;
+    };
+
+    const eventInfo = (event) => {
+      let text = '';
+      if (event.status === REGISTRATION_NOT_YET_OPEN) {
+        const registrationStart = Moment(event.registration_start).format('D MMM YYYY, HH:m');
+        text = `Aanmelden opent ${registrationStart}`;
+      } else if (event.status === REGISTRATION_CLOSED ||
+        event.status === REGISTRATION_CLOSED_CANCEL_ONLY) {
+        text = 'Aanmelden is niet meer mogelijk';
+      } else if (event.status === REGISTRATION_NOT_NEEDED) {
+        text = 'Geen aanmelding vereist';
+        if (event.no_registration_message) {
+          text = event.no_registration_message;
+        }
+      }
+
+      if ((event.status === REGISTRATION_OPEN_NO_CANCEL || event.status === REGISTRATION_CLOSED) &&
+        !event.user_registration.is_cancelled && event.fine > 0 &&
+        event.user_registration.queue_position === null) {
+        text += `Afmelden is niet meer mogelijk zonder de volledige kosten van €${event.fine} te ` +
+        'betalen. Let op: je kunt je hierna niet meer aanmelden.';
+      }
+
+      if (text.length > 0) {
+        return (<Text style={styles.registrationText}>{text}</Text>);
+      }
+      return (<View />);
+    };
+
+// eslint-disable-next-line arrow-body-style
+    const eventActions = () => {
+      // Needed once registration on server implemented
+    // if (event.registration_allowed) {
+    //   if ((event.user_registration === null || event.user_registration.is_cancelled) &&
+    //     (event.status === REGISTRATION_OPEN || event.status === REGISTRATION_OPEN_NO_CANCEL)) {
+    //     const text = event.max_participants < event.num_participants ?
+    //                  'Aanmelden' : 'Zet me op de wachtlijst';
+    //     return (
+    //       <View style={styles.registrationActions}>
+    //         <Button color={colors.magenta} title={text} onPress={() => {}} />
+    //       </View>
+    //     );
+    //   } else if (event.user_registration && !event.user_registration.is_cancelled &&
+    //     event.status !== REGISTRATION_NOT_NEEDED && event.status !== REGISTRATION_NOT_YET_OPEN) {
+    //     if ((event.status === REGISTRATION_OPEN || event.status === REGISTRATION_OPEN_NO_CANCEL)
+    //       && event.user_registration && !event.user_registration.is_cancelled
+    //       && event.has_fields) {
+    //       return (
+    //         <View style={styles.registrationActions}>
+    //           <Button
+    //             color={colors.magenta} title="Aanmelding bijwerken" onPress={() => {}}
+    //           />
+    //           <View style={styles.secondButtonMargin}>
+    //             <Button color={colors.magenta} title="Afmelden" onPress={() => {}} />
+    //           </View>
+    //         </View>
+    //       );
+    //     }
+    //     return (
+    //       <View style={styles.registrationActions}>
+    //         <Button color={colors.magenta} title="Afmelden" onPress={() => {}} />
+    //       </View>
+    //     );
+    //   }
+    // }
+
+      return (<View />);
+    };
+
     return (
-      <View>
+      <ScrollView contentContainerStyle={styles.eventView}>
         <Text style={styles.titleText}>{props.data.title}</Text>
-        <Text>{props.data.description}</Text>
-        <Text>Locatie: {props.data.location}</Text>
-        <Text>Prijs: {props.data.price}</Text>
-        <Text>Boete: {props.data.fine}</Text>
-      </View>
+        <Text style={styles.infoText}>
+          {eventDesc(props.data)}
+        </Text>
+        {eventActions(props.data)}
+        {eventInfo(props.data)}
+        {/* <Button color={colors.magenta} style={styles.registerButton}
+         title="Aanmelden" onPress={() => {}} />*/}
+        <View style={styles.divider} />
+        <Text style={styles.descText}>{props.data.description}</Text>
+      </ScrollView>
     );
   }
   return (
@@ -27,13 +147,25 @@ Event.propTypes = {
     description: React.PropTypes.string.isRequired,
     start: React.PropTypes.string.isRequired,
     end: React.PropTypes.string.isRequired,
-    organiser: React.PropTypes.oneOfType([
-      React.PropTypes.number,
-      React.PropTypes.string,
-    ]).isRequired,
+    organiser: React.PropTypes.number.isRequired,
     location: React.PropTypes.string.isRequired,
-    price: React.PropTypes.string.isRequired,
-    fine: React.PropTypes.string.isRequired,
+    status: React.PropTypes.number.isRequired,
+    registration_allowed: React.PropTypes.bool.isRequired,
+    has_fields: React.PropTypes.bool.isRequired,
+    registration_start: React.PropTypes.string,
+    registration_end: React.PropTypes.string,
+    cancel_deadline: React.PropTypes.string,
+    max_participants: React.PropTypes.number,
+    num_participants: React.PropTypes.number,
+    price: React.PropTypes.string,
+    fine: React.PropTypes.string,
+    user_registration: React.PropTypes.shape({
+      registered_on: React.PropTypes.string,
+      queue_position: React.PropTypes.number,
+      is_cancelled: React.PropTypes.bool,
+      is_late_cancellation: React.PropTypes.bool,
+    }),
+    no_registration_message: React.PropTypes.string,
   }).isRequired,
   success: React.PropTypes.bool.isRequired,
 };

app/components/style/event.js

-import { StyleSheet } from 'react-native';
+import { create, colors } from '../../style';
 
-import { colors } from '../../style';
-
-const styles = StyleSheet.create({
+const styles = create({
+  eventView: {
+    padding: 16,
+  },
   titleText: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    color: colors.darkMagenta,
+    marginBottom: 16,
+    fontFamily: 'sans-serif-medium',
+    fontSize: 20,
+    lineHeight: 20.0,
+    color: colors.darkGrey,
+  },
+  infoText: {
+    fontFamily: 'sans-serif-medium',
+    fontSize: 14,
+    lineHeight: 22.0,
+    color: colors.darkGrey,
+  },
+  registrationText: {
+    marginTop: 16,
+  },
+  registrationActions: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    marginTop: 16,
+  },
+  secondButtonMargin: {
+    marginLeft: 16,
+  },
+  descText: {
+    fontSize: 14,
+    lineHeight: 24.0,
+    color: colors.black,
+  },
+  divider: {
+    marginLeft: -16,
+    marginRight: -16,
+    marginTop: 16,
+    marginBottom: 16,
+    alignSelf: 'stretch',
+    borderStyle: 'solid',
+    borderWidth: 1,
+    borderColor: colors.dividerGrey,
+  },
+  italicText: {
+    fontStyle: 'italic',
   },
 });
 

app/reducers/events.js

@@ -2,14 +2,16 @@ import * as types from '../actions/actionTypes';
 
 const initialState = {
   data: {
+    pk: -1,
     title: '',
     description: '',
     start: '',
     end: '',
-    organiser: '',
+    organiser: -1,
+    category: '',
     location: '',
-    price: '',
-    fine: '',
+    status: -1,
+    registered: false,
   },
   success: false,
 };

app/style.js

+import { StyleSheet, Platform } from 'react-native';
+
 export const colors = {
   magenta: '#E62272',
   darkMagenta: '#C2185B',
@@ -5,4 +7,42 @@ export const colors = {
   black: '#000000',
   lightGray: '#BBBBBB',
   textColour: '#313131',
+  darkGrey: '#373737',
+  dividerGrey: 'rgba(0, 0, 0, 0.12)',
 };
+
+export function create(styles) {
+  const platformStyles = {};
+  Object.keys(styles).forEach((name) => {
+// eslint-disable-next-line prefer-const
+    let { ios, android, ...style } = { ...styles[name] };
+    if (ios && Platform.OS === 'ios') {
+      style = { ...style, ...ios };
+    }
+    if (android && Platform.OS === 'android') {
+      style = { ...style, ...android };
+    }
+
+    if (name === 'ios' && Platform.OS === 'ios') {
+      Object.keys(style).forEach((styleName) => {
+        if (platformStyles[styleName]) {
+          platformStyles[styleName] = { ...platformStyles[styleName], ...style[styleName] };
+        }
+      });
+    }
+
+    if (name === 'android' && Platform.OS === 'android') {
+      Object.keys(style).forEach((styleName) => {
+        if (platformStyles[styleName]) {
+          platformStyles[styleName] = { ...platformStyles[styleName], ...style[styleName] };
+        }
+      });
+    }
+
+    if (name !== 'ios' && name !== 'android') {
+      platformStyles[name] = style;
+    }
+  });
+
+  return StyleSheet.create(platformStyles);
+}

package.json

@@ -18,6 +18,7 @@
     ]
   },
   "dependencies": {
+    "moment": "^2.18.1",
     "prop-types": "^15.5.8",
     "react": "16.0.0-alpha.6",
     "react-native": "0.44.0",

yarn.lock

@@ -3617,7 +3617,7 @@ mkdirp@0.x.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0:
   dependencies:
     minimist "0.0.8"
 
-moment@2.x.x:
+moment@2.x.x, moment@^2.18.1:
   version "2.18.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"