diff --git a/android/app/build.gradle b/android/app/build.gradle index 47f9893..4452d7f 100644 --- a/android/app/build.gradle +++ b/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 { diff --git a/package.json b/package.json index 4ebb101..ccc6e6d 100644 --- a/package.json +++ b/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", diff --git a/src/Dusken.js b/src/Dusken.js index 3c53ae6..19cec12 100644 --- a/src/Dusken.js +++ b/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 ( - + ) } } \ No newline at end of file diff --git a/src/modules/events/EventList.js b/src/modules/events/EventList.js new file mode 100644 index 0000000..9f7a426 --- /dev/null +++ b/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}) => ( + + { this._onPressItem(item); }} style={[styles.listItem, styles.card]}> + + {item.title.rendered} + {this._formatTime(item.start_time)} + + + + ); + + _onPressItem = (item) => { + Linking.openURL(item.link); + }; + + _formatTime(time) { + moment.locale('nb'); + return moment(time).format('llll'); + } + + render() { + if(this.props.loading) { + return (Loading...) + } + return (); + } +} + + +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 + } +}); \ No newline at end of file diff --git a/src/modules/events/EventListContainer.js b/src/modules/events/EventListContainer.js new file mode 100644 index 0000000..9fc14b1 --- /dev/null +++ b/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 () + } +} + +export default connect()(EventListContainer); \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index a7898bd..c58b726 100644 --- a/yarn.lock +++ b/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"