Finish profile badges component

3 files changed, 90 insertions, 19 deletions

diff --git a/src/components/profile/ProfileBadges.tsx b/src/components/profile/ProfileBadges.tsx
index 13e775f7..39e84705 100644
--- a/src/components/profile/ProfileBadges.tsx
+++ b/src/components/profile/ProfileBadges.tsx
@@ -1,12 +1,15 @@
+import {useNavigation} from '@react-navigation/core';
 import React, {useEffect, useState} from 'react';
-import {Alert, StyleSheet, Text, View} from 'react-native';
-import {ScrollView} from 'react-native-gesture-handler';
+import {StyleSheet, Text, View} from 'react-native';
+import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
 import {useSelector} from 'react-redux';
 import {BadgeIcon} from '..';
 import PlusIcon from '../../assets/icons/plus_icon-01.svg';
+import {BADGE_LIMIT} from '../../constants';
 import {RootState} from '../../store/rootReducer';
 import {ScreenType, UniversityBadgeDisplayType} from '../../types';
 import {badgesToDisplayBadges, normalize} from '../../utils';
+import BadgeDetailView from '../common/BadgeDetailView';
 
 interface ProfileBadgesProps {
   userXId: string | undefined;
@@ -14,12 +17,14 @@ interface ProfileBadgesProps {
 }
 
 const ProfileBadges: React.FC<ProfileBadgesProps> = ({userXId, screenType}) => {
-  const {badges} = useSelector((state: RootState) =>
+  const navigation = useNavigation();
+  const {badges, name} = useSelector((state: RootState) =>
     userXId ? state.userX[screenType][userXId].profile : state.user.profile,
   );
   const [displayBadges, setDisplayBadges] = useState<
     UniversityBadgeDisplayType[]
   >([]);
+  const [isEditBadgeModalVisible, setIsEditBadgeModalVisible] = useState(false);
 
   useEffect(() => {
     setDisplayBadges(badgesToDisplayBadges(badges));
@@ -27,6 +32,7 @@ const ProfileBadges: React.FC<ProfileBadgesProps> = ({userXId, screenType}) => {
 
   return (
     <>
+      {/* Tutorial text */}
       {displayBadges.length === 0 && (
         <>
           <Text style={styles.title}>Badges</Text>
@@ -36,24 +42,81 @@ const ProfileBadges: React.FC<ProfileBadgesProps> = ({userXId, screenType}) => {
         </>
       )}
       {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} />
-          ))}
+        // Grey circle placeholders
+        <ScrollView
+          contentContainerStyle={styles.badgeContainer}
+          scrollEnabled={false}
+          horizontal>
+          <TouchableOpacity
+            onPress={() =>
+              navigation.navigate('BadgeSelection', {editing: true})
+            }>
+            <PlusIcon
+              width={normalize(31)}
+              height={normalize(31)}
+              color={'black'}
+              style={{transform: [{scale: 1.2}]}}
+            />
+          </TouchableOpacity>
+          {Array(BADGE_LIMIT)
+            .fill(0)
+            .map(() => (
+              <View style={[styles.grey, styles.circle]} />
+            ))}
         </ScrollView>
       ) : (
-        <ScrollView contentContainerStyle={styles.badgeContainer} horizontal>
+        // Populating actual badges
+        <ScrollView
+          contentContainerStyle={styles.badgeContainer}
+          scrollEnabled={false}
+          horizontal>
+          {/* Actual badges */}
           {displayBadges.map((displayBadge) => (
             <BadgeIcon key={displayBadge.id} badge={displayBadge} />
           ))}
+          {/* Plus icon */}
+          {displayBadges.length < BADGE_LIMIT && (
+            <TouchableOpacity
+              onPress={() =>
+                navigation.navigate('BadgeSelection', {editing: true})
+              }>
+              <PlusIcon
+                width={normalize(31)}
+                height={normalize(31)}
+                color={'black'}
+                style={{transform: [{scale: 1.2}]}}
+              />
+            </TouchableOpacity>
+          )}
+          {/* Empty placeholders for space-between styling */}
+          {Array(BADGE_LIMIT + 1)
+            .fill(0)
+            .splice(displayBadges.length + 1, BADGE_LIMIT)
+            .map(() => (
+              <View style={styles.circle} />
+            ))}
+          {/* X button */}
+          {displayBadges.length === BADGE_LIMIT && (
+            <TouchableOpacity onPress={() => setIsEditBadgeModalVisible(true)}>
+              <PlusIcon
+                width={normalize(31)}
+                height={normalize(31)}
+                color={'grey'}
+                style={{transform: [{scale: 1.2}, {rotate: '45deg'}]}}
+              />
+            </TouchableOpacity>
+          )}
         </ScrollView>
       )}
+      {isEditBadgeModalVisible && (
+        <BadgeDetailView
+          userXId={userXId}
+          screenType={screenType}
+          isEditable={userXId === undefined}
+          userFullName={name}
+          setBadgeViewVisible={setIsEditBadgeModalVisible}
+        />
+      )}
     </>
   );
 };
@@ -67,16 +130,19 @@ const styles = StyleSheet.create({
   body: {
     fontSize: normalize(13.5),
     lineHeight: normalize(17),
+    marginBottom: 10,
   },
   badgeContainer: {
     width: '100%',
-    borderWidth: 1,
     justifyContent: 'space-between',
+    marginBottom: 15,
   },
-  greyCircle: {
+  circle: {
     width: normalize(31),
     height: normalize(31),
     borderRadius: normalize(31) / 2,
+  },
+  grey: {
     backgroundColor: '#c4c4c4',
   },
 });
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index 99d3901b..a6d98883 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -21,6 +21,8 @@ export const AVATAR_GRADIENT_DIM = 50;
 export const TAGG_ICON_DIM = 58;
 export const TAGG_RING_DIM = normalize(60);
 
+export const BADGE_LIMIT = 5;
+
 export const INTEGRATED_SOCIAL_LIST: string[] = [
   'Instagram',
   'Facebook',
diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx
index 10ad63f0..c37b4c44 100644
--- a/src/screens/suggestedPeople/SPBody.tsx
+++ b/src/screens/suggestedPeople/SPBody.tsx
@@ -121,9 +121,12 @@ const SPBody: React.FC<SPBodyProps> = ({
       {displayBadges.map((displayBadge, index) => (
         <BadgeIcon key={index} badge={displayBadge} style={styles.badge} />
       ))}
-      {[0, 0, 0, 0, 0].splice(displayBadges.length, 5).map((_, index) => (
-        <View key={index} style={styles.badge} />
-      ))}
+      {Array(5)
+        .fill(0)
+        .splice(displayBadges.length, 5)
+        .map((_, index) => (
+          <View key={index} style={styles.badge} />
+        ))}
     </View>
   );