diff options
Diffstat (limited to 'src/screens/suggestedPeople/SPBody.tsx')
| -rw-r--r-- | src/screens/suggestedPeople/SPBody.tsx | 151 |
1 files changed, 34 insertions, 117 deletions
diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx index 8c6a3238..6572dc55 100644 --- a/src/screens/suggestedPeople/SPBody.tsx +++ b/src/screens/suggestedPeople/SPBody.tsx @@ -3,12 +3,9 @@ import React, {Fragment, useEffect, useMemo, useState} from 'react'; import {StyleSheet, Text, View} from 'react-native'; import {Image} from 'react-native-animatable'; import {TouchableOpacity} from 'react-native-gesture-handler'; -import LinearGradient from 'react-native-linear-gradient'; -import Animated from 'react-native-reanimated'; import RequestedButton from '../../assets/ionicons/requested-button.svg'; import {TaggsBar} from '../../components'; -import UniversityIcon from '../../components/profile/UniversityIcon'; -import {MutualFriends} from '../../components/suggestedPeople'; +import {BadgesDropdown, MutualFriends} from '../../components/suggestedPeople'; import {DATA} from '../../screens/badge/BadgeSelection'; import { ProfilePreviewType, @@ -17,10 +14,11 @@ import { UniversityBadge, } from '../../types'; import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; +import Animated from 'react-native-reanimated'; interface SPBodyProps { item: SuggestedPeopleDataType; - index: number; + itemIndex: number; onAddFriend: (user: ProfilePreviewType) => Promise<void>; onCancelRequest: (user: ProfilePreviewType) => void; loggedInUserId: string; @@ -35,14 +33,20 @@ const SPBody: React.FC<SPBodyProps> = ({ friendship, badges, }, - index, + itemIndex, onAddFriend, onCancelRequest, loggedInUserId, }) => { - const firstItem = index === 0; + const firstItem = itemIndex === 0; const screenType = ScreenType.SuggestedPeople; - const [localBadges, setLocalBadges] = useState([]); + const [localBadges, setLocalBadges] = useState< + { + badge: UniversityBadge; + img: string; + }[] + >([]); + const navigation = useNavigation(); let array = []; useEffect(() => { const findBadgeIcons = (badge: UniversityBadge) => { @@ -62,7 +66,7 @@ const SPBody: React.FC<SPBodyProps> = ({ : console.log('NO BADGES FOUND'); }, []); - const displayButton = () => { + const FriendButton = () => { switch (friendship.status) { case 'friends': return <Fragment />; @@ -111,7 +115,22 @@ const SPBody: React.FC<SPBodyProps> = ({ ), [suggested_people_url], ); - const navigation = useNavigation(); + + const NamePlate = () => { + return ( + <TouchableOpacity + onPress={() => { + navigation.push('Profile', { + userXId: user.id, + screenType, + }); + }} + style={styles.nameInfoContainer}> + <Text style={styles.firstName}>{user.first_name}</Text> + <Text style={styles.username}>@{user.username}</Text> + </TouchableOpacity> + ); + }; return ( <View> @@ -119,62 +138,15 @@ const SPBody: React.FC<SPBodyProps> = ({ <View style={styles.mainContainer}> <View style={styles.topContainer}> <Text style={styles.title}>{firstItem && 'Suggested People'}</Text> - <View - style={[styles.badgesContainer, {height: 45 + 42 * badges.length}]}> - <TouchableOpacity - onPress={() => { - console.log('badges: ', badges); - }}> - <UniversityIcon - university="brown" - style={styles.universityIconContainer} - imageStyle={{width: normalize(31), height: normalize(38)}} - /> - </TouchableOpacity> - {localBadges && - localBadges.map(({badge, img}) => ( - <TouchableOpacity - key={badge.id} - style={styles.badgeButton} - onPress={() => { - navigation.navigate('MutualBadgeHolders', { - badge_id: badge.id, - badge_title: badge.name, - }); - }}> - <LinearGradient - colors={['#4E3629', '#EC2027']} - useAngle={true} - angle={154.72} - angleCenter={{x: 0.5, y: 0.5}} - style={styles.badgeBackground}> - <Image - source={img} - style={{ - width: SCREEN_WIDTH * 0.04, - height: SCREEN_WIDTH * 0.04, - }} - /> - </LinearGradient> - </TouchableOpacity> - ))} - </View> + {localBadges && ( + <BadgesDropdown localBadges={localBadges} badges={badges} /> + )} </View> <View style={styles.body}> <View style={styles.marginManager}> <View style={styles.addUserContainer}> - <TouchableOpacity - onPress={() => { - navigation.push('Profile', { - userXId: user.id, - screenType, - }); - }} - style={styles.nameInfoContainer}> - <Text style={styles.firstName}>{user.first_name}</Text> - <Text style={styles.username}>@{user.username}</Text> - </TouchableOpacity> - {user.id !== loggedInUserId && displayButton()} + <NamePlate /> + {user.id !== loggedInUserId && <FriendButton />} </View> </View> <TaggsBar @@ -209,10 +181,6 @@ const styles = StyleSheet.create({ flexDirection: 'column', justifyContent: 'space-between', }, - universityIconContainer: { - width: normalize(31), - height: normalize(38), - }, marginManager: {marginHorizontal: '5%'}, image: { position: 'absolute', @@ -302,16 +270,7 @@ const styles = StyleSheet.create({ shadowOffset: {width: 2, height: 2}, shadowOpacity: 0.5, }, - requestedButtonTitle: { - backgroundColor: 'transparent', - fontSize: normalize(15), - lineHeight: normalize(18), - fontWeight: 'bold', - textAlign: 'center', - letterSpacing: normalize(1), - }, body: {}, - button: { justifyContent: 'center', alignItems: 'center', @@ -323,48 +282,6 @@ const styles = StyleSheet.create({ marginRight: '2%', marginLeft: '1%', }, - transparentBG: { - backgroundColor: 'transparent', - }, - lightBlueBG: { - backgroundColor: '#fff', - }, - label: { - fontSize: normalize(15), - fontWeight: '700', - letterSpacing: 1, - }, - blueLabel: { - color: '#fff', - }, - whiteLabel: { - color: 'white', - }, - badgeBackground: { - position: 'absolute', - width: '100%', - height: '100%', - borderRadius: 50, - borderColor: 'transparent', - borderWidth: 1, - alignSelf: 'center', - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', - }, - badgesContainer: { - flexDirection: 'column', - justifyContent: 'space-between', - alignItems: 'center', - width: 38, - left: '5%', - paddingBottom: '2%', - }, - badgeButton: { - width: 30, - height: 30, - borderRadius: 15, - }, }); export default SPBody; |