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/components/common/BadgeDetailView.tsx | 5 +++-- src/store/actions/user.ts | 23 +++++++++++++++++++++++ src/store/reducers/userReducer.ts | 10 +++++++++- src/utils/users.ts | 26 +++----------------------- 4 files changed, 38 insertions(+), 26 deletions(-) (limited to 'src') diff --git a/src/components/common/BadgeDetailView.tsx b/src/components/common/BadgeDetailView.tsx index 6504300c..ee66aa15 100644 --- a/src/components/common/BadgeDetailView.tsx +++ b/src/components/common/BadgeDetailView.tsx @@ -7,9 +7,10 @@ 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 {removeUserBadge} from '../../store/actions'; import {RootState} from '../../store/rootreducer'; import {ScreenType} from '../../types'; -import {getUniversityBadge, normalize, removeUserBadge} from '../../utils'; +import {getUniversityBadge, normalize} from '../../utils'; interface BadgeDetailModalProps { userXId: string | undefined; @@ -59,7 +60,7 @@ const BadgeDetailView: React.FC = ({ }, [badges]); const removeBadgeCell = async (badgeName: string) => { - await removeUserBadge(badges, badgeName, user.userId, dispatch); + dispatch(removeUserBadge(badgeName, user.userId)); }; const badgeEditCell = ({item: {id, name, badgeImage}}) => { 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, RootState, unknown, Action> => + 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/reducers/userReducer.ts b/src/store/reducers/userReducer.ts index 97bf845c..03fee112 100644 --- a/src/store/reducers/userReducer.ts +++ b/src/store/reducers/userReducer.ts @@ -1,4 +1,6 @@ import {createSlice} from '@reduxjs/toolkit'; +import {ActionSheetIOS} from 'react-native'; +import {Badge} from 'react-native-elements'; import {NO_USER_DATA} from '../initialStates'; /** @@ -46,6 +48,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 +103,6 @@ export const { setSuggestedPeopleImage, clearHeaderAndProfileImages, profileBadgesUpdated, - // setChatClientReady, + profileBadgeRemoved, } = userDataSlice.actions; export const userDataReducer = userDataSlice.reducer; 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 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/profile/ProfileBadges.tsx | 29 ++++++++++++++++++++++ src/components/profile/index.ts | 1 + src/components/suggestedPeople/BadgeIcon.tsx | 19 +++++--------- .../suggestedPeople/legacy/BadgesDropdown.tsx | 2 +- src/screens/suggestedPeople/SPBody.tsx | 2 +- src/types/types.ts | 16 +++++++++++- 6 files changed, 53 insertions(+), 16 deletions(-) create mode 100644 src/components/profile/ProfileBadges.tsx (limited to 'src') diff --git a/src/components/profile/ProfileBadges.tsx b/src/components/profile/ProfileBadges.tsx new file mode 100644 index 00000000..838f7987 --- /dev/null +++ b/src/components/profile/ProfileBadges.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import {StyleSheet} from 'react-native'; +import {ScrollView} from 'react-native-gesture-handler'; +import {useSelector} from 'react-redux'; +import {RootState} from '../../store/rootReducer'; +import {ScreenType} from '../../types'; + +interface ProfileBadgesProps { + userXId: string | undefined; + screenType: ScreenType; +} + +const ProfileBadges: React.FC = ({userXId, screenType}) => { + const {badges, university} = useSelector((state: RootState) => + userXId ? state.userX[screenType][userXId].profile : state.user.profile, + ); + return ( + + {badges.map((badge) => ( + <> + // + ))} + + ); +}; + +const styles = StyleSheet.create({}); + +export default ProfileBadges; 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; } -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, }, ]}> - + ))} diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx index eb80da49..c1064224 100644 --- a/src/screens/suggestedPeople/SPBody.tsx +++ b/src/screens/suggestedPeople/SPBody.tsx @@ -132,7 +132,7 @@ const SPBody: React.FC = ({ // Badges aligned left and spaced as if there are 5 items {localBadges.map(({badge, img}, index) => ( - + ))} {[0, 0, 0, 0, 0].splice(localBadges.length, 5).map((_, index) => ( 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; +export type BadgeDataType = Record< + UniversityType, + { + title: string; + data: { + badgeName: string; + badgeImage: ImageSourcePropType; + }[]; + }[] +>; // Stream Chat Types export type LocalAttachmentType = Record; -- 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') 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 c00a73396e9d78984167d1cc9820cfe6ffa5be9e Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 1 Jun 2021 18:08:35 -0400 Subject: Add styling to profile badge --- src/components/profile/ProfileBadges.tsx | 77 +++++++++++++++++++++++++++----- src/components/profile/ProfileBody.tsx | 3 +- 2 files changed, 68 insertions(+), 12 deletions(-) (limited to 'src') diff --git a/src/components/profile/ProfileBadges.tsx b/src/components/profile/ProfileBadges.tsx index 838f7987..13e775f7 100644 --- a/src/components/profile/ProfileBadges.tsx +++ b/src/components/profile/ProfileBadges.tsx @@ -1,9 +1,12 @@ -import React from 'react'; -import {StyleSheet} from 'react-native'; +import React, {useEffect, useState} from 'react'; +import {Alert, StyleSheet, Text, View} from 'react-native'; import {ScrollView} from 'react-native-gesture-handler'; import {useSelector} from 'react-redux'; +import {BadgeIcon} from '..'; +import PlusIcon from '../../assets/icons/plus_icon-01.svg'; import {RootState} from '../../store/rootReducer'; -import {ScreenType} from '../../types'; +import {ScreenType, UniversityBadgeDisplayType} from '../../types'; +import {badgesToDisplayBadges, normalize} from '../../utils'; interface ProfileBadgesProps { userXId: string | undefined; @@ -11,19 +14,71 @@ interface ProfileBadgesProps { } const ProfileBadges: React.FC = ({userXId, screenType}) => { - const {badges, university} = useSelector((state: RootState) => + const {badges} = useSelector((state: RootState) => userXId ? state.userX[screenType][userXId].profile : state.user.profile, ); + const [displayBadges, setDisplayBadges] = useState< + UniversityBadgeDisplayType[] + >([]); + + useEffect(() => { + setDisplayBadges(badgesToDisplayBadges(badges)); + }, [badges]); + return ( - - {badges.map((badge) => ( - <> - // - ))} - + <> + {displayBadges.length === 0 && ( + <> + Badges + + Proudly represent your team, club, or organization! + + + )} + {displayBadges.length === 0 ? ( + + Alert.alert('fooo')} + /> + {[0, 0, 0, 0, 0].map(() => ( + + ))} + + ) : ( + + {displayBadges.map((displayBadge) => ( + + ))} + + )} + ); }; -const styles = StyleSheet.create({}); +const styles = StyleSheet.create({ + title: { + fontWeight: '600', + fontSize: normalize(13.5), + lineHeight: normalize(18), + }, + body: { + fontSize: normalize(13.5), + lineHeight: normalize(17), + }, + badgeContainer: { + width: '100%', + borderWidth: 1, + justifyContent: 'space-between', + }, + greyCircle: { + width: normalize(31), + height: normalize(31), + borderRadius: normalize(31) / 2, + backgroundColor: '#c4c4c4', + }, +}); 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 = ({ return ( + {`@${username}`} {biography.length > 0 && ( {`${biography}`} @@ -137,7 +139,6 @@ const styles = StyleSheet.create({ justifyContent: 'space-between', }, container: { - paddingVertical: '1%', paddingHorizontal: 18, backgroundColor: 'white', }, -- cgit v1.2.3-70-g09d2 From 653aae1cd0409effdd14e215078986737c4c65ef Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 1 Jun 2021 18:32:38 -0400 Subject: Finish profile badges component --- src/components/profile/ProfileBadges.tsx | 98 ++++++++++++++++++++++++++------ src/constants/constants.ts | 2 + src/screens/suggestedPeople/SPBody.tsx | 9 ++- 3 files changed, 90 insertions(+), 19 deletions(-) (limited to 'src') diff --git a/src/components/profile/ProfileBadges.tsx b/src/components/profile/ProfileBadges.tsx index 13e775f7..39e84705 100644 --- a/src/components/profile/ProfileBadges.tsx +++ b/src/components/profile/ProfileBadges.tsx @@ -1,12 +1,15 @@ +import {useNavigation} from '@react-navigation/core'; import React, {useEffect, useState} from 'react'; -import {Alert, StyleSheet, Text, View} from 'react-native'; -import {ScrollView} from 'react-native-gesture-handler'; +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; @@ -14,12 +17,14 @@ interface ProfileBadgesProps { } const ProfileBadges: React.FC = ({userXId, screenType}) => { - const {badges} = useSelector((state: RootState) => + 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); useEffect(() => { setDisplayBadges(badgesToDisplayBadges(badges)); @@ -27,6 +32,7 @@ const ProfileBadges: React.FC = ({userXId, screenType}) => { return ( <> + {/* Tutorial text */} {displayBadges.length === 0 && ( <> Badges @@ -36,24 +42,81 @@ const ProfileBadges: React.FC = ({userXId, screenType}) => { )} {displayBadges.length === 0 ? ( - - Alert.alert('fooo')} - /> - {[0, 0, 0, 0, 0].map(() => ( - - ))} + // Grey circle placeholders + + + navigation.navigate('BadgeSelection', {editing: true}) + }> + + + {Array(BADGE_LIMIT) + .fill(0) + .map(() => ( + + ))} ) : ( - + // Populating actual badges + + {/* Actual badges */} {displayBadges.map((displayBadge) => ( ))} + {/* Plus icon */} + {displayBadges.length < BADGE_LIMIT && ( + + 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 && ( + setIsEditBadgeModalVisible(true)}> + + + )} )} + {isEditBadgeModalVisible && ( + + )} ); }; @@ -67,16 +130,19 @@ const styles = StyleSheet.create({ body: { fontSize: normalize(13.5), lineHeight: normalize(17), + marginBottom: 10, }, badgeContainer: { width: '100%', - borderWidth: 1, justifyContent: 'space-between', + marginBottom: 15, }, - greyCircle: { + circle: { width: normalize(31), height: normalize(31), borderRadius: normalize(31) / 2, + }, + grey: { backgroundColor: '#c4c4c4', }, }); diff --git a/src/constants/constants.ts b/src/constants/constants.ts index 99d3901b..a6d98883 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -21,6 +21,8 @@ export const AVATAR_GRADIENT_DIM = 50; export const TAGG_ICON_DIM = 58; export const TAGG_RING_DIM = normalize(60); +export const BADGE_LIMIT = 5; + export const INTEGRATED_SOCIAL_LIST: string[] = [ 'Instagram', 'Facebook', diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx index 10ad63f0..c37b4c44 100644 --- a/src/screens/suggestedPeople/SPBody.tsx +++ b/src/screens/suggestedPeople/SPBody.tsx @@ -121,9 +121,12 @@ const SPBody: React.FC = ({ {displayBadges.map((displayBadge, index) => ( ))} - {[0, 0, 0, 0, 0].splice(displayBadges.length, 5).map((_, index) => ( - - ))} + {Array(5) + .fill(0) + .splice(displayBadges.length, 5) + .map((_, index) => ( + + ))} ); -- cgit v1.2.3-70-g09d2 From cc71a8ce5808b2f7c40423c1a731821105215984 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 1 Jun 2021 18:53:17 -0400 Subject: Cleanup code/logic, Update heading/subheading, Adjust styling --- src/components/common/BadgeDetailView.tsx | 68 ++++++++++++++++--------------- src/components/profile/ProfileBadges.tsx | 1 + 2 files changed, 37 insertions(+), 32 deletions(-) (limited to 'src') diff --git a/src/components/common/BadgeDetailView.tsx b/src/components/common/BadgeDetailView.tsx index ee66aa15..85f0a0dc 100644 --- a/src/components/common/BadgeDetailView.tsx +++ b/src/components/common/BadgeDetailView.tsx @@ -5,12 +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} from '../../utils'; +import {ScreenType, UniversityBadgeDisplayType} from '../../types'; +import { + badgesToDisplayBadges, + getUniversityBadge, + normalize, +} from '../../utils'; interface BadgeDetailModalProps { userXId: string | undefined; @@ -35,35 +38,24 @@ const BadgeDetailView: React.FC = ({ userXId ? state.userX[screenType][userXId] : state.user, ); const navigation = useNavigation(); - const [selectedBadgesWithImage, setSelectedBadgesWithImage] = useState( - [], - ); + 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)); }, [badges]); const removeBadgeCell = async (badgeName: string) => { dispatch(removeUserBadge(badgeName, user.userId)); }; - const badgeEditCell = ({item: {id, name, badgeImage}}) => { + const badgeEditCell = ({ + item: {id, name, img}, + }: { + item: UniversityBadgeDisplayType; + }) => { return ( = ({ navigation.navigate('MutualBadgeHolders', { badge_id: id, badge_title: name, - badge_img: badgeImage, + badge_img: img, }); }}> = ({ {isEditable && ( @@ -122,10 +114,20 @@ const BadgeDetailView: React.FC = ({ }; 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 ( {heading} @@ -156,7 +158,7 @@ const BadgeDetailView: React.FC = ({ item.id.toString()} @@ -229,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/profile/ProfileBadges.tsx b/src/components/profile/ProfileBadges.tsx index 39e84705..089d9ea4 100644 --- a/src/components/profile/ProfileBadges.tsx +++ b/src/components/profile/ProfileBadges.tsx @@ -135,6 +135,7 @@ const styles = StyleSheet.create({ badgeContainer: { width: '100%', justifyContent: 'space-between', + marginTop: 5, marginBottom: 15, }, circle: { -- 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') 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 c71f1279af4ba37b5dce784cae4090ae857f85c1 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 1 Jun 2021 19:20:00 -0400 Subject: Add userX view, Add padding --- src/components/profile/ProfileBadges.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/components/profile/ProfileBadges.tsx b/src/components/profile/ProfileBadges.tsx index 089d9ea4..3456afe9 100644 --- a/src/components/profile/ProfileBadges.tsx +++ b/src/components/profile/ProfileBadges.tsx @@ -25,6 +25,7 @@ const ProfileBadges: React.FC = ({userXId, screenType}) => { UniversityBadgeDisplayType[] >([]); const [isEditBadgeModalVisible, setIsEditBadgeModalVisible] = useState(false); + const isOwnProfile = userXId === undefined; useEffect(() => { setDisplayBadges(badgesToDisplayBadges(badges)); @@ -33,7 +34,7 @@ const ProfileBadges: React.FC = ({userXId, screenType}) => { return ( <> {/* Tutorial text */} - {displayBadges.length === 0 && ( + {displayBadges.length === 0 && isOwnProfile && ( <> Badges @@ -41,7 +42,7 @@ const ProfileBadges: React.FC = ({userXId, screenType}) => { )} - {displayBadges.length === 0 ? ( + {displayBadges.length === 0 && isOwnProfile && ( // Grey circle placeholders = ({userXId, screenType}) => { ))} - ) : ( + )} + {displayBadges.length !== 0 && ( // Populating actual badges = ({userXId, screenType}) => { ))} {/* Plus icon */} - {displayBadges.length < BADGE_LIMIT && ( + {displayBadges.length < BADGE_LIMIT && isOwnProfile && ( navigation.navigate('BadgeSelection', {editing: true}) @@ -96,7 +98,7 @@ const ProfileBadges: React.FC = ({userXId, screenType}) => { ))} {/* X button */} - {displayBadges.length === BADGE_LIMIT && ( + {displayBadges.length === BADGE_LIMIT && isOwnProfile && ( setIsEditBadgeModalVisible(true)}> Date: Tue, 1 Jun 2021 19:20:29 -0400 Subject: Cleanup code --- src/components/profile/ProfileBadges.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/components/profile/ProfileBadges.tsx b/src/components/profile/ProfileBadges.tsx index 3456afe9..978211da 100644 --- a/src/components/profile/ProfileBadges.tsx +++ b/src/components/profile/ProfileBadges.tsx @@ -114,7 +114,7 @@ const ProfileBadges: React.FC = ({userXId, screenType}) => { -- cgit v1.2.3-70-g09d2 From bcd54389acb9db9b3948a9f1f105b7cffdbe2acf Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 2 Jun 2021 12:55:43 -0400 Subject: Cleanup code --- src/assets/images/plus-icon-thin.png | Bin 0 -> 2169 bytes src/components/profile/ProfileBadges.tsx | 70 +++++++++++++++---------------- 2 files changed, 35 insertions(+), 35 deletions(-) create mode 100644 src/assets/images/plus-icon-thin.png (limited to 'src') diff --git a/src/assets/images/plus-icon-thin.png b/src/assets/images/plus-icon-thin.png new file mode 100644 index 00000000..6f0a305e Binary files /dev/null and b/src/assets/images/plus-icon-thin.png differ diff --git a/src/components/profile/ProfileBadges.tsx b/src/components/profile/ProfileBadges.tsx index 978211da..5ce776c2 100644 --- a/src/components/profile/ProfileBadges.tsx +++ b/src/components/profile/ProfileBadges.tsx @@ -1,10 +1,9 @@ import {useNavigation} from '@react-navigation/core'; -import React, {useEffect, useState} from 'react'; -import {StyleSheet, Text, View} from 'react-native'; +import React, {FC, useEffect, useState} from 'react'; +import {Image, 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'; @@ -31,6 +30,26 @@ const ProfileBadges: React.FC = ({userXId, screenType}) => { setDisplayBadges(badgesToDisplayBadges(badges)); }, [badges]); + const PlusIcon: FC = () => ( + navigation.navigate('BadgeSelection', {editing: true})}> + + + ); + + const CloseIcon: FC = () => ( + setIsEditBadgeModalVisible(true)}> + {/* TODO: needs to be grey :shrug: */} + + + ); + return ( <> {/* Tutorial text */} @@ -48,17 +67,7 @@ const ProfileBadges: React.FC = ({userXId, screenType}) => { contentContainerStyle={styles.badgeContainer} scrollEnabled={false} horizontal> - - navigation.navigate('BadgeSelection', {editing: true}) - }> - - + {Array(BADGE_LIMIT) .fill(0) .map(() => ( @@ -77,19 +86,7 @@ const ProfileBadges: React.FC = ({userXId, screenType}) => { ))} {/* Plus icon */} - {displayBadges.length < BADGE_LIMIT && isOwnProfile && ( - - navigation.navigate('BadgeSelection', {editing: true}) - }> - - - )} + {displayBadges.length < BADGE_LIMIT && isOwnProfile && } {/* Empty placeholders for space-between styling */} {Array(BADGE_LIMIT + 1) .fill(0) @@ -99,14 +96,7 @@ const ProfileBadges: React.FC = ({userXId, screenType}) => { ))} {/* X button */} {displayBadges.length === BADGE_LIMIT && isOwnProfile && ( - setIsEditBadgeModalVisible(true)}> - - + )} )} @@ -148,6 +138,16 @@ const styles = StyleSheet.create({ grey: { backgroundColor: '#c4c4c4', }, + plus: { + width: normalize(31), + height: normalize(31), + }, + close: { + width: normalize(31), + height: normalize(31), + color: 'grey', + transform: [{rotate: '45deg'}], + }, }); export default ProfileBadges; -- cgit v1.2.3-70-g09d2 From 21bd2597b72c8ba8246b98e72fe45ba373046a7f Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 2 Jun 2021 13:32:00 -0400 Subject: Update icon assets --- src/assets/icons/plus-icon-thin.svg | 1 + src/assets/icons/plus-icon-white.svg | 1 + src/assets/icons/plus-icon.svg | 1 + src/assets/icons/plus_icon-01.svg | 1 - src/assets/icons/plus_icon-02.svg | 1 - src/assets/images/plus-icon-thin.png | Bin 2169 -> 0 bytes src/components/moments/Moment.tsx | 4 ++-- src/components/profile/ProfileBadges.tsx | 13 ++++--------- src/screens/profile/CategorySelection.tsx | 2 +- 9 files changed, 10 insertions(+), 14 deletions(-) create mode 100644 src/assets/icons/plus-icon-thin.svg create mode 100644 src/assets/icons/plus-icon-white.svg create mode 100644 src/assets/icons/plus-icon.svg delete mode 100644 src/assets/icons/plus_icon-01.svg delete mode 100644 src/assets/icons/plus_icon-02.svg delete mode 100644 src/assets/images/plus-icon-thin.png (limited to 'src') 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 @@ + \ No newline at end of file diff --git a/src/assets/icons/plus-icon-white.svg b/src/assets/icons/plus-icon-white.svg new file mode 100644 index 00000000..25527911 --- /dev/null +++ b/src/assets/icons/plus-icon-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/plus-icon.svg b/src/assets/icons/plus-icon.svg new file mode 100644 index 00000000..7a3b21d2 --- /dev/null +++ b/src/assets/icons/plus-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/plus_icon-01.svg b/src/assets/icons/plus_icon-01.svg deleted file mode 100644 index 7a3b21d2..00000000 --- a/src/assets/icons/plus_icon-01.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/icons/plus_icon-02.svg b/src/assets/icons/plus_icon-02.svg deleted file mode 100644 index 25527911..00000000 --- a/src/assets/icons/plus_icon-02.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/images/plus-icon-thin.png b/src/assets/images/plus-icon-thin.png deleted file mode 100644 index 6f0a305e..00000000 Binary files a/src/assets/images/plus-icon-thin.png and /dev/null differ 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 index 5ce776c2..aef52903 100644 --- a/src/components/profile/ProfileBadges.tsx +++ b/src/components/profile/ProfileBadges.tsx @@ -9,6 +9,7 @@ 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; @@ -33,20 +34,13 @@ const ProfileBadges: React.FC = ({userXId, screenType}) => { const PlusIcon: FC = () => ( navigation.navigate('BadgeSelection', {editing: true})}> - + ); const CloseIcon: FC = () => ( setIsEditBadgeModalVisible(true)}> - {/* TODO: needs to be grey :shrug: */} - + ); @@ -141,6 +135,7 @@ const styles = StyleSheet.create({ plus: { width: normalize(31), height: normalize(31), + color: 'black', }, close: { width: normalize(31), 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'; -- 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') 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 From c18b2436897cd92e7a33c33c75e13dba1fec8ffe Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Mon, 7 Jun 2021 17:07:09 -0400 Subject: Fix default value for university type --- src/store/initialStates.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src') 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, -- cgit v1.2.3-70-g09d2