aboutsummaryrefslogtreecommitdiff
path: root/src/screens
diff options
context:
space:
mode:
Diffstat (limited to 'src/screens')
-rw-r--r--src/screens/moments/TagFriendsScreen.tsx33
-rw-r--r--src/screens/moments/TagSelectionScreen.tsx20
-rw-r--r--src/screens/profile/CaptionScreen.tsx27
-rw-r--r--src/screens/suggestedPeople/SPBody.tsx88
4 files changed, 83 insertions, 85 deletions
diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index b2a8586a..d960f3b9 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -19,7 +19,7 @@ import {
} from '../../components';
import {TagFriendsFooter} from '../../components/moments';
import {TAGG_LIGHT_BLUE_2} from '../../constants';
-import {ProfilePreviewType} from '../../types';
+import {MomentTagType} from '../../types';
import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
type TagFriendsScreenRouteProps = RouteProp<
@@ -30,19 +30,17 @@ interface TagFriendsScreenProps {
route: TagFriendsScreenRouteProps;
}
const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
- const {image, selectedUsers} = route.params;
+ const {image, selectedTags} = route.params;
const navigation = useNavigation();
const imageRef = useRef(null);
- const [taggedUsers, setTaggedUsers] = useState<ProfilePreviewType[]>([]);
+ const [tags, setTags] = useState<MomentTagType[]>([]);
/*
* Update list of tagged users from route params
*/
useEffect(() => {
- if (selectedUsers !== undefined) {
- setTaggedUsers(selectedUsers);
- }
- }, [selectedUsers]);
+ setTags(selectedTags ? selectedTags : []);
+ }, [selectedTags]);
/*
* Navigate back to Tag Users Screen, send selected users
@@ -50,7 +48,7 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
const handleDone = () => {
navigation.navigate('CaptionScreen', {
...route.params,
- selectedUsers: taggedUsers,
+ selectedTags: tags,
});
};
@@ -79,7 +77,7 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
title={'Tap on photo to Tag friends!'}
/>
<TouchableWithoutFeedback
- disabled={taggedUsers.length > 0}
+ disabled={tags.length > 0}
onPress={() =>
navigation.navigate('TagSelectionScreen', {
selectedUsers: [],
@@ -92,26 +90,19 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
resizeMode={'cover'}
/>
</TouchableWithoutFeedback>
- {taggedUsers.length !== 0 && (
+ {tags.length !== 0 && (
<MomentTags
+ tags={tags}
+ setTags={setTags}
editing={true}
- tags={taggedUsers.map((user) => ({
- id: '',
- x: 0,
- y: 0,
- user,
- }))}
imageRef={imageRef}
deleteFromList={(user) =>
- setTaggedUsers(taggedUsers.filter((u) => u.id !== user.id))
+ setTags(tags.filter((tag) => tag.user.id !== user.id))
}
/>
)}
<View style={styles.footerContainer}>
- <TagFriendsFooter
- taggedUsers={taggedUsers}
- setTaggedUsers={setTaggedUsers}
- />
+ <TagFriendsFooter tags={tags} setTags={setTags} />
</View>
</View>
</KeyboardAvoidingView>
diff --git a/src/screens/moments/TagSelectionScreen.tsx b/src/screens/moments/TagSelectionScreen.tsx
index a698a07b..3177b638 100644
--- a/src/screens/moments/TagSelectionScreen.tsx
+++ b/src/screens/moments/TagSelectionScreen.tsx
@@ -9,7 +9,7 @@ import {SearchBar, TaggUserSelectionCell} from '../../components';
import {SEARCH_ENDPOINT_MESSAGES} from '../../constants';
import {MainStackParams} from '../../routes';
import {loadSearchResults} from '../../services';
-import {ProfilePreviewType} from '../../types';
+import {MomentTagType, ProfilePreviewType} from '../../types';
import {
isIPhoneX,
loadTaggUserSuggestions,
@@ -30,9 +30,7 @@ interface TagSelectionScreenProps {
const TagSelectionScreen: React.FC<TagSelectionScreenProps> = ({route}) => {
const navigation = useNavigation();
const [users, setUsers] = useState<ProfilePreviewType[]>([]);
- const [selectedUsers, setSelectedUsers] = useState<ProfilePreviewType[]>(
- route.params.selectedUsers,
- );
+ const [tags, setTags] = useState<MomentTagType[]>(route.params.selectedTags);
const [searching, setSearching] = useState(false);
const [query, setQuery] = useState<string>('');
const [label, setLabel] = useState<string>('Recent');
@@ -48,7 +46,7 @@ const TagSelectionScreen: React.FC<TagSelectionScreenProps> = ({route}) => {
onPress={() => {
navigation.navigate('TagFriendsScreen', {
...route.params,
- selectedUsers: selectedUsers,
+ selectedTags: tags,
});
}}>
<BackIcon
@@ -67,12 +65,12 @@ const TagSelectionScreen: React.FC<TagSelectionScreenProps> = ({route}) => {
* that the loggedInUser might want to select
*/
const loadUsers = async () => {
- const data: ProfilePreviewType[] = await loadTaggUserSuggestions();
+ const data = await loadTaggUserSuggestions();
const filteredData: ProfilePreviewType[] = data.filter((user) => {
- const index = selectedUsers.findIndex((s) => s.id === user.id);
+ const index = tags.findIndex((tag) => tag.user.id === user.id);
return index === -1;
});
- setUsers([...filteredData, ...selectedUsers]);
+ setUsers([...filteredData, ...tags.map((tag) => tag.user)]);
};
/*
@@ -83,7 +81,7 @@ const TagSelectionScreen: React.FC<TagSelectionScreenProps> = ({route}) => {
const searchResults = await loadSearchResults(
`${SEARCH_ENDPOINT_MESSAGES}?query=${query}`,
);
- setUsers(searchResults?.users);
+ setUsers(searchResults ? searchResults.users : []);
} else {
setUsers([]);
}
@@ -130,8 +128,8 @@ const TagSelectionScreen: React.FC<TagSelectionScreenProps> = ({route}) => {
<TaggUserSelectionCell
key={item.item.id}
item={item.item}
- selectedUsers={selectedUsers}
- setSelectedUsers={setSelectedUsers}
+ tags={tags}
+ setTags={setTags}
/>
)}
/>
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 43665428..8bffd82b 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -29,7 +29,7 @@ import {
updateProfileCompletionStage,
} from '../../store/actions';
import {RootState} from '../../store/rootReducer';
-import {ProfilePreviewType} from '../../types';
+import {MomentTagType} from '../../types';
import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
import {mentionPartTypes} from '../../utils/comments';
@@ -47,26 +47,26 @@ interface CaptionScreenProps {
}
const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
- const {title, image, screenType, selectedUsers} = route.params;
+ const {title, image, screenType, selectedTags} = route.params;
const {
user: {userId},
} = useSelector((state: RootState) => state.user);
const dispatch = useDispatch();
const [caption, setCaption] = useState('');
const [loading, setLoading] = useState(false);
- const [taggedUsers, setTaggedUsers] = useState<ProfilePreviewType[]>([]);
+ const [tags, setTags] = useState<MomentTagType[]>([]);
const [taggedList, setTaggedList] = useState<string>('');
useEffect(() => {
- setTaggedUsers(selectedUsers ? selectedUsers : []);
- }, [route.params]);
+ setTags(selectedTags ? selectedTags : []);
+ }, [selectedTags]);
useEffect(() => {
const getTaggedUsersListString = () => {
let listString = '';
- for (let i = 0; i < taggedUsers.length; i++) {
+ for (let i = 0; i < tags.length; i++) {
if (listString.length < 21) {
- listString = listString.concat(`@${taggedUsers[i].username} `);
+ listString = listString.concat(`@${tags[i].user.username} `);
} else {
break;
}
@@ -74,7 +74,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
setTaggedList(listString);
};
getTaggedUsersListString();
- }, [taggedUsers]);
+ }, [tags]);
const navigateToProfile = () => {
//Since the logged In User is navigating to own profile, useXId is not required
@@ -115,10 +115,11 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
}
const momentTagResponse = await postMomentTags(
momentResponse.moment_id,
- taggedUsers.map((u, index) => ({
- x: index * 50 - 150,
- y: index * 50 - 150,
- user_id: u.id,
+ tags.map((tag) => ({
+ x: Math.floor(tag.x),
+ y: Math.floor(tag.y),
+ z: Math.floor(tag.z),
+ user_id: tag.user.id,
})),
);
if (!momentTagResponse) {
@@ -173,7 +174,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
navigation.navigate('TagFriendsScreen', {
image: image,
screenType: screenType,
- selectedUsers: taggedUsers,
+ selectedTags: tags,
})
}
style={styles.tagFriendsContainer}>
diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx
index c22f8143..eb80da49 100644
--- a/src/screens/suggestedPeople/SPBody.tsx
+++ b/src/screens/suggestedPeople/SPBody.tsx
@@ -1,11 +1,11 @@
import {useNavigation} from '@react-navigation/native';
import React, {Fragment, useEffect, useMemo, useState} from 'react';
-import {StyleSheet, Text, View} from 'react-native';
+import {ImageSourcePropType, StyleSheet, Text, View} from 'react-native';
import {Image} from 'react-native-animatable';
import {TouchableOpacity} from 'react-native-gesture-handler';
import RequestedButton from '../../assets/ionicons/requested-button.svg';
-import {SPTaggsBar} from '../../components';
-import {BadgesDropdown, MutualFriends} from '../../components/suggestedPeople';
+import {UniversityIcon} from '../../components';
+import {BadgeIcon, MutualFriends} from '../../components/suggestedPeople';
import {BADGE_DATA} from '../../constants/badges';
import {
ProfilePreviewType,
@@ -28,7 +28,6 @@ const SPBody: React.FC<SPBodyProps> = ({
user,
university,
mutual_friends,
- social_links,
suggested_people_url,
friendship,
badges,
@@ -43,7 +42,7 @@ const SPBody: React.FC<SPBodyProps> = ({
const [localBadges, setLocalBadges] = useState<
{
badge: UniversityBadge;
- img: string;
+ img: ImageSourcePropType;
}[]
>([]);
const navigation = useNavigation();
@@ -116,21 +115,30 @@ const SPBody: React.FC<SPBodyProps> = ({
[suggested_people_url],
);
- const NamePlate = () => {
- return (
- <TouchableOpacity
- onPress={() => {
- navigation.navigate('Profile', {
- userXId: loggedInUserId === user.id ? undefined : user.id,
- screenType,
- });
- }}
- style={styles.nameInfoContainer}>
- <Text style={styles.firstName}>{user.first_name}</Text>
- <Text style={styles.username}>@{user.username}</Text>
- </TouchableOpacity>
- );
- };
+ const NamePlate = () => (
+ <TouchableOpacity
+ onPress={() => {
+ navigation.navigate('Profile', {
+ userXId: loggedInUserId === user.id ? undefined : user.id,
+ screenType,
+ });
+ }}>
+ <Text style={styles.firstName}>{user.first_name}</Text>
+ <Text style={styles.username}>@{user.username}</Text>
+ </TouchableOpacity>
+ );
+
+ const Badges = () => (
+ // Badges aligned left and spaced as if there are 5 items
+ <View style={styles.badgeContainer}>
+ {localBadges.map(({badge, img}, index) => (
+ <BadgeIcon key={index} badge={badge} img={img} style={styles.badge} />
+ ))}
+ {[0, 0, 0, 0, 0].splice(localBadges.length, 5).map((_, index) => (
+ <View key={index} style={styles.badge} />
+ ))}
+ </View>
+ );
return (
<View>
@@ -138,22 +146,20 @@ const SPBody: React.FC<SPBodyProps> = ({
<View style={styles.mainContainer}>
<View style={styles.topContainer}>
<Text style={styles.title}>{firstItem && 'Suggested People'}</Text>
- {localBadges && (
- <BadgesDropdown {...{university, localBadges, badges}} />
- )}
+ <UniversityIcon
+ university={university}
+ style={styles.universityIcon}
+ imageStyle={styles.universityIcon}
+ />
</View>
- <View style={styles.body}>
+ <View>
<View style={styles.marginManager}>
<View style={styles.addUserContainer}>
<NamePlate />
{user.id !== loggedInUserId && <FriendButton />}
</View>
</View>
- <SPTaggsBar
- userXId={user.id === loggedInUserId ? undefined : user.id}
- screenType={screenType}
- linkedSocials={social_links}
- />
+ {localBadges.length !== 0 && <Badges />}
<View style={styles.marginManager}>
<MutualFriends user={user} friends={mutual_friends} />
</View>
@@ -219,7 +225,6 @@ const styles = StyleSheet.create({
textShadowRadius: normalize(2),
letterSpacing: normalize(2),
},
- nameInfoContainer: {},
addButton: {
justifyContent: 'center',
alignItems: 'center',
@@ -267,17 +272,20 @@ const styles = StyleSheet.create({
shadowOffset: {width: 2, height: 2},
shadowOpacity: 0.5,
},
- body: {},
- button: {
- justifyContent: 'center',
+ universityIcon: {
+ left: '5%',
+ width: normalize(31),
+ height: normalize(38),
+ },
+ badgeContainer: {
+ flexDirection: 'row',
alignItems: 'center',
- width: SCREEN_WIDTH * 0.4,
- aspectRatio: 154 / 33,
- borderWidth: 2,
- borderColor: '#fff',
- borderRadius: 3,
- marginRight: '2%',
- marginLeft: '1%',
+ justifyContent: 'space-evenly',
+ marginBottom: 25,
+ },
+ badge: {
+ width: normalize(52),
+ height: normalize(52),
},
});
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-12-02 02:57:41 +0000