From 0cc8363a5890ec7fa15f48996fb813f47b6c71b4 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 1 Jun 2021 17:40:33 -0400 Subject: Convert local badges to display badges, Cleanup code --- .../suggestedPeople/legacy/BadgesDropdown.tsx | 13 +++---- src/screens/suggestedPeople/SPBody.tsx | 45 ++++++++-------------- src/utils/common.ts | 35 ++++++++++++++++- 3 files changed, 54 insertions(+), 39 deletions(-) (limited to 'src') diff --git a/src/components/suggestedPeople/legacy/BadgesDropdown.tsx b/src/components/suggestedPeople/legacy/BadgesDropdown.tsx index 9f8d2a5a..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 = ({ @@ -92,7 +89,7 @@ const BadgesDropdown: React.FC = ({ )} {localBadges && - localBadges.map(({badge, img}, index) => ( + localBadges.map((badge, index) => ( = ({ zIndex: -1 * badge.id, }, ]}> - + ))} diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx index c1064224..10ad63f0 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 = ({ }) => { 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)); }, []); const FriendButton = () => { @@ -131,10 +118,10 @@ const SPBody: React.FC = ({ const Badges = () => ( // Badges aligned left and spaced as if there are 5 items - {localBadges.map(({badge, img}, index) => ( - + {displayBadges.map((displayBadge, index) => ( + ))} - {[0, 0, 0, 0, 0].splice(localBadges.length, 5).map((_, index) => ( + {[0, 0, 0, 0, 0].splice(displayBadges.length, 5).map((_, index) => ( ))} @@ -159,7 +146,7 @@ const SPBody: React.FC = ({ {user.id !== loggedInUserId && } - {localBadges.length !== 0 && } + {displayBadges.length !== 0 && } diff --git a/src/utils/common.ts b/src/utils/common.ts index 95e77f64..6804558f 100644 --- a/src/utils/common.ts +++ b/src/utils/common.ts @@ -1,12 +1,18 @@ import AsyncStorage from '@react-native-community/async-storage'; +import {HeaderTitle} from '@react-navigation/stack'; import moment from 'moment'; import {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, - UniversityBadgeType, + UniversityBadge, + UniversityBadgeDisplayType, UniversityType, } from './../types/types'; @@ -197,3 +203,28 @@ export const validateImageLink = async (url: string | undefined) => { return false; }); }; + +/** + * Turns a list badges into display badges (with img) by looking up the img source + * from our badge asset lookup constant. + * @param badges list of university badges + * @returns list of display badges + */ +export const badgesToDisplayBadges = (badges: UniversityBadge[]) => { + const displayBadges: UniversityBadgeDisplayType[] = []; + badges.forEach((badge) => { + BADGE_DATA[badge.university].forEach((category) => { + if (category.title === badge.category) { + category.data.forEach((badgeInfo) => { + if (badgeInfo.badgeName === badge.name) { + displayBadges.push({ + ...badge, + img: badgeInfo.badgeImage, + }); + } + }); + } + }); + }); + return displayBadges; +}; -- cgit v1.2.3-70-g09d2