import {useNavigation} from '@react-navigation/core'; import React, {useEffect, useState} from 'react'; 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; screenType: ScreenType; } const ProfileBadges: React.FC = ({userXId, screenType}) => { 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); const isOwnProfile = userXId === undefined; useEffect(() => { setDisplayBadges(badgesToDisplayBadges(badges)); }, [badges]); return ( <> {/* Tutorial text */} {displayBadges.length === 0 && isOwnProfile && ( <> Badges Proudly represent your team, club, or organization! )} {displayBadges.length === 0 && isOwnProfile && ( // Grey circle placeholders navigation.navigate('BadgeSelection', {editing: true}) }> {Array(BADGE_LIMIT) .fill(0) .map(() => ( ))} )} {displayBadges.length !== 0 && ( // Populating actual badges {/* Actual badges */} {displayBadges.map((displayBadge) => ( ))} {/* Plus icon */} {displayBadges.length < BADGE_LIMIT && isOwnProfile && ( navigation.navigate('BadgeSelection', {editing: true}) }> )} {/* Empty placeholders for space-between styling */} {Array(BADGE_LIMIT + 1) .fill(0) .splice(displayBadges.length + 1, BADGE_LIMIT) .map(() => ( ))} {/* X button */} {displayBadges.length === BADGE_LIMIT && isOwnProfile && ( setIsEditBadgeModalVisible(true)}> )} )} {isEditBadgeModalVisible && ( )} ); }; const styles = StyleSheet.create({ title: { fontWeight: '600', fontSize: normalize(13.5), lineHeight: normalize(18), }, body: { fontSize: normalize(13.5), lineHeight: normalize(17), marginBottom: 10, }, badgeContainer: { width: '100%', justifyContent: 'space-between', marginTop: 10, marginBottom: 15, }, circle: { width: normalize(31), height: normalize(31), borderRadius: normalize(31) / 2, }, grey: { backgroundColor: '#c4c4c4', }, }); export default ProfileBadges;