63 lines
1.8 KiB
JavaScript
63 lines
1.8 KiB
JavaScript
import React, { useEffect } from "react";
|
|
import { Searchbar } from 'react-native-paper';
|
|
import { StyleSheet, SafeAreaView, FlatList } from 'react-native';
|
|
import API from "../API";
|
|
import ProfileCard from "../components/ProfileCard";
|
|
|
|
const Search = () => {
|
|
const [searchQuery, setSearchQuery] = React.useState('');
|
|
const [profiles, setProfiles] = React.useState([]);
|
|
const [queryTimer, setQueryTimer] = React.useState(0);
|
|
|
|
useEffect(() => {
|
|
let subscribed = true;
|
|
API.searchProfiles('').then((data) => {
|
|
if (subscribed)
|
|
setProfiles(data.profiles || []);
|
|
});
|
|
return () => {
|
|
subscribed = false;
|
|
}
|
|
}, [])
|
|
|
|
const onChangeSearch = query => {
|
|
setSearchQuery(query);
|
|
if (queryTimer) clearTimeout(queryTimer);
|
|
let timerId = setTimeout(() => {
|
|
API.searchProfiles(query).then((data) => {
|
|
setProfiles(data.profiles || []);
|
|
});
|
|
}, 300);
|
|
setQueryTimer(timerId);
|
|
};
|
|
const renderProfile = (({ item }) => {
|
|
return (<ProfileCard profileObj={item} />);
|
|
});
|
|
return (
|
|
<SafeAreaView style={{ flex: 1 }}>
|
|
<Searchbar
|
|
placeholder="Search Users"
|
|
onChangeText={onChangeSearch}
|
|
value={searchQuery}
|
|
elevation={3}
|
|
/>
|
|
<FlatList
|
|
contentContainerStyle={styles.container}
|
|
numColumns={2}
|
|
columnWrapperStyle={{ justifyContent: "space-evenly" }}
|
|
data={profiles}
|
|
renderItem={renderProfile}
|
|
keyExtractor={item => item._id}
|
|
/>
|
|
</SafeAreaView>
|
|
)
|
|
}
|
|
|
|
export default Search;
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
padding: 5,
|
|
},
|
|
});
|