Merge pull request #447 from IvanIFChen/tma867-sp-badge-placement

[TMA-867] SP Badge Placement

4 files changed, 126 insertions, 96 deletions

diff --git a/src/components/suggestedPeople/BadgeIcon.tsx b/src/components/suggestedPeople/BadgeIcon.tsx
new file mode 100644
index 00000000..8f576a43
--- /dev/null
+++ b/src/components/suggestedPeople/BadgeIcon.tsx
@@ -0,0 +1,64 @@
+import {useNavigation} from '@react-navigation/core';
+import React from 'react';
+import {
+  Image,
+  ImageSourcePropType,
+  StyleProp,
+  StyleSheet,
+  ViewStyle,
+} from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import LinearGradient from 'react-native-linear-gradient';
+import {UniversityBadge} from '../../types';
+import {normalize} from '../../utils';
+
+interface BadgeIconProps {
+  badge: UniversityBadge;
+  img: ImageSourcePropType;
+  style?: StyleProp<ViewStyle>;
+}
+
+const BadgeIcon: React.FC<BadgeIconProps> = ({badge, img, style}) => {
+  const navigation = useNavigation();
+  return (
+    <TouchableOpacity
+      style={[styles.badgeButton, style]}
+      onPress={() => {
+        navigation.navigate('MutualBadgeHolders', {
+          badge_id: badge.id,
+          badge_title: badge.name,
+          badge_img: img,
+        });
+      }}>
+      <LinearGradient
+        colors={['#4E3629', '#EC2027']}
+        useAngle={true}
+        angle={154.72}
+        angleCenter={{x: 0.5, y: 0.5}}
+        style={styles.badgeBackground}>
+        <Image source={img} style={styles.icon} />
+      </LinearGradient>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  badgeBackground: {
+    width: '100%',
+    height: '100%',
+    borderRadius: 50,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  badgeButton: {
+    width: normalize(30),
+    height: normalize(30),
+    borderRadius: 30,
+  },
+  icon: {
+    width: '60%',
+    height: '60%',
+  },
+});
+
+export default BadgeIcon;
diff --git a/src/components/suggestedPeople/index.ts b/src/components/suggestedPeople/index.ts
index 339c9ae0..34bb96d4 100644
--- a/src/components/suggestedPeople/index.ts
+++ b/src/components/suggestedPeople/index.ts
@@ -1,3 +1,3 @@
 export {default as MutualFriends} from './MutualFriends';
-export {default as BadgesDropdown} from './BadgesDropdown';
 export {default as SPTaggsBar} from './SPTaggsBar';
+export {default as BadgeIcon} from './BadgeIcon';
diff --git a/src/components/suggestedPeople/BadgesDropdown.tsx b/src/components/suggestedPeople/legacy/BadgesDropdown.tsx
index bc4e7a54..267355f3 100644
--- a/src/components/suggestedPeople/BadgesDropdown.tsx
+++ b/src/components/suggestedPeople/legacy/BadgesDropdown.tsx
@@ -1,39 +1,35 @@
-import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
-import {Image, StyleSheet} from 'react-native';
+import {ImageSourcePropType, StyleSheet} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
-import LinearGradient from 'react-native-linear-gradient';
 import Animated, {Easing} from 'react-native-reanimated';
-import {UniversityType, UniversityBadge} from '../../types';
-import {UniversityIcon} from '..';
-import {normalize, SCREEN_WIDTH} from '../../utils';
-import UniversityIconClicked from './UniversityIconClicked';
+import {BadgeIcon, UniversityIcon} from '../..';
+import {UniversityBadge, UniversityType} from '../../../types';
+import {normalize} from '../../../utils';
+import UniversityIconClicked from '../UniversityIconClicked';
+
 interface BadgesDropdownProps {
   university: UniversityType;
   localBadges: {
     badge: UniversityBadge;
-    img: string;
+    img: ImageSourcePropType;
   }[];
-  badges: UniversityBadge[];
 }
 
 const BadgesDropdown: React.FC<BadgesDropdownProps> = ({
   university,
   localBadges,
-  badges,
 }) => {
   // Used to toggle between dropdown being displayed and not
   const [displayBadges, setDisplayBadges] = useState<boolean>(false);
 
   // Determines the absolute position of the individual badges [0, i * 40]
   let [top, setTop] = useState<Animated.Value<number>[]>([]);
-  const navigation = useNavigation();
 
   useEffect(() => {
     // Initialize position of badges to 0
     const defineBadgePositions = () => {
       let localTop: Animated.Value<number>[] = [];
-      badges.forEach(() => {
+      localBadges.forEach(() => {
         localTop.push(new Animated.Value(0));
       });
       setTop(localTop);
@@ -43,7 +39,7 @@ const BadgesDropdown: React.FC<BadgesDropdownProps> = ({
 
   // Displays badges dropdown by updating top [state] for every badge
   const animate = () => {
-    for (let i = 0; i < badges?.length; i++) {
+    for (let i = 0; i < localBadges?.length; i++) {
       if (top) {
         Animated.timing(top[i], {
           toValue: i * 40 + 50,
@@ -56,7 +52,7 @@ const BadgesDropdown: React.FC<BadgesDropdownProps> = ({
 
   // Draws back displayed badges by setting top [state] to 0 for every badge
   const animateBack = () => {
-    for (let i = 0; i < badges?.length; i++) {
+    for (let i = 0; i < localBadges?.length; i++) {
       if (top) {
         Animated.timing(top[i], {
           toValue: 0,
@@ -106,30 +102,7 @@ const BadgesDropdown: React.FC<BadgesDropdownProps> = ({
                 zIndex: -1 * badge.id,
               },
             ]}>
-            <TouchableOpacity
-              style={styles.badgeButton}
-              onPress={() => {
-                navigation.navigate('MutualBadgeHolders', {
-                  badge_id: badge.id,
-                  badge_title: badge.name,
-                  badge_img: img,
-                });
-              }}>
-              <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>
+            <BadgeIcon badge={badge} img={img} />
           </Animated.View>
         ))}
     </Animated.View>
@@ -137,18 +110,6 @@ const BadgesDropdown: React.FC<BadgesDropdownProps> = ({
 };
 
 const styles = StyleSheet.create({
-  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',
@@ -157,12 +118,9 @@ const styles = StyleSheet.create({
     left: '5%',
     paddingBottom: '2%',
   },
-  badgeButton: {
-    width: 30,
-    height: 30,
-    borderRadius: 15,
+  animatedBadgeView: {
+    position: 'absolute',
   },
-  animatedBadgeView: {position: 'absolute'},
   universityIconContainer: {
     width: normalize(31),
     height: normalize(38),
diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx
index c22f8143..eb80da49 100644
--- a/src/screens/suggestedPeople/SPBody.tsx
+++ b/src/screens/suggestedPeople/SPBody.tsx
@@ -1,11 +1,11 @@
 import {useNavigation} from '@react-navigation/native';
 import React, {Fragment, useEffect, useMemo, useState} from 'react';
-import {StyleSheet, Text, View} from 'react-native';
+import {ImageSourcePropType, StyleSheet, Text, View} from 'react-native';
 import {Image} from 'react-native-animatable';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import RequestedButton from '../../assets/ionicons/requested-button.svg';
-import {SPTaggsBar} from '../../components';
-import {BadgesDropdown, MutualFriends} from '../../components/suggestedPeople';
+import {UniversityIcon} from '../../components';
+import {BadgeIcon, MutualFriends} from '../../components/suggestedPeople';
 import {BADGE_DATA} from '../../constants/badges';
 import {
   ProfilePreviewType,
@@ -28,7 +28,6 @@ const SPBody: React.FC<SPBodyProps> = ({
     user,
     university,
     mutual_friends,
-    social_links,
     suggested_people_url,
     friendship,
     badges,
@@ -43,7 +42,7 @@ const SPBody: React.FC<SPBodyProps> = ({
   const [localBadges, setLocalBadges] = useState<
     {
       badge: UniversityBadge;
-      img: string;
+      img: ImageSourcePropType;
     }[]
   >([]);
   const navigation = useNavigation();
@@ -116,21 +115,30 @@ const SPBody: React.FC<SPBodyProps> = ({
     [suggested_people_url],
   );
 
-  const NamePlate = () => {
-    return (
-      <TouchableOpacity
-        onPress={() => {
-          navigation.navigate('Profile', {
-            userXId: loggedInUserId === user.id ? undefined : user.id,
-            screenType,
-          });
-        }}
-        style={styles.nameInfoContainer}>
-        <Text style={styles.firstName}>{user.first_name}</Text>
-        <Text style={styles.username}>@{user.username}</Text>
-      </TouchableOpacity>
-    );
-  };
+  const NamePlate = () => (
+    <TouchableOpacity
+      onPress={() => {
+        navigation.navigate('Profile', {
+          userXId: loggedInUserId === user.id ? undefined : user.id,
+          screenType,
+        });
+      }}>
+      <Text style={styles.firstName}>{user.first_name}</Text>
+      <Text style={styles.username}>@{user.username}</Text>
+    </TouchableOpacity>
+  );
+
+  const Badges = () => (
+    // Badges aligned left and spaced as if there are 5 items
+    <View style={styles.badgeContainer}>
+      {localBadges.map(({badge, img}, index) => (
+        <BadgeIcon key={index} badge={badge} img={img} style={styles.badge} />
+      ))}
+      {[0, 0, 0, 0, 0].splice(localBadges.length, 5).map((_, index) => (
+        <View key={index} style={styles.badge} />
+      ))}
+    </View>
+  );
 
   return (
     <View>
@@ -138,22 +146,20 @@ const SPBody: React.FC<SPBodyProps> = ({
       <View style={styles.mainContainer}>
         <View style={styles.topContainer}>
           <Text style={styles.title}>{firstItem && 'Suggested People'}</Text>
-          {localBadges && (
-            <BadgesDropdown {...{university, localBadges, badges}} />
-          )}
+          <UniversityIcon
+            university={university}
+            style={styles.universityIcon}
+            imageStyle={styles.universityIcon}
+          />
         </View>
-        <View style={styles.body}>
+        <View>
           <View style={styles.marginManager}>
             <View style={styles.addUserContainer}>
               <NamePlate />
               {user.id !== loggedInUserId && <FriendButton />}
             </View>
           </View>
-          <SPTaggsBar
-            userXId={user.id === loggedInUserId ? undefined : user.id}
-            screenType={screenType}
-            linkedSocials={social_links}
-          />
+          {localBadges.length !== 0 && <Badges />}
           <View style={styles.marginManager}>
             <MutualFriends user={user} friends={mutual_friends} />
           </View>
@@ -219,7 +225,6 @@ const styles = StyleSheet.create({
     textShadowRadius: normalize(2),
     letterSpacing: normalize(2),
   },
-  nameInfoContainer: {},
   addButton: {
     justifyContent: 'center',
     alignItems: 'center',
@@ -267,17 +272,20 @@ const styles = StyleSheet.create({
     shadowOffset: {width: 2, height: 2},
     shadowOpacity: 0.5,
   },
-  body: {},
-  button: {
-    justifyContent: 'center',
+  universityIcon: {
+    left: '5%',
+    width: normalize(31),
+    height: normalize(38),
+  },
+  badgeContainer: {
+    flexDirection: 'row',
     alignItems: 'center',
-    width: SCREEN_WIDTH * 0.4,
-    aspectRatio: 154 / 33,
-    borderWidth: 2,
-    borderColor: '#fff',
-    borderRadius: 3,
-    marginRight: '2%',
-    marginLeft: '1%',
+    justifyContent: 'space-evenly',
+    marginBottom: 25,
+  },
+  badge: {
+    width: normalize(52),
+    height: normalize(52),
   },
 });