Merge pull request #449 from grusuTagg/tma883-Layered-Taggs

[TMA-883] Layered Tags

1 files changed, 76 insertions, 54 deletions

diff --git a/src/components/moments/TagFriendsFoooter.tsx b/src/components/moments/TagFriendsFoooter.tsx
index 7b109877..365d709d 100644
--- a/src/components/moments/TagFriendsFoooter.tsx
+++ b/src/components/moments/TagFriendsFoooter.tsx
@@ -1,39 +1,47 @@
 import {useNavigation} from '@react-navigation/native';
-import React, {Dispatch, SetStateAction} from 'react';
-import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import React, {useMemo} from 'react';
+import {
+  Image,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import {ProfilePreview} from '..';
-import {ProfilePreviewType, ScreenType} from '../../types';
-import {normalize} from '../../utils/layouts';
+import {MomentTagType, ProfilePreviewType, ScreenType} from '../../types';
+import {normalize, SCREEN_HEIGHT} from '../../utils/layouts';
 
 interface TagFriendsFooterProps {
-  taggedUsers: ProfilePreviewType[];
-  setTaggedUsers: Dispatch<SetStateAction<ProfilePreviewType[]>>;
+  tags: MomentTagType[];
+  setTags: (tags: MomentTagType[]) => void;
 }
-const TagFriendsFooter: React.FC<TagFriendsFooterProps> = ({
-  taggedUsers,
-  setTaggedUsers,
-}) => {
+const TagFriendsFooter: React.FC<TagFriendsFooterProps> = ({tags, setTags}) => {
   const navigation = useNavigation();
 
   const handleRemoveTag = (user: ProfilePreviewType) => {
-    const filteredSelection = taggedUsers.filter((item) => user.id !== item.id);
-    setTaggedUsers(filteredSelection);
+    setTags(tags.filter((tag) => tag.user.id !== user.id));
   };
 
-  const TaggMoreButton = () => (
-    <TouchableOpacity
-      onPress={() =>
-        navigation.navigate('TagSelectionScreen', {
-          selectedUsers: taggedUsers,
-        })
-      }
-      style={styles.tagMoreContainer}>
-      <Image
-        source={require('../../assets/icons/tagging/white-plus-icon.png')}
-        style={styles.tagMoreIcon}
-      />
-      <Text style={styles.tagMoreLabel}>{'Tagg More'}</Text>
-    </TouchableOpacity>
+  const goToSelectionScreen = () => {
+    navigation.navigate('TagSelectionScreen', {
+      selectedTags: tags,
+    });
+  };
+
+  const taggMoreButton = useMemo(
+    () => (
+      <TouchableOpacity
+        onPress={goToSelectionScreen}
+        style={styles.tagMoreContainer}>
+        <Image
+          source={require('../../assets/icons/tagging/white-plus-icon.png')}
+          style={styles.tagMoreIcon}
+        />
+        <Text style={styles.tagMoreLabel}>{'Tagg More'}</Text>
+      </TouchableOpacity>
+    ),
+    [tags],
   );
 
   const TaggedUser = (user: ProfilePreviewType) => (
@@ -59,31 +67,36 @@ const TagFriendsFooter: React.FC<TagFriendsFooterProps> = ({
    * If taggUsers is empty, title acts as a button
    * Else, gets disabled and TaggMore button appears
    */
-  const TagFriendsTitle = () => (
-    <TouchableOpacity
-      style={styles.tagFriendsTitleContainer}
-      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>
+  const tagFriendsTitle = useMemo(
+    () => (
+      <TouchableOpacity
+        style={styles.tagFriendsTitleContainer}
+        disabled={tags.length !== 0}
+        onPress={() =>
+          navigation.navigate('TagSelectionScreen', {
+            selectedTags: tags,
+          })
+        }>
+        <Image
+          source={require('../../assets/icons/tagging/tag-icon.png')}
+          style={styles.tagIcon}
+        />
+        <Text style={styles.tagFriendsTitle}>Tag Friends</Text>
+      </TouchableOpacity>
+    ),
+    [tags.length],
   );
 
   return (
     <>
-      <TagFriendsTitle />
+      {tagFriendsTitle}
       <View style={styles.tagFriendsContainer}>
-        {taggedUsers.map((user) => (
-          <TaggedUser {...user} />
-        ))}
-        {taggedUsers.length !== 0 && <TaggMoreButton />}
+        <ScrollView horizontal>
+          {tags.map((tag) => (
+            <TaggedUser key={tag.user.id} {...tag.user} />
+          ))}
+          {tags.length !== 0 && taggMoreButton}
+        </ScrollView>
       </View>
     </>
   );
@@ -99,10 +112,9 @@ const styles = StyleSheet.create({
     fontWeight: '600',
   },
   tagFriendsContainer: {
-    flexDirection: 'row',
-    marginTop: '3%',
-    flexWrap: 'wrap',
-    justifyContent: 'flex-start',
+    height: SCREEN_HEIGHT * 0.1,
+    marginTop: 2,
+    marginBottom: 5,
   },
   tagMoreLabel: {
     fontWeight: '500',
@@ -111,7 +123,6 @@ const styles = StyleSheet.create({
     letterSpacing: normalize(0.2),
     color: 'white',
     textAlign: 'center',
-    marginVertical: '5%',
   },
   closeIconContainer: {
     width: 20,
@@ -120,14 +131,25 @@ const styles = StyleSheet.create({
     zIndex: 1,
   },
   tagMoreContainer: {
-    flexDirection: 'column',
+    width: 60,
     alignItems: 'center',
+    justifyContent: 'flex-start',
+    marginTop: -12,
+  },
+  tagMoreIcon: {
+    width: 38,
+    height: 38,
+    marginTop: 13,
+    marginBottom: '10%',
+  },
+  taggedUserContainer: {
+    marginTop: -12,
   },
-  tagMoreIcon: {width: 38, height: 38, top: -2},
-  taggedUserContainer: {flexDirection: 'row-reverse'},
   closeIcon: {
     width: 20,
     height: 20,
+    left: 15,
+    top: 10,
   },
   tagFriendsTitleContainer: {
     flexDirection: 'row',