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