diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/profile/UniversityIcon.tsx | 1 | ||||
| -rw-r--r-- | src/screens/badge/BadgeSelection.tsx | 4 | ||||
| -rw-r--r-- | src/screens/suggestedPeople/SPBody.tsx | 115 |
3 files changed, 101 insertions, 19 deletions
diff --git a/src/components/profile/UniversityIcon.tsx b/src/components/profile/UniversityIcon.tsx index 48cfe3dc..d4b9a5dd 100644 --- a/src/components/profile/UniversityIcon.tsx +++ b/src/components/profile/UniversityIcon.tsx @@ -14,6 +14,7 @@ export interface UniversityIconProps extends ViewProps { */ const UniversityIcon: React.FC<UniversityIconProps> = ({ style, + imageStyle, university, university_class, imageStyle, diff --git a/src/screens/badge/BadgeSelection.tsx b/src/screens/badge/BadgeSelection.tsx index 4754960b..4946bd96 100644 --- a/src/screens/badge/BadgeSelection.tsx +++ b/src/screens/badge/BadgeSelection.tsx @@ -21,7 +21,7 @@ import BadgeScreenHeader from './BadgeScreenHeader'; * Home Screen for displaying Tagg Badge Selections **/ -const BadgeImages = { +export const BadgeImages = { football: require('../../assets/images/badges/football.png'), track: require('../../assets/images/badges/track.png'), volleyball: require('../../assets/images/badges/volleyball.png'), @@ -42,7 +42,7 @@ const BadgeImages = { betaomegachi: require('../../assets/images/badges/beta_omega_chi.png'), }; -const DATA = [ +export const DATA = [ { title: 'Athletics', data: [ diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx index 21e86f14..8c6a3238 100644 --- a/src/screens/suggestedPeople/SPBody.tsx +++ b/src/screens/suggestedPeople/SPBody.tsx @@ -1,19 +1,23 @@ import {useNavigation} from '@react-navigation/native'; -import React, {Fragment, useMemo} from 'react'; +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 {DATA} from '../../screens/badge/BadgeSelection'; import { ProfilePreviewType, ScreenType, SuggestedPeopleDataType, + UniversityBadge, } from '../../types'; import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; -import UniversityIcon from '../../components/profile/UniversityIcon'; + interface SPBodyProps { item: SuggestedPeopleDataType; index: number; @@ -23,7 +27,14 @@ interface SPBodyProps { } const SPBody: React.FC<SPBodyProps> = ({ - item: {user, mutual_friends, social_links, suggested_people_url, friendship}, + item: { + user, + mutual_friends, + social_links, + suggested_people_url, + friendship, + badges, + }, index, onAddFriend, onCancelRequest, @@ -31,6 +42,25 @@ const SPBody: React.FC<SPBodyProps> = ({ }) => { const firstItem = index === 0; const screenType = ScreenType.SuggestedPeople; + const [localBadges, setLocalBadges] = useState([]); + let array = []; + useEffect(() => { + const findBadgeIcons = (badge: UniversityBadge) => { + DATA.forEach((item) => { + if (item.title === badge.category) { + item.data.forEach((object) => { + if (object.badgeName === badge.name) { + array.push({badge, img: object.badgeImage}); + } + }); + } + }); + setLocalBadges(array); + }; + badges + ? badges.forEach((badge) => findBadgeIcons(badge)) + : console.log('NO BADGES FOUND'); + }, []); const displayButton = () => { switch (friendship.status) { @@ -89,19 +119,46 @@ const SPBody: React.FC<SPBodyProps> = ({ <View style={styles.mainContainer}> <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 + 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> </View> <View style={styles.body}> <View style={styles.marginManager}> @@ -155,7 +212,6 @@ const styles = StyleSheet.create({ universityIconContainer: { width: normalize(31), height: normalize(38), - left: '5%', }, marginManager: {marginHorizontal: '5%'}, image: { @@ -284,6 +340,31 @@ const styles = StyleSheet.create({ 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; |