Merge pull request #436 from shravyaramesh/tma853-tag-selection-screen

[TMA-853] Tag selection screen

1 files changed, 73 insertions, 0 deletions

diff --git a/src/components/common/TaggUserSelectionCell.tsx b/src/components/common/TaggUserSelectionCell.tsx
new file mode 100644
index 00000000..2ea1e4ce
--- /dev/null
+++ b/src/components/common/TaggUserSelectionCell.tsx
@@ -0,0 +1,73 @@
+import React, {useEffect, 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);
+
+  /*
+   * To update state of radio button on initial render and subsequent re-renders
+   */
+  useEffect(() => {
+    const updatePressed = () => {
+      const userSelected = selectedUsers.findIndex(
+        (selectedUser) => item.id === selectedUser.id,
+      );
+      setPressed(userSelected !== -1);
+    };
+    updatePressed();
+  });
+
+  /*
+   * Handles on press on radio button
+   * Adds/removes user from selected list of users
+   */
+  const handlePress = () => {
+    // Add to selected list of users
+    if (pressed === false) {
+      setSelectedUsers([...selectedUsers, item]);
+    }
+    // Remove item from selected list of users
+    else {
+      const filteredSelection = selectedUsers.filter(
+        (user) => user.id !== item.id,
+      );
+      setSelectedUsers(filteredSelection);
+    }
+  };
+  return (
+    <View style={styles.container}>
+      <View style={{width: SCREEN_WIDTH * 0.8}}>
+        <ProfilePreview
+          profilePreview={item}
+          previewType={'Search'}
+          screenType={ScreenType.Profile}
+        />
+      </View>
+      <TaggRadioButton pressed={pressed} onPress={handlePress} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginHorizontal: '3%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default TaggUserSelectionCell;