Calendar retrieval fixed

app/actions/actionTypes.js

@@ -6,3 +6,6 @@ export const LOGINSUCCESS = 'LOGINSUCCESS';
 export const LOGINFAILURE = 'LOGINFAILURE';
 export const LOGOUT = 'LOGOUT';
 export const OPENDRAWER = 'OPENDRAWER';
+export const CALENDARRETREIVED = 'CALENDARRETREIVED';
+export const CALENDARERROR = 'CALENDARERROR';
+

app/actions/calendar.js

-/**
- * Created by aucke on 3/8/17.
- */
+import * as types from './actionTypes';
+
+export function calendarRetrieved(eventList) {
+  return {
+    type: types.CALENDARRETREIVED,
+    eventList:eventList
+  };
+}
+
+export function calendarNotRetrieved() {
+  return {
+    type: types.CALENDARERROR,
+  };
+}
+
+export function retrieveCalendar(){
+  return (dispatch)=> {
+    let start = new Date().toISOString().substring(0, 10);
+    let end = new Date();
+    end.setMonth(end.getMonth() + 6);
+    end = end.toISOString().substring(0, 10);
+    return fetch('http://localhost:8000/api/events?start='+start+'&end='+end)
+      .then(
+        response => response.json())
+      .then(
+        (responseJson) => {
+          console.log(responseJson);
+          return dispatch(calendarRetrieved(responseJson));
+        })
+      .catch((error) => {
+        console.log(error);
+        dispatch(calendarNotRetrieved());
+      })
+      };
+  }
\ No newline at end of file

app/components/Calendar.js

 import React from 'react';
-import { Text, View } from 'react-native';
+import { Text, View, ListView } from 'react-native';
+import { connect } from 'react-redux';
+import * as actions from '../actions/calendar';
+import Event from './Event';
 
-const Calendar = () =>
-  <View>
-    <Text>
-      Algemene Ledenvergadering
-    </Text>
-    <Text>
-      Lunchlezing Rijksoverheid
-    </Text>
-    <Text>
-      Benefietborrel
-    </Text>
-  </View>
-;
+const Calendar = (props) => {
+  if(!props.calendarFetched) {
+    props.retrieveCalendar();
+    return (
+      <View>
+        <Text>
+          No calendar retrieved!
+        </Text>
+      </View>
+    )
+  }
+  else {
+    console.log(props);
+    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
+    let events = [];
+    for (let i = 0; i < props.eventList.length; i++) {
+      events.push(Event(props.eventList[i]));
+    }
+    const dataSource = ds.cloneWithRows(events);
+    return (
+      <View>
+        <ListView
+          dataSource={dataSource}
+          renderRow={(rowData) => rowData}
+        />
+      </View>
+    );
+  }
+};
 
-export default Calendar;
+const mapStateToProps = state => state.calendar;
+const mapDispatchToProps = dispatch => ({
+  retrieveCalendar: () => dispatch(actions.retrieveCalendar()),
+});
+export default connect(mapStateToProps, mapDispatchToProps)(Calendar);

app/components/Event.js

+import React from 'react';
+import { View, Text } from 'react-native';
+
+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>
+;
+
+export default Event;
\ No newline at end of file

app/components/Sidebar.js

@@ -11,7 +11,7 @@ const Sidebar = props =>
   >
     <Text style={styles.header}>MENU</Text>
     <Text onPress={() => props.navigate('welcome')} style={styles.button} >Welcome</Text>
-    <Text onPress={() => props.navigate('agenda')} style={styles.button} >Agenda</Text>
+    <Text onPress={() => props.navigate('eventList')} style={styles.button} >Calendar</Text>
   </View>
 ;
 

app/components/navigator.js

@@ -4,7 +4,8 @@ import Drawer from 'react-native-drawer';
 import Login from './Login';
 import Welcome from './Welcome';
 import Sidebar from './Sidebar';
-import Agenda from './Agenda';
+import Calendar from './Calendar';
+import Agenda from './Calendar';
 
 import * as actions from '../actions/navigation';
 
@@ -22,8 +23,8 @@ const sceneToComponent = (scene) => {
   switch (scene) {
     case 'welcome':
       return <Welcome />;
-    case 'agenda':
-      return <Agenda />;
+    case 'eventList':
+      return <Calendar />;
     default:
       return <Welcome />;
   }

app/reducers/calendar.js

 import * as types from '../actions/actionTypes';
 
 const initialState = {
+  eventList:'',
+  calendarFetched: false,
 };
 
 export default function calendar(state = initialState, action = {}) {
   switch (action.type) {
+    case types.CALENDARRETREIVED:
+      return{...state, eventList:action.eventList, calendarFetched:true};
+    case types.CALENDARERROR:
+      return{...state, calendarFetched:true};
     default:
       return { ...state };
   }
-}/**
- * Created by aucke on 3/8/17.
- */
+}

app/reducers/index.js

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

app/reducers/login.js

 import * as types from '../actions/actionTypes';
+import * as console from "react-native";
 
 const initialState = {
   loginState: '',