mirror of
https://github.com/Blair-SGA-Dev-Team/blazerapp.git
synced 2024-11-21 12:31:16 -05:00
Added favorites for announcements from teachers
This commit is contained in:
parent
073df79286
commit
76954765ec
|
@ -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>
|
||||
|
|
|
@ -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
20
package-lock.json
generated
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
Loading…
Reference in New Issue
Block a user