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

[TMA-853] Tag selection screen

4 files changed, 127 insertions, 1 deletions

diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx
index fb9ef5be..04b0558b 100644
--- a/src/components/common/MomentTags.tsx
+++ b/src/components/common/MomentTags.tsx
@@ -30,7 +30,6 @@ const MomentTags: React.FC<MomentTagsProps> = ({
   if (!tags) {
     return null;
   }
-
   return editing && deleteFromList ? (
     <>
       {tags.map((tag) => (
diff --git a/src/components/common/TaggRadioButton.tsx b/src/components/common/TaggRadioButton.tsx
new file mode 100644
index 00000000..3cc2780c
--- /dev/null
+++ b/src/components/common/TaggRadioButton.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import {
+  GestureResponderEvent,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {RADIO_BUTTON_GREY, TAGG_LIGHT_BLUE_2} from '../../constants/constants';
+
+interface TaggRadioButtonProps {
+  pressed: boolean;
+  onPress: (event: GestureResponderEvent) => void;
+}
+const TaggRadioButton: React.FC<TaggRadioButtonProps> = ({
+  pressed,
+  onPress,
+}) => {
+  const activeOuterStyle = {
+    borderColor: pressed ? TAGG_LIGHT_BLUE_2 : RADIO_BUTTON_GREY,
+  };
+
+  const activeInnerStyle = {
+    backgroundColor: pressed ? TAGG_LIGHT_BLUE_2 : 'white',
+  };
+  return (
+    <TouchableOpacity
+      style={[styles.outer, activeOuterStyle]}
+      onPress={onPress}>
+      {pressed && <View style={[styles.inner, activeInnerStyle]} />}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  outer: {
+    width: 20,
+    height: 20,
+    borderWidth: 1.5,
+    borderRadius: 20,
+
+    backgroundColor: 'white',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  inner: {
+    width: 14,
+    height: 14,
+    borderRadius: 8,
+  },
+});
+
+export default TaggRadioButton;
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;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 692c9f8a..4f5c0232 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -27,4 +27,5 @@ 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';
 export {default as MomentTags} from './MomentTags';