exported file, refactored SPBody

2 files changed, 15 insertions, 54 deletions

diff --git a/src/components/suggestedPeople/index.ts b/src/components/suggestedPeople/index.ts
index 219ee2fe..515f6fb4 100644
--- a/src/components/suggestedPeople/index.ts
+++ b/src/components/suggestedPeople/index.ts
@@ -1 +1,2 @@
 export {default as MutualFriends} from './MutualFriends';
+export {default as BadgesDropdown} from './BadgesDropdown';
diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx
index 8c6a3238..3c3636db 100644
--- a/src/screens/suggestedPeople/SPBody.tsx
+++ b/src/screens/suggestedPeople/SPBody.tsx
@@ -3,12 +3,9 @@ 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 {BadgesDropdown, MutualFriends} from '../../components/suggestedPeople';
 import {DATA} from '../../screens/badge/BadgeSelection';
 import {
   ProfilePreviewType,
@@ -17,10 +14,11 @@ import {
   UniversityBadge,
 } from '../../types';
 import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import Animated from 'react-native-reanimated';
 
 interface SPBodyProps {
   item: SuggestedPeopleDataType;
-  index: number;
+  itemIndex: number;
   onAddFriend: (user: ProfilePreviewType) => Promise<void>;
   onCancelRequest: (user: ProfilePreviewType) => void;
   loggedInUserId: string;
@@ -35,14 +33,20 @@ const SPBody: React.FC<SPBodyProps> = ({
     friendship,
     badges,
   },
-  index,
+  itemIndex,
   onAddFriend,
   onCancelRequest,
   loggedInUserId,
 }) => {
-  const firstItem = index === 0;
+  const firstItem = itemIndex === 0;
   const screenType = ScreenType.SuggestedPeople;
-  const [localBadges, setLocalBadges] = useState([]);
+  const [localBadges, setLocalBadges] = useState<
+    {
+      badge: UniversityBadge;
+      img: string;
+    }[]
+  >([]);
+  const navigation = useNavigation();
   let array = [];
   useEffect(() => {
     const findBadgeIcons = (badge: UniversityBadge) => {
@@ -111,7 +115,6 @@ const SPBody: React.FC<SPBodyProps> = ({
     ),
     [suggested_people_url],
   );
-  const navigation = useNavigation();
 
   return (
     <View>
@@ -119,46 +122,7 @@ const SPBody: React.FC<SPBodyProps> = ({
       <View style={styles.mainContainer}>
         <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>
+          {<BadgesDropdown localBadges={localBadges} />}
         </View>
         <View style={styles.body}>
           <View style={styles.marginManager}>
@@ -209,10 +173,6 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     justifyContent: 'space-between',
   },
-  universityIconContainer: {
-    width: normalize(31),
-    height: normalize(38),
-  },
   marginManager: {marginHorizontal: '5%'},
   image: {
     position: 'absolute',
@@ -311,7 +271,6 @@ const styles = StyleSheet.create({
     letterSpacing: normalize(1),
   },
   body: {},
-
   button: {
     justifyContent: 'center',
     alignItems: 'center',
@@ -365,6 +324,7 @@ const styles = StyleSheet.create({
     height: 30,
     borderRadius: 15,
   },
+  animatedBadgeView: {position: 'absolute'},
 });
 
 export default SPBody;