Add tagg uiser list item

2 files changed, 63 insertions, 0 deletions

diff --git a/src/components/common/TaggUserSelectionCell.tsx b/src/components/common/TaggUserSelectionCell.tsx
new file mode 100644
index 00000000..88382119
--- /dev/null
+++ b/src/components/common/TaggUserSelectionCell.tsx
@@ -0,0 +1,62 @@
+import React, {useState} from 'react';
+import {StyleSheet, View} from 'react-native';
+import {ProfilePreview} from '..';
+import {ProfilePreviewType, ScreenType} from '../../types';
+import {SCREEN_WIDTH} from '../../utils';
+import TaggRadioButton from './TaggRadioButton';
+
+interface TaggUserSelectionCellProps {
+  item: ProfilePreviewType;
+  selectedUsers: ProfilePreviewType[];
+  setSelectedUsers: Function;
+}
+const TaggUserSelectionCell: React.FC<TaggUserSelectionCellProps> = ({
+  item,
+  selectedUsers,
+  setSelectedUsers,
+}) => {
+  const [pressed, setPressed] = useState<boolean>(false);
+
+  const handlePress = () => {
+    // Add to selected list pf users
+    if (pressed === false) {
+      setSelectedUsers([...selectedUsers, item]);
+      setPressed(true);
+    }
+    // Remove item from selected list of users
+    else {
+      const filteredSelection = selectedUsers.filter(
+        (user) => user.id !== item.id,
+      );
+      setSelectedUsers(filteredSelection);
+      setPressed(false);
+    }
+  };
+  return (
+    <View style={styles.container}>
+      <View style={{width: SCREEN_WIDTH * 0.8}}>
+        <ProfilePreview
+          profilePreview={item}
+          previewType={'Search'}
+          screenType={ScreenType.Profile}
+        />
+      </View>
+      <TaggRadioButton
+        pressed={pressed}
+        setPressed={setPressed}
+        onPress={handlePress}
+      />
+    </View>
+  );
+};
+
+export default TaggUserSelectionCell;
+
+const styles = StyleSheet.create({
+  container: {
+    marginHorizontal: '3%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 48abb8b8..44edbe5f 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -27,3 +27,4 @@ export {default as Avatar} from './Avatar';
 export {default as TaggTypeahead} from './TaggTypeahead';
 export {default as TaggUserRowCell} from './TaggUserRowCell';
 export {default as LikeButton} from './LikeButton';
+export {default as TaggUserSelectionCell} from './TaggUserSelectionCell';