Added Lunch Events interface

This commit is contained in:
M10T 2020-08-10 17:41:10 -04:00
parent 98ce0780c9
commit a943e2eb4b
3 changed files with 72 additions and 18 deletions

View File

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

View File

@ -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';
import styles from './styles/liststyles'
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>
<View style={styles.container}>
<FlatList
data={this.state.data}
renderItem={item=><LunchEvent item={item}/>}
keyExtractor={item=>JSON.stringify(item)}
/>
</View>
)
}

19
app/styles/liststyles.js Normal file
View File

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