77 lines
2.1 KiB
JavaScript
77 lines
2.1 KiB
JavaScript
import React, { useEffect } from "react";
|
|
import { Searchbar, Title } from 'react-native-paper';
|
|
import { StyleSheet, SafeAreaView, FlatList } from 'react-native';
|
|
import API from "../API";
|
|
import GroupCard from "../components/GroupCard";
|
|
|
|
const Groups = () => {
|
|
const [searchQuery, setSearchQuery] = React.useState('');
|
|
const [groups, setGroups] = React.useState([]);
|
|
const [queryTimer, setQueryTimer] = React.useState(0);
|
|
|
|
useEffect(() => {
|
|
let subscribed = true;
|
|
API.getFollowingGroups('').then((data) => {
|
|
if (subscribed)
|
|
setGroups(data?.groups || []);
|
|
});
|
|
return () => {
|
|
subscribed = false;
|
|
}
|
|
}, [])
|
|
|
|
|
|
|
|
const onChangeSearch = query => {
|
|
setSearchQuery(query);
|
|
if (queryTimer) clearTimeout(queryTimer);
|
|
let timerId = setTimeout(() => {
|
|
if (!query) {
|
|
return API.getFollowingGroups('').then((data) => {
|
|
setGroups(data.groups || []);
|
|
});
|
|
}
|
|
API.searchGroups(query).then((data) => {
|
|
setGroups(data.groups || []);
|
|
})
|
|
|
|
}, 300);
|
|
setQueryTimer(timerId);
|
|
};
|
|
const renderProfile = (({ item }) => {
|
|
return (<GroupCard profileObj={item} />);
|
|
});
|
|
return (
|
|
<SafeAreaView style={{ flex: 1 }}>
|
|
<Searchbar
|
|
placeholder="Search Groups"
|
|
onChangeText={onChangeSearch}
|
|
value={searchQuery}
|
|
/>
|
|
<FlatList
|
|
contentContainerStyle={styles.container}
|
|
numColumns={1}
|
|
data={groups}
|
|
renderItem={renderProfile}
|
|
keyExtractor={item => item._id}
|
|
ListHeaderComponent={searchQuery ? <></> : <Title style={styles.title} >Groups you follow:</Title>}
|
|
/>
|
|
</SafeAreaView>
|
|
)
|
|
}
|
|
|
|
export default Groups;
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
padding: 5,
|
|
},
|
|
title: {
|
|
padding: 10,
|
|
fontSize: 30,
|
|
marginTop: 15,
|
|
fontWeight: "bold",
|
|
color: "#777"
|
|
}
|
|
});
|