diff options
Diffstat (limited to 'src')
25 files changed, 335 insertions, 189 deletions
diff --git a/src/assets/icons/plus-icon-thin.svg b/src/assets/icons/plus-icon-thin.svg new file mode 100644 index 00000000..1a582474 --- /dev/null +++ b/src/assets/icons/plus-icon-thin.svg @@ -0,0 +1 @@ +<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 216"><defs><style>.cls-1{fill:none;stroke-miterlimit:10;stroke-width:7.33px;}}</style></defs><circle class="cls-1" cx="108.05" cy="108.21" r="103.73" stroke="currentColor"/><rect class="cls-2" x="99.56" y="48.48" width="16.99" height="119.46" rx="7.75" fill="currentColor"/><rect class="cls-2" x="99.56" y="48.48" width="16.99" height="119.46" rx="7.75" transform="translate(-0.16 216.26) rotate(-90)" fill="currentColor"/></svg>
\ No newline at end of file diff --git a/src/assets/icons/plus_icon-02.svg b/src/assets/icons/plus-icon-white.svg index 25527911..25527911 100644 --- a/src/assets/icons/plus_icon-02.svg +++ b/src/assets/icons/plus-icon-white.svg diff --git a/src/assets/icons/plus_icon-01.svg b/src/assets/icons/plus-icon.svg index 7a3b21d2..7a3b21d2 100644 --- a/src/assets/icons/plus_icon-01.svg +++ b/src/assets/icons/plus-icon.svg diff --git a/src/components/common/BadgeDetailView.tsx b/src/components/common/BadgeDetailView.tsx index 6504300c..19f1e74d 100644 --- a/src/components/common/BadgeDetailView.tsx +++ b/src/components/common/BadgeDetailView.tsx @@ -5,11 +5,15 @@ import {TouchableOpacity} from 'react-native-gesture-handler'; import LinearGradient from 'react-native-linear-gradient'; import {useDispatch, useSelector} from 'react-redux'; import CloseIcon from '../../assets/ionicons/close-outline.svg'; -import {BADGE_GRADIENT_FIRST} from '../../constants'; -import {BADGE_DATA} from '../../constants/badges'; +import {BADGE_GRADIENT_FIRST, BADGE_LIMIT} from '../../constants'; +import {removeUserBadge} from '../../store/actions'; import {RootState} from '../../store/rootreducer'; -import {ScreenType} from '../../types'; -import {getUniversityBadge, normalize, removeUserBadge} from '../../utils'; +import {ScreenType, UniversityBadgeDisplayType} from '../../types'; +import { + badgesToDisplayBadges, + getUniversityBadge, + normalize, +} from '../../utils'; interface BadgeDetailModalProps { userXId: string | undefined; @@ -34,35 +38,24 @@ const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({ userXId ? state.userX[screenType][userXId] : state.user, ); const navigation = useNavigation(); - const [selectedBadgesWithImage, setSelectedBadgesWithImage] = useState<any[]>( - [], - ); + const [displayBadges, setDisplayBadges] = useState< + UniversityBadgeDisplayType[] + >([]); + const atLimit = badges.length >= BADGE_LIMIT; useEffect(() => { - let badgesWithImage = []; - badges.forEach((e) => { - const uniData = BADGE_DATA[e.university]; - const categoryData = uniData.filter((u) => { - return u.title === e.category; - }); - const badgeData = categoryData[0].data.filter((c) => { - return c.badgeName === e.name; - }); - badgeData.forEach((c) => { - const obj = {...e, badgeImage: c.badgeImage}; - badgesWithImage.push(obj); - }); - }); - setTimeout(() => { - setSelectedBadgesWithImage(badgesWithImage); - }, 250); + setDisplayBadges(badgesToDisplayBadges(badges, university)); }, [badges]); const removeBadgeCell = async (badgeName: string) => { - await removeUserBadge(badges, badgeName, user.userId, dispatch); + dispatch(removeUserBadge(badgeName, user.userId)); }; - const badgeEditCell = ({item: {id, name, badgeImage}}) => { + const badgeEditCell = ({ + item: {id, name, img}, + }: { + item: UniversityBadgeDisplayType; + }) => { return ( <TouchableOpacity style={styles.badgeCellContainerStyles} @@ -71,7 +64,7 @@ const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({ navigation.navigate('MutualBadgeHolders', { badge_id: id, badge_title: name, - badge_img: badgeImage, + badge_img: img, }); }}> <View @@ -88,7 +81,7 @@ const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({ <Image resizeMode="cover" style={styles.badgeImageStyles} - source={badgeImage} + source={img} /> </LinearGradient> {isEditable && ( @@ -121,10 +114,20 @@ const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({ }; const modalHeader = () => { - const heading = isEditable ? 'Edit your badges!' : userFullName; - const subheading = isEditable - ? 'Add or delete your badges' - : 'View badges to discover groups!'; + let heading = ''; + let subheading = ''; + if (isEditable) { + if (atLimit) { + heading = 'You have reached your badge limit'; + subheading = 'Remove a badge if you wish to add more'; + } else { + heading = 'Edit your badges!'; + subheading = 'Add or delete your badges'; + } + } else { + heading = userFullName!; + subheading = 'View badges to discover groups!'; + } return ( <View> <Text style={styles.modalHeadingStyles}>{heading}</Text> @@ -155,7 +158,7 @@ const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({ <FlatList contentContainerStyle={styles.modalListStyles} scrollEnabled={false} - data={selectedBadgesWithImage} + data={displayBadges} numColumns={3} renderItem={badgeEditCell} keyExtractor={(item) => item.id.toString()} @@ -228,6 +231,8 @@ const styles = StyleSheet.create({ fontSize: normalize(17), lineHeight: normalize(20.29), textAlign: 'center', + marginVertical: normalize(10), + marginTop: normalize(20), }, modalSubheadingStyles: { fontWeight: '600', diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx index 0ceb8542..cde5b2e0 100644 --- a/src/components/moments/Moment.tsx +++ b/src/components/moments/Moment.tsx @@ -7,8 +7,8 @@ import ImagePicker from 'react-native-image-crop-picker'; import LinearGradient from 'react-native-linear-gradient'; import DeleteIcon from '../../assets/icons/delete-logo.svg'; import DownIcon from '../../assets/icons/down_icon.svg'; -import PlusIcon from '../../assets/icons/plus_icon-01.svg'; -import BigPlusIcon from '../../assets/icons/plus_icon-02.svg'; +import PlusIcon from '../../assets/icons/plus-icon.svg'; +import BigPlusIcon from '../../assets/icons/plus-icon-white.svg'; import UpIcon from '../../assets/icons/up_icon.svg'; import {TAGG_LIGHT_BLUE} from '../../constants'; import {ERROR_UPLOAD} from '../../constants/strings'; diff --git a/src/components/profile/ProfileBadges.tsx b/src/components/profile/ProfileBadges.tsx new file mode 100644 index 00000000..8e68dc46 --- /dev/null +++ b/src/components/profile/ProfileBadges.tsx @@ -0,0 +1,148 @@ +import {useNavigation} from '@react-navigation/core'; +import React, {FC, 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 PlusIconImage from '../../assets/icons/plus-icon-thin.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<ProfileBadgesProps> = ({userXId, screenType}) => { + const navigation = useNavigation(); + const {badges, name, university} = 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, university)); + }, [badges]); + + const PlusIcon: FC = () => ( + <TouchableOpacity + onPress={() => navigation.navigate('BadgeSelection', {editing: true})}> + <PlusIconImage style={styles.plus} /> + </TouchableOpacity> + ); + + const CloseIcon: FC = () => ( + <TouchableOpacity onPress={() => setIsEditBadgeModalVisible(true)}> + <PlusIconImage style={styles.close} /> + </TouchableOpacity> + ); + + return ( + <> + {/* Tutorial text */} + {displayBadges.length === 0 && isOwnProfile && ( + <> + <Text style={styles.title}>Badges</Text> + <Text style={styles.body}> + Proudly represent your team, club, or organization! + </Text> + </> + )} + {displayBadges.length === 0 && isOwnProfile && ( + // Grey circle placeholders + <ScrollView + contentContainerStyle={styles.badgeContainer} + scrollEnabled={false} + horizontal> + <PlusIcon /> + {Array(BADGE_LIMIT) + .fill(0) + .map(() => ( + <View style={[styles.grey, styles.circle]} /> + ))} + </ScrollView> + )} + {displayBadges.length !== 0 && ( + // 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 && isOwnProfile && <PlusIcon />} + {/* 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 && isOwnProfile && ( + <CloseIcon /> + )} + </ScrollView> + )} + {isEditBadgeModalVisible && ( + <BadgeDetailView + userXId={userXId} + screenType={screenType} + isEditable={isOwnProfile} + userFullName={name} + setBadgeViewVisible={setIsEditBadgeModalVisible} + /> + )} + </> + ); +}; + +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', + }, + plus: { + width: normalize(31), + height: normalize(31), + color: 'black', + }, + close: { + width: normalize(31), + height: normalize(31), + color: 'grey', + transform: [{rotate: '45deg'}], + }, +}); + +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', }, diff --git a/src/components/profile/index.ts b/src/components/profile/index.ts index c544c3f2..faf273d9 100644 --- a/src/components/profile/index.ts +++ b/src/components/profile/index.ts @@ -9,3 +9,4 @@ export {default as ProfileMoreInfoDrawer} from './ProfileMoreInfoDrawer'; export {default as MomentMoreInfoDrawer} from './MomentMoreInfoDrawer'; export {default as UniversityIcon} from './UniversityIcon'; export {default as TaggAvatar} from './TaggAvatar'; +export {default as ProfileBadges} from './ProfileBadges'; diff --git a/src/components/suggestedPeople/BadgeIcon.tsx b/src/components/suggestedPeople/BadgeIcon.tsx index 8f576a43..616bac93 100644 --- a/src/components/suggestedPeople/BadgeIcon.tsx +++ b/src/components/suggestedPeople/BadgeIcon.tsx @@ -1,24 +1,17 @@ import {useNavigation} from '@react-navigation/core'; import React from 'react'; -import { - Image, - ImageSourcePropType, - StyleProp, - StyleSheet, - ViewStyle, -} from 'react-native'; +import {Image, StyleProp, StyleSheet, ViewStyle} from 'react-native'; import {TouchableOpacity} from 'react-native-gesture-handler'; import LinearGradient from 'react-native-linear-gradient'; -import {UniversityBadge} from '../../types'; +import {UniversityBadgeDisplayType} from '../../types'; import {normalize} from '../../utils'; interface BadgeIconProps { - badge: UniversityBadge; - img: ImageSourcePropType; + badge: UniversityBadgeDisplayType; style?: StyleProp<ViewStyle>; } -const BadgeIcon: React.FC<BadgeIconProps> = ({badge, img, style}) => { +const BadgeIcon: React.FC<BadgeIconProps> = ({badge, style}) => { const navigation = useNavigation(); return ( <TouchableOpacity @@ -27,7 +20,7 @@ const BadgeIcon: React.FC<BadgeIconProps> = ({badge, img, style}) => { navigation.navigate('MutualBadgeHolders', { badge_id: badge.id, badge_title: badge.name, - badge_img: img, + badge_img: badge.img, }); }}> <LinearGradient @@ -36,7 +29,7 @@ const BadgeIcon: React.FC<BadgeIconProps> = ({badge, img, style}) => { angle={154.72} angleCenter={{x: 0.5, y: 0.5}} style={styles.badgeBackground}> - <Image source={img} style={styles.icon} /> + <Image source={badge.img} style={styles.icon} /> </LinearGradient> </TouchableOpacity> ); diff --git a/src/components/suggestedPeople/index.ts b/src/components/suggestedPeople/index.ts index 34bb96d4..ecdf4f35 100644 --- a/src/components/suggestedPeople/index.ts +++ b/src/components/suggestedPeople/index.ts @@ -1,3 +1,2 @@ export {default as MutualFriends} from './MutualFriends'; -export {default as SPTaggsBar} from './SPTaggsBar'; export {default as BadgeIcon} from './BadgeIcon'; diff --git a/src/components/suggestedPeople/legacy/BadgesDropdown.tsx b/src/components/suggestedPeople/legacy/BadgesDropdown.tsx index 267355f3..2c177e69 100644 --- a/src/components/suggestedPeople/legacy/BadgesDropdown.tsx +++ b/src/components/suggestedPeople/legacy/BadgesDropdown.tsx @@ -1,18 +1,15 @@ import React, {useEffect, useState} from 'react'; -import {ImageSourcePropType, StyleSheet} from 'react-native'; +import {StyleSheet} from 'react-native'; import {TouchableOpacity} from 'react-native-gesture-handler'; import Animated, {Easing} from 'react-native-reanimated'; import {BadgeIcon, UniversityIcon} from '../..'; -import {UniversityBadge, UniversityType} from '../../../types'; +import {UniversityBadgeDisplayType, UniversityType} from '../../../types'; import {normalize} from '../../../utils'; import UniversityIconClicked from '../UniversityIconClicked'; interface BadgesDropdownProps { university: UniversityType; - localBadges: { - badge: UniversityBadge; - img: ImageSourcePropType; - }[]; + localBadges: UniversityBadgeDisplayType[]; } const BadgesDropdown: React.FC<BadgesDropdownProps> = ({ @@ -92,7 +89,7 @@ const BadgesDropdown: React.FC<BadgesDropdownProps> = ({ )} </TouchableOpacity> {localBadges && - localBadges.map(({badge, img}, index) => ( + localBadges.map((badge, index) => ( <Animated.View key={badge.id} style={[ @@ -102,7 +99,7 @@ const BadgesDropdown: React.FC<BadgesDropdownProps> = ({ zIndex: -1 * badge.id, }, ]}> - <BadgeIcon badge={badge} img={img} /> + <BadgeIcon badge={badge} /> </Animated.View> ))} </Animated.View> diff --git a/src/components/suggestedPeople/SPTaggsBar.tsx b/src/components/suggestedPeople/legacy/SPTaggsBar.tsx index 3ab33da1..3273f88d 100644 --- a/src/components/suggestedPeople/SPTaggsBar.tsx +++ b/src/components/suggestedPeople/legacy/SPTaggsBar.tsx @@ -2,12 +2,12 @@ import React, {useEffect, useState} from 'react'; import {StyleSheet} from 'react-native'; import Animated from 'react-native-reanimated'; import {useDispatch, useSelector} from 'react-redux'; -import {INTEGRATED_SOCIAL_LIST, SOCIAL_LIST} from '../../constants'; -import {getLinkedSocials} from '../../services'; -import {loadIndividualSocial, updateSocial} from '../../store/actions'; -import {RootState} from '../../store/rootReducer'; -import {ScreenType} from '../../types'; -import Tagg from '../taggs/Tagg'; +import {INTEGRATED_SOCIAL_LIST, SOCIAL_LIST} from '../../../constants'; +import {getLinkedSocials} from '../../../services'; +import {loadIndividualSocial, updateSocial} from '../../../store/actions'; +import {RootState} from '../../../store/rootReducer'; +import {ScreenType} from '../../../types'; +import Tagg from '../../taggs/Tagg'; const {View, ScrollView} = Animated; interface TaggsBarProps { @@ -66,7 +66,6 @@ const TaggsBar: React.FC<TaggsBarProps> = ({ isIntegrated={INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1} setTaggsNeedUpdate={setTaggsNeedUpdate} setSocialDataNeedUpdate={handleSocialUpdate} - whiteRing={true} screenType={screenType} />, ); @@ -84,7 +83,6 @@ const TaggsBar: React.FC<TaggsBarProps> = ({ setSocialDataNeedUpdate={handleSocialUpdate} userXId={userXId} user={user} - whiteRing={true} screenType={screenType} />, ); diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx index 4a58bacb..0e0311c5 100644 --- a/src/components/taggs/Tagg.tsx +++ b/src/components/taggs/Tagg.tsx @@ -5,13 +5,8 @@ import {useSelector} from 'react-redux'; import PurpleRingPlus from '../../assets/icons/purple_ring+.svg'; import PurpleRing from '../../assets/icons/purple_ring.svg'; import RingPlus from '../../assets/icons/ring+.svg'; -import WhiteRing from '../../assets/icons/ring-white.svg'; import Ring from '../../assets/icons/ring.svg'; -import { - INTEGRATED_SOCIAL_LIST, - SOCIAL_ICON_SIZE_ADJUSTMENT, - TAGG_RING_DIM, -} from '../../constants'; +import {INTEGRATED_SOCIAL_LIST, TAGG_RING_DIM} from '../../constants'; import { ERROR_LINK, ERROR_UNABLE_TO_FIND_PROFILE, @@ -24,8 +19,8 @@ import { } from '../../services'; import {RootState} from '../../store/rootReducer'; import {ScreenType, UserType} from '../../types'; -import {canViewProfile, normalize} from '../../utils'; -import {SmallSocialIcon, SocialIcon, SocialLinkModal} from '../common'; +import {canViewProfile} from '../../utils'; +import {SocialIcon, SocialLinkModal} from '../common'; interface TaggProps { social: string; @@ -35,7 +30,6 @@ interface TaggProps { setSocialDataNeedUpdate: (social: string, username: string) => void; userXId: string | undefined; user: UserType; - whiteRing: boolean | undefined; screenType: ScreenType; } @@ -48,7 +42,6 @@ const Tagg: React.FC<TaggProps> = ({ userXId, screenType, user, - whiteRing, }) => { const navigation = useNavigation(); const state = useSelector((s: RootState) => s); @@ -107,9 +100,6 @@ const Tagg: React.FC<TaggProps> = ({ const pickTheRightRingHere = () => { if (youMayPass) { - if (whiteRing) { - return <WhiteRing width={TAGG_RING_DIM} height={TAGG_RING_DIM} />; - } if (social === 'Tagg') { return <Ring width={TAGG_RING_DIM} height={TAGG_RING_DIM} />; } else { @@ -139,7 +129,7 @@ const Tagg: React.FC<TaggProps> = ({ return ( <> - {(userXId && !isLinked) || (whiteRing && !userXId) ? ( + {userXId && !isLinked ? ( <Fragment /> ) : ( <> @@ -149,27 +139,13 @@ const Tagg: React.FC<TaggProps> = ({ setModalVisible={setModalVisible} completionCallback={linkNonIntegratedSocial} /> - <View style={whiteRing ? styles.spcontainer : styles.container}> + <View style={styles.container}> <TouchableOpacity style={styles.iconTap} onPress={modalOrAuthBrowserOrPass}> <SocialIcon style={styles.icon} social={social} whiteRing /> {pickTheRightRingHere()} </TouchableOpacity> - {!whiteRing && ( - <View style={styles.smallIconContainer}> - <SmallSocialIcon - style={[ - styles.smallIcon, - { - height: SOCIAL_ICON_SIZE_ADJUSTMENT[social], - width: SOCIAL_ICON_SIZE_ADJUSTMENT[social], - }, - ]} - social={social} - /> - </View> - )} </View> </> )} @@ -178,19 +154,10 @@ const Tagg: React.FC<TaggProps> = ({ }; const styles = StyleSheet.create({ - spcontainer: { - justifyContent: 'space-between', - alignItems: 'center', - marginRight: 15, - marginLeft: 19, - height: normalize(60), - }, container: { justifyContent: 'space-between', alignItems: 'center', - marginRight: 15, - marginLeft: 15, - height: normalize(90), + marginHorizontal: 15, }, iconTap: { justifyContent: 'center', @@ -202,17 +169,6 @@ const styles = StyleSheet.create({ borderRadius: 30, position: 'absolute', }, - smallIconContainer: { - height: 20, - width: 20, - position: 'absolute', - justifyContent: 'center', - alignItems: 'center', - bottom: 0, - }, - smallIcon: { - borderRadius: 1000, - }, }); export default Tagg; diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx index a7e8fc7a..7076ffaf 100644 --- a/src/components/taggs/TaggsBar.tsx +++ b/src/components/taggs/TaggsBar.tsx @@ -82,7 +82,6 @@ const TaggsBar: React.FC<TaggsBarProps> = ({ isIntegrated={INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1} setTaggsNeedUpdate={setTaggsNeedUpdate} setSocialDataNeedUpdate={handleSocialUpdate} - whiteRing={false} />, ); i++; @@ -100,7 +99,6 @@ const TaggsBar: React.FC<TaggsBarProps> = ({ userXId={userXId} screenType={screenType} user={user} - whiteRing={false} />, ); i++; diff --git a/src/constants/constants.ts b/src/constants/constants.ts index e6c23554..f4ffd750 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -23,6 +23,7 @@ export const TAGG_RING_DIM = normalize(60); // default height of the navigation bar, from react native library, unless on ipad export const NAV_BAR_HEIGHT = 49; +export const BADGE_LIMIT = 5; export const INTEGRATED_SOCIAL_LIST: string[] = [ 'Instagram', diff --git a/src/constants/regex.ts b/src/constants/regex.ts index 61523203..f934185d 100644 --- a/src/constants/regex.ts +++ b/src/constants/regex.ts @@ -36,7 +36,7 @@ export const nameRegex: RegExp = /^[A-Za-z'\-,. ]{2,20}$/; * - match alphanumerics, and special characters used in URLs */ export const websiteRegex: RegExp = - /^$|^(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,50}\.[a-zA-Z0-9()]{2,6}\b([-a-zA-Z0-9()@:%_+.~#?&/=]{0,35})$/; + /^$|^(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,50}\.[a-zA-Z0-9()]{2,6}\b([-a-zA-Z0-9()@:%_+.~#?&\/=]{0,35})$/; /** * The website regex has the following constraints diff --git a/src/screens/profile/CategorySelection.tsx b/src/screens/profile/CategorySelection.tsx index c02eef0d..ea443fce 100644 --- a/src/screens/profile/CategorySelection.tsx +++ b/src/screens/profile/CategorySelection.tsx @@ -11,7 +11,7 @@ import { } from 'react-native'; import {ScrollView} from 'react-native-gesture-handler'; import {useDispatch, useSelector} from 'react-redux'; -import PlusIcon from '../../assets/icons/plus_icon-01.svg'; +import PlusIcon from '../../assets/icons/plus-icon.svg'; import {Background, MomentCategory} from '../../components'; import {MOMENT_CATEGORIES, TAGG_LIGHT_BLUE_2} from '../../constants'; import {ERROR_SOMETHING_WENT_WRONG} from '../../constants/strings'; diff --git a/src/screens/profile/EditProfile.tsx b/src/screens/profile/EditProfile.tsx index 26802e45..765bbf01 100644 --- a/src/screens/profile/EditProfile.tsx +++ b/src/screens/profile/EditProfile.tsx @@ -305,14 +305,13 @@ const EditProfile: React.FC<EditProfileProps> = ({route, navigation}) => { type: 'image/jpg', }); } - if (form.website) { - if (form.isValidWebsite) { - request.append('website', form.website); - } else { - setForm({...form, attemptedSubmit: false}); - setTimeout(() => setForm({...form, attemptedSubmit: true})); - invalidFields = true; - } + + if (form.isValidWebsite) { + request.append('website', form.website); + } else { + setForm({...form, attemptedSubmit: false}); + setTimeout(() => setForm({...form, attemptedSubmit: true})); + invalidFields = true; } if (form.bio) { diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx index eb80da49..fea67950 100644 --- a/src/screens/suggestedPeople/SPBody.tsx +++ b/src/screens/suggestedPeople/SPBody.tsx @@ -1,19 +1,24 @@ import {useNavigation} from '@react-navigation/native'; import React, {Fragment, useEffect, useMemo, useState} from 'react'; -import {ImageSourcePropType, StyleSheet, Text, View} from 'react-native'; +import {StyleSheet, Text, View} from 'react-native'; import {Image} from 'react-native-animatable'; import {TouchableOpacity} from 'react-native-gesture-handler'; import RequestedButton from '../../assets/ionicons/requested-button.svg'; import {UniversityIcon} from '../../components'; import {BadgeIcon, MutualFriends} from '../../components/suggestedPeople'; -import {BADGE_DATA} from '../../constants/badges'; import { ProfilePreviewType, ScreenType, SuggestedPeopleDataType, - UniversityBadge, + UniversityBadgeDisplayType, } from '../../types'; -import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; +import { + badgesToDisplayBadges, + isIPhoneX, + normalize, + SCREEN_HEIGHT, + SCREEN_WIDTH, +} from '../../utils'; interface SPBodyProps { item: SuggestedPeopleDataType; @@ -39,30 +44,12 @@ const SPBody: React.FC<SPBodyProps> = ({ }) => { const firstItem = itemIndex === 0; const screenType = ScreenType.SuggestedPeople; - const [localBadges, setLocalBadges] = useState< - { - badge: UniversityBadge; - img: ImageSourcePropType; - }[] + const [displayBadges, setDisplayBadges] = useState< + UniversityBadgeDisplayType[] >([]); const navigation = useNavigation(); useEffect(() => { - const newBadges: {badge: UniversityBadge; img: any}[] = []; - const findBadgeIcons = (badge: UniversityBadge) => { - BADGE_DATA[university]?.forEach((item) => { - if (item.title === badge.category) { - item.data.forEach((object) => { - if (object.badgeName === badge.name) { - newBadges.push({badge, img: object.badgeImage}); - } - }); - } - }); - setLocalBadges(newBadges); - }; - badges - ? badges.forEach((badge) => findBadgeIcons(badge)) - : console.log('NO BADGES FOUND'); + setDisplayBadges(badgesToDisplayBadges(badges, university)); }, []); const FriendButton = () => { @@ -131,12 +118,15 @@ const SPBody: React.FC<SPBodyProps> = ({ const Badges = () => ( // Badges aligned left and spaced as if there are 5 items <View style={styles.badgeContainer}> - {localBadges.map(({badge, img}, index) => ( - <BadgeIcon key={index} badge={badge} img={img} style={styles.badge} /> - ))} - {[0, 0, 0, 0, 0].splice(localBadges.length, 5).map((_, index) => ( - <View key={index} style={styles.badge} /> + {displayBadges.map((displayBadge, index) => ( + <BadgeIcon key={index} badge={displayBadge} style={styles.badge} /> ))} + {Array(5) + .fill(0) + .splice(displayBadges.length, 5) + .map((_, index) => ( + <View key={index} style={styles.badge} /> + ))} </View> ); @@ -159,7 +149,7 @@ const SPBody: React.FC<SPBodyProps> = ({ {user.id !== loggedInUserId && <FriendButton />} </View> </View> - {localBadges.length !== 0 && <Badges />} + {displayBadges.length !== 0 && <Badges />} <View style={styles.marginManager}> <MutualFriends user={user} friends={mutual_friends} /> </View> diff --git a/src/store/actions/user.ts b/src/store/actions/user.ts index 941101df..b1cb8719 100644 --- a/src/store/actions/user.ts +++ b/src/store/actions/user.ts @@ -4,12 +4,14 @@ import {Action, ThunkAction} from '@reduxjs/toolkit'; import { getProfilePic, loadProfileInfo, + removeBadgesService, sendSuggestedPeopleLinked, } from '../../services'; import {UniversityBadge, UserType} from '../../types/types'; import {getTokenOrLogout} from '../../utils'; import { clearHeaderAndProfileImages, + profileBadgeRemoved, profileBadgesUpdated, profileCompletionStageUpdated, setIsOnboardedUser, @@ -107,6 +109,27 @@ export const updateUserBadges = } }; +/** + * Removes a single badge from logged-in user by badge name. + * @param badgeName name of badge to be removed + * @param loggedInUserId userId of loggedInUser + */ +export const removeUserBadge = + ( + badgeName: string, + loggedInUserId: string, + ): ThunkAction<Promise<void>, RootState, unknown, Action<string>> => + async (dispatch) => { + try { + const success = await removeBadgesService([badgeName], loggedInUserId); + if (success) { + dispatch({type: profileBadgeRemoved.type, payload: {badge: badgeName}}); + } + } catch (error) { + console.log(error); + } + }; + export const updateProfileCompletionStage = ( stage: number, diff --git a/src/store/initialStates.ts b/src/store/initialStates.ts index e0f9d776..e2902a2d 100644 --- a/src/store/initialStates.ts +++ b/src/store/initialStates.ts @@ -1,4 +1,4 @@ -import {CommentThreadType} from './../types/types'; +import {CommentThreadType, UniversityType} from './../types/types'; import { MomentType, NotificationType, @@ -17,7 +17,7 @@ export const NO_PROFILE: ProfileInfoType = { gender: '', birthday: undefined, university_class: 2021, - university: undefined, + university: UniversityType.Empty, badges: [], //Default to an invalid value and ignore it gracefully while showing tutorials / popups. profile_completion_stage: -1, diff --git a/src/store/reducers/userReducer.ts b/src/store/reducers/userReducer.ts index 97bf845c..4692c5d3 100644 --- a/src/store/reducers/userReducer.ts +++ b/src/store/reducers/userReducer.ts @@ -46,6 +46,12 @@ const userDataSlice = createSlice({ state.profile.badges = action.payload.badges; }, + profileBadgeRemoved: (state, action) => { + state.profile.badges = state.profile.badges.filter( + (badge) => badge.name !== action.payload.badge, + ); + }, + profileCompletionStageUpdated: (state, action) => { state.profile.profile_completion_stage = action.payload.stage; }, @@ -95,6 +101,6 @@ export const { setSuggestedPeopleImage, clearHeaderAndProfileImages, profileBadgesUpdated, - // setChatClientReady, + profileBadgeRemoved, } = userDataSlice.actions; export const userDataReducer = userDataSlice.reducer; diff --git a/src/types/types.ts b/src/types/types.ts index b294e3f1..e54c2201 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -1,3 +1,4 @@ +import {ImageSourcePropType} from 'react-native'; import Animated from 'react-native-reanimated'; import {Channel as ChannelType, StreamChat} from 'stream-chat'; @@ -262,6 +263,10 @@ export type UniversityBadge = { category: string; }; +export interface UniversityBadgeDisplayType extends UniversityBadge { + img: ImageSourcePropType; +} + export type SuggestedPeopleDataType = { user: ProfilePreviewType; university: UniversityType; @@ -291,7 +296,16 @@ export type ContactType = { }; export type UniversityBadgeType = 'Search' | 'Crest'; -export type BadgeDataType = Record<UniversityType, any[]>; +export type BadgeDataType = Record< + UniversityType, + { + title: string; + data: { + badgeName: string; + badgeImage: ImageSourcePropType; + }[]; + }[] +>; // Stream Chat Types export type LocalAttachmentType = Record<string, unknown>; diff --git a/src/utils/common.ts b/src/utils/common.ts index cb0bd62d..645f229a 100644 --- a/src/utils/common.ts +++ b/src/utils/common.ts @@ -1,11 +1,17 @@ import AsyncStorage from '@react-native-community/async-storage'; import moment from 'moment'; -import {Linking} from 'react-native'; +import {ImageSourcePropType, Linking} from 'react-native'; import {getAll} from 'react-native-contacts'; -import {BROWSABLE_SOCIAL_URLS, TOGGLE_BUTTON_TYPE} from '../constants'; +import { + BADGE_DATA, + BROWSABLE_SOCIAL_URLS, + TOGGLE_BUTTON_TYPE, +} from '../constants'; import { ContactType, NotificationType, + UniversityBadge, + UniversityBadgeDisplayType, UniversityBadgeType, UniversityType, } from './../types/types'; @@ -198,7 +204,37 @@ export const validateImageLink = async (url: string | undefined) => { }); }; +/** + * Turns a list of badges into display badges (just a badge with img) by + * looking up the img source from our badge asset lookup constant. + * + * WARNING: Assumes a small list of badges, complexity goes up exponentially. + * + * @param badges list of university badges + * @param university university of which all the badges belong + * @returns list of display badges + */ +export const badgesToDisplayBadges = ( + badges: UniversityBadge[], + university: UniversityType, +) => { + const badgeSet: Set<string> = new Set(badges.map((b) => b.category + b.name)); + const badgeToImgMap: Record<string, ImageSourcePropType> = {}; + BADGE_DATA[university].forEach((category) => { + category.data.forEach((badgeInfo) => { + const key = category.title + badgeInfo.badgeName; + if (badgeSet.has(key)) { + badgeToImgMap[key] = badgeInfo.badgeImage; + } + }); + }); + return <UniversityBadgeDisplayType[]>badges.map((b) => ({ + ...b, + img: badgeToImgMap[b.category + b.name], + })); +}; + // Documentation: https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript export const numberWithCommas = (digits: number) => { return digits.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); -}; +
\ No newline at end of file diff --git a/src/utils/users.ts b/src/utils/users.ts index 8505cde2..64ad10e9 100644 --- a/src/utils/users.ts +++ b/src/utils/users.ts @@ -1,7 +1,8 @@ -import {Alert} from 'react-native'; import AsyncStorage from '@react-native-community/async-storage'; +import {Alert} from 'react-native'; +import ImagePicker from 'react-native-image-crop-picker'; import {INTEGRATED_SOCIAL_LIST} from '../constants'; -import {isUserBlocked, loadSocialPosts, removeBadgesService} from '../services'; +import {isUserBlocked, loadSocialPosts, patchEditProfile} from '../services'; import { loadAllSocials, loadBlockedList, @@ -11,7 +12,6 @@ import { loadUserMoments, loadUserNotifications, logout, - updateUserBadges, } from '../store/actions'; import {NO_SOCIAL_ACCOUNTS} from '../store/initialStates'; import {loadUserMomentCategories} from './../store/actions/momentCategories'; @@ -23,10 +23,7 @@ import { ProfilePreviewType, ScreenType, UserType, - UniversityBadge, } from './../types/types'; -import ImagePicker from 'react-native-image-crop-picker'; -import {patchEditProfile} from '../services'; const loadData = async (dispatch: AppDispatch, user: UserType) => { await Promise.all([ @@ -205,23 +202,6 @@ export const canViewProfile = ( return false; }; -/* Function to call remove badge service, - * remove selected badge from list passed in and - * dispatch thunk action to update store - */ -export const removeUserBadge = async ( - badges: UniversityBadge[], - badgeName: string, - userId: string, - dispatch: AppDispatch, -) => { - const success = await removeBadgesService([badgeName], userId); - if (success === true) { - badges = badges.filter((badge) => badge.name !== badgeName); - dispatch(updateUserBadges(badges)); - } -}; - export const navigateToProfile = async ( state: RootState, dispatch: any, |
