Refactor footer component, Add key

1 files changed, 132 insertions, 0 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;