Merge pull request #282 from shravyaramesh/badge-animation

[TMA-630] Badge Animation

3 files changed, 101 insertions, 19 deletions

diff --git a/src/components/profile/UniversityIcon.tsx b/src/components/profile/UniversityIcon.tsx
index 48cfe3dc..d4b9a5dd 100644
--- a/src/components/profile/UniversityIcon.tsx
+++ b/src/components/profile/UniversityIcon.tsx
@@ -14,6 +14,7 @@ export interface UniversityIconProps extends ViewProps {
  */
 const UniversityIcon: React.FC<UniversityIconProps> = ({
   style,
+  imageStyle,
   university,
   university_class,
   imageStyle,
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/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx
index 21e86f14..8c6a3238 100644
--- a/src/screens/suggestedPeople/SPBody.tsx
+++ b/src/screens/suggestedPeople/SPBody.tsx
@@ -1,19 +1,23 @@
 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 {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
-import UniversityIcon from '../../components/profile/UniversityIcon';
+
 interface SPBodyProps {
   item: SuggestedPeopleDataType;
   index: number;
@@ -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) {
@@ -89,19 +119,46 @@ const SPBody: React.FC<SPBodyProps> = ({
       <View style={styles.mainContainer}>
         <View style={styles.topContainer}>
           <Text style={styles.title}>{firstItem && 'Suggested People'}</Text>
-          <TouchableOpacity
-            onPress={() =>
-              navigation.navigate('MutualBadgeHolders', {
-                badge_id: 40,
-                badge_title: 'Brown University Football',
-              })
-            }>
-            <UniversityIcon
-              university="brown"
-              style={styles.universityIconContainer}
-              imageStyle={{width: normalize(31), height: normalize(38)}}
-            />
-          </TouchableOpacity>
+          <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}>
@@ -155,7 +212,6 @@ const styles = StyleSheet.create({
   universityIconContainer: {
     width: normalize(31),
     height: normalize(38),
-    left: '5%',
   },
   marginManager: {marginHorizontal: '5%'},
   image: {
@@ -284,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;