From 7d883c5946214c91b922b2c5eb310203dec02025 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 5 Mar 2021 08:37:03 -0800 Subject: done; Pending: icons --- src/components/search/ExploreSection.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components') diff --git a/src/components/search/ExploreSection.tsx b/src/components/search/ExploreSection.tsx index 025c8c3c..53073a9e 100644 --- a/src/components/search/ExploreSection.tsx +++ b/src/components/search/ExploreSection.tsx @@ -14,7 +14,7 @@ interface ExploreSectionProps { users: ProfilePreviewType[]; } const ExploreSection: React.FC = ({title, users}) => { - return users.length !== 0 ? ( + return users?.length !== 0 ? ( {title} Date: Fri, 5 Mar 2021 11:50:55 -0800 Subject: styling, passing in title too --- src/assets/icons/badges/football.png | Bin 0 -> 5374 bytes src/components/search/ExploreSection.tsx | 8 +- src/routes/main/MainStackNavigator.tsx | 1 + src/screens/suggestedPeople/MutualBadgeHolders.tsx | 101 ++++++++++++++------- src/screens/suggestedPeople/SPBody.tsx | 5 +- src/services/SuggestedPeopleService.ts | 1 - 6 files changed, 80 insertions(+), 36 deletions(-) create mode 100644 src/assets/icons/badges/football.png (limited to 'src/components') diff --git a/src/assets/icons/badges/football.png b/src/assets/icons/badges/football.png new file mode 100644 index 00000000..2e8214b7 Binary files /dev/null and b/src/assets/icons/badges/football.png differ diff --git a/src/components/search/ExploreSection.tsx b/src/components/search/ExploreSection.tsx index 53073a9e..784e089c 100644 --- a/src/components/search/ExploreSection.tsx +++ b/src/components/search/ExploreSection.tsx @@ -21,7 +21,13 @@ const ExploreSection: React.FC = ({title, users}) => { data={users} ListHeaderComponent={} renderItem={({item: user}: {item: ProfilePreviewType}) => ( - + )} showsHorizontalScrollIndicator={false} horizontal diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 9b559800..5cbe55d6 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -74,6 +74,7 @@ export type MainStackParams = { }; MutualBadgeHolders: { badge_id: string; + badge_title: string; }; }; diff --git a/src/screens/suggestedPeople/MutualBadgeHolders.tsx b/src/screens/suggestedPeople/MutualBadgeHolders.tsx index 2e2c452a..9742d72c 100644 --- a/src/screens/suggestedPeople/MutualBadgeHolders.tsx +++ b/src/screens/suggestedPeople/MutualBadgeHolders.tsx @@ -4,12 +4,12 @@ import React, {useEffect, useState} from 'react'; import {getMutualBadgeHolders} from '../../services'; import {ProfilePreviewType} from '../../types'; import {MainStackParams} from '../../routes/main/MainStackNavigator'; -import {Text, View} from 'react-native-animatable'; +import {Image, Text, View} from 'react-native-animatable'; import {SafeAreaView} from 'react-native-safe-area-context'; import {SCREEN_HEIGHT, SCREEN_WIDTH, isIPhoneX, normalize} from '../../utils'; import LinearGradient from 'react-native-linear-gradient'; import CloseIcon from '../../assets/ionicons/close-outline.svg'; -import {FlatList, ScrollView} from 'react-native-gesture-handler'; +import {FlatList} from 'react-native-gesture-handler'; import {StyleSheet, TouchableOpacity} from 'react-native'; import ExploreSectionUser from '../../components/search/ExploreSectionUser'; @@ -32,12 +32,11 @@ const MutualBadgeHolders: React.FC = ({ route, navigation, }) => { - const {badge_id} = route.params; + const {badge_id, badge_title} = route.params; const [users, setUsers] = useState([]); useEffect(() => { const getUsers = async (badge_id: string) => { - console.log('useEffect called to populate mutual badge holders users '); let localUsers: | ProfilePreviewType[] | undefined = await getMutualBadgeHolders(badge_id); @@ -57,21 +56,25 @@ const MutualBadgeHolders: React.FC = ({ }}> - - {/* TODO: Insert image link according to badge_id passed. - * Awaiting final images from product - */} + + + {/* TODO: Insert image link according to badge_id passed. + * Awaiting final images from product + */} + + + - Brown Football Badge - - See who else has the badge: Brown University Football! - + {badge_title} + See who else has this badge! = ({ ); }} @@ -109,9 +111,9 @@ const styles = StyleSheet.create({ mainContentContainer: { backgroundColor: '#fff', width: SCREEN_WIDTH * 0.93, - height: SCREEN_HEIGHT * 0.6, + height: SCREEN_HEIGHT * 0.64, alignSelf: 'center', - bottom: '10%', + bottom: '2.5%', borderColor: '#fff', borderWidth: 1, borderRadius: 5, @@ -124,49 +126,82 @@ const styles = StyleSheet.create({ top: '2%', }, badgeBackground: { - width: 80, - height: 80, + position: 'absolute', + width: '100%', + height: '100%', borderRadius: 50, borderColor: 'transparent', borderWidth: 1, alignSelf: 'center', - top: -40, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + }, + iconView: { + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + width: SCREEN_WIDTH * 0.2, + height: SCREEN_WIDTH * 0.2, + alignSelf: 'center', + top: -SCREEN_WIDTH * 0.1, }, headerContainer: { - top: -20, + top: '-5%', width: '100%', - height: 50, + height: '9%', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-evenly', }, heading: { - fontSize: 17, + fontSize: normalize(17), fontWeight: '600', - lineHeight: 20, + lineHeight: normalize(20), color: '#000', }, subHeading: { - fontSize: 11, + fontSize: normalize(11), fontWeight: '600', - lineHeight: 15, + lineHeight: normalize(15), color: '#828282', }, columnWrapperStyle: { width: SCREEN_WIDTH * 0.85, flexDirection: 'row', + flexGrow: 0, alignSelf: 'center', justifyContent: 'space-between', + marginBottom: '8%', }, flatlistContainer: { - width: SCREEN_WIDTH * 0.93, + width: SCREEN_WIDTH * 0.85, alignSelf: 'center', flexDirection: 'column', + top: '-1%', }, flatlistContentContainer: { - width: SCREEN_WIDTH * 0.93, + width: SCREEN_WIDTH * 0.85, paddingBottom: 20, alignSelf: 'center', }, }); + +const exploreUserStyle = StyleSheet.create({ + container: {}, + name: { + fontWeight: '600', + flexWrap: 'wrap', + fontSize: normalize(12), + lineHeight: normalize(15), + color: '#000', + textAlign: 'center', + }, + username: { + fontWeight: '500', + fontSize: normalize(10), + lineHeight: normalize(15), + color: '#000', + }, +}); export default MutualBadgeHolders; diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx index 972484ab..16b5ae9b 100644 --- a/src/screens/suggestedPeople/SPBody.tsx +++ b/src/screens/suggestedPeople/SPBody.tsx @@ -98,7 +98,10 @@ const SPBody: React.FC = ({ borderColor: 'transparent', }} onPress={() => - navigation.navigate('MutualBadgeHolders', {badge_id: 40}) + navigation.navigate('MutualBadgeHolders', { + badge_id: 40, + badge_title: 'Brown University Football', + }) }> {/* */} diff --git a/src/services/SuggestedPeopleService.ts b/src/services/SuggestedPeopleService.ts index e67a897d..cbbc762a 100644 --- a/src/services/SuggestedPeopleService.ts +++ b/src/services/SuggestedPeopleService.ts @@ -112,7 +112,6 @@ export const getMutualBadgeHolders = async (badgeId: string) => { console.log('response: ', response); if (response.status === 200) { const data: ProfilePreviewType[] = await response.json(); - console.log('users::: ', data); return data; } else { return undefined; -- cgit v1.2.3-70-g09d2 From 6dd1ab792366f9ef5b7495723297b753cbd958c8 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 5 Mar 2021 13:23:01 -0800 Subject: Added university icon to suggested people --- src/components/profile/UniversityIcon.tsx | 16 +++++++---- src/screens/suggestedPeople/SPBody.tsx | 48 ++++++++++++++++++------------- 2 files changed, 38 insertions(+), 26 deletions(-) (limited to 'src/components') diff --git a/src/components/profile/UniversityIcon.tsx b/src/components/profile/UniversityIcon.tsx index 95aef8b9..48cfe3dc 100644 --- a/src/components/profile/UniversityIcon.tsx +++ b/src/components/profile/UniversityIcon.tsx @@ -1,11 +1,12 @@ import React from 'react'; -import {StyleSheet, ViewProps} from 'react-native'; +import {ImageStyle, StyleProp, StyleSheet, ViewProps} from 'react-native'; import {Image, Text, View} from 'react-native-animatable'; import {getUniversityClass, normalize} from '../../utils'; export interface UniversityIconProps extends ViewProps { university: string; - university_class: number; + university_class?: number; + imageStyle?: StyleProp; } /** @@ -15,6 +16,7 @@ const UniversityIcon: React.FC = ({ style, university, university_class, + imageStyle, }) => { var universityIcon; switch (university) { @@ -28,10 +30,12 @@ const UniversityIcon: React.FC = ({ return ( - - - {getUniversityClass(university_class)} - + + {university_class && ( + + {getUniversityClass(university_class)} + + )} ); }; diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx index 16b5ae9b..21e86f14 100644 --- a/src/screens/suggestedPeople/SPBody.tsx +++ b/src/screens/suggestedPeople/SPBody.tsx @@ -12,8 +12,8 @@ import { ScreenType, SuggestedPeopleDataType, } from '../../types'; -import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; -import UniversityIcon from '../../components/profile'; +import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; +import UniversityIcon from '../../components/profile/UniversityIcon'; interface SPBodyProps { item: SuggestedPeopleDataType; index: number; @@ -87,24 +87,22 @@ const SPBody: React.FC = ({ {backgroundImage} - {firstItem && 'Suggested People'} - - navigation.navigate('MutualBadgeHolders', { - badge_id: 40, - badge_title: 'Brown University Football', - }) - }> - {/* */} - + + {firstItem && 'Suggested People'} + + navigation.navigate('MutualBadgeHolders', { + badge_id: 40, + badge_title: 'Brown University Football', + }) + }> + + + @@ -149,6 +147,16 @@ const styles = StyleSheet.create({ justifyContent: 'space-between', alignSelf: 'center', }, + topContainer: { + height: isIPhoneX() ? SCREEN_HEIGHT * 0.11 : SCREEN_HEIGHT * 0.13, + flexDirection: 'column', + justifyContent: 'space-between', + }, + universityIconContainer: { + width: normalize(31), + height: normalize(38), + left: '5%', + }, marginManager: {marginHorizontal: '5%'}, image: { position: 'absolute', -- cgit v1.2.3-70-g09d2 From 136e3315242dc24d62f3dce24b28e76e06e85e68 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 5 Mar 2021 13:23:41 -0800 Subject: styling explore section user --- src/components/search/ExploreSectionUser.tsx | 25 +++++++++++++++++-------- 1 file changed, 17 insertions(+), 8 deletions(-) (limited to 'src/components') diff --git a/src/components/search/ExploreSectionUser.tsx b/src/components/search/ExploreSectionUser.tsx index b0cfe5c6..6be8282b 100644 --- a/src/components/search/ExploreSectionUser.tsx +++ b/src/components/search/ExploreSectionUser.tsx @@ -1,7 +1,9 @@ import {useNavigation} from '@react-navigation/native'; import React, {useEffect, useState} from 'react'; +import {TextStyle, ViewStyle} from 'react-native'; import { Image, + StyleProp, StyleSheet, Text, TouchableOpacity, @@ -21,10 +23,11 @@ import {fetchUserX, normalize, userXInStore} from '../../utils'; interface ExploreSectionUserProps extends ViewProps { user: ProfilePreviewType; + externalStyles?: Record>; } const ExploreSectionUser: React.FC = ({ user, - style, + externalStyles, }) => { const {id, username, first_name, last_name} = user; const [avatar, setAvatar] = useState(null); @@ -59,7 +62,9 @@ const ExploreSectionUser: React.FC = ({ }); }; return ( - + = ({ style={styles.profile} /> - + {first_name} {last_name} - {`@${username}`} + {`@${username}`} ); }; @@ -89,7 +96,7 @@ const styles = StyleSheet.create({ width: 100, }, gradient: { - height: 60, + height: 62, aspectRatio: 1, borderRadius: 40, justifyContent: 'center', @@ -104,13 +111,15 @@ const styles = StyleSheet.create({ name: { fontWeight: '600', flexWrap: 'wrap', - fontSize: normalize(16), + fontSize: normalize(14), + lineHeight: normalize(15), color: '#fff', textAlign: 'center', }, username: { - fontWeight: '400', - fontSize: normalize(14), + fontWeight: '500', + fontSize: normalize(11), + lineHeight: normalize(15), color: '#fff', }, }); -- cgit v1.2.3-70-g09d2