From 7d883c5946214c91b922b2c5eb310203dec02025 Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Fri, 5 Mar 2021 08:37:03 -0800
Subject: done; Pending: icons

---
 src/screens/suggestedPeople/MutualBadgeHolders.tsx | 172 +++++++++++++++++++++
 src/screens/suggestedPeople/SPBody.tsx             |  16 +-
 2 files changed, 187 insertions(+), 1 deletion(-)
 create mode 100644 src/screens/suggestedPeople/MutualBadgeHolders.tsx

(limited to 'src/screens')

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}>
-- 
cgit v1.2.3-70-g09d2