aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/search/ExploreSection.tsx2
-rw-r--r--src/constants/api.ts1
-rw-r--r--src/routes/main/MainStackNavigator.tsx3
-rw-r--r--src/routes/main/MainStackScreen.tsx8
-rw-r--r--src/screens/suggestedPeople/MutualBadgeHolders.tsx172
-rw-r--r--src/screens/suggestedPeople/SPBody.tsx16
-rw-r--r--src/services/SuggestedPeopleService.ts27
7 files changed, 225 insertions, 4 deletions
diff --git a/src/components/search/ExploreSection.tsx b/src/components/search/ExploreSection.tsx
index 025c8c3c..53073a9e 100644
--- a/src/components/search/ExploreSection.tsx
+++ b/src/components/search/ExploreSection.tsx
@@ -14,7 +14,7 @@ interface ExploreSectionProps {
users: ProfilePreviewType[];
}
const ExploreSection: React.FC<ExploreSectionProps> = ({title, users}) => {
- return users.length !== 0 ? (
+ return users?.length !== 0 ? (
<View style={styles.container}>
<Text style={styles.header}>{title}</Text>
<FlatList
diff --git a/src/constants/api.ts b/src/constants/api.ts
index 57c26824..9eaf60ee 100644
--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@@ -36,6 +36,7 @@ export const COMMENT_THREAD_ENDPOINT: string = API_URL + 'reply/';
// Suggested People
export const SP_USERS_ENDPOINT: string = API_URL + 'suggested_people/';
export const SP_UPDATE_PICTURE_ENDPOINT: string = API_URL + 'suggested_people/update_picture/';
+export const SP_MUTUAL_BADGE_HOLDERS_ENDPOINT: string = SP_USERS_ENDPOINT + 'get_mutual_badge_holders/';
// Register as FCM device
export const FCM_ENDPOINT: string = API_URL + 'fcm/';
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index 901dd993..9b559800 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -72,6 +72,9 @@ export type MainStackParams = {
UpdateSPPicture: {
goTo: string;
};
+ MutualBadgeHolders: {
+ badge_id: string;
+ };
};
export const MainStack = createStackNavigator<MainStackParams>();
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 04f73985..66cce109 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -1,9 +1,10 @@
import AsyncStorage from '@react-native-community/async-storage';
import {RouteProp} from '@react-navigation/native';
import {StackNavigationOptions} from '@react-navigation/stack';
-import React, {useEffect, useState} from 'react';
+import React, {useState} from 'react';
import {StyleSheet, Text} from 'react-native';
import {normalize} from 'react-native-elements';
+import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders';
import BackIcon from '../../assets/icons/back-arrow.svg';
import {
AnimatedTutorial,
@@ -225,6 +226,11 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
...headerBarOptions('white', ''),
}}
/>
+ <MainStack.Screen
+ name="MutualBadgeHolders"
+ component={MutualBadgeHolders}
+ options={{...modalStyle}}
+ />
</MainStack.Navigator>
);
};
diff --git a/src/screens/suggestedPeople/MutualBadgeHolders.tsx b/src/screens/suggestedPeople/MutualBadgeHolders.tsx
new file mode 100644
index 00000000..2e2c452a
--- /dev/null
+++ b/src/screens/suggestedPeople/MutualBadgeHolders.tsx
@@ -0,0 +1,172 @@
+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 {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 {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} = 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);
+ 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>
+ <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.headerContainer}>
+ <Text style={styles.heading}>Brown Football Badge</Text>
+ <Text style={styles.subHeading}>
+ See who else has the badge: Brown University Football!
+ </Text>
+ </View>
+ <FlatList
+ data={users}
+ numColumns={3}
+ columnWrapperStyle={styles.columnWrapperStyle}
+ renderItem={(user) => {
+ return (
+ <ExploreSectionUser
+ key={user.item.id}
+ user={user.item}
+ style={{margin: 6}}
+ // labelColor={{color: 'black'}}
+ />
+ );
+ }}
+ 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.6,
+ alignSelf: 'center',
+ bottom: '10%',
+ borderColor: '#fff',
+ borderWidth: 1,
+ borderRadius: 5,
+ },
+ closeButton: {
+ position: 'absolute',
+ height: normalize(20),
+ width: normalize(20),
+ left: '3%',
+ top: '2%',
+ },
+ badgeBackground: {
+ width: 80,
+ height: 80,
+ borderRadius: 50,
+ borderColor: 'transparent',
+ borderWidth: 1,
+ alignSelf: 'center',
+ top: -40,
+ },
+ headerContainer: {
+ top: -20,
+ width: '100%',
+ height: 50,
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'space-evenly',
+ },
+ heading: {
+ fontSize: 17,
+ fontWeight: '600',
+ lineHeight: 20,
+ color: '#000',
+ },
+ subHeading: {
+ fontSize: 11,
+ fontWeight: '600',
+ lineHeight: 15,
+ color: '#828282',
+ },
+ columnWrapperStyle: {
+ width: SCREEN_WIDTH * 0.85,
+ flexDirection: 'row',
+ alignSelf: 'center',
+ justifyContent: 'space-between',
+ },
+ flatlistContainer: {
+ width: SCREEN_WIDTH * 0.93,
+ alignSelf: 'center',
+ flexDirection: 'column',
+ },
+ flatlistContentContainer: {
+ width: SCREEN_WIDTH * 0.93,
+ paddingBottom: 20,
+ alignSelf: 'center',
+ },
+});
+export default MutualBadgeHolders;
diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx
index aa97dc94..972484ab 100644
--- a/src/screens/suggestedPeople/SPBody.tsx
+++ b/src/screens/suggestedPeople/SPBody.tsx
@@ -13,7 +13,7 @@ import {
SuggestedPeopleDataType,
} from '../../types';
import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
-
+import UniversityIcon from '../../components/profile';
interface SPBodyProps {
item: SuggestedPeopleDataType;
index: number;
@@ -88,6 +88,20 @@ const SPBody: React.FC<SPBodyProps> = ({
{backgroundImage}
<View style={styles.mainContainer}>
<Text style={styles.title}>{firstItem && 'Suggested People'}</Text>
+ <TouchableOpacity
+ style={{
+ backgroundColor: 'indianred',
+ width: 60,
+ height: 60,
+ borderRadius: 30,
+ borderWidth: 1,
+ borderColor: 'transparent',
+ }}
+ onPress={() =>
+ navigation.navigate('MutualBadgeHolders', {badge_id: 40})
+ }>
+ {/* <UniversityIcon university="brown" /> */}
+ </TouchableOpacity>
<View style={styles.body}>
<View style={styles.marginManager}>
<View style={styles.addUserContainer}>
diff --git a/src/services/SuggestedPeopleService.ts b/src/services/SuggestedPeopleService.ts
index aa1fabde..e67a897d 100644
--- a/src/services/SuggestedPeopleService.ts
+++ b/src/services/SuggestedPeopleService.ts
@@ -1,10 +1,11 @@
import AsyncStorage from '@react-native-community/async-storage';
import {
EDIT_PROFILE_ENDPOINT,
+ SP_MUTUAL_BADGE_HOLDERS_ENDPOINT,
SP_UPDATE_PICTURE_ENDPOINT,
SP_USERS_ENDPOINT,
} from '../constants';
-import {SuggestedPeopleDataType} from '../types';
+import {ProfilePreviewType, SuggestedPeopleDataType} from '../types';
export const sendSuggestedPeopleLinked = async (
userId: string,
@@ -97,3 +98,27 @@ export const getSuggestedPeopleProfile = async (userId: string) => {
return undefined;
}
};
+
+export const getMutualBadgeHolders = async (badgeId: string) => {
+ try {
+ console.log('getMutualBadgeHolders called');
+ const token = await AsyncStorage.getItem('token');
+ const response = await fetch(SP_MUTUAL_BADGE_HOLDERS_ENDPOINT, {
+ method: 'GET',
+ headers: {
+ Authorization: 'Token ' + token,
+ },
+ });
+ console.log('response: ', response);
+ if (response.status === 200) {
+ const data: ProfilePreviewType[] = await response.json();
+ console.log('users::: ', data);
+ return data;
+ } else {
+ return undefined;
+ }
+ } catch (error) {
+ console.log('Error retrieving SP info');
+ return undefined;
+ }
+};
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 17:25:42 +0000