Added reloading to calendar and clubs data

app/Announcements.js

@@ -54,7 +54,7 @@ function TeacherButton(props) {
 	const [color, setColor] = useState(props.color?props.color:'lightgrey')
 	return (
 		<View style={[styles.item1,{flexDirection:'row'}]}>
-		  <TouchableOpacity style={{flex:1}} onPress={()=>props.navigation.navigate('TeacherList',{data:props.data,name:props.name})} activeOpacity={0.8}>
+		  <TouchableOpacity style={{flex:1}} onPress={()=>{props.navigation.navigate('TeacherList',{data:props.data,name:props.name})}} activeOpacity={0.8}>
 			<Text style={styles.title}>{props.name}</Text>
 		  </TouchableOpacity>
 		  {props.icon?<Icon.Button color={color} name="star" size={30} style={{alignSelf:'center'}} backgroundColor="white" onPress={()=>{setColor(color=='#dba309'?'lightgrey':'#dba309');props.addFavorite(props.name)}}/>:<></>}
@@ -89,6 +89,15 @@ class Announcements extends React.Component {
 	}
 	
 	componentDidMount() {
+		this.getData()
+		AsyncStorage.getItem(STORAGE_KEY)
+			.then(value=>value==null?[]:JSON.parse(value).map(x=>({name:x})))
+			.then(names=>this.setState({favoriteNames:names}))
+			.catch(console.log)
+			.done()
+	}
+	
+	getData() {
 		fetch(`${url}/api/en/announcements`,{
 			headers: {
 				'Cache-Control': 'no-cache'
@@ -105,12 +114,6 @@ class Announcements extends React.Component {
 			this.setState({data: data, teacherNames: teacherNames.map(x=>({name:x})),isLoading:false});
 		})
 		.catch((error) => console.error(error))
-		
-		AsyncStorage.getItem(STORAGE_KEY)
-			.then(value=>value==null?[]:JSON.parse(value).map(x=>({name:x})))
-			.then(names=>this.setState({favoriteNames:names}))
-			.catch(console.log)
-			.done()
 	}
 	
 	render() {

app/Calendar.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,70 @@ import {
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
 
+import styles from './styles/liststyles'
+import { url } from './resources/fetchInfo.json'
+
+const Event = ({item}) => {
+	const [visible, setVisible] = useState(false)
+	const date = item.item.date.split('-')
+	const extra = (
+		<>
+			<Text style={{fontSize:20}}>{item.item.text}</Text>
+			<Text style={{fontSize:20}}>Location: {item.item.location}</Text>
+			<Text style={{fontSize:20}}>Date: {`${date[1]}/${date[2]}/${date[0]}`}</Text>
+		</>
+	)
+	return (
+		<TouchableOpacity style={styles.item1} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
+			<Text style={styles.title}>{item.item.title}</Text>
+			{visible?extra:<></>}
+		</TouchableOpacity>
+	)
+}
+
 class Calendar extends React.Component {
+	
+	constructor(props) {
+		super(props)
+		this.state = {
+			data: []
+		}
+	}
+	
+	componentDidMount() {
+		this.getData()
+		this.props.navigation.addListener(
+			'focus',
+			() => {
+				this.getData()
+			}
+		);
+	}
+	
+	getData() {
+		fetch(`${url}/api/en/events`,{
+		  headers: {
+			'Cache-Control': 'no-cache'
+		  } })
+		  .then((response) => {
+			return response.text();
+		  })
+		  .then((json) => {
+			const data = JSON.parse(json).data
+			data.sort((a,b)=>new Date(b.date).getTime()-new Date(a.date).getTime())
+			this.setState({data: data});
+		  })
+		  .catch((error) => console.error(error))
+	}
+	
 	render() {
 		return (
 			<View>
-			
+				<FlatList
+					data={this.state.data}
+					renderItem={item=><Event item={item}/>}
+					keyExtractor={item=>JSON.stringify(item)}
+				/>
 			</View>
 		)
 	}

app/Clubs.js

@@ -37,15 +37,15 @@ export const ClubInfo = ({route}) => {
     <View style = {{padding: 10}}>
       <View style ={styles.infoContainer}>
         <Text style = {styles.title1}>Meeting Time and Day: </Text>
-        <Text style = {styles.title}>{item.meeting}</Text>
+        <Text style = {{fontSize:20}}>{item.meeting}</Text>
       </View>
       <View style ={styles.infoContainer}>
         <Text style = {styles.title1}>Zoom Link: </Text>
-        <Text style = {styles.link} onPress={() => Linking.openURL(item.link)}>{item.link}</Text>
+        <Text style = {[styles.linktext,{fontSize:20}]} onPress={() => Linking.openURL(item.link)}>{item.link}</Text>
       </View>
 			<View style ={styles.infoContainer}>
         <Text style = {styles.title1}>Sponsor: </Text>
-			  <Text style = {styles.title}>{item.sponsor}</Text>
+			  <Text style = {{fontSize:20}}>{item.sponsor}</Text>
       </View>
     </View>
   )
@@ -97,14 +97,22 @@ class Clubs extends React.Component {
     this.state = {
       data: [],
       dataSearch:[],
-      isLoading: true,
       search:""
     };
   }
 
   componentDidMount() {
-    
+    this.getData()
-    fetch(`${url}/api/en/clubs`,{
+	this.props.navigation.addListener(
+			'focus',
+			() => {
+				this.getData()
+			}
+		);
+  }
+  
+  getData() {
+	  fetch(`${url}/api/en/clubs`,{
       headers: {
         'Cache-Control': 'no-cache'
       } })
@@ -112,15 +120,11 @@ class Clubs extends React.Component {
         return response.text();
       })
       .then((json) => {
-        this.setState({data: JSON.parse(json).clubs});
+        this.setState({data: JSON.parse(json).clubs,dataSearch:JSON.parse(json).clubs });
-        this.setState({dataSearch:JSON.parse(json).clubs });
       })
       .catch((error) => console.error(error))
-      .finally(() => {
-        this.setState({ isLoading: false });
-      });
-      
   }
+  
   updateSearch = (search) => {
     this.setState({ search:search });
 	const searchPool = search.startsWith(this.state.search)?this.state.dataSearch:this.state.data;
@@ -132,7 +136,7 @@ class Clubs extends React.Component {
     this.setState({dataSearch:ds})
   }
   render() {
-    const { data , dataSearch, isLoading,search} = this.state;
+    const { data , dataSearch,search} = this.state;
 
     return (
       <SafeAreaView style={styles.container}>

app/More.js

@@ -143,7 +143,8 @@ class More extends React.Component {
 						component={LunchInfo}
 						options={({route})=>({
 							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
-							title:route.params.name
+							title:route.params.name,
+							headerRight:()=>(<></>)
 						})}
 					/>
 					<Stack.Screen 
@@ -151,7 +152,8 @@ class More extends React.Component {
 						component={SSLInfo}
 						options={({route})=>({
 							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
-							title:route.params.name
+							title:route.params.name,
+							headerRight:()=>(<></>)
 						})}
 					/>
 				</Stack.Navigator>

app/Staff.js

@@ -48,14 +48,22 @@ class Staff extends React.Component {
     this.state = {
       data: [],
       dataSearch:[],
-      isLoading: true,
       search:""
     };
   }
 
   componentDidMount() {
-    
+    this.getData()
-    fetch(`${url}/api/en/teachers`,{
+	this.props.navigation.addListener(
+			'focus',
+			() => {
+				this.getData()
+			}
+		);
+  }
+  
+  getData() {
+	  fetch(`${url}/api/en/teachers`,{
       headers: {
         'Cache-Control': 'no-cache'
       } })
@@ -67,11 +75,8 @@ class Staff extends React.Component {
         this.setState({dataSearch:JSON.parse(json).data});
       })
       .catch((error) => console.error(error))
-      .finally(() => {
-        this.setState({ isLoading: false });
-      });
-      
   }
+  
   updateSearch = (search) => {
     this.setState({ search:search });
 	const searchPool = search.startsWith(this.state.search)?this.state.dataSearch:this.state.data;
@@ -83,7 +88,7 @@ class Staff extends React.Component {
     this.setState({dataSearch:ds})
   }
   render() {
-    const { data , dataSearch, isLoading,search} = this.state;
+    const { data , dataSearch,search} = this.state;
     return (
       <SafeAreaView style={styles.container}>
         <SearchBar