Added event component

app/actions/actionTypes.js

@@ -8,4 +8,5 @@ export const LOGOUT = 'LOGOUT';
 export const OPENDRAWER = 'OPENDRAWER';
 export const CALENDARRETREIVED = 'CALENDARRETREIVED';
 export const CALENDARERROR = 'CALENDARERROR';
-
+export const LOADEVENTSUCCESS = 'LOADEVENTSUCCESS';
+export const LOADEVENTFAILURE = 'LOADEVENTFAILURE';

app/actions/events.js

+import { AsyncStorage } from 'react-native';
+import * as types from './actionTypes';
+import { navigate } from './navigation';
+
+const TOKENKEY = '@MyStore:token';
+
+export function success(data) {
+  return {
+    type: types.LOADEVENTSUCCESS,
+    data,
+  };
+}
+
+export function fail() {
+  return {
+    type: types.LOADEVENTFAILURE,
+  };
+}
+
+export function loadEvent(id) {
+  return (dispatch) => {
+    AsyncStorage.getItem(TOKENKEY)
+      .then(
+        (token) => {
+          const data = {
+            method: 'GET',
+            headers: {
+              Accept: 'application/json',
+              'Content-Type': 'application/json',
+              Authorization: `Token ${token}`,
+            },
+          };
+          return fetch(`http://localhost:8000/api/events/data/?event_id=${id}`, data)
+            .then(
+              response => response.json(),
+            )
+            .then(
+              (response) => {
+                dispatch(success(response));
+              },
+            )
+            .catch(
+              () => {
+                dispatch(fail());
+              },
+            );
+        },
+      )
+      .catch(
+        () => {
+          dispatch(fail());
+        },
+      );
+    dispatch(navigate('event'));
+  };
+}

app/components/Event.js

 import React from 'react';
 import { View, Text } from 'react-native';
+import { connect } from 'react-redux';
 
-const Event = event =>
-  <View>
-    <Text> <b>{event.title}</b> </Text>
-    <Text> {new Date(event.start).toISOString().substring(0, 10)}</Text>
-    <i>{event.description}</i>
-    <Text>-----------------------------------------</Text>
-  </View>
-;
+const Event = (props) => {
+  if (props.success) {
+    return (
+      <View>
+        <Text><h1>{props.data.title}</h1></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>
+    );
+  }
+  return (
+    <Text>Kon het evenement niet laden...</Text>
+  );
+};
 
-export default Event;
+Event.propTypes = {
+  data: React.PropTypes.shape({
+    title: React.PropTypes.string.isRequired,
+    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,
+    location: React.PropTypes.string.isRequired,
+    price: React.PropTypes.string.isRequired,
+    fine: React.PropTypes.string.isRequired,
+  }).isRequired,
+  success: React.PropTypes.bool.isRequired,
+};
+
+const mapStateToProps = state => ({
+  data: state.events.data,
+  success: state.events.success,
+});
+
+export default connect(mapStateToProps, () => ({}))(Event);

app/components/EventCard.js

 import React from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, Button } from 'react-native';
 import { connect } from 'react-redux';
+import * as actions from '../actions/events';
 
 const EventCard = props =>
   <View>
@@ -8,6 +9,7 @@ const EventCard = props =>
     <Text> {new Date(props.event.start).toISOString().substring(0, 10)}</Text>
     <i>{props.event.description}</i>
     <Text>-----------------------------------------</Text>
+    <Button title="Openen" onPress={() => props.loadEvent(props.event.id)} />
   </View>
 ;
 
@@ -20,6 +22,11 @@ EventCard.propTypes = {
     price: React.PropTypes.string,
     id: React.PropTypes.number,
   }).isRequired,
+  loadEvent: React.PropTypes.func.isRequired,
 };
 
-export default connect(() => ({}), () => ({}))(EventCard);
+const mapDispatchToProps = dispatch => ({
+  loadEvent: id => dispatch(actions.loadEvent(id)),
+});
+
+export default connect(() => ({}), mapDispatchToProps)(EventCard);

app/components/Login.js

 import React, { Component } from 'react';
 import { View, TextInput, Button, Text } from 'react-native';
 import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
 
 import * as actions from '../actions/login';
 
@@ -48,8 +47,8 @@ class Login extends Component {
 }
 
 Login.propTypes = {
-  loginState: PropTypes.string.isRequired,
-  login: PropTypes.func.isRequired,
+  loginState: React.PropTypes.string.isRequired,
+  login: React.PropTypes.func.isRequired,
 };
 
 const mapStateToProps = state => state.login;

app/components/Sidebar.js

 import React from 'react';
 import { Text, View } from 'react-native';
 import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
 import styles from '../style';
 
 import * as actions from '../actions/navigation';
@@ -17,7 +16,7 @@ const Sidebar = props =>
 ;
 
 Sidebar.propTypes = {
-  navigate: PropTypes.func.isRequired,
+  navigate: React.PropTypes.func.isRequired,
 };
 
 const mapDispatchToProps = dispatch => ({

app/components/Welcome.js

 import React from 'react';
 import { View, Text, Button } from 'react-native';
 import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
 import { logout } from '../actions/login';
 
 const Welcome = props =>
@@ -11,7 +10,7 @@ const Welcome = props =>
   </View>;
 
 Welcome.propTypes = {
-  logout: PropTypes.func.isRequired,
+  logout: React.PropTypes.func.isRequired,
 };
 
 const mapDispatchToProps = dispatch => ({

app/components/navigator.js

 import React from 'react';
 import { connect } from 'react-redux';
 import Drawer from 'react-native-drawer';
-import PropTypes from 'prop-types';
 import Login from './Login';
 import Welcome from './Welcome';
 import Sidebar from './Sidebar';
+import Event from './Event';
 import Calendar from './Calendar';
 
 import * as actions from '../actions/navigation';
@@ -23,6 +23,8 @@ const sceneToComponent = (scene) => {
   switch (scene) {
     case 'welcome':
       return <Welcome />;
+    case 'event':
+      return <Event />;
     case 'eventList':
       return <Calendar />;
     default:
@@ -53,10 +55,10 @@ const ReduxNavigator = (props) => {
 };
 
 ReduxNavigator.propTypes = {
-  currentScene: PropTypes.string.isRequired,
-  loggedIn: PropTypes.bool.isRequired,
-  drawerOpen: PropTypes.bool.isRequired,
-  updateDrawer: PropTypes.func.isRequired,
+  currentScene: React.PropTypes.string.isRequired,
+  loggedIn: React.PropTypes.bool.isRequired,
+  drawerOpen: React.PropTypes.bool.isRequired,
+  updateDrawer: React.PropTypes.func.isRequired,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(ReduxNavigator);

app/reducers/events.js

+import * as types from '../actions/actionTypes';
+
+const initialState = {
+  data: {
+    title: '',
+    description: '',
+    start: '',
+    end: '',
+    organiser: '',
+    location: '',
+    price: '',
+    fine: '',
+  },
+  success: false,
+};
+
+export default function loadEvent(state = initialState, action = {}) {
+  switch (action.type) {
+    case types.LOADEVENTSUCCESS:
+      return {
+        data: action.data,
+        success: true,
+      };
+    case types.LOADEVENTFAILURE:
+      return {
+        ...state,
+        success: false,
+      };
+    default:
+      return state;
+  }
+}

app/reducers/index.js

 import login from './login';
 import navigation from './navigation';
+import events from './events';
 import calendar from './calendar';
 
 export {
   login,
   navigation,
+  events,
   calendar,
 };