Added favorites for announcements from teachers

This commit is contained in:
M10T 2020-08-15 17:04:43 -04:00
parent 073df79286
commit 76954765ec
4 changed files with 65 additions and 17 deletions

View File

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

View File

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

20
package-lock.json generated
View File

@ -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",

View File

@ -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",