mirror of
https://github.com/Blair-SGA-Dev-Team/blazerapp.git
synced 2024-11-24 05:31:16 -05:00
Search for Staff + small style change
This commit is contained in:
parent
6463193deb
commit
a26d44c8cf
112
app/Staff.js
112
app/Staff.js
|
@ -6,6 +6,7 @@ import {
|
||||||
View,
|
View,
|
||||||
Text,
|
Text,
|
||||||
StatusBar,
|
StatusBar,
|
||||||
|
ActivityIndicator,
|
||||||
FlatList,
|
FlatList,
|
||||||
TouchableOpacity
|
TouchableOpacity
|
||||||
} from 'react-native';
|
} from 'react-native';
|
||||||
|
@ -17,62 +18,87 @@ import {
|
||||||
DebugInstructions,
|
DebugInstructions,
|
||||||
ReloadInstructions,
|
ReloadInstructions,
|
||||||
} from 'react-native/Libraries/NewAppScreen';
|
} from 'react-native/Libraries/NewAppScreen';
|
||||||
|
import { SearchBar } from 'react-native-elements';
|
||||||
import { url } from './resources/fetchInfo.json'
|
|
||||||
import styles from './styles/liststyles'
|
import styles from './styles/liststyles'
|
||||||
|
import { url } from './resources/fetchInfo.json'
|
||||||
|
|
||||||
const TeacherElement = ({item}) => {
|
const StaffElement = ({item}) => {
|
||||||
|
console.log(item)
|
||||||
const [visible, setVisible] = useState(0)
|
const [visible, setVisible] = useState(0)
|
||||||
const extra = [...item.item.emails.map(email=>(<Text key={email}>Email: {email}</Text>))]
|
const extra = visible?(<Text>{'\n'}Email: {item.item.emails}</Text>):(<></>);
|
||||||
return(
|
return(
|
||||||
<View>
|
<View>
|
||||||
<TouchableOpacity style={styles.item} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
|
<TouchableOpacity style={styles.item} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
|
||||||
<Text style={styles.title}>{item.item.name}</Text>
|
<Text style={styles.title}>{item.item.name}</Text>
|
||||||
{visible?extra:<></>}
|
{extra}
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
class Staff extends React.Component {
|
class Staff extends React.Component {
|
||||||
|
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props)
|
super(props);
|
||||||
this.state = {
|
|
||||||
isLoading: true
|
this.state = {
|
||||||
}
|
data: [],
|
||||||
}
|
dataSearch:[],
|
||||||
|
isLoading: true,
|
||||||
componentDidMount() {
|
search:""
|
||||||
fetch(`${url}/api/en/teachers`,{
|
};
|
||||||
headers: {
|
}
|
||||||
'Cache-Control': 'no-cache'
|
|
||||||
}
|
componentDidMount() {
|
||||||
}
|
|
||||||
)
|
fetch(`${url}/api/en/teachers`,{
|
||||||
.then((response) => {
|
headers: {
|
||||||
return response.text();
|
'Cache-Control': 'no-cache'
|
||||||
})
|
} })
|
||||||
.then((json) => {
|
.then((response) => {
|
||||||
this.setState({data: JSON.parse(json).data});
|
return response.text();
|
||||||
})
|
})
|
||||||
.catch((error) => console.error(error))
|
.then((json) => {
|
||||||
.finally(()=>this.setState({isLoading:false}))
|
this.setState({data: JSON.parse(json).data[0].staff});
|
||||||
}
|
this.setState({dataSearch:JSON.parse(json).data[0].staff});
|
||||||
|
})
|
||||||
render() {
|
.catch((error) => console.error(error))
|
||||||
if(this.state.isLoading) return (<View/>)
|
.finally(() => {
|
||||||
|
this.setState({ isLoading: false });
|
||||||
return (
|
});
|
||||||
<View style={styles.container}>
|
|
||||||
<FlatList
|
}
|
||||||
data={this.state.data}
|
updateSearch = (search) => {
|
||||||
renderItem={item=><TeacherElement item={item} />}
|
this.setState({ search:search });
|
||||||
keyExtractor={(item,index)=>JSON.stringify(item)+index}
|
const searchPool = search.startsWith(this.state.search)?this.state.dataSearch:this.state.data;
|
||||||
/>
|
const ds = searchPool.filter((thing)=>{return thing.name.toLowerCase().startsWith(search.toLowerCase())})
|
||||||
</View>
|
this.setState({dataSearch: ds})
|
||||||
)
|
};
|
||||||
}
|
clearSearch = (search)=>{
|
||||||
|
const ds = this.state.data;
|
||||||
|
this.setState({dataSearch:ds})
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
const { data , dataSearch, isLoading,search} = this.state;
|
||||||
|
console.log(data)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={styles.container}>
|
||||||
|
<SearchBar
|
||||||
|
lightTheme
|
||||||
|
placeholder="Search Staff"
|
||||||
|
onChangeText={this.updateSearch}
|
||||||
|
onCancel={this.clearSearch}
|
||||||
|
onClear={this.clearSearch}
|
||||||
|
value={this.state.search}/>
|
||||||
|
<FlatList
|
||||||
|
data={dataSearch}
|
||||||
|
renderItem={item => <StaffElement item={item}/>}
|
||||||
|
keyExtractor={item => JSON.stringify(item)}
|
||||||
|
/>
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Staff;
|
export default Staff;
|
|
@ -10,6 +10,7 @@ const styles = StyleSheet.create({
|
||||||
padding: 20,
|
padding: 20,
|
||||||
marginVertical: 8,
|
marginVertical: 8,
|
||||||
marginHorizontal: 16,
|
marginHorizontal: 16,
|
||||||
|
borderRadius: 8,
|
||||||
},
|
},
|
||||||
title: {
|
title: {
|
||||||
fontSize: 32,
|
fontSize: 32,
|
||||||
|
|
Loading…
Reference in New Issue
Block a user