diff options
| -rw-r--r-- | src/components/profile/ProfileBadges.tsx | 98 | ||||
| -rw-r--r-- | src/constants/constants.ts | 2 | ||||
| -rw-r--r-- | src/screens/suggestedPeople/SPBody.tsx | 9 |
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> ); |