Add basic EventList

Bump android target version to skip permission warning on install

src/Dusken.js

@@ -1,11 +1,12 @@
 import React, { Component } from 'react';
 import LoginContainer from './modules/login/LoginContainer';
+import EventListContainer from "./modules/events/EventListContainer";
 
 export default class Dusken extends Component {
   render() {
     // TODO: Navigation++
     return (
-      <LoginContainer />
+      <EventListContainer />
     )
   }
 }

src/modules/events/EventList.js

@@ -0,0 +1,83 @@
+
+import {Platform, StyleSheet, FlatList, Text, View, Linking, TouchableOpacity, ActivityIndicator} from "react-native";
+import React, { Component } from 'react';
+import moment from "moment";
+import 'moment/locale/nb';
+
+export default class EventList extends Component {
+    _keyExtractor = (item, index) => item.id;
+
+    _renderItem = ({item}) => (
+        <View>
+            <TouchableOpacity onPress={() => { this._onPressItem(item); }} style={[styles.listItem, styles.card]}>
+                <View>
+                    <Text style={styles.listItemTitle}>{item.title.rendered}</Text>
+                    <Text style={styles.listItemTime}>{this._formatTime(item.start_time)}</Text>
+                </View>
+            </TouchableOpacity>
+        </View>
+    );
+
+    _onPressItem = (item) => {
+        Linking.openURL(item.link);
+    };
+
+    _formatTime(time) {
+        moment.locale('nb');
+        return moment(time).format('llll');
+    }
+
+    render() {
+        if(this.props.loading) {
+            return (<View style={styles.card}><Text style={styles.loadingText}>Loading...</Text><ActivityIndicator/></View>)
+        }
+        return (<FlatList
+            data={this.props.events}
+            renderItem={this._renderItem}
+            keyExtractor={this._keyExtractor}
+            style={styles.container}
+            refreshing={this.props.refreshing}
+        />);
+    }
+}
+
+
+const styles = StyleSheet.create({
+    listItem: {
+        height: 100,
+    },
+    listItemTitle: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        color: 'black'
+    },
+    listItemTime: {
+        fontSize: 18,
+        color: 'black'
+    },
+    container: {
+        flex: 1,
+    },
+    card: {
+        borderColor: '#e1e8ee',
+        borderWidth: 1,
+        ...Platform.select({
+            ios: {
+                shadowColor: 'rgba(0,0,0, .2)',
+                shadowOffset: { height: 0, width: 0 },
+                shadowOpacity: 1,
+                shadowRadius: 1,
+            },
+            android: {
+                elevation: 1,
+            },
+        }),
+        padding: 8,
+        margin: 8,
+        backgroundColor: '#fff',
+    },
+    loadingText: {
+        textAlign: 'center',
+        paddingBottom: 8
+    }
+});

src/modules/events/EventListContainer.js

@@ -0,0 +1,50 @@
+import {connect} from "react-redux";
+import EventList from "./EventList";
+
+import React from 'react';
+
+/* Ref: https://medium.com/react-native-development/how-to-use-the-flatlist-component-react-native-basics-92c482816fe6 */
+
+class EventListContainer extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            loading: false,
+            events: [],
+            page: 1,
+            error: null,
+            refreshing: false,
+        };
+    }
+
+    fetchEvents() {
+        const { page } = this.state;
+        const url = `https://studentersamfundet.no/wp-json/wp/v2/events?future=1`; //&page=${page}&results=20`;
+        this.setState({ loading: true });
+        fetch(url)
+            .then(res => res.json())
+            .then(res => {
+                console.log(res);
+                this.setState({
+                    events: page === 1 ? res : [...this.state.events, ...res],
+                    error: res.error || null,
+                    loading: false,
+                    refreshing: false
+                });
+            })
+            .catch(error => {
+                this.setState({ error, loading: false });
+            });
+    }
+
+    componentDidMount() {
+        this.fetchEvents();
+    }
+
+    render() {
+        return (<EventList {...this.state} />)
+    }
+}
+
+export default connect()(EventListContainer);