1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
import React, {useEffect, useState} from 'react';
import {FlatList, StatusBar, StyleSheet} from 'react-native';
import {Text} from 'react-native-animatable';
import {SafeAreaView} from 'react-native-safe-area-context';
import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
import {SearchBackground, TabsGradient} from '../../components';
import {RouteProp} from '@react-navigation/native';
import {MainStackParams} from '../../routes';
import {normalize} from '../../utils';
import {ProfilePreviewType} from '../../types';
import ExploreSectionUser from '../../components/search/ExploreSectionUser';
import {getDiscoverUsers} from '../../services/ExploreService';
type DiscoverUsersRouteProps = RouteProp<MainStackParams, 'DiscoverUsers'>;
interface DiscoverUsersProps {
route: DiscoverUsersRouteProps;
}
const DiscoverUsers: React.FC<DiscoverUsersProps> = ({route}) => {
const {type: category_type} = route.params;
const {id, name} = route.params.searchCategory;
const [users, setUsers] = useState<ProfilePreviewType[]>();
useEffect(() => {
const loadData = async () => {
setUsers(await getDiscoverUsers(id, category_type));
};
loadData();
}, []);
const _renderItem = ({item: user}: {item: ProfilePreviewType}) => (
<ExploreSectionUser key={user.id} user={user} style={styles.user} />
);
return (
<SearchBackground>
<StatusBar barStyle="light-content" />
<SafeAreaView>
<Text style={styles.headerText}>{name}</Text>
<FlatList
data={users}
style={styles.scrollView}
contentContainerStyle={styles.contentContainerStyle}
columnWrapperStyle={styles.columnWrapperStyle}
numColumns={3}
keyExtractor={(item) => item.id}
renderItem={_renderItem}
showsVerticalScrollIndicator={false}
/>
<TabsGradient />
</SafeAreaView>
</SearchBackground>
);
};
const styles = StyleSheet.create({
header: {width: SCREEN_WIDTH},
headerText: {
top: HeaderHeight,
textAlign: 'center',
color: '#fff',
fontWeight: '600',
fontSize: normalize(18),
lineHeight: normalize(35),
marginBottom: '5%',
},
scrollView: {
top: HeaderHeight,
width: SCREEN_WIDTH * 0.95,
height: SCREEN_HEIGHT - HeaderHeight,
alignSelf: 'center',
flexDirection: 'column',
},
user: {
margin: '2%',
},
columnWrapperStyle: {
width: SCREEN_WIDTH * 0.95,
justifyContent: 'space-between',
},
contentContainerStyle: {
width: SCREEN_WIDTH * 0.95,
paddingBottom: SCREEN_HEIGHT * 0.2,
},
});
export default DiscoverUsers;
|
