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}>
+	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

package-lock.json

@@ -2182,6 +2182,13 @@
         "chalk": "^3.0.0"
       }
     },
+    "@react-native-community/async-storage": {
+      "version": "github:react-native-community/async-storage#3f868caa6e8a2b15b8bf8bea1e0f48eda9736fde",
+      "from": "github:react-native-community/async-storage",
+      "requires": {
+        "deep-assign": "^3.0.0"
+      }
+    },
     "@react-native-community/cli-debugger-ui": {
       "version": "4.9.0",
       "resolved": "https://registry.npmjs.org/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-4.9.0.tgz",
@@ -3640,6 +3647,14 @@
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
       "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
     },
+    "deep-assign": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/deep-assign/-/deep-assign-3.0.0.tgz",
+      "integrity": "sha512-YX2i9XjJ7h5q/aQ/IM9PEwEnDqETAIYbggmdDB3HLTlSgo1CxPsj6pvhPG68rq6SVE0+p+6Ywsm5fTYNrYtBWw==",
+      "requires": {
+        "is-obj": "^1.0.0"
+      }
+    },
     "deep-is": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
@@ -5500,6 +5515,11 @@
         }
       }
     },
+    "is-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
+      "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8="
+    },
     "is-plain-object": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",

package.json

@@ -10,6 +10,7 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@react-native-community/async-storage": "github:react-native-community/async-storage",
     "@react-native-community/masked-view": "^0.1.10",
     "@react-navigation/bottom-tabs": "^5.8.0",
     "@react-navigation/native": "^5.7.3",