Implemented new design for welcome screen

app/actions/actionTypes.js

@@ -10,3 +10,4 @@ export const CALENDARERROR = 'CALENDARERROR';
 export const LOADEVENTSUCCESS = 'LOADEVENTSUCCESS';
 export const LOADEVENTFAILURE = 'LOADEVENTFAILURE';
 export const RESETLOGINSTATE = 'RESETLOGINSTATE';
+export const WELCOME = 'WELCOME';

app/actions/login.js

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

app/components/EventDetailCard.js

+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);

app/components/Welcome.js

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

app/components/style/eventDetailCard.js

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

app/components/style/welcome.js

+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

app/reducers/index.js

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

app/reducers/welcome.js

+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;
+  }
+}