Added teacher to UI for announcement

This commit is contained in:
M10T 2020-08-14 20:03:40 -04:00
parent 6d31bf277f
commit 92b677baaa
2 changed files with 44 additions and 8 deletions

View File

@ -7,6 +7,7 @@ import {
Text, Text,
StatusBar, StatusBar,
FlatList, FlatList,
TouchableOpacity,
} from 'react-native'; } from 'react-native';
import { import {
@ -32,12 +33,34 @@ 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>
}
function TeacherButton(props) {
return (
<View>
<TouchableOpacity style={styles.item} onPress={()=>props.navigation.navigate('TeacherList',{data:props.data,name:props.name})} activeOpacity={0.8}>
<Text style={styles.title}>{props.name}</Text>
</TouchableOpacity>
</View>
)
}
class Announcements extends React.Component { class Announcements extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
data: [] data: [],
teacherNames: [],
isLoading:true
} }
} }
@ -49,21 +72,26 @@ class Announcements extends React.Component {
} }
) )
.then((response) => { .then((response) => {
return response.text(); return response.text()
}) })
.then((json) => { .then((txt) => {
this.setState({data: JSON.parse(json).data}); const data = JSON.parse(txt).data;
const teacherNames = [...new Set(data.filter(x=>x.teacher!=null&&x.teacher.trim()!=='').map(x=>x.teacher))];
teacherNames.sort()
this.setState({data: data, teacherNames: teacherNames.map(x=>({name:x})),isLoading:false});
}) })
.catch((error) => console.error(error)) .catch((error) => console.error(error))
} }
render() { render() {
if (this.state.isLoading) return <></>
return ( return (
<View style={styles.container}> <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 <FlatList
data={this.state.data} data={this.state.teacherNames}
renderItem={item=><Announcement item={item}/>} renderItem={({item})=><TeacherButton item={item} data={this.state.data.filter(x=>x.teacher===item.name)} name={item.name} navigation={this.props.navigation}/>}
keyExtractor={item=>JSON.stringify(item)} keyExtractor={(item,index)=>item.name+index}
/> />
</View> </View>
) )

View File

@ -22,7 +22,7 @@ import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack' import { createStackNavigator } from '@react-navigation/stack'
import styles from './styles/morestyles' import styles from './styles/morestyles'
import Announcements from './Announcements' import Announcements, {TeacherList} from './Announcements'
import Resources from './Resources' import Resources from './Resources'
import StudentWeek from './StudentWeek' import StudentWeek from './StudentWeek'
import SSLOps from './SSLOps' import SSLOps from './SSLOps'
@ -129,6 +129,14 @@ class More extends React.Component {
headerLeft:null headerLeft:null
}} }}
/> />
<Stack.Screen
name="TeacherList"
component={TeacherList}
options={({route})=>({
headerTitleStyle:[styles.headerTitle,{alignSelf:'center',marginLeft:"-20%"}],
title:route.params.name
})}
/>
</Stack.Navigator> </Stack.Navigator>
</NavigationContainer> </NavigationContainer>
) )