aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/profile/UniversityIcon.tsx16
-rw-r--r--src/screens/badge/BadgeSelection.tsx4
-rw-r--r--src/screens/suggestedPeople/SPBody.tsx114
3 files changed, 122 insertions, 12 deletions
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<ImageStyle>;
}
/**
@@ -13,6 +14,7 @@ export interface UniversityIconProps extends ViewProps {
*/
const UniversityIcon: React.FC<UniversityIconProps> = ({
style,
+ imageStyle,
university,
university_class,
}) => {
@@ -28,10 +30,12 @@ const UniversityIcon: React.FC<UniversityIconProps> = ({
return (
<View style={[styles.container, style]}>
- <Image source={universityIcon} style={styles.icon} />
- <Text style={styles.univClass}>
- {getUniversityClass(university_class)}
- </Text>
+ <Image source={universityIcon} style={[styles.icon, imageStyle]} />
+ {university_class && (
+ <Text style={styles.univClass}>
+ {getUniversityClass(university_class)}
+ </Text>
+ )}
</View>
);
};
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<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) {
@@ -87,7 +117,49 @@ 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>
+ <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}>
<View style={styles.addUserContainer}>
@@ -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;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 16:34:19 +0000