From ca2cd1f2430342772ae893f0eae111accf7df0fa Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 1 Jun 2021 17:16:58 -0400 Subject: Add UniversityBadgeDisplayType --- src/components/suggestedPeople/BadgeIcon.tsx | 19 ++++++------------- .../suggestedPeople/legacy/BadgesDropdown.tsx | 2 +- 2 files changed, 7 insertions(+), 14 deletions(-) (limited to 'src/components/suggestedPeople') 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; } -const BadgeIcon: React.FC = ({badge, img, style}) => { +const BadgeIcon: React.FC = ({badge, style}) => { const navigation = useNavigation(); return ( = ({badge, img, style}) => { navigation.navigate('MutualBadgeHolders', { badge_id: badge.id, badge_title: badge.name, - badge_img: img, + badge_img: badge.img, }); }}> = ({badge, img, style}) => { angle={154.72} angleCenter={{x: 0.5, y: 0.5}} style={styles.badgeBackground}> - + ); diff --git a/src/components/suggestedPeople/legacy/BadgesDropdown.tsx b/src/components/suggestedPeople/legacy/BadgesDropdown.tsx index 267355f3..9f8d2a5a 100644 --- a/src/components/suggestedPeople/legacy/BadgesDropdown.tsx +++ b/src/components/suggestedPeople/legacy/BadgesDropdown.tsx @@ -102,7 +102,7 @@ const BadgesDropdown: React.FC = ({ zIndex: -1 * badge.id, }, ]}> - + ))} -- cgit v1.2.3-70-g09d2 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/components/suggestedPeople') 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 From b19ce79cc40be0062780c925599e3f29e5df3fb3 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 3 Jun 2021 17:33:38 -0400 Subject: Move code to legacy --- src/components/suggestedPeople/SPTaggsBar.tsx | 130 --------------------- src/components/suggestedPeople/index.ts | 1 - .../suggestedPeople/legacy/SPTaggsBar.tsx | 128 ++++++++++++++++++++ 3 files changed, 128 insertions(+), 131 deletions(-) delete mode 100644 src/components/suggestedPeople/SPTaggsBar.tsx create mode 100644 src/components/suggestedPeople/legacy/SPTaggsBar.tsx (limited to 'src/components/suggestedPeople') diff --git a/src/components/suggestedPeople/SPTaggsBar.tsx b/src/components/suggestedPeople/SPTaggsBar.tsx deleted file mode 100644 index 3ab33da1..00000000 --- a/src/components/suggestedPeople/SPTaggsBar.tsx +++ /dev/null @@ -1,130 +0,0 @@ -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'; - -const {View, ScrollView} = Animated; -interface TaggsBarProps { - userXId: string | undefined; - screenType: ScreenType; - linkedSocials?: string[]; -} -const TaggsBar: React.FC = ({ - userXId, - screenType, - linkedSocials, -}) => { - let [taggs, setTaggs] = useState([]); - let [taggsNeedUpdate, setTaggsNeedUpdate] = useState(true); - const {user} = useSelector((state: RootState) => - userXId ? state.userX[screenType][userXId] : state.user, - ); - - const dispatch = useDispatch(); - - /** - * Updates the individual social that needs update - * If username is empty, update nonintegrated socials like Snapchat and TikTok - * @param socialType Type of the social that needs update - */ - const handleSocialUpdate = (socialType: string, username: string) => { - if (username !== '') { - dispatch(updateSocial(socialType, username)); - } else { - dispatch(loadIndividualSocial(user.userId, socialType)); - } - }; - - /** - * This useEffect should be called evey time the user being viewed is changed OR - * And update is triggered manually - */ - useEffect(() => { - const loadData = async () => { - const socials: string[] = linkedSocials - ? linkedSocials - : await getLinkedSocials(user.userId); - const unlinkedSocials = SOCIAL_LIST.filter( - (s) => socials.indexOf(s) === -1, - ); - let new_taggs = []; - let i = 0; - for (let social of socials) { - new_taggs.push( - , - ); - i++; - } - if (!userXId) { - for (let social of unlinkedSocials) { - new_taggs.push( - , - ); - i++; - } - } - setTaggs(new_taggs); - setTaggsNeedUpdate(false); - }; - if (user.userId) { - loadData(); - } - }, [taggsNeedUpdate, user]); - - return taggs.length > 0 ? ( - - - {taggs} - - - ) : ( - <> - ); -}; - -const styles = StyleSheet.create({ - spContainer: { - shadowColor: '#000', - shadowRadius: 10, - shadowOffset: {width: 0, height: 2}, - zIndex: 1, - marginBottom: 25, - }, - contentContainer: { - alignItems: 'center', - paddingBottom: 5, - }, -}); - -export default TaggsBar; 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/SPTaggsBar.tsx b/src/components/suggestedPeople/legacy/SPTaggsBar.tsx new file mode 100644 index 00000000..3273f88d --- /dev/null +++ b/src/components/suggestedPeople/legacy/SPTaggsBar.tsx @@ -0,0 +1,128 @@ +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'; + +const {View, ScrollView} = Animated; +interface TaggsBarProps { + userXId: string | undefined; + screenType: ScreenType; + linkedSocials?: string[]; +} +const TaggsBar: React.FC = ({ + userXId, + screenType, + linkedSocials, +}) => { + let [taggs, setTaggs] = useState([]); + let [taggsNeedUpdate, setTaggsNeedUpdate] = useState(true); + const {user} = useSelector((state: RootState) => + userXId ? state.userX[screenType][userXId] : state.user, + ); + + const dispatch = useDispatch(); + + /** + * Updates the individual social that needs update + * If username is empty, update nonintegrated socials like Snapchat and TikTok + * @param socialType Type of the social that needs update + */ + const handleSocialUpdate = (socialType: string, username: string) => { + if (username !== '') { + dispatch(updateSocial(socialType, username)); + } else { + dispatch(loadIndividualSocial(user.userId, socialType)); + } + }; + + /** + * This useEffect should be called evey time the user being viewed is changed OR + * And update is triggered manually + */ + useEffect(() => { + const loadData = async () => { + const socials: string[] = linkedSocials + ? linkedSocials + : await getLinkedSocials(user.userId); + const unlinkedSocials = SOCIAL_LIST.filter( + (s) => socials.indexOf(s) === -1, + ); + let new_taggs = []; + let i = 0; + for (let social of socials) { + new_taggs.push( + , + ); + i++; + } + if (!userXId) { + for (let social of unlinkedSocials) { + new_taggs.push( + , + ); + i++; + } + } + setTaggs(new_taggs); + setTaggsNeedUpdate(false); + }; + if (user.userId) { + loadData(); + } + }, [taggsNeedUpdate, user]); + + return taggs.length > 0 ? ( + + + {taggs} + + + ) : ( + <> + ); +}; + +const styles = StyleSheet.create({ + spContainer: { + shadowColor: '#000', + shadowRadius: 10, + shadowOffset: {width: 0, height: 2}, + zIndex: 1, + marginBottom: 25, + }, + contentContainer: { + alignItems: 'center', + paddingBottom: 5, + }, +}); + +export default TaggsBar; -- cgit v1.2.3-70-g09d2