Merge branch 'master' into search-revamp-2

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;