aboutsummaryrefslogtreecommitdiff
path: root/src/screens
diff options
context:
space:
mode:
Diffstat (limited to 'src/screens')
-rw-r--r--src/screens/suggestedPeople/SPBody.tsx151
-rw-r--r--src/screens/suggestedPeople/SuggestedPeopleScreen.tsx28
2 files changed, 38 insertions, 141 deletions
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}