Added favorites for announcements from teachers

app/Announcements.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {
   SafeAreaView,
   StyleSheet,
@@ -20,12 +20,16 @@ import {
 
 import styles from './styles/liststyles'
 import { url } from './resources/fetchInfo.json'
+import { SearchBar } from 'react-native-elements';
+import Icon from 'react-native-vector-icons/AntDesign'
+import AsyncStorage from '@react-native-community/async-storage'
+
+const STORAGE_KEY = "teacherAnnouncements"
 
 const Announcement = ({item}) => {
 	const date = new Date
 	const dateStr = `${date.getMonth()+1}/${date.getDate()}/${date.getFullYear()}`
 	const dateInfo = dateStr===item.item.date&&item.item.time!==undefined?item.item.time:item.item.date;
-	console.log(dateStr)
 	return (
 		<View style={styles.item}>
 			{dateInfo!==undefined?<Text style={styles.date}>{dateInfo}</Text>:<></>}
@@ -35,21 +39,25 @@ const Announcement = ({item}) => {
 }
 
 export const TeacherList = ({route}) => {
-	return <View style={styles.container}>
-		<FlatList
-			data={route.params.data}
-			renderItem={item=><Announcement item={item}/>}
-			keyExtractor={item=>JSON.stringify(item)}
-		/>
-	</View>
+	return (
+		<View style={styles.container}>
+			<FlatList
+				data={route.params.data}
+				renderItem={item=><Announcement item={item}/>}
+				keyExtractor={item=>JSON.stringify(item)}
+			/>
+		</View>
+	)
 }
 
 function TeacherButton(props) {
+	const [color, setColor] = useState(props.color?props.color:'white')
 	return (
-		<View>
-		  <TouchableOpacity style={styles.item} onPress={()=>props.navigation.navigate('TeacherList',{data:props.data,name:props.name})} activeOpacity={0.8}>
+		<View style={[styles.item,{flexDirection:'row'}]}>
+		  <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} backgroundColor="#bababa" name="star" size={30} style={{alignSelf:'center'}} onPress={()=>{setColor(color=='yellow'?'white':'yellow');props.addFavorite(props.name)}}/>:<></>}
 		</View>
 	)
 }
@@ -61,10 +69,25 @@ class Announcements extends React.Component {
 		this.state = {
 			data: [],
 			teacherNames: [],
+			favoriteNames: [],
 			isLoading:true
 		}
 	}
 	
+	addFavorite = (name) => {
+		const favoriteNames = this.state.favoriteNames.slice().map(({name})=>name)
+		const index = favoriteNames.indexOf(name)
+		if (index < 0) {
+			favoriteNames.push(name)
+		}
+		else {
+			favoriteNames.splice(index,1)
+		}
+		favoriteNames.sort()
+		this.setState({favoriteNames:favoriteNames.map(name=>({name:name}))})
+		AsyncStorage.setItem(STORAGE_KEY,JSON.stringify(favoriteNames)).catch(console.log).done()
+	}
+	
 	componentDidMount() {
 		fetch(`${url}/api/en/announcements`,{
 			headers: {
@@ -82,16 +105,22 @@ 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() {
 		if (this.state.isLoading) return <></>
 		return (
-			<View style={styles.container}>
-				<TeacherButton data={this.state.data.filter(x=>x.teacher==null||x.teacher.trim()==='')} name="No Teacher" navigation={this.props.navigation}/>
+			<View style={[styles.container]}>
+				<TeacherButton data={this.state.data.filter(x=>x.teacher==null||x.teacher.trim()==='')} name="No Teacher" navigation={this.props.navigation} />
 				<FlatList
-					data={this.state.teacherNames}
-					renderItem={({item})=><TeacherButton item={item} data={this.state.data.filter(x=>x.teacher===item.name)} name={item.name} navigation={this.props.navigation}/>}
+					data={this.state.favoriteNames.concat(this.state.teacherNames.filter(x=>this.state.favoriteNames.map(({name})=>name).indexOf(x.name) < 0))}
+					renderItem={({item})=><TeacherButton color={this.state.favoriteNames.indexOf(item) >= 0?'yellow':'white'} item={item} data={this.state.data.filter(x=>x.teacher===item.name)} name={item.name} navigation={this.props.navigation} icon={true} addFavorite={this.addFavorite}/>}
 					keyExtractor={(item,index)=>item.name+index}
 				/>
 			</View>

app/Clubs.js

@@ -81,8 +81,6 @@ class Clubs extends React.Component {
     const { data , dataSearch, isLoading,search} = this.state;
 
     return (
-      
-
       <SafeAreaView style={styles.container}>
         <SearchBar
         lightTheme