Add basic EventList

Bump android target version to skip permission warning on install

android/app/build.gradle

@@ -96,7 +96,7 @@ android {
     defaultConfig {
         applicationId "no.neuf.chateau"
         minSdkVersion 16
-        targetSdkVersion 22
+        targetSdkVersion 23
         versionCode 5
         versionName "0.1"
         ndk {

package.json

@@ -7,6 +7,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "moment": "^2.18.1",
     "prop-types": "^15.5.10",
     "react": "16.0.0-alpha.12",
     "react-native": "0.46.3",

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

yarn.lock

@@ -2965,6 +2965,10 @@ mkdirp@^0.5.1:
   dependencies:
     minimist "0.0.8"
 
+moment@^2.18.1:
+  version "2.18.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"
+
 morgan@~1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/morgan/-/morgan-1.6.1.tgz#5fd818398c6819cba28a7cd6664f292fe1c0bbf2"
@@ -3314,10 +3318,6 @@ qs@~6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.0.tgz#f403b264f23bc01228c74131b407f18d5ea5d442"
 
-ramda@~0.21.0:
-  version "0.21.0"
-  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.21.0.tgz#a001abedb3ff61077d4ff1d577d44de77e8d0a35"
-
 random-bytes@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/random-bytes/-/random-bytes-1.0.0.tgz#4f68a1dc0ae58bd3fb95848c30324db75d64360b"
@@ -3356,16 +3356,6 @@ react-devtools-core@2.3.1:
     shell-quote "^1.6.1"
     ws "^2.0.3"
 
-react-native-keyboard-spacer@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/react-native-keyboard-spacer/-/react-native-keyboard-spacer-0.3.1.tgz#9580297ebfd078202dc4c65303d29cda35de67f1"
-
-react-native-material-kit@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/react-native-material-kit/-/react-native-material-kit-0.4.1.tgz#bdfc4727e4146980e129ee5bbeb7565db6a918cc"
-  dependencies:
-    ramda "~0.21.0"
-
 react-native@0.46.3:
   version "0.46.3"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.46.3.tgz#8fe95131143f1d87bd3ac12e73b4523a44ff0ce9"