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

[TMA-883] Layered Tags

1 files changed, 21 insertions, 16 deletions

diff --git a/src/components/common/TaggUserSelectionCell.tsx b/src/components/common/TaggUserSelectionCell.tsx
index 2ea1e4ce..72c98822 100644
--- a/src/components/common/TaggUserSelectionCell.tsx
+++ b/src/components/common/TaggUserSelectionCell.tsx
@@ -1,19 +1,20 @@
 import React, {useEffect, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
+import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
 import {ProfilePreview} from '..';
-import {ProfilePreviewType, ScreenType} from '../../types';
+import {MomentTagType, ProfilePreviewType, ScreenType} from '../../types';
 import {SCREEN_WIDTH} from '../../utils';
 import TaggRadioButton from './TaggRadioButton';
 
 interface TaggUserSelectionCellProps {
   item: ProfilePreviewType;
-  selectedUsers: ProfilePreviewType[];
-  setSelectedUsers: Function;
+  tags: MomentTagType[];
+  setTags: (tags: MomentTagType[]) => void;
 }
 const TaggUserSelectionCell: React.FC<TaggUserSelectionCellProps> = ({
   item,
-  selectedUsers,
-  setSelectedUsers,
+  tags,
+  setTags,
 }) => {
   const [pressed, setPressed] = useState<boolean>(false);
 
@@ -22,9 +23,7 @@ const TaggUserSelectionCell: React.FC<TaggUserSelectionCellProps> = ({
    */
   useEffect(() => {
     const updatePressed = () => {
-      const userSelected = selectedUsers.findIndex(
-        (selectedUser) => item.id === selectedUser.id,
-      );
+      const userSelected = tags.findIndex((tag) => item.id === tag.user.id);
       setPressed(userSelected !== -1);
     };
     updatePressed();
@@ -37,18 +36,24 @@ const TaggUserSelectionCell: React.FC<TaggUserSelectionCellProps> = ({
   const handlePress = () => {
     // Add to selected list of users
     if (pressed === false) {
-      setSelectedUsers([...selectedUsers, item]);
+      setTags([
+        ...tags,
+        {
+          id: '',
+          x: 50,
+          y: 50,
+          z: 1,
+          user: item,
+        },
+      ]);
     }
     // Remove item from selected list of users
     else {
-      const filteredSelection = selectedUsers.filter(
-        (user) => user.id !== item.id,
-      );
-      setSelectedUsers(filteredSelection);
+      setTags(tags.filter((tag) => tag.user.id !== item.id));
     }
   };
   return (
-    <View style={styles.container}>
+    <TouchableWithoutFeedback onPress={handlePress} style={styles.container}>
       <View style={{width: SCREEN_WIDTH * 0.8}}>
         <ProfilePreview
           profilePreview={item}
@@ -56,8 +61,8 @@ const TaggUserSelectionCell: React.FC<TaggUserSelectionCellProps> = ({
           screenType={ScreenType.Profile}
         />
       </View>
-      <TaggRadioButton pressed={pressed} onPress={handlePress} />
-    </View>
+      <TaggRadioButton pressed={pressed} onPress={() => null} />
+    </TouchableWithoutFeedback>
   );
 };