aboutsummaryrefslogtreecommitdiff
path: root/src/screens
diff options
context:
space:
mode:
Diffstat (limited to 'src/screens')
-rw-r--r--src/screens/search/RequestContactsAccess.tsx119
-rw-r--r--src/screens/suggestedPeople/SPBody.tsx151
-rw-r--r--src/screens/suggestedPeople/SuggestedPeopleScreen.tsx28
3 files changed, 103 insertions, 195 deletions
diff --git a/src/screens/search/RequestContactsAccess.tsx b/src/screens/search/RequestContactsAccess.tsx
index 08548c69..f5d2de1a 100644
--- a/src/screens/search/RequestContactsAccess.tsx
+++ b/src/screens/search/RequestContactsAccess.tsx
@@ -1,5 +1,6 @@
import * as React from 'react';
import {
+ Modal,
StyleSheet,
View,
Text,
@@ -19,7 +20,7 @@ import AsyncStorage from '@react-native-community/async-storage';
const RequestContactsAccess: React.FC = () => {
const navigation = useNavigation();
-
+ const [isVisible, setVisible] = React.useState(true);
const handleAllowAccess = async () => {
try {
let permission = await checkPermission();
@@ -27,81 +28,91 @@ const RequestContactsAccess: React.FC = () => {
await requestPermission();
}
await AsyncStorage.setItem('respondedToAccessContacts', 'true');
- navigation.navigate('Search');
+ navigation.navigate('SuggestedPeople');
} catch (err) {
console.log(
'Unable to check and request permission to get access to user contacts',
);
}
+ setVisible(false);
};
const handleDontAllowAccess = async () => {
try {
await AsyncStorage.setItem('respondedToAccessContacts', 'true');
- navigation.navigate('Search');
+ navigation.navigate('SuggestedPeople');
} catch (err) {
console.log(
'Unable to check and request permission to get access to user contacts',
);
}
+ setVisible(false);
};
return (
- <LinearGradient
- colors={BACKGROUND_GRADIENT_MAP[BackgroundGradientType.Light]}
- useAngle={true}
- angle={154.72}
- angleCenter={{x: 0.5, y: 0.5}}
- style={{flex: 1}}>
- <SafeAreaView>
- <View style={{height: SCREEN_HEIGHT}}>
- <Animated.ScrollView
- showsHorizontalScrollIndicator={false}
- showsVerticalScrollIndicator={false}
- scrollEnabled={isIPhoneX() ? false : true}>
- <StatusBar barStyle="light-content" translucent={false} />
- <View style={styles.mainContainer}>
- <Image
- source={require('../../assets/icons/findFriends/find-friend-icon.png')}
- style={styles.image}
- />
- <Text style={styles.title}>FIND FRIENDS!</Text>
- <Text style={styles.subtext}>
- This is so you can find your friends already on here! Isn’t a
- party better when your favorite people are there?
- </Text>
- <View style={styles.bulletPointView}>
- <Image
- source={require('../../assets/icons/findFriends/lock-icon.png')}
- style={styles.icon}
- />
- <Text style={styles.bulletPointText}>Always Stays Private</Text>
- </View>
- <View style={styles.bulletPointView}>
+ <Modal
+ animationType="slide"
+ transparent={true}
+ visible={isVisible}
+ onRequestClose={() => {}}>
+ <LinearGradient
+ colors={BACKGROUND_GRADIENT_MAP[BackgroundGradientType.Light]}
+ useAngle={true}
+ angle={154.72}
+ angleCenter={{x: 0.5, y: 0.5}}
+ style={{flex: 1}}>
+ <SafeAreaView>
+ <View style={{height: SCREEN_HEIGHT}}>
+ <Animated.ScrollView
+ showsHorizontalScrollIndicator={false}
+ showsVerticalScrollIndicator={false}
+ scrollEnabled={isIPhoneX() ? false : true}>
+ <StatusBar barStyle="light-content" translucent={false} />
+ <View style={styles.mainContainer}>
<Image
- source={require('../../assets/icons/findFriends/phone-cross-icon.png')}
- style={styles.icon}
+ source={require('../../assets/icons/findFriends/find-friend-icon.png')}
+ style={styles.image}
/>
- <Text style={styles.bulletPointText}>
- We wouldn’t dare send any messages
+ <Text style={styles.title}>FIND FRIENDS!</Text>
+ <Text style={styles.subtext}>
+ This is so you can find your friends already on here! Isn’t a
+ party better when your favorite people are there?
</Text>
+ <View style={styles.bulletPointView}>
+ <Image
+ source={require('../../assets/icons/findFriends/lock-icon.png')}
+ style={styles.icon}
+ />
+ <Text style={styles.bulletPointText}>
+ Always Stays Private
+ </Text>
+ </View>
+ <View style={styles.bulletPointView}>
+ <Image
+ source={require('../../assets/icons/findFriends/phone-cross-icon.png')}
+ style={styles.icon}
+ />
+ <Text style={styles.bulletPointText}>
+ We wouldn’t dare send any messages
+ </Text>
+ </View>
+ <TouchableOpacity
+ onPress={handleAllowAccess}
+ style={styles.allowButton}>
+ <Text style={styles.allowButtonLabel}>Allow Contacts</Text>
+ </TouchableOpacity>
+ <TouchableOpacity
+ accessibilityLabel="Don't allow button"
+ style={styles.dontAllowButton}
+ onPress={handleDontAllowAccess}>
+ <Text style={styles.dontAllowButtonText}>Don’t Allow</Text>
+ </TouchableOpacity>
</View>
- <TouchableOpacity
- onPress={handleAllowAccess}
- style={styles.allowButton}>
- <Text style={styles.allowButtonLabel}>Allow Contacts</Text>
- </TouchableOpacity>
- <TouchableOpacity
- accessibilityLabel="Don't allow button"
- style={styles.dontAllowButton}
- onPress={handleDontAllowAccess}>
- <Text style={styles.dontAllowButtonText}>Don’t Allow</Text>
- </TouchableOpacity>
- </View>
- </Animated.ScrollView>
- </View>
- </SafeAreaView>
- </LinearGradient>
+ </Animated.ScrollView>
+ </View>
+ </SafeAreaView>
+ </LinearGradient>
+ </Modal>
);
};
diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx
index 8c6a3238..6572dc55 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<void>;
onCancelRequest: (user: ProfilePreviewType) => void;
loggedInUserId: string;
@@ -35,14 +33,20 @@ const SPBody: React.FC<SPBodyProps> = ({
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) => {
@@ -62,7 +66,7 @@ const SPBody: React.FC<SPBodyProps> = ({
: console.log('NO BADGES FOUND');
}, []);
- const displayButton = () => {
+ const FriendButton = () => {
switch (friendship.status) {
case 'friends':
return <Fragment />;
@@ -111,7 +115,22 @@ const SPBody: React.FC<SPBodyProps> = ({
),
[suggested_people_url],
);
- const navigation = useNavigation();
+
+ const NamePlate = () => {
+ return (
+ <TouchableOpacity
+ onPress={() => {
+ navigation.push('Profile', {
+ userXId: user.id,
+ screenType,
+ });
+ }}
+ style={styles.nameInfoContainer}>
+ <Text style={styles.firstName}>{user.first_name}</Text>
+ <Text style={styles.username}>@{user.username}</Text>
+ </TouchableOpacity>
+ );
+ };
return (
<View>
@@ -119,62 +138,15 @@ const SPBody: React.FC<SPBodyProps> = ({
<View style={styles.mainContainer}>
<View style={styles.topContainer}>
<Text style={styles.title}>{firstItem && 'Suggested People'}</Text>
- <View
- style={[styles.badgesContainer, {height: 45 + 42 * badges.length}]}>
- <TouchableOpacity
- onPress={() => {
- console.log('badges: ', badges);
- }}>
- <UniversityIcon
- university="brown"
- style={styles.universityIconContainer}
- imageStyle={{width: normalize(31), height: normalize(38)}}
- />
- </TouchableOpacity>
- {localBadges &&
- localBadges.map(({badge, img}) => (
- <TouchableOpacity
- key={badge.id}
- style={styles.badgeButton}
- onPress={() => {
- navigation.navigate('MutualBadgeHolders', {
- badge_id: badge.id,
- badge_title: badge.name,
- });
- }}>
- <LinearGradient
- colors={['#4E3629', '#EC2027']}
- useAngle={true}
- angle={154.72}
- angleCenter={{x: 0.5, y: 0.5}}
- style={styles.badgeBackground}>
- <Image
- source={img}
- style={{
- width: SCREEN_WIDTH * 0.04,
- height: SCREEN_WIDTH * 0.04,
- }}
- />
- </LinearGradient>
- </TouchableOpacity>
- ))}
- </View>
+ {localBadges && (
+ <BadgesDropdown localBadges={localBadges} badges={badges} />
+ )}
</View>
<View style={styles.body}>
<View style={styles.marginManager}>
<View style={styles.addUserContainer}>
- <TouchableOpacity
- onPress={() => {
- navigation.push('Profile', {
- userXId: user.id,
- screenType,
- });
- }}
- style={styles.nameInfoContainer}>
- <Text style={styles.firstName}>{user.first_name}</Text>
- <Text style={styles.username}>@{user.username}</Text>
- </TouchableOpacity>
- {user.id !== loggedInUserId && displayButton()}
+ <NamePlate />
+ {user.id !== loggedInUserId && <FriendButton />}
</View>
</View>
<TaggsBar
@@ -209,10 +181,6 @@ const styles = StyleSheet.create({
flexDirection: 'column',
justifyContent: 'space-between',
},
- universityIconContainer: {
- width: normalize(31),
- height: normalize(38),
- },
marginManager: {marginHorizontal: '5%'},
image: {
position: 'absolute',
@@ -302,16 +270,7 @@ const styles = StyleSheet.create({
shadowOffset: {width: 2, height: 2},
shadowOpacity: 0.5,
},
- requestedButtonTitle: {
- backgroundColor: 'transparent',
- fontSize: normalize(15),
- lineHeight: normalize(18),
- fontWeight: 'bold',
- textAlign: 'center',
- letterSpacing: normalize(1),
- },
body: {},
-
button: {
justifyContent: 'center',
alignItems: 'center',
@@ -323,48 +282,6 @@ const styles = StyleSheet.create({
marginRight: '2%',
marginLeft: '1%',
},
- transparentBG: {
- backgroundColor: 'transparent',
- },
- lightBlueBG: {
- backgroundColor: '#fff',
- },
- label: {
- fontSize: normalize(15),
- fontWeight: '700',
- letterSpacing: 1,
- },
- blueLabel: {
- color: '#fff',
- },
- whiteLabel: {
- color: 'white',
- },
- 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,
- },
});
export default SPBody;
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 (
<SPBody
- index={item.index}
+ itemIndex={item.index}
item={item.item}
onAddFriend={onAddFriend}
onCancelRequest={onCancelRequest}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-14 01:19:50 +0000