diff options
| -rw-r--r-- | src/components/suggestedPeople/BadgeIcon.tsx | 13 | ||||
| -rw-r--r-- | src/screens/suggestedPeople/SPBody.tsx | 61 |
2 files changed, 51 insertions, 23 deletions
diff --git a/src/components/suggestedPeople/BadgeIcon.tsx b/src/components/suggestedPeople/BadgeIcon.tsx index e8425308..8f576a43 100644 --- a/src/components/suggestedPeople/BadgeIcon.tsx +++ b/src/components/suggestedPeople/BadgeIcon.tsx @@ -1,6 +1,12 @@ import {useNavigation} from '@react-navigation/core'; import React from 'react'; -import {Image, ImageSourcePropType, StyleSheet} from 'react-native'; +import { + Image, + ImageSourcePropType, + StyleProp, + StyleSheet, + ViewStyle, +} from 'react-native'; import {TouchableOpacity} from 'react-native-gesture-handler'; import LinearGradient from 'react-native-linear-gradient'; import {UniversityBadge} from '../../types'; @@ -9,13 +15,14 @@ import {normalize} from '../../utils'; interface BadgeIconProps { badge: UniversityBadge; img: ImageSourcePropType; + style?: StyleProp<ViewStyle>; } -const BadgeIcon: React.FC<BadgeIconProps> = ({badge, img}) => { +const BadgeIcon: React.FC<BadgeIconProps> = ({badge, img, style}) => { const navigation = useNavigation(); return ( <TouchableOpacity - style={styles.badgeButton} + style={[styles.badgeButton, style]} onPress={() => { navigation.navigate('MutualBadgeHolders', { badge_id: badge.id, diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx index 352e4433..9708a652 100644 --- a/src/screens/suggestedPeople/SPBody.tsx +++ b/src/screens/suggestedPeople/SPBody.tsx @@ -1,17 +1,11 @@ import {useNavigation} from '@react-navigation/native'; import React, {Fragment, useEffect, useMemo, useState} from 'react'; -import { - ImageSourcePropType, - ScrollView, - StyleSheet, - Text, - View, -} from 'react-native'; +import {ImageSourcePropType, StyleSheet, Text, View} from 'react-native'; import {Image} from 'react-native-animatable'; import {TouchableOpacity} from 'react-native-gesture-handler'; import RequestedButton from '../../assets/ionicons/requested-button.svg'; -import {SPTaggsBar} from '../../components'; -import {BadgesDropdown, MutualFriends} from '../../components/suggestedPeople'; +import {UniversityIcon} from '../../components'; +import {BadgeIcon, MutualFriends} from '../../components/suggestedPeople'; import {BADGE_DATA} from '../../constants/badges'; import { ProfilePreviewType, @@ -34,7 +28,6 @@ const SPBody: React.FC<SPBodyProps> = ({ user, university, mutual_friends, - social_links, suggested_people_url, friendship, badges, @@ -130,8 +123,7 @@ const SPBody: React.FC<SPBodyProps> = ({ userXId: loggedInUserId === user.id ? undefined : user.id, screenType, }); - }} - style={styles.nameInfoContainer}> + }}> <Text style={styles.firstName}>{user.first_name}</Text> <Text style={styles.username}>@{user.username}</Text> </TouchableOpacity> @@ -144,20 +136,35 @@ const SPBody: React.FC<SPBodyProps> = ({ <View style={styles.mainContainer}> <View style={styles.topContainer}> <Text style={styles.title}>{firstItem && 'Suggested People'}</Text> - {localBadges && <BadgesDropdown {...{university, localBadges}} />} + <UniversityIcon + university={university} + style={styles.universityIcon} + imageStyle={styles.universityIcon} + /> </View> - <View style={styles.body}> + <View> <View style={styles.marginManager}> <View style={styles.addUserContainer}> <NamePlate /> {user.id !== loggedInUserId && <FriendButton />} </View> </View> - <SPTaggsBar - userXId={user.id === loggedInUserId ? undefined : user.id} - screenType={screenType} - linkedSocials={social_links} - /> + {localBadges.length !== 0 && ( + // Badges aligned left and spaced as if there are 5 items + <View style={styles.badgeContainer}> + {localBadges.map(({badge, img}, index) => ( + <BadgeIcon + key={index} + badge={badge} + img={img} + style={styles.badge} + /> + ))} + {[0, 0, 0, 0, 0].splice(localBadges.length, 5).map((_, index) => ( + <View key={index} style={styles.badge} /> + ))} + </View> + )} <View style={styles.marginManager}> <MutualFriends user={user} friends={mutual_friends} /> </View> @@ -223,7 +230,6 @@ const styles = StyleSheet.create({ textShadowRadius: normalize(2), letterSpacing: normalize(2), }, - nameInfoContainer: {}, addButton: { justifyContent: 'center', alignItems: 'center', @@ -271,6 +277,21 @@ const styles = StyleSheet.create({ shadowOffset: {width: 2, height: 2}, shadowOpacity: 0.5, }, + universityIcon: { + left: '5%', + width: normalize(31), + height: normalize(38), + }, + badgeContainer: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-evenly', + marginBottom: 25, + }, + badge: { + width: normalize(52), + height: normalize(52), + borderWidth: 1, }, }); |