Add styling to profile badge

2 files changed, 68 insertions, 12 deletions

diff --git a/src/components/profile/ProfileBadges.tsx b/src/components/profile/ProfileBadges.tsx
index 838f7987..13e775f7 100644
--- a/src/components/profile/ProfileBadges.tsx
+++ b/src/components/profile/ProfileBadges.tsx
@@ -1,9 +1,12 @@
-import React from 'react';
-import {StyleSheet} from 'react-native';
+import React, {useEffect, useState} from 'react';
+import {Alert, StyleSheet, Text, View} from 'react-native';
 import {ScrollView} from 'react-native-gesture-handler';
 import {useSelector} from 'react-redux';
+import {BadgeIcon} from '..';
+import PlusIcon from '../../assets/icons/plus_icon-01.svg';
 import {RootState} from '../../store/rootReducer';
-import {ScreenType} from '../../types';
+import {ScreenType, UniversityBadgeDisplayType} from '../../types';
+import {badgesToDisplayBadges, normalize} from '../../utils';
 
 interface ProfileBadgesProps {
   userXId: string | undefined;
@@ -11,19 +14,71 @@ interface ProfileBadgesProps {
 }
 
 const ProfileBadges: React.FC<ProfileBadgesProps> = ({userXId, screenType}) => {
-  const {badges, university} = useSelector((state: RootState) =>
+  const {badges} = useSelector((state: RootState) =>
     userXId ? state.userX[screenType][userXId].profile : state.user.profile,
   );
+  const [displayBadges, setDisplayBadges] = useState<
+    UniversityBadgeDisplayType[]
+  >([]);
+
+  useEffect(() => {
+    setDisplayBadges(badgesToDisplayBadges(badges));
+  }, [badges]);
+
   return (
-    <ScrollView horizontal>
-      {badges.map((badge) => (
-        <> </>
-        // <BadgeIcon key={badge.id} badge={{...badge, img: }} />
-      ))}
-    </ScrollView>
+    <>
+      {displayBadges.length === 0 && (
+        <>
+          <Text style={styles.title}>Badges</Text>
+          <Text style={styles.body}>
+            Proudly represent your team, club, or organization!
+          </Text>
+        </>
+      )}
+      {displayBadges.length === 0 ? (
+        <ScrollView contentContainerStyle={styles.badgeContainer} horizontal>
+          <PlusIcon
+            width={normalize(31)}
+            height={normalize(31)}
+            color={'black'}
+            onPress={() => Alert.alert('fooo')}
+          />
+          {[0, 0, 0, 0, 0].map(() => (
+            <View style={styles.greyCircle} />
+          ))}
+        </ScrollView>
+      ) : (
+        <ScrollView contentContainerStyle={styles.badgeContainer} horizontal>
+          {displayBadges.map((displayBadge) => (
+            <BadgeIcon key={displayBadge.id} badge={displayBadge} />
+          ))}
+        </ScrollView>
+      )}
+    </>
   );
 };
 
-const styles = StyleSheet.create({});
+const styles = StyleSheet.create({
+  title: {
+    fontWeight: '600',
+    fontSize: normalize(13.5),
+    lineHeight: normalize(18),
+  },
+  body: {
+    fontSize: normalize(13.5),
+    lineHeight: normalize(17),
+  },
+  badgeContainer: {
+    width: '100%',
+    borderWidth: 1,
+    justifyContent: 'space-between',
+  },
+  greyCircle: {
+    width: normalize(31),
+    height: normalize(31),
+    borderRadius: normalize(31) / 2,
+    backgroundColor: '#c4c4c4',
+  },
+});
 
 export default ProfileBadges;
diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index 8743acfb..c0ee508a 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -20,6 +20,7 @@ import {
 import {canViewProfile} from '../../utils/users';
 import {FriendsButton} from '../common';
 import {MessageButton} from '../messages';
+import ProfileBadges from './ProfileBadges';
 import ToggleButton from './ToggleButton';
 
 interface ProfileBodyProps {
@@ -65,6 +66,7 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
 
   return (
     <View onLayout={onLayout} style={styles.container}>
+      <ProfileBadges {...{userXId, screenType}} />
       <Text style={styles.username}>{`@${username}`}</Text>
       {biography.length > 0 && (
         <Text style={styles.biography}>{`${biography}`}</Text>
@@ -137,7 +139,6 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
   },
   container: {
-    paddingVertical: '1%',
     paddingHorizontal: 18,
     backgroundColor: 'white',
   },