From 5c6bedb572556586d34b99384dac1cad3a153402 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 1 Jun 2021 16:41:18 -0400 Subject: Refactor to use action instead of util function --- src/utils/users.ts | 26 +++----------------------- 1 file changed, 3 insertions(+), 23 deletions(-) (limited to 'src/utils') 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, -- 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/utils') 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 ba010611f8768ff523390141010899acf2d77b8b Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 1 Jun 2021 19:01:09 -0400 Subject: Lint --- src/store/reducers/userReducer.ts | 2 -- src/utils/common.ts | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) (limited to 'src/utils') diff --git a/src/store/reducers/userReducer.ts b/src/store/reducers/userReducer.ts index 03fee112..4692c5d3 100644 --- a/src/store/reducers/userReducer.ts +++ b/src/store/reducers/userReducer.ts @@ -1,6 +1,4 @@ import {createSlice} from '@reduxjs/toolkit'; -import {ActionSheetIOS} from 'react-native'; -import {Badge} from 'react-native-elements'; import {NO_USER_DATA} from '../initialStates'; /** diff --git a/src/utils/common.ts b/src/utils/common.ts index 6804558f..7e54eeaf 100644 --- a/src/utils/common.ts +++ b/src/utils/common.ts @@ -1,5 +1,4 @@ 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'; @@ -13,6 +12,7 @@ import { NotificationType, UniversityBadge, UniversityBadgeDisplayType, + UniversityBadgeType, UniversityType, } from './../types/types'; -- cgit v1.2.3-70-g09d2 From 06c1e5674a2e77bfa22048b4d559949403d30e0e Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 2 Jun 2021 14:54:05 -0400 Subject: Improve util code --- src/components/common/BadgeDetailView.tsx | 2 +- src/components/profile/ProfileBadges.tsx | 8 +++---- src/screens/suggestedPeople/SPBody.tsx | 2 +- src/utils/common.ts | 39 +++++++++++++++++-------------- 4 files changed, 28 insertions(+), 23 deletions(-) (limited to 'src/utils') diff --git a/src/components/common/BadgeDetailView.tsx b/src/components/common/BadgeDetailView.tsx index 85f0a0dc..19f1e74d 100644 --- a/src/components/common/BadgeDetailView.tsx +++ b/src/components/common/BadgeDetailView.tsx @@ -44,7 +44,7 @@ const BadgeDetailView: React.FC = ({ const atLimit = badges.length >= BADGE_LIMIT; useEffect(() => { - setDisplayBadges(badgesToDisplayBadges(badges)); + setDisplayBadges(badgesToDisplayBadges(badges, university)); }, [badges]); const removeBadgeCell = async (badgeName: string) => { diff --git a/src/components/profile/ProfileBadges.tsx b/src/components/profile/ProfileBadges.tsx index aef52903..8e68dc46 100644 --- a/src/components/profile/ProfileBadges.tsx +++ b/src/components/profile/ProfileBadges.tsx @@ -1,15 +1,15 @@ import {useNavigation} from '@react-navigation/core'; import React, {FC, useEffect, useState} from 'react'; -import {Image, StyleSheet, Text, View} from 'react-native'; +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'; -import PlusIconImage from '../../assets/icons/plus-icon-thin.svg'; interface ProfileBadgesProps { userXId: string | undefined; @@ -18,7 +18,7 @@ interface ProfileBadgesProps { const ProfileBadges: React.FC = ({userXId, screenType}) => { const navigation = useNavigation(); - const {badges, name} = useSelector((state: RootState) => + const {badges, name, university} = useSelector((state: RootState) => userXId ? state.userX[screenType][userXId].profile : state.user.profile, ); const [displayBadges, setDisplayBadges] = useState< @@ -28,7 +28,7 @@ const ProfileBadges: React.FC = ({userXId, screenType}) => { const isOwnProfile = userXId === undefined; useEffect(() => { - setDisplayBadges(badgesToDisplayBadges(badges)); + setDisplayBadges(badgesToDisplayBadges(badges, university)); }, [badges]); const PlusIcon: FC = () => ( diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx index c37b4c44..fea67950 100644 --- a/src/screens/suggestedPeople/SPBody.tsx +++ b/src/screens/suggestedPeople/SPBody.tsx @@ -49,7 +49,7 @@ const SPBody: React.FC = ({ >([]); const navigation = useNavigation(); useEffect(() => { - setDisplayBadges(badgesToDisplayBadges(badges)); + setDisplayBadges(badgesToDisplayBadges(badges, university)); }, []); const FriendButton = () => { diff --git a/src/utils/common.ts b/src/utils/common.ts index 7e54eeaf..cfd9244a 100644 --- a/src/utils/common.ts +++ b/src/utils/common.ts @@ -1,6 +1,6 @@ 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 { BADGE_DATA, @@ -205,26 +205,31 @@ export const validateImageLink = async (url: string | undefined) => { }; /** - * Turns a list badges into display badges (with img) by looking up the img source - * from our badge asset lookup constant. + * 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[]) => { - 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, - }); - } - }); +export const badgesToDisplayBadges = ( + badges: UniversityBadge[], + university: UniversityType, +) => { + const badgeSet: Set = new Set(badges.map((b) => b.category + b.name)); + const badgeToImgMap: Record = {}; + BADGE_DATA[university].forEach((category) => { + category.data.forEach((badgeInfo) => { + const key = category.title + badgeInfo.badgeName; + if (badgeSet.has(key)) { + badgeToImgMap[key] = badgeInfo.badgeImage; } }); }); - return displayBadges; + return badges.map((b) => ({ + ...b, + img: badgeToImgMap[b.category + b.name], + })); }; -- cgit v1.2.3-70-g09d2