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 +- src/constants/api.ts | 1 + src/routes/main/MainStackNavigator.tsx | 3 + src/routes/main/MainStackScreen.tsx | 8 +- src/screens/suggestedPeople/MutualBadgeHolders.tsx | 172 +++++++++++++++++++++ src/screens/suggestedPeople/SPBody.tsx | 16 +- src/services/SuggestedPeopleService.ts | 27 +++- 7 files changed, 225 insertions(+), 4 deletions(-) create mode 100644 src/screens/suggestedPeople/MutualBadgeHolders.tsx (limited to 'src') 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} (); diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index 04f73985..66cce109 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -1,9 +1,10 @@ import AsyncStorage from '@react-native-community/async-storage'; import {RouteProp} from '@react-navigation/native'; import {StackNavigationOptions} from '@react-navigation/stack'; -import React, {useEffect, useState} from 'react'; +import React, {useState} from 'react'; import {StyleSheet, Text} from 'react-native'; import {normalize} from 'react-native-elements'; +import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders'; import BackIcon from '../../assets/icons/back-arrow.svg'; import { AnimatedTutorial, @@ -225,6 +226,11 @@ const MainStackScreen: React.FC = ({route}) => { ...headerBarOptions('white', ''), }} /> + ); }; diff --git a/src/screens/suggestedPeople/MutualBadgeHolders.tsx b/src/screens/suggestedPeople/MutualBadgeHolders.tsx new file mode 100644 index 00000000..2e2c452a --- /dev/null +++ b/src/screens/suggestedPeople/MutualBadgeHolders.tsx @@ -0,0 +1,172 @@ +import {RouteProp} from '@react-navigation/native'; +import {StackNavigationProp} from '@react-navigation/stack'; +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 {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 {StyleSheet, TouchableOpacity} from 'react-native'; +import ExploreSectionUser from '../../components/search/ExploreSectionUser'; + +type MutualBadgeHoldersRouteProps = RouteProp< + MainStackParams, + 'MutualBadgeHolders' +>; + +type MutualBadgeHoldersNavigationProps = StackNavigationProp< + MainStackParams, + 'MutualBadgeHolders' +>; + +interface MutualBadgeHoldersProps { + route: MutualBadgeHoldersRouteProps; + navigation: MutualBadgeHoldersNavigationProps; +} + +const MutualBadgeHolders: React.FC = ({ + route, + navigation, +}) => { + const {badge_id} = 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); + setUsers(localUsers); + }; + getUsers(badge_id); + }, [badge_id]); + + return ( + + + + { + navigation.goBack(); + }}> + + + + {/* 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! + + + { + return ( + + ); + }} + keyExtractor={(item, index) => index.toString()} + showsVerticalScrollIndicator={false} + style={styles.flatlistContainer} + contentContainerStyle={styles.flatlistContentContainer} + /> + + + + + ); +}; + +const styles = StyleSheet.create({ + mainContainer: { + flexDirection: 'column', + justifyContent: 'flex-end', + width: SCREEN_WIDTH, + height: isIPhoneX() ? SCREEN_HEIGHT * 0.85 : SCREEN_HEIGHT * 0.88, + }, + mainContentContainer: { + backgroundColor: '#fff', + width: SCREEN_WIDTH * 0.93, + height: SCREEN_HEIGHT * 0.6, + alignSelf: 'center', + bottom: '10%', + borderColor: '#fff', + borderWidth: 1, + borderRadius: 5, + }, + closeButton: { + position: 'absolute', + height: normalize(20), + width: normalize(20), + left: '3%', + top: '2%', + }, + badgeBackground: { + width: 80, + height: 80, + borderRadius: 50, + borderColor: 'transparent', + borderWidth: 1, + alignSelf: 'center', + top: -40, + }, + headerContainer: { + top: -20, + width: '100%', + height: 50, + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'space-evenly', + }, + heading: { + fontSize: 17, + fontWeight: '600', + lineHeight: 20, + color: '#000', + }, + subHeading: { + fontSize: 11, + fontWeight: '600', + lineHeight: 15, + color: '#828282', + }, + columnWrapperStyle: { + width: SCREEN_WIDTH * 0.85, + flexDirection: 'row', + alignSelf: 'center', + justifyContent: 'space-between', + }, + flatlistContainer: { + width: SCREEN_WIDTH * 0.93, + alignSelf: 'center', + flexDirection: 'column', + }, + flatlistContentContainer: { + width: SCREEN_WIDTH * 0.93, + paddingBottom: 20, + alignSelf: 'center', + }, +}); +export default MutualBadgeHolders; diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx index aa97dc94..972484ab 100644 --- a/src/screens/suggestedPeople/SPBody.tsx +++ b/src/screens/suggestedPeople/SPBody.tsx @@ -13,7 +13,7 @@ import { SuggestedPeopleDataType, } from '../../types'; import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; - +import UniversityIcon from '../../components/profile'; interface SPBodyProps { item: SuggestedPeopleDataType; index: number; @@ -88,6 +88,20 @@ const SPBody: React.FC = ({ {backgroundImage} {firstItem && 'Suggested People'} + + navigation.navigate('MutualBadgeHolders', {badge_id: 40}) + }> + {/* */} + diff --git a/src/services/SuggestedPeopleService.ts b/src/services/SuggestedPeopleService.ts index aa1fabde..e67a897d 100644 --- a/src/services/SuggestedPeopleService.ts +++ b/src/services/SuggestedPeopleService.ts @@ -1,10 +1,11 @@ import AsyncStorage from '@react-native-community/async-storage'; import { EDIT_PROFILE_ENDPOINT, + SP_MUTUAL_BADGE_HOLDERS_ENDPOINT, SP_UPDATE_PICTURE_ENDPOINT, SP_USERS_ENDPOINT, } from '../constants'; -import {SuggestedPeopleDataType} from '../types'; +import {ProfilePreviewType, SuggestedPeopleDataType} from '../types'; export const sendSuggestedPeopleLinked = async ( userId: string, @@ -97,3 +98,27 @@ export const getSuggestedPeopleProfile = async (userId: string) => { return undefined; } }; + +export const getMutualBadgeHolders = async (badgeId: string) => { + try { + console.log('getMutualBadgeHolders called'); + const token = await AsyncStorage.getItem('token'); + const response = await fetch(SP_MUTUAL_BADGE_HOLDERS_ENDPOINT, { + method: 'GET', + headers: { + Authorization: 'Token ' + token, + }, + }); + console.log('response: ', response); + if (response.status === 200) { + const data: ProfilePreviewType[] = await response.json(); + console.log('users::: ', data); + return data; + } else { + return undefined; + } + } catch (error) { + console.log('Error retrieving SP info'); + return undefined; + } +}; -- cgit v1.2.3-70-g09d2 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 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') 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') 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 From acad36673832e7773ed01d8873c6b76d5a838b24 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 5 Mar 2021 23:32:07 -0500 Subject: Update src/services/SuggestedPeopleService.ts --- src/services/SuggestedPeopleService.ts | 1 - 1 file changed, 1 deletion(-) (limited to 'src') diff --git a/src/services/SuggestedPeopleService.ts b/src/services/SuggestedPeopleService.ts index cbbc762a..dff3259e 100644 --- a/src/services/SuggestedPeopleService.ts +++ b/src/services/SuggestedPeopleService.ts @@ -101,7 +101,6 @@ export const getSuggestedPeopleProfile = async (userId: string) => { export const getMutualBadgeHolders = async (badgeId: string) => { try { - console.log('getMutualBadgeHolders called'); const token = await AsyncStorage.getItem('token'); const response = await fetch(SP_MUTUAL_BADGE_HOLDERS_ENDPOINT, { method: 'GET', -- cgit v1.2.3-70-g09d2 From 8e4d9135f0645b56665ad23d6de5dd0afa1ef444 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 5 Mar 2021 23:32:11 -0500 Subject: Update src/services/SuggestedPeopleService.ts --- src/services/SuggestedPeopleService.ts | 1 - 1 file changed, 1 deletion(-) (limited to 'src') diff --git a/src/services/SuggestedPeopleService.ts b/src/services/SuggestedPeopleService.ts index dff3259e..c57de59d 100644 --- a/src/services/SuggestedPeopleService.ts +++ b/src/services/SuggestedPeopleService.ts @@ -108,7 +108,6 @@ export const getMutualBadgeHolders = async (badgeId: string) => { Authorization: 'Token ' + token, }, }); - console.log('response: ', response); if (response.status === 200) { const data: ProfilePreviewType[] = await response.json(); return data; -- cgit v1.2.3-70-g09d2