From 2e2e56595b8b085b3cbc84d9125969ae22092443 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh 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') 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