From 13239b4b87f171a8d0c394af758968aa1e60f4ea Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Tue, 9 Mar 2021 08:37:57 -0800 Subject: unused imports, source coreections --- src/components/search/SearchCategories.tsx | 2 +- src/components/search/SearchResultList.tsx | 2 +- src/components/search/SearchResults.tsx | 4 ++-- .../suggestedPeople/SuggestedPeopleScreen.tsx | 28 ++++------------------ 4 files changed, 8 insertions(+), 28 deletions(-) (limited to 'src') diff --git a/src/components/search/SearchCategories.tsx b/src/components/search/SearchCategories.tsx index 2883a541..c3c4c518 100644 --- a/src/components/search/SearchCategories.tsx +++ b/src/components/search/SearchCategories.tsx @@ -4,7 +4,7 @@ import {StyleSheet, Text, View} from 'react-native'; import {TouchableOpacity} from 'react-native-gesture-handler'; import LinearGradient from 'react-native-linear-gradient'; import {getButtons} from '../../services/ExploreService'; -import {SearchCategoryType} from 'src/types'; +import {SearchCategoryType} from '../../types'; import {TAGG_LIGHT_BLUE_2, TAGG_PURPLE} from '../../constants'; import {SCREEN_WIDTH} from '../../utils'; diff --git a/src/components/search/SearchResultList.tsx b/src/components/search/SearchResultList.tsx index 613ab734..d8cf02d9 100644 --- a/src/components/search/SearchResultList.tsx +++ b/src/components/search/SearchResultList.tsx @@ -1,7 +1,7 @@ import React, {useEffect, useState} from 'react'; import {SectionList, StyleSheet, Text, View} from 'react-native'; import {useSelector} from 'react-redux'; -import {RootState} from 'src/store/rootreducer'; +import {RootState} from '../../store/rootreducer'; import {NO_RESULTS_FOUND} from '../../constants/strings'; import {PreviewType, ScreenType} from '../../types'; import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; diff --git a/src/components/search/SearchResults.tsx b/src/components/search/SearchResults.tsx index fbeae1d8..277b3454 100644 --- a/src/components/search/SearchResults.tsx +++ b/src/components/search/SearchResults.tsx @@ -5,10 +5,10 @@ import { ScreenType, CategoryPreviewType, } from '../../types'; -import {StyleSheet, View} from 'react-native'; +import {View} from 'react-native'; import SearchResultsCell from './SearchResultCell'; import {useSelector} from 'react-redux'; -import {RootState} from 'src/store/rootReducer'; +import {RootState} from '../../store/rootReducer'; interface SearchResultsProps { results: ProfilePreviewType[]; previewType: PreviewType; diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx index 911474cd..61adc171 100644 --- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx +++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx @@ -1,43 +1,23 @@ import {useFocusEffect, useNavigation} from '@react-navigation/native'; -import React, { - memo, - Fragment, - useCallback, - useEffect, - useState, - useMemo, - useRef, -} from 'react'; +import React, {useCallback, useEffect, useState, useRef} from 'react'; import { FlatList, - ListRenderItemInfo, RefreshControl, StatusBar, StyleSheet, - Text, - View, ViewToken, } from 'react-native'; -import {Image} from 'react-native-animatable'; -import {TouchableOpacity} from 'react-native-gesture-handler'; + import Animated from 'react-native-reanimated'; import {useDispatch, useSelector, useStore} from 'react-redux'; -import { - TabsGradient, - TaggsBar, - TaggLoadingIndicator, - Background, -} from '../../components'; -import {MutualFriends} from '../../components/suggestedPeople'; +import {TabsGradient, TaggLoadingIndicator, Background} from '../../components'; import {SP_PAGE_SIZE} from '../../constants'; import SuggestedPeopleOnboardingStackScreen from '../../routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen'; import {getSuggestedPeople} from '../../services/SuggestedPeopleService'; import {cancelFriendRequest, resetScreenType} from '../../store/actions'; import {RootState} from '../../store/rootReducer'; -import RequestedButton from '../../assets/ionicons/requested-button.svg'; import { FriendshipStatusType, - FriendshipType, ProfilePreviewType, ScreenType, SuggestedPeopleDataType, @@ -234,7 +214,7 @@ const SuggestedPeopleScreen: React.FC = () => { renderItem={(item) => { return ( Date: Tue, 9 Mar 2021 10:21:41 -0800 Subject: Added new component --- src/components/suggestedPeople/BadgesDropdown.tsx | 149 ++++++++++++++++++++++ 1 file changed, 149 insertions(+) create mode 100644 src/components/suggestedPeople/BadgesDropdown.tsx (limited to 'src') diff --git a/src/components/suggestedPeople/BadgesDropdown.tsx b/src/components/suggestedPeople/BadgesDropdown.tsx new file mode 100644 index 00000000..cd0d20cc --- /dev/null +++ b/src/components/suggestedPeople/BadgesDropdown.tsx @@ -0,0 +1,149 @@ +import {useNavigation} from '@react-navigation/native'; +import React, {useEffect, useState} from 'react'; +import {Image, StyleSheet} from 'react-native'; +import {TouchableOpacity} from 'react-native-gesture-handler'; +import LinearGradient from 'react-native-linear-gradient'; +import Animated, {Easing} from 'react-native-reanimated'; +import {UniversityBadge} from 'src/types'; +import {UniversityIcon} from '..'; +import {normalize, SCREEN_WIDTH} from '../../utils'; + +interface BadgesDropdownProps { + localBadges: { + badge: UniversityBadge; + img: string; + }[]; +} + +const BadgesDropdown: React.FC = ({localBadges}) => { + const [displayBadges, setDisplayBadges] = useState(false); + let [top, setTop] = useState[]>([]); + const navigation = useNavigation(); + + useEffect(() => { + const defineBadgePositions = () => { + let localTop: Animated.Value[] = []; + localBadges.forEach(() => { + localTop.push(new Animated.Value(0)); + }); + setTop(localTop); + }; + defineBadgePositions(); + }, []); + + const animate = () => { + for (let i = 0; i < localBadges.length; i++) { + if (top) { + Animated.timing(top[i], { + toValue: i * 40 + 50, + duration: 500, + easing: Easing.linear, + }).start(); + } + } + }; + + const animateBack = () => { + for (let i = 0; i < localBadges.length; i++) { + if (top) { + Animated.timing(top[i], { + toValue: 0, + duration: 500, + easing: Easing.linear, + }).start(); + } + } + }; + return ( + + { + setDisplayBadges(!displayBadges); + if (displayBadges) { + animate(); + } else { + animateBack(); + } + }}> + + + {localBadges && + localBadges.map(({badge, img}, index) => ( + + { + navigation.navigate('MutualBadgeHolders', { + badge_id: badge.id, + badge_title: badge.name, + }); + }}> + + + + + + ))} + + ); +}; + +const styles = StyleSheet.create({ + badgeBackground: { + position: 'absolute', + width: '100%', + height: '100%', + borderRadius: 50, + borderColor: 'transparent', + borderWidth: 1, + alignSelf: 'center', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + }, + badgesContainer: { + flexDirection: 'column', + justifyContent: 'space-between', + alignItems: 'center', + width: 38, + left: '5%', + paddingBottom: '2%', + }, + badgeButton: { + width: 30, + height: 30, + borderRadius: 15, + }, + animatedBadgeView: {position: 'absolute'}, + universityIconContainer: { + width: normalize(31), + height: normalize(38), + }, +}); + +export default BadgesDropdown; -- cgit v1.2.3-70-g09d2 From c96497fb94fd67a4ba762da74b93eeb37ed2904c Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Tue, 9 Mar 2021 10:22:23 -0800 Subject: exported file, refactored SPBody --- src/components/suggestedPeople/index.ts | 1 + src/screens/suggestedPeople/SPBody.tsx | 68 +++++++-------------------------- 2 files changed, 15 insertions(+), 54 deletions(-) (limited to 'src') diff --git a/src/components/suggestedPeople/index.ts b/src/components/suggestedPeople/index.ts index 219ee2fe..515f6fb4 100644 --- a/src/components/suggestedPeople/index.ts +++ b/src/components/suggestedPeople/index.ts @@ -1 +1,2 @@ export {default as MutualFriends} from './MutualFriends'; +export {default as BadgesDropdown} from './BadgesDropdown'; diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx index 8c6a3238..3c3636db 100644 --- a/src/screens/suggestedPeople/SPBody.tsx +++ b/src/screens/suggestedPeople/SPBody.tsx @@ -3,12 +3,9 @@ import React, {Fragment, useEffect, useMemo, useState} from 'react'; import {StyleSheet, Text, View} from 'react-native'; import {Image} from 'react-native-animatable'; import {TouchableOpacity} from 'react-native-gesture-handler'; -import LinearGradient from 'react-native-linear-gradient'; -import Animated from 'react-native-reanimated'; import RequestedButton from '../../assets/ionicons/requested-button.svg'; import {TaggsBar} from '../../components'; -import UniversityIcon from '../../components/profile/UniversityIcon'; -import {MutualFriends} from '../../components/suggestedPeople'; +import {BadgesDropdown, MutualFriends} from '../../components/suggestedPeople'; import {DATA} from '../../screens/badge/BadgeSelection'; import { ProfilePreviewType, @@ -17,10 +14,11 @@ import { UniversityBadge, } from '../../types'; import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; +import Animated from 'react-native-reanimated'; interface SPBodyProps { item: SuggestedPeopleDataType; - index: number; + itemIndex: number; onAddFriend: (user: ProfilePreviewType) => Promise; onCancelRequest: (user: ProfilePreviewType) => void; loggedInUserId: string; @@ -35,14 +33,20 @@ const SPBody: React.FC = ({ friendship, badges, }, - index, + itemIndex, onAddFriend, onCancelRequest, loggedInUserId, }) => { - const firstItem = index === 0; + const firstItem = itemIndex === 0; const screenType = ScreenType.SuggestedPeople; - const [localBadges, setLocalBadges] = useState([]); + const [localBadges, setLocalBadges] = useState< + { + badge: UniversityBadge; + img: string; + }[] + >([]); + const navigation = useNavigation(); let array = []; useEffect(() => { const findBadgeIcons = (badge: UniversityBadge) => { @@ -111,7 +115,6 @@ const SPBody: React.FC = ({ ), [suggested_people_url], ); - const navigation = useNavigation(); return ( @@ -119,46 +122,7 @@ const SPBody: React.FC = ({ {firstItem && 'Suggested People'} - - { - console.log('badges: ', badges); - }}> - - - {localBadges && - localBadges.map(({badge, img}) => ( - { - navigation.navigate('MutualBadgeHolders', { - badge_id: badge.id, - badge_title: badge.name, - }); - }}> - - - - - ))} - + {} @@ -209,10 +173,6 @@ const styles = StyleSheet.create({ flexDirection: 'column', justifyContent: 'space-between', }, - universityIconContainer: { - width: normalize(31), - height: normalize(38), - }, marginManager: {marginHorizontal: '5%'}, image: { position: 'absolute', @@ -311,7 +271,6 @@ const styles = StyleSheet.create({ letterSpacing: normalize(1), }, body: {}, - button: { justifyContent: 'center', alignItems: 'center', @@ -365,6 +324,7 @@ const styles = StyleSheet.create({ height: 30, borderRadius: 15, }, + animatedBadgeView: {position: 'absolute'}, }); export default SPBody; -- cgit v1.2.3-70-g09d2 From 743f0b19f95c4398a5026d7cf80d38617eecfcc7 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Tue, 9 Mar 2021 10:33:07 -0800 Subject: Cleaned spbody --- src/screens/suggestedPeople/SPBody.tsx | 55 ++-------------------------------- 1 file changed, 2 insertions(+), 53 deletions(-) (limited to 'src') diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx index 3c3636db..b7943cbc 100644 --- a/src/screens/suggestedPeople/SPBody.tsx +++ b/src/screens/suggestedPeople/SPBody.tsx @@ -66,7 +66,7 @@ const SPBody: React.FC = ({ : console.log('NO BADGES FOUND'); }, []); - const displayButton = () => { + const displayFriendButton = () => { switch (friendship.status) { case 'friends': return ; @@ -138,7 +138,7 @@ const SPBody: React.FC = ({ {user.first_name} @{user.username} - {user.id !== loggedInUserId && displayButton()} + {user.id !== loggedInUserId && displayFriendButton()} Date: Tue, 9 Mar 2021 10:42:07 -0800 Subject: comments for badge dropdown --- src/components/suggestedPeople/BadgesDropdown.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/components/suggestedPeople/BadgesDropdown.tsx b/src/components/suggestedPeople/BadgesDropdown.tsx index cd0d20cc..264292d7 100644 --- a/src/components/suggestedPeople/BadgesDropdown.tsx +++ b/src/components/suggestedPeople/BadgesDropdown.tsx @@ -7,7 +7,6 @@ import Animated, {Easing} from 'react-native-reanimated'; import {UniversityBadge} from 'src/types'; import {UniversityIcon} from '..'; import {normalize, SCREEN_WIDTH} from '../../utils'; - interface BadgesDropdownProps { localBadges: { badge: UniversityBadge; @@ -16,11 +15,16 @@ interface BadgesDropdownProps { } const BadgesDropdown: React.FC = ({localBadges}) => { + + // Used to toggle between dropdown being displayed and not const [displayBadges, setDisplayBadges] = useState(false); + + // Determines the absolute position of the individual badges [0, i * 40] let [top, setTop] = useState[]>([]); const navigation = useNavigation(); useEffect(() => { + // Initialize position of badges to 0 const defineBadgePositions = () => { let localTop: Animated.Value[] = []; localBadges.forEach(() => { @@ -31,6 +35,7 @@ const BadgesDropdown: React.FC = ({localBadges}) => { defineBadgePositions(); }, []); + // Displays badges dropdown by updating top [state] for every badge const animate = () => { for (let i = 0; i < localBadges.length; i++) { if (top) { @@ -43,6 +48,7 @@ const BadgesDropdown: React.FC = ({localBadges}) => { } }; + // Draws back displayed badges by setting top [state] to 0 for every badge const animateBack = () => { for (let i = 0; i < localBadges.length; i++) { if (top) { @@ -54,6 +60,7 @@ const BadgesDropdown: React.FC = ({localBadges}) => { } } }; + return ( -- cgit v1.2.3-70-g09d2 From c346bec202c011a59a9a5eb8be397d6c99a5044a Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Tue, 9 Mar 2021 10:55:25 -0800 Subject: refactproes, fixed bug --- src/components/suggestedPeople/BadgesDropdown.tsx | 2 +- src/screens/suggestedPeople/SPBody.tsx | 34 +++++++++++++---------- src/types/types.ts | 2 +- 3 files changed, 22 insertions(+), 16 deletions(-) (limited to 'src') diff --git a/src/components/suggestedPeople/BadgesDropdown.tsx b/src/components/suggestedPeople/BadgesDropdown.tsx index 264292d7..3fcb7cbc 100644 --- a/src/components/suggestedPeople/BadgesDropdown.tsx +++ b/src/components/suggestedPeople/BadgesDropdown.tsx @@ -88,7 +88,7 @@ const BadgesDropdown: React.FC = ({localBadges}) => { styles.animatedBadgeView, { top: top[index], - zIndex: -1 * parseInt(badge.id, 10), + zIndex: -1 * badge.id, }, ]}> = ({ : console.log('NO BADGES FOUND'); }, []); - const displayFriendButton = () => { + const FriendButton = () => { switch (friendship.status) { case 'friends': return ; @@ -116,29 +116,35 @@ const SPBody: React.FC = ({ [suggested_people_url], ); + const NamePlate = () => { + return ( + { + navigation.push('Profile', { + userXId: user.id, + screenType, + }); + }} + style={styles.nameInfoContainer}> + {user.first_name} + @{user.username} + + ); + }; + return ( {backgroundImage} {firstItem && 'Suggested People'} - {} + - { - navigation.push('Profile', { - userXId: user.id, - screenType, - }); - }} - style={styles.nameInfoContainer}> - {user.first_name} - @{user.username} - - {user.id !== loggedInUserId && displayFriendButton()} + + {user.id !== loggedInUserId && } Date: Tue, 9 Mar 2021 11:18:08 -0800 Subject: quick fix --- src/components/suggestedPeople/BadgesDropdown.tsx | 9 +++++---- src/screens/suggestedPeople/SPBody.tsx | 4 +++- 2 files changed, 8 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/components/suggestedPeople/BadgesDropdown.tsx b/src/components/suggestedPeople/BadgesDropdown.tsx index 3fcb7cbc..007ea3f5 100644 --- a/src/components/suggestedPeople/BadgesDropdown.tsx +++ b/src/components/suggestedPeople/BadgesDropdown.tsx @@ -12,9 +12,10 @@ interface BadgesDropdownProps { badge: UniversityBadge; img: string; }[]; + badges: UniversityBadge[]; } -const BadgesDropdown: React.FC = ({localBadges}) => { +const BadgesDropdown: React.FC = ({localBadges, badges}) => { // Used to toggle between dropdown being displayed and not const [displayBadges, setDisplayBadges] = useState(false); @@ -27,7 +28,7 @@ const BadgesDropdown: React.FC = ({localBadges}) => { // Initialize position of badges to 0 const defineBadgePositions = () => { let localTop: Animated.Value[] = []; - localBadges.forEach(() => { + badges.forEach(() => { localTop.push(new Animated.Value(0)); }); setTop(localTop); @@ -37,7 +38,7 @@ const BadgesDropdown: React.FC = ({localBadges}) => { // Displays badges dropdown by updating top [state] for every badge const animate = () => { - for (let i = 0; i < localBadges.length; i++) { + for (let i = 0; i < badges?.length; i++) { if (top) { Animated.timing(top[i], { toValue: i * 40 + 50, @@ -50,7 +51,7 @@ const BadgesDropdown: React.FC = ({localBadges}) => { // Draws back displayed badges by setting top [state] to 0 for every badge const animateBack = () => { - for (let i = 0; i < localBadges.length; i++) { + for (let i = 0; i < badges?.length; i++) { if (top) { Animated.timing(top[i], { toValue: 0, diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx index 89eaaa25..6572dc55 100644 --- a/src/screens/suggestedPeople/SPBody.tsx +++ b/src/screens/suggestedPeople/SPBody.tsx @@ -138,7 +138,9 @@ const SPBody: React.FC = ({ {firstItem && 'Suggested People'} - + {localBadges && ( + + )} -- cgit v1.2.3-70-g09d2 From 1d916e24ccf3da7303bd0e39cd75086a6ad2434a Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Tue, 9 Mar 2021 11:38:26 -0800 Subject: faster speed --- src/components/suggestedPeople/BadgesDropdown.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/components/suggestedPeople/BadgesDropdown.tsx b/src/components/suggestedPeople/BadgesDropdown.tsx index 007ea3f5..3c1a917d 100644 --- a/src/components/suggestedPeople/BadgesDropdown.tsx +++ b/src/components/suggestedPeople/BadgesDropdown.tsx @@ -42,7 +42,7 @@ const BadgesDropdown: React.FC = ({localBadges, badges}) => if (top) { Animated.timing(top[i], { toValue: i * 40 + 50, - duration: 500, + duration: 150, easing: Easing.linear, }).start(); } @@ -55,7 +55,7 @@ const BadgesDropdown: React.FC = ({localBadges, badges}) => if (top) { Animated.timing(top[i], { toValue: 0, - duration: 500, + duration: 150, easing: Easing.linear, }).start(); } -- cgit v1.2.3-70-g09d2 From 283778641986adc433200597d757f2b20b8d4225 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Tue, 9 Mar 2021 11:45:12 -0800 Subject: changed opacity on click to 1 --- src/components/suggestedPeople/BadgesDropdown.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/components/suggestedPeople/BadgesDropdown.tsx b/src/components/suggestedPeople/BadgesDropdown.tsx index 3c1a917d..1e7f2e71 100644 --- a/src/components/suggestedPeople/BadgesDropdown.tsx +++ b/src/components/suggestedPeople/BadgesDropdown.tsx @@ -66,7 +66,7 @@ const BadgesDropdown: React.FC = ({localBadges, badges}) => { setDisplayBadges(!displayBadges); if (displayBadges) { -- cgit v1.2.3-70-g09d2 From 55a1a9615720c1709d05b40e08c4f7fd4773fee3 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Tue, 9 Mar 2021 12:23:44 -0800 Subject: Added new component for clicked --- src/assets/universities/brown-clicked.png | Bin 0 -> 10943 bytes .../suggestedPeople/UniversityIconClicked.tsx | 61 +++++++++++++++++++++ 2 files changed, 61 insertions(+) create mode 100644 src/assets/universities/brown-clicked.png create mode 100644 src/components/suggestedPeople/UniversityIconClicked.tsx (limited to 'src') diff --git a/src/assets/universities/brown-clicked.png b/src/assets/universities/brown-clicked.png new file mode 100644 index 00000000..8f72f244 Binary files /dev/null and b/src/assets/universities/brown-clicked.png differ diff --git a/src/components/suggestedPeople/UniversityIconClicked.tsx b/src/components/suggestedPeople/UniversityIconClicked.tsx new file mode 100644 index 00000000..bde4e17f --- /dev/null +++ b/src/components/suggestedPeople/UniversityIconClicked.tsx @@ -0,0 +1,61 @@ +import React from 'react'; +import {ImageStyle, StyleProp, StyleSheet, ViewProps} from 'react-native'; +import {Image, Text, View} from 'react-native-animatable'; +import {getUniversityClass, normalize} from '../../utils'; + +export interface UniversityIconClickedProps extends ViewProps { + university: string; + university_class?: number; + imageStyle?: StyleProp; +} + +/** + * Component to display university icon and class + */ +const UniversityIconClicked: React.FC = ({ + style, + university, + university_class, + imageStyle, +}) => { + var universityIcon; + switch (university) { + case 'brown': + universityIcon = require('../../assets/universities/brown-clicked.png'); + break; + default: + universityIcon = require('../../assets/universities/brown-clicked.png'); + break; + } + + return ( + + + {university_class && ( + + {getUniversityClass(university_class)} + + )} + + ); +}; + +const styles = StyleSheet.create({ + container: { + flexDirection: 'column', + flexWrap: 'wrap', + justifyContent: 'center', + alignItems: 'center', + height: '100%', + }, + univClass: { + fontSize: normalize(14), + fontWeight: '500', + }, + icon: { + width: normalize(17), + height: normalize(19), + }, +}); + +export default UniversityIconClicked; -- cgit v1.2.3-70-g09d2 From c783f6e9a2d5aa6ee4783d7af76d8a7b926b0c79 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Tue, 9 Mar 2021 12:25:41 -0800 Subject: conditionally displaying brown icon --- src/components/suggestedPeople/BadgesDropdown.tsx | 25 ++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/components/suggestedPeople/BadgesDropdown.tsx b/src/components/suggestedPeople/BadgesDropdown.tsx index 1e7f2e71..583cdcf1 100644 --- a/src/components/suggestedPeople/BadgesDropdown.tsx +++ b/src/components/suggestedPeople/BadgesDropdown.tsx @@ -7,6 +7,7 @@ import Animated, {Easing} from 'react-native-reanimated'; import {UniversityBadge} from 'src/types'; import {UniversityIcon} from '..'; import {normalize, SCREEN_WIDTH} from '../../utils'; +import UniversityIconClicked from './UniversityIconClicked'; interface BadgesDropdownProps { localBadges: { badge: UniversityBadge; @@ -15,8 +16,10 @@ interface BadgesDropdownProps { badges: UniversityBadge[]; } -const BadgesDropdown: React.FC = ({localBadges, badges}) => { - +const BadgesDropdown: React.FC = ({ + localBadges, + badges, +}) => { // Used to toggle between dropdown being displayed and not const [displayBadges, setDisplayBadges] = useState(false); @@ -75,11 +78,19 @@ const BadgesDropdown: React.FC = ({localBadges, badges}) => animateBack(); } }}> - + {displayBadges ? ( + + ) : ( + + )} {localBadges && localBadges.map(({badge, img}, index) => ( -- cgit v1.2.3-70-g09d2 From d66c0fa6d0b75918e4c67a61754c4e2f16bfaf3e Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Tue, 9 Mar 2021 13:40:53 -0800 Subject: Fixed badge brown issue --- src/components/suggestedPeople/BadgesDropdown.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/components/suggestedPeople/BadgesDropdown.tsx b/src/components/suggestedPeople/BadgesDropdown.tsx index 583cdcf1..70c70e47 100644 --- a/src/components/suggestedPeople/BadgesDropdown.tsx +++ b/src/components/suggestedPeople/BadgesDropdown.tsx @@ -71,8 +71,9 @@ const BadgesDropdown: React.FC = ({ { - setDisplayBadges(!displayBadges); - if (displayBadges) { + const updatedBadges = !displayBadges + setDisplayBadges(updatedBadges); + if (updatedBadges) { animate(); } else { animateBack(); -- cgit v1.2.3-70-g09d2