aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/moments/TagFriendsFoooter.tsx132
-rw-r--r--src/components/moments/index.ts1
-rw-r--r--src/screens/moments/TagFriendsScreen.tsx103
-rw-r--r--src/screens/moments/TagSelectionScreen.tsx1
4 files changed, 144 insertions, 93 deletions
diff --git a/src/components/moments/TagFriendsFoooter.tsx b/src/components/moments/TagFriendsFoooter.tsx
new file mode 100644
index 00000000..6b8fc62a
--- /dev/null
+++ b/src/components/moments/TagFriendsFoooter.tsx
@@ -0,0 +1,132 @@
+import {useNavigation} from '@react-navigation/native';
+import React, {Dispatch, SetStateAction} from 'react';
+import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {ProfilePreview} from '..';
+import {ProfilePreviewType, ScreenType} from '../../types';
+import {normalize} from '../../utils/layouts';
+
+interface TagFriendsFooterProps {
+ taggedUsers: ProfilePreviewType[];
+ setTaggedUsers: Dispatch<SetStateAction<ProfilePreviewType[]>>;
+}
+const TagFriendsFooter: React.FC<TagFriendsFooterProps> = ({
+ taggedUsers,
+ setTaggedUsers,
+}) => {
+ const navigation = useNavigation();
+
+ const handleRemoveTag = (user: ProfilePreviewType) => {
+ const filteredSelection = taggedUsers.filter((item) => user.id !== item.id);
+ setTaggedUsers(filteredSelection);
+ };
+
+ const TaggMoreButton = () => (
+ <TouchableOpacity
+ onPress={() =>
+ navigation.navigate('TagSelectionScreen', {
+ selectedUsers: taggedUsers,
+ })
+ }
+ style={{
+ flexDirection: 'column',
+ alignItems: 'center',
+ }}>
+ <Image
+ source={require('../../assets/icons/tagging/white-plus-icon.png')}
+ style={{width: 38, height: 38, top: -2}}
+ />
+ <Text style={styles.taggMoreLabel}>{'Tagg More'}</Text>
+ </TouchableOpacity>
+ );
+
+ const TaggedUser = (user: ProfilePreviewType) => (
+ <View style={{flexDirection: 'row-reverse'}} key={user.id}>
+ <TouchableOpacity
+ style={styles.closeIconContainer}
+ onPress={() => handleRemoveTag(user)}>
+ <Image
+ source={require('../../assets/icons/tagging/x-icon.png')}
+ style={{
+ width: 20,
+ height: 20,
+ }}
+ />
+ </TouchableOpacity>
+ <ProfilePreview
+ profilePreview={user}
+ previewType={'Tag Selection'}
+ screenType={ScreenType.Profile}
+ />
+ </View>
+ );
+
+ /*
+ * Title/Button depending on the number of users inside taggedUsers list
+ * If taggUsers is empty, title acts as a button
+ * Else, gets disabled and TaggMore button appears
+ */
+ const TagFriendsTitle = () => (
+ <TouchableOpacity
+ style={{
+ flexDirection: 'row',
+ }}
+ disabled={taggedUsers.length !== 0}
+ onPress={() =>
+ navigation.navigate('TagSelectionScreen', {
+ selectedUsers: taggedUsers,
+ })
+ }>
+ <Image
+ source={require('../../assets/icons/tagging/tag-icon.png')}
+ style={styles.tagIcon}
+ />
+ <Text style={styles.tagFriendsTitle}>Tag Friends</Text>
+ </TouchableOpacity>
+ );
+
+ return (
+ <>
+ <TagFriendsTitle />
+ <View style={styles.tagFriendsContainer}>
+ {taggedUsers.map((user) => (
+ <TaggedUser {...user} />
+ ))}
+ {taggedUsers.length !== 0 && <TaggMoreButton />}
+ </View>
+ </>
+ );
+};
+
+const styles = StyleSheet.create({
+ tagIcon: {width: 20, height: 20, marginRight: '3%'},
+ tagFriendsTitle: {
+ color: 'white',
+ fontSize: normalize(12),
+ lineHeight: normalize(16.71),
+ letterSpacing: normalize(0.3),
+ fontWeight: '600',
+ },
+ tagFriendsContainer: {
+ flexDirection: 'row',
+ marginTop: '3%',
+ flexWrap: 'wrap',
+ justifyContent: 'flex-start',
+ },
+ taggMoreLabel: {
+ fontWeight: '500',
+ fontSize: normalize(9),
+ lineHeight: normalize(10),
+ letterSpacing: normalize(0.2),
+ color: 'white',
+ textAlign: 'center',
+ marginVertical: '5%',
+ },
+ closeIconContainer: {
+ width: 20,
+ height: 20,
+ right: -20,
+ zIndex: 1,
+ },
+});
+
+export default TagFriendsFooter;
diff --git a/src/components/moments/index.ts b/src/components/moments/index.ts
index 89fd689c..6af29bc5 100644
--- a/src/components/moments/index.ts
+++ b/src/components/moments/index.ts
@@ -3,3 +3,4 @@ export {default as CaptionScreenHeader} from './CaptionScreenHeader';
export {default as MomentPostHeader} from './MomentPostHeader';
export {default as MomentPostContent} from './MomentPostContent';
export {default as Moment} from './Moment';
+export {default as TagFriendsFooter} from './TagFriendsFoooter';
diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index e810b510..941fea3e 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -7,8 +7,6 @@ import {
KeyboardAvoidingView,
Platform,
StyleSheet,
- Text,
- TouchableOpacity,
TouchableWithoutFeedback,
View,
} from 'react-native';
@@ -16,13 +14,13 @@ import {Button} from 'react-native-elements';
import {MainStackParams} from 'src/routes';
import {
CaptionScreenHeader,
- ProfilePreview,
SearchBackground,
TaggLoadingIndicator,
} from '../../components';
+import {TagFriendsFooter} from '../../components/moments';
import {TAGG_LIGHT_BLUE_2} from '../../constants';
-import {ProfilePreviewType, ScreenType} from '../../types';
-import {normalize, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
+import {ProfilePreviewType} from '../../types';
+import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
type TagFriendsScreenRouteProps = RouteProp<
MainStackParams,
@@ -37,6 +35,9 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
const [loading, setLoading] = useState(false);
const [taggedUsers, setTaggedUsers] = useState<ProfilePreviewType[]>([]);
+ /*
+ * Update list of tagged users from route params
+ */
useEffect(() => {
setTaggedUsers(selectedUsers ? selectedUsers : []);
}, [route.params]);
@@ -82,72 +83,10 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
resizeMode={'cover'}
/>
<View style={{marginHorizontal: '5%', marginTop: '3%'}}>
- <TouchableOpacity
- style={{
- flexDirection: 'row',
- }}
- disabled={taggedUsers.length !== 0}
- onPress={() =>
- navigation.navigate('TagSelectionScreen', {
- selectedUsers: taggedUsers,
- })
- }>
- <Image
- source={require('../../assets/icons/tagging/tag-icon.png')}
- style={{width: 20, height: 20, marginRight: '3%'}}
- />
- <Text style={styles.tagFriendsTitle}>Tag Friends</Text>
- </TouchableOpacity>
- <View style={styles.tagFriendsContainer}>
- {taggedUsers.map((user) => (
- <View>
- <TouchableOpacity
- style={{
- width: 20,
- height: 20,
- }}
- onPress={() => {
- const filteredSelection = taggedUsers.filter(
- (item) => user.id !== item.id,
- );
- setTaggedUsers(filteredSelection);
- }}>
- <Image
- source={require('../../assets/icons/tagging/x-icon.png')}
- style={{
- width: 20,
- height: 20,
- position: 'absolute',
- right: 15,
- }}
- />
- </TouchableOpacity>
- <ProfilePreview
- profilePreview={user}
- previewType={'Tag Selection'}
- screenType={ScreenType.Profile}
- />
- </View>
- ))}
- {taggedUsers.length !== 0 && (
- <TouchableOpacity
- onPress={() =>
- navigation.navigate('TagSelectionScreen', {
- selectedUsers: taggedUsers,
- })
- }
- style={{
- flexDirection: 'column',
- alignItems: 'center',
- }}>
- <Image
- source={require('../../assets/icons/tagging/white-plus-icon.png')}
- style={{width: 38, height: 38, top: -2}}
- />
- <Text style={styles.taggMoreLabel}>{'Tagg More'}</Text>
- </TouchableOpacity>
- )}
- </View>
+ <TagFriendsFooter
+ taggedUsers={taggedUsers}
+ setTaggedUsers={setTaggedUsers}
+ />
</View>
</View>
</KeyboardAvoidingView>
@@ -194,28 +133,6 @@ const styles = StyleSheet.create({
flex: {
flex: 1,
},
- tagFriendsTitle: {
- color: 'white',
- fontSize: normalize(12),
- lineHeight: normalize(16.71),
- letterSpacing: normalize(0.3),
- fontWeight: '600',
- },
- tagFriendsContainer: {
- flexDirection: 'row',
- marginTop: '3%',
- flexWrap: 'wrap',
- justifyContent: 'flex-start',
- },
- taggMoreLabel: {
- fontWeight: '500',
- fontSize: normalize(9),
- lineHeight: normalize(10),
- letterSpacing: normalize(0.2),
- color: 'white',
- textAlign: 'center',
- marginVertical: '5%',
- },
});
export default TagFriendsScreen;
diff --git a/src/screens/moments/TagSelectionScreen.tsx b/src/screens/moments/TagSelectionScreen.tsx
index c49dd17d..8d679b87 100644
--- a/src/screens/moments/TagSelectionScreen.tsx
+++ b/src/screens/moments/TagSelectionScreen.tsx
@@ -129,6 +129,7 @@ const TagSelectionScreen: React.FC<TagSelectionScreenProps> = ({route}) => {
keyExtractor={(item) => item.id}
renderItem={(item) => (
<TaggUserSelectionCell
+ key={item.item.id}
item={item.item}
selectedUsers={selectedUsers}
setSelectedUsers={setSelectedUsers}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 10:49:27 +0000