done; Pending: icons

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;
+  }
+};