aboutsummaryrefslogtreecommitdiff
path: root/src/screens
diff options
context:
space:
mode:
Diffstat (limited to 'src/screens')
-rw-r--r--src/screens/badge/BadgeSelection.tsx4
-rw-r--r--src/screens/suggestedPeople/MutualBadgeHolders.tsx207
-rw-r--r--src/screens/suggestedPeople/SPBody.tsx114
3 files changed, 319 insertions, 6 deletions
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/MutualBadgeHolders.tsx b/src/screens/suggestedPeople/MutualBadgeHolders.tsx
new file mode 100644
index 00000000..9742d72c
--- /dev/null
+++ b/src/screens/suggestedPeople/MutualBadgeHolders.tsx
@@ -0,0 +1,207 @@
+import {RouteProp} from '@react-navigation/native';
+import {StackNavigationProp} from '@react-navigation/stack';
+import React, {useEffect, useState} from 'react';
+import {getMutualBadgeHolders} from '../../services';
+import {ProfilePreviewType} from '../../types';
+import {MainStackParams} from '../../routes/main/MainStackNavigator';
+import {Image, Text, View} from 'react-native-animatable';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import {SCREEN_HEIGHT, SCREEN_WIDTH, isIPhoneX, normalize} from '../../utils';
+import LinearGradient from 'react-native-linear-gradient';
+import CloseIcon from '../../assets/ionicons/close-outline.svg';
+import {FlatList} from 'react-native-gesture-handler';
+import {StyleSheet, TouchableOpacity} from 'react-native';
+import ExploreSectionUser from '../../components/search/ExploreSectionUser';
+
+type MutualBadgeHoldersRouteProps = RouteProp<
+ MainStackParams,
+ 'MutualBadgeHolders'
+>;
+
+type MutualBadgeHoldersNavigationProps = StackNavigationProp<
+ MainStackParams,
+ 'MutualBadgeHolders'
+>;
+
+interface MutualBadgeHoldersProps {
+ route: MutualBadgeHoldersRouteProps;
+ navigation: MutualBadgeHoldersNavigationProps;
+}
+
+const MutualBadgeHolders: React.FC<MutualBadgeHoldersProps> = ({
+ route,
+ navigation,
+}) => {
+ const {badge_id, badge_title} = route.params;
+ const [users, setUsers] = useState<ProfilePreviewType[] | undefined>([]);
+
+ useEffect(() => {
+ const getUsers = async (badge_id: string) => {
+ let localUsers:
+ | ProfilePreviewType[]
+ | undefined = await getMutualBadgeHolders(badge_id);
+ setUsers(localUsers);
+ };
+ getUsers(badge_id);
+ }, [badge_id]);
+
+ return (
+ <SafeAreaView>
+ <View style={styles.mainContainer}>
+ <View style={styles.mainContentContainer}>
+ <TouchableOpacity
+ style={styles.closeButton}
+ onPress={() => {
+ navigation.goBack();
+ }}>
+ <CloseIcon height={'100%'} width={'100%'} color={'grey'} />
+ </TouchableOpacity>
+ <View style={styles.iconView}>
+ <LinearGradient
+ colors={['#4E3629', '#EC2027']}
+ useAngle={true}
+ angle={154.72}
+ angleCenter={{x: 0.5, y: 0.5}}
+ style={styles.badgeBackground}>
+ {/* TODO: Insert image link according to badge_id passed.
+ * Awaiting final images from product
+ */}
+ <Image
+ source={require('../../assets/icons/badges/football.png')}
+ style={{width: SCREEN_WIDTH * 0.1, height: SCREEN_WIDTH * 0.1}}
+ />
+ </LinearGradient>
+ </View>
+ <View style={styles.headerContainer}>
+ <Text style={styles.heading}>{badge_title}</Text>
+ <Text style={styles.subHeading}>See who else has this badge!</Text>
+ </View>
+ <FlatList
+ data={users}
+ numColumns={3}
+ columnWrapperStyle={styles.columnWrapperStyle}
+ renderItem={(user) => {
+ return (
+ <ExploreSectionUser
+ key={user.item.id}
+ user={user.item}
+ externalStyles={exploreUserStyle}
+ />
+ );
+ }}
+ keyExtractor={(item, index) => index.toString()}
+ showsVerticalScrollIndicator={false}
+ style={styles.flatlistContainer}
+ contentContainerStyle={styles.flatlistContentContainer}
+ />
+ <View />
+ </View>
+ </View>
+ </SafeAreaView>
+ );
+};
+
+const styles = StyleSheet.create({
+ mainContainer: {
+ flexDirection: 'column',
+ justifyContent: 'flex-end',
+ width: SCREEN_WIDTH,
+ height: isIPhoneX() ? SCREEN_HEIGHT * 0.85 : SCREEN_HEIGHT * 0.88,
+ },
+ mainContentContainer: {
+ backgroundColor: '#fff',
+ width: SCREEN_WIDTH * 0.93,
+ height: SCREEN_HEIGHT * 0.64,
+ alignSelf: 'center',
+ bottom: '2.5%',
+ borderColor: '#fff',
+ borderWidth: 1,
+ borderRadius: 5,
+ },
+ closeButton: {
+ position: 'absolute',
+ height: normalize(20),
+ width: normalize(20),
+ left: '3%',
+ top: '2%',
+ },
+ badgeBackground: {
+ position: 'absolute',
+ width: '100%',
+ height: '100%',
+ borderRadius: 50,
+ borderColor: 'transparent',
+ borderWidth: 1,
+ alignSelf: 'center',
+ flexDirection: 'row',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ iconView: {
+ flexDirection: 'row',
+ justifyContent: 'center',
+ alignItems: 'center',
+ width: SCREEN_WIDTH * 0.2,
+ height: SCREEN_WIDTH * 0.2,
+ alignSelf: 'center',
+ top: -SCREEN_WIDTH * 0.1,
+ },
+ headerContainer: {
+ top: '-5%',
+ width: '100%',
+ height: '9%',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'space-evenly',
+ },
+ heading: {
+ fontSize: normalize(17),
+ fontWeight: '600',
+ lineHeight: normalize(20),
+ color: '#000',
+ },
+ subHeading: {
+ fontSize: normalize(11),
+ fontWeight: '600',
+ lineHeight: normalize(15),
+ color: '#828282',
+ },
+ columnWrapperStyle: {
+ width: SCREEN_WIDTH * 0.85,
+ flexDirection: 'row',
+ flexGrow: 0,
+ alignSelf: 'center',
+ justifyContent: 'space-between',
+ marginBottom: '8%',
+ },
+ flatlistContainer: {
+ width: SCREEN_WIDTH * 0.85,
+ alignSelf: 'center',
+ flexDirection: 'column',
+ top: '-1%',
+ },
+ flatlistContentContainer: {
+ width: SCREEN_WIDTH * 0.85,
+ paddingBottom: 20,
+ alignSelf: 'center',
+ },
+});
+
+const exploreUserStyle = StyleSheet.create({
+ container: {},
+ name: {
+ fontWeight: '600',
+ flexWrap: 'wrap',
+ fontSize: normalize(12),
+ lineHeight: normalize(15),
+ color: '#000',
+ textAlign: 'center',
+ },
+ username: {
+ fontWeight: '500',
+ fontSize: normalize(10),
+ lineHeight: normalize(15),
+ color: '#000',
+ },
+});
+export default MutualBadgeHolders;
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-14 02:15:38 +0000