Added Lunch Events interface

app/Clubs.js

@@ -19,6 +19,7 @@ import {
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
 import { SearchBar } from 'react-native-elements';
+import styles from './styles/liststyles'
 
 const ClubElement = ({item}) => {
   const [visible, setVisible] = useState(0)
@@ -101,19 +102,5 @@ class Clubs extends React.Component {
     );
   }
 }
-const styles = StyleSheet.create({
+
-  container: {
-    flex: 1,
-    marginTop: StatusBar.currentHeight || 0,
-  },
-  item: {
-    backgroundColor: '#bababa',
-    padding: 20,
-    marginVertical: 8,
-    marginHorizontal: 16,
-  },
-  title: {
-    fontSize: 32,
-  },
-});
 export default Clubs;

app/LunchEvents.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   SafeAreaView,
   StyleSheet,
@@ -6,6 +6,8 @@ import {
   View,
   Text,
   StatusBar,
+  FlatList,
+  TouchableOpacity,
 } from 'react-native';
 
 import {
@@ -16,11 +18,57 @@ import {
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
 
-class LunchEvents extends React.Component {
+import styles from './styles/liststyles'
-	render() {
+
+const LunchEvent = ({item}) => {
+	const [visible, setVisible] = useState(0)
+	const extra = visible?(<Text>{'\n'}{item.item.text}{'\n\n'}Location: {item.item.loc}</Text>):(<></>);
 	return(
 		<View>
+			<TouchableOpacity style={styles.item} onPress={()=>setVisible(!visible)}>
+				<Text style={styles.title}>{item.item.title}</Text>
+				{extra}
+			</TouchableOpacity>
+		</View>
+	)
+}
 
+class LunchEvents extends React.Component {
+	
+	constructor(props) {
+		super(props)
+		this.state = {
+			data: []
+		}
+	}
+	
+	componentDidMount() {
+		fetch('https://6dc2642ae9b3.ngrok.io/api/en/lunchEvents',{
+			headers: {
+				'Cache-Control': 'no-cache'
+			}
+			}
+		)
+		.then((response) => {
+			return response.text();
+		})
+		.then((json) => {
+			this.setState({data: JSON.parse(json)});
+		})
+		.catch((error) => console.error(error))
+		.finally(() => {
+			this.setState({ isLoading: false });
+		});
+	}
+	
+	render() {
+		return (
+			<View style={styles.container}>
+				<FlatList
+					data={this.state.data}
+					renderItem={item=><LunchEvent item={item}/>}
+					keyExtractor={item=>JSON.stringify(item)}
+				/>
 			</View>
 		)
 	}

app/styles/liststyles.js

@@ -0,0 +1,19 @@
+import {StyleSheet, StatusBar} from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+  },
+  item: {
+    backgroundColor: '#bababa',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+
+export default styles;