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

[TMA-853] Tag selection screen

1 files changed, 155 insertions, 0 deletions

diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
new file mode 100644
index 00000000..e6a9f5fb
--- /dev/null
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -0,0 +1,155 @@
+import {RouteProp} from '@react-navigation/core';
+import {useNavigation} from '@react-navigation/native';
+import React, {useEffect, useRef, useState} from 'react';
+import {
+  Image,
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+import {Button} from 'react-native-elements';
+import {MainStackParams} from 'src/routes';
+import {
+  CaptionScreenHeader,
+  MomentTags,
+  SearchBackground,
+} from '../../components';
+import {TagFriendsFooter} from '../../components/moments';
+import {TAGG_LIGHT_BLUE_2} from '../../constants';
+import {ProfilePreviewType} from '../../types';
+import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
+
+type TagFriendsScreenRouteProps = RouteProp<
+  MainStackParams,
+  'TagFriendsScreen'
+>;
+interface TagFriendsScreenProps {
+  route: TagFriendsScreenRouteProps;
+}
+const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
+  const {image, selectedUsers} = route.params;
+  const navigation = useNavigation();
+  const imageRef = useRef(null);
+  const [taggedUsers, setTaggedUsers] = useState<ProfilePreviewType[]>([]);
+
+  /*
+   * Update list of tagged users from route params
+   */
+  useEffect(() => {
+    if (selectedUsers !== undefined) {
+      setTaggedUsers(selectedUsers);
+    }
+  }, [selectedUsers]);
+
+  /*
+   * Navigate back to Tag Users Screen, send selected users
+   */
+  const handleDone = () => {
+    navigation.navigate('CaptionScreen', {
+      ...route.params,
+      selectedUsers: taggedUsers,
+    });
+  };
+
+  return (
+    <SearchBackground>
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+        <KeyboardAvoidingView
+          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+          style={styles.flex}>
+          <View style={styles.contentContainer}>
+            <View style={styles.buttonsContainer}>
+              <Button
+                title="Cancel"
+                buttonStyle={styles.button}
+                onPress={() => navigation.goBack()}
+              />
+              <Button
+                title="Done"
+                titleStyle={styles.shareButtonTitle}
+                buttonStyle={styles.button}
+                onPress={handleDone}
+              />
+            </View>
+            <CaptionScreenHeader
+              style={styles.header}
+              title={'Tap on photo to Tag friends!'}
+            />
+            <Image
+              ref={imageRef}
+              style={styles.image}
+              source={{uri: image.path}}
+              resizeMode={'cover'}
+            />
+            {taggedUsers.length !== 0 && (
+              <MomentTags
+                editing={true}
+                tags={taggedUsers.map((user) => ({
+                  id: '',
+                  x: 0,
+                  y: 0,
+                  user,
+                }))}
+                imageRef={imageRef}
+                deleteFromList={(user) =>
+                  setTaggedUsers(taggedUsers.filter((u) => u.id !== user.id))
+                }
+              />
+            )}
+            <View style={{marginHorizontal: '5%', marginTop: '3%'}}>
+              <TagFriendsFooter
+                taggedUsers={taggedUsers}
+                setTaggedUsers={setTaggedUsers}
+              />
+            </View>
+          </View>
+        </KeyboardAvoidingView>
+      </TouchableWithoutFeedback>
+    </SearchBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    paddingTop: StatusBarHeight,
+    justifyContent: 'flex-end',
+  },
+  buttonsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginLeft: '5%',
+    marginRight: '5%',
+  },
+  button: {
+    backgroundColor: 'transparent',
+  },
+  shareButtonTitle: {
+    fontWeight: 'bold',
+    color: TAGG_LIGHT_BLUE_2,
+  },
+  header: {
+    marginVertical: 20,
+  },
+  image: {
+    position: 'relative',
+    width: SCREEN_WIDTH,
+    aspectRatio: 1,
+    marginBottom: '3%',
+  },
+  text: {
+    position: 'relative',
+    backgroundColor: 'white',
+    width: '100%',
+    paddingHorizontal: '2%',
+    paddingVertical: '1%',
+    height: 60,
+  },
+  flex: {
+    flex: 1,
+  },
+});
+
+export default TagFriendsScreen;