diff options
Diffstat (limited to 'src/screens')
| -rw-r--r-- | src/screens/suggestedPeople/MutualBadgeHolders.tsx | 207 | ||||
| -rw-r--r-- | src/screens/suggestedPeople/SPBody.tsx | 31 |
2 files changed, 235 insertions, 3 deletions
diff --git a/src/screens/suggestedPeople/MutualBadgeHolders.tsx b/src/screens/suggestedPeople/MutualBadgeHolders.tsx new file mode 100644 index 00000000..9742d72c --- /dev/null +++ b/src/screens/suggestedPeople/MutualBadgeHolders.tsx @@ -0,0 +1,207 @@ +import {RouteProp} from '@react-navigation/native'; +import {StackNavigationProp} from '@react-navigation/stack'; +import React, {useEffect, useState} from 'react'; +import {getMutualBadgeHolders} from '../../services'; +import {ProfilePreviewType} from '../../types'; +import {MainStackParams} from '../../routes/main/MainStackNavigator'; +import {Image, Text, View} from 'react-native-animatable'; +import {SafeAreaView} from 'react-native-safe-area-context'; +import {SCREEN_HEIGHT, SCREEN_WIDTH, isIPhoneX, normalize} from '../../utils'; +import LinearGradient from 'react-native-linear-gradient'; +import CloseIcon from '../../assets/ionicons/close-outline.svg'; +import {FlatList} from 'react-native-gesture-handler'; +import {StyleSheet, TouchableOpacity} from 'react-native'; +import ExploreSectionUser from '../../components/search/ExploreSectionUser'; + +type MutualBadgeHoldersRouteProps = RouteProp< + MainStackParams, + 'MutualBadgeHolders' +>; + +type MutualBadgeHoldersNavigationProps = StackNavigationProp< + MainStackParams, + 'MutualBadgeHolders' +>; + +interface MutualBadgeHoldersProps { + route: MutualBadgeHoldersRouteProps; + navigation: MutualBadgeHoldersNavigationProps; +} + +const MutualBadgeHolders: React.FC<MutualBadgeHoldersProps> = ({ + route, + navigation, +}) => { + const {badge_id, badge_title} = route.params; + const [users, setUsers] = useState<ProfilePreviewType[] | undefined>([]); + + useEffect(() => { + const getUsers = async (badge_id: string) => { + let localUsers: + | ProfilePreviewType[] + | undefined = await getMutualBadgeHolders(badge_id); + setUsers(localUsers); + }; + getUsers(badge_id); + }, [badge_id]); + + return ( + <SafeAreaView> + <View style={styles.mainContainer}> + <View style={styles.mainContentContainer}> + <TouchableOpacity + style={styles.closeButton} + onPress={() => { + navigation.goBack(); + }}> + <CloseIcon height={'100%'} width={'100%'} color={'grey'} /> + </TouchableOpacity> + <View style={styles.iconView}> + <LinearGradient + colors={['#4E3629', '#EC2027']} + useAngle={true} + angle={154.72} + angleCenter={{x: 0.5, y: 0.5}} + style={styles.badgeBackground}> + {/* TODO: Insert image link according to badge_id passed. + * Awaiting final images from product + */} + <Image + source={require('../../assets/icons/badges/football.png')} + style={{width: SCREEN_WIDTH * 0.1, height: SCREEN_WIDTH * 0.1}} + /> + </LinearGradient> + </View> + <View style={styles.headerContainer}> + <Text style={styles.heading}>{badge_title}</Text> + <Text style={styles.subHeading}>See who else has this badge!</Text> + </View> + <FlatList + data={users} + numColumns={3} + columnWrapperStyle={styles.columnWrapperStyle} + renderItem={(user) => { + return ( + <ExploreSectionUser + key={user.item.id} + user={user.item} + externalStyles={exploreUserStyle} + /> + ); + }} + keyExtractor={(item, index) => index.toString()} + showsVerticalScrollIndicator={false} + style={styles.flatlistContainer} + contentContainerStyle={styles.flatlistContentContainer} + /> + <View /> + </View> + </View> + </SafeAreaView> + ); +}; + +const styles = StyleSheet.create({ + mainContainer: { + flexDirection: 'column', + justifyContent: 'flex-end', + width: SCREEN_WIDTH, + height: isIPhoneX() ? SCREEN_HEIGHT * 0.85 : SCREEN_HEIGHT * 0.88, + }, + mainContentContainer: { + backgroundColor: '#fff', + width: SCREEN_WIDTH * 0.93, + height: SCREEN_HEIGHT * 0.64, + alignSelf: 'center', + bottom: '2.5%', + borderColor: '#fff', + borderWidth: 1, + borderRadius: 5, + }, + closeButton: { + position: 'absolute', + height: normalize(20), + width: normalize(20), + left: '3%', + top: '2%', + }, + badgeBackground: { + position: 'absolute', + width: '100%', + height: '100%', + borderRadius: 50, + borderColor: 'transparent', + borderWidth: 1, + alignSelf: 'center', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + }, + iconView: { + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + width: SCREEN_WIDTH * 0.2, + height: SCREEN_WIDTH * 0.2, + alignSelf: 'center', + top: -SCREEN_WIDTH * 0.1, + }, + headerContainer: { + top: '-5%', + width: '100%', + height: '9%', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'space-evenly', + }, + heading: { + fontSize: normalize(17), + fontWeight: '600', + lineHeight: normalize(20), + color: '#000', + }, + subHeading: { + fontSize: normalize(11), + fontWeight: '600', + lineHeight: normalize(15), + color: '#828282', + }, + columnWrapperStyle: { + width: SCREEN_WIDTH * 0.85, + flexDirection: 'row', + flexGrow: 0, + alignSelf: 'center', + justifyContent: 'space-between', + marginBottom: '8%', + }, + flatlistContainer: { + width: SCREEN_WIDTH * 0.85, + alignSelf: 'center', + flexDirection: 'column', + top: '-1%', + }, + flatlistContentContainer: { + width: SCREEN_WIDTH * 0.85, + paddingBottom: 20, + alignSelf: 'center', + }, +}); + +const exploreUserStyle = StyleSheet.create({ + container: {}, + name: { + fontWeight: '600', + flexWrap: 'wrap', + fontSize: normalize(12), + lineHeight: normalize(15), + color: '#000', + textAlign: 'center', + }, + username: { + fontWeight: '500', + fontSize: normalize(10), + lineHeight: normalize(15), + color: '#000', + }, +}); +export default MutualBadgeHolders; diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx index aa97dc94..21e86f14 100644 --- a/src/screens/suggestedPeople/SPBody.tsx +++ b/src/screens/suggestedPeople/SPBody.tsx @@ -12,8 +12,8 @@ import { ScreenType, SuggestedPeopleDataType, } from '../../types'; -import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; - +import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; +import UniversityIcon from '../../components/profile/UniversityIcon'; interface SPBodyProps { item: SuggestedPeopleDataType; index: number; @@ -87,7 +87,22 @@ const SPBody: React.FC<SPBodyProps> = ({ <View> {backgroundImage} <View style={styles.mainContainer}> - <Text style={styles.title}>{firstItem && 'Suggested People'}</Text> + <View style={styles.topContainer}> + <Text style={styles.title}>{firstItem && 'Suggested People'}</Text> + <TouchableOpacity + onPress={() => + navigation.navigate('MutualBadgeHolders', { + badge_id: 40, + badge_title: 'Brown University Football', + }) + }> + <UniversityIcon + university="brown" + style={styles.universityIconContainer} + imageStyle={{width: normalize(31), height: normalize(38)}} + /> + </TouchableOpacity> + </View> <View style={styles.body}> <View style={styles.marginManager}> <View style={styles.addUserContainer}> @@ -132,6 +147,16 @@ const styles = StyleSheet.create({ justifyContent: 'space-between', alignSelf: 'center', }, + topContainer: { + height: isIPhoneX() ? SCREEN_HEIGHT * 0.11 : SCREEN_HEIGHT * 0.13, + flexDirection: 'column', + justifyContent: 'space-between', + }, + universityIconContainer: { + width: normalize(31), + height: normalize(38), + left: '5%', + }, marginManager: {marginHorizontal: '5%'}, image: { position: 'absolute', |