From 18474b59861e6cac5566c5e1202f4b59fc2357a1 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 5 Mar 2021 19:59:23 -0800 Subject: done --- src/components/profile/UniversityIcon.tsx | 16 +++-- src/screens/badge/BadgeSelection.tsx | 4 +- src/screens/suggestedPeople/SPBody.tsx | 114 ++++++++++++++++++++++++++++-- 3 files changed, 122 insertions(+), 12 deletions(-) (limited to 'src') diff --git a/src/components/profile/UniversityIcon.tsx b/src/components/profile/UniversityIcon.tsx index 95aef8b9..097b01dd 100644 --- a/src/components/profile/UniversityIcon.tsx +++ b/src/components/profile/UniversityIcon.tsx @@ -1,11 +1,12 @@ import React from 'react'; -import {StyleSheet, ViewProps} from 'react-native'; +import {ImageStyle, StyleProp, StyleSheet, ViewProps} from 'react-native'; import {Image, Text, View} from 'react-native-animatable'; import {getUniversityClass, normalize} from '../../utils'; export interface UniversityIconProps extends ViewProps { university: string; - university_class: number; + university_class?: number; + imageStyle?: StyleProp; } /** @@ -13,6 +14,7 @@ export interface UniversityIconProps extends ViewProps { */ const UniversityIcon: React.FC = ({ style, + imageStyle, university, university_class, }) => { @@ -28,10 +30,12 @@ const UniversityIcon: React.FC = ({ return ( - - - {getUniversityClass(university_class)} - + + {university_class && ( + + {getUniversityClass(university_class)} + + )} ); }; 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 aa97dc94..8c6a3238 100644 --- a/src/screens/suggestedPeople/SPBody.tsx +++ b/src/screens/suggestedPeople/SPBody.tsx @@ -1,18 +1,22 @@ 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 {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; +import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; interface SPBodyProps { item: SuggestedPeopleDataType; @@ -23,7 +27,14 @@ interface SPBodyProps { } const SPBody: React.FC = ({ - 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 = ({ }) => { 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) { @@ -87,7 +117,49 @@ const SPBody: React.FC = ({ {backgroundImage} - {firstItem && 'Suggested People'} + + {firstItem && 'Suggested People'} + + { + console.log('badges: ', badges); + }}> + + + {localBadges && + localBadges.map(({badge, img}) => ( + { + navigation.navigate('MutualBadgeHolders', { + badge_id: badge.id, + badge_title: badge.name, + }); + }}> + + + + + ))} + + @@ -132,6 +204,15 @@ 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), + }, marginManager: {marginHorizontal: '5%'}, image: { position: 'absolute', @@ -259,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; -- cgit v1.2.3-70-g09d2