aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/assets/icons/badges/football.pngbin0 -> 5374 bytes
-rw-r--r--src/components/search/ExploreSection.tsx8
-rw-r--r--src/routes/main/MainStackNavigator.tsx1
-rw-r--r--src/screens/suggestedPeople/MutualBadgeHolders.tsx101
-rw-r--r--src/screens/suggestedPeople/SPBody.tsx5
-rw-r--r--src/services/SuggestedPeopleService.ts1
6 files changed, 80 insertions, 36 deletions
diff --git a/src/assets/icons/badges/football.png b/src/assets/icons/badges/football.png
new file mode 100644
index 00000000..2e8214b7
--- /dev/null
+++ b/src/assets/icons/badges/football.png
Binary files differ
diff --git a/src/components/search/ExploreSection.tsx b/src/components/search/ExploreSection.tsx
index 53073a9e..784e089c 100644
--- a/src/components/search/ExploreSection.tsx
+++ b/src/components/search/ExploreSection.tsx
@@ -21,7 +21,13 @@ const ExploreSection: React.FC<ExploreSectionProps> = ({title, users}) => {
data={users}
ListHeaderComponent={<View style={styles.padding} />}
renderItem={({item: user}: {item: ProfilePreviewType}) => (
- <ExploreSectionUser key={user.id} user={user} style={styles.user} />
+ <ExploreSectionUser
+ key={user.id}
+ user={user}
+ externalStyles={StyleSheet.create({
+ container: styles.user,
+ })}
+ />
)}
showsHorizontalScrollIndicator={false}
horizontal
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index 9b559800..5cbe55d6 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -74,6 +74,7 @@ export type MainStackParams = {
};
MutualBadgeHolders: {
badge_id: string;
+ badge_title: string;
};
};
diff --git a/src/screens/suggestedPeople/MutualBadgeHolders.tsx b/src/screens/suggestedPeople/MutualBadgeHolders.tsx
index 2e2c452a..9742d72c 100644
--- a/src/screens/suggestedPeople/MutualBadgeHolders.tsx
+++ b/src/screens/suggestedPeople/MutualBadgeHolders.tsx
@@ -4,12 +4,12 @@ import React, {useEffect, useState} from 'react';
import {getMutualBadgeHolders} from '../../services';
import {ProfilePreviewType} from '../../types';
import {MainStackParams} from '../../routes/main/MainStackNavigator';
-import {Text, View} from 'react-native-animatable';
+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, ScrollView} from 'react-native-gesture-handler';
+import {FlatList} from 'react-native-gesture-handler';
import {StyleSheet, TouchableOpacity} from 'react-native';
import ExploreSectionUser from '../../components/search/ExploreSectionUser';
@@ -32,12 +32,11 @@ const MutualBadgeHolders: React.FC<MutualBadgeHoldersProps> = ({
route,
navigation,
}) => {
- const {badge_id} = route.params;
+ const {badge_id, badge_title} = route.params;
const [users, setUsers] = useState<ProfilePreviewType[] | undefined>([]);
useEffect(() => {
const getUsers = async (badge_id: string) => {
- console.log('useEffect called to populate mutual badge holders users ');
let localUsers:
| ProfilePreviewType[]
| undefined = await getMutualBadgeHolders(badge_id);
@@ -57,21 +56,25 @@ const MutualBadgeHolders: React.FC<MutualBadgeHoldersProps> = ({
}}>
<CloseIcon height={'100%'} width={'100%'} color={'grey'} />
</TouchableOpacity>
- <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
- */}
+ <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}>Brown Football Badge</Text>
- <Text style={styles.subHeading}>
- See who else has the badge: Brown University Football!
- </Text>
+ <Text style={styles.heading}>{badge_title}</Text>
+ <Text style={styles.subHeading}>See who else has this badge!</Text>
</View>
<FlatList
data={users}
@@ -82,8 +85,7 @@ const MutualBadgeHolders: React.FC<MutualBadgeHoldersProps> = ({
<ExploreSectionUser
key={user.item.id}
user={user.item}
- style={{margin: 6}}
- // labelColor={{color: 'black'}}
+ externalStyles={exploreUserStyle}
/>
);
}}
@@ -109,9 +111,9 @@ const styles = StyleSheet.create({
mainContentContainer: {
backgroundColor: '#fff',
width: SCREEN_WIDTH * 0.93,
- height: SCREEN_HEIGHT * 0.6,
+ height: SCREEN_HEIGHT * 0.64,
alignSelf: 'center',
- bottom: '10%',
+ bottom: '2.5%',
borderColor: '#fff',
borderWidth: 1,
borderRadius: 5,
@@ -124,49 +126,82 @@ const styles = StyleSheet.create({
top: '2%',
},
badgeBackground: {
- width: 80,
- height: 80,
+ position: 'absolute',
+ width: '100%',
+ height: '100%',
borderRadius: 50,
borderColor: 'transparent',
borderWidth: 1,
alignSelf: 'center',
- top: -40,
+ 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: -20,
+ top: '-5%',
width: '100%',
- height: 50,
+ height: '9%',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'space-evenly',
},
heading: {
- fontSize: 17,
+ fontSize: normalize(17),
fontWeight: '600',
- lineHeight: 20,
+ lineHeight: normalize(20),
color: '#000',
},
subHeading: {
- fontSize: 11,
+ fontSize: normalize(11),
fontWeight: '600',
- lineHeight: 15,
+ 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.93,
+ width: SCREEN_WIDTH * 0.85,
alignSelf: 'center',
flexDirection: 'column',
+ top: '-1%',
},
flatlistContentContainer: {
- width: SCREEN_WIDTH * 0.93,
+ 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 972484ab..16b5ae9b 100644
--- a/src/screens/suggestedPeople/SPBody.tsx
+++ b/src/screens/suggestedPeople/SPBody.tsx
@@ -98,7 +98,10 @@ const SPBody: React.FC<SPBodyProps> = ({
borderColor: 'transparent',
}}
onPress={() =>
- navigation.navigate('MutualBadgeHolders', {badge_id: 40})
+ navigation.navigate('MutualBadgeHolders', {
+ badge_id: 40,
+ badge_title: 'Brown University Football',
+ })
}>
{/* <UniversityIcon university="brown" /> */}
</TouchableOpacity>
diff --git a/src/services/SuggestedPeopleService.ts b/src/services/SuggestedPeopleService.ts
index e67a897d..cbbc762a 100644
--- a/src/services/SuggestedPeopleService.ts
+++ b/src/services/SuggestedPeopleService.ts
@@ -112,7 +112,6 @@ export const getMutualBadgeHolders = async (badgeId: string) => {
console.log('response: ', response);
if (response.status === 200) {
const data: ProfilePreviewType[] = await response.json();
- console.log('users::: ', data);
return data;
} else {
return undefined;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 02:38:43 +0000