64 lines
1.8 KiB
JavaScript
64 lines
1.8 KiB
JavaScript
import React, { useEffect } from "react";
|
|
import { Searchbar } from 'react-native-paper';
|
|
import { View, ActivityIndicator, StyleSheet, SafeAreaView, FlatList } from 'react-native';
|
|
import API from "../API";
|
|
import UserName from "../components/UserName";
|
|
import ProfileSmallHeader from '../components/ProfileSmallHeader.js'
|
|
|
|
const Courses = () => {
|
|
const [searchQuery, setSearchQuery] = React.useState('');
|
|
const [groups, setGroups] = React.useState([]);
|
|
const [queryTimer, setQueryTimer] = React.useState(0);
|
|
|
|
useEffect(() => {
|
|
API.getCourses('').then((data) => {
|
|
setGroups(data.groups || []);
|
|
});
|
|
}, [])
|
|
|
|
|
|
|
|
const onChangeSearch = query => {
|
|
setSearchQuery(query);
|
|
if (queryTimer) clearTimeout(queryTimer);
|
|
let timerId = setTimeout(() => {
|
|
if (!query) {
|
|
return API.getCourses('').then((data) => {
|
|
setGroups(data.groups || []);
|
|
});
|
|
}
|
|
API.searchCourses(query).then((data) => {
|
|
setGroups(data.groups || []);
|
|
})
|
|
|
|
}, 300);
|
|
setQueryTimer(timerId);
|
|
};
|
|
const renderProfile = (({ item }) => {
|
|
return (<ProfileSmallHeader profileObj={item} />);
|
|
});
|
|
return (
|
|
<SafeAreaView style={styles.container}>
|
|
<Searchbar
|
|
placeholder="Search Users"
|
|
onChangeText={onChangeSearch}
|
|
value={searchQuery}
|
|
/>
|
|
<FlatList
|
|
data={groups}
|
|
renderItem={renderProfile}
|
|
keyExtractor={item => item._id}
|
|
/>
|
|
</SafeAreaView>
|
|
)
|
|
}
|
|
|
|
export default Courses;
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: "#edf2f7",
|
|
},
|
|
});
|