1 files changed, 114 insertions, 61 deletions
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 56fe672e..188ccc1f 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -1,6 +1,6 @@
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import React, {Fragment, useRef, useState} from 'react';
+import React, {Fragment, useEffect, useState} from 'react';
 import {
   Alert,
   Image,
@@ -8,24 +8,28 @@ import {
   KeyboardAvoidingView,
   Platform,
   StyleSheet,
+  Text,
+  TouchableOpacity,
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
 import {MentionInput} from 'react-native-controlled-mentions';
-import {Button} from 'react-native-elements';
+import {Button, normalize} from 'react-native-elements';
 import {useDispatch, useSelector} from 'react-redux';
-import {MomentTags, SearchBackground} from '../../components';
+import FrontArrow from '../../assets/icons/front-arrow.svg';
+import {SearchBackground} from '../../components';
 import {CaptionScreenHeader} from '../../components/';
 import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator';
 import {TAGG_LIGHT_BLUE_2} from '../../constants';
 import {ERROR_UPLOAD, SUCCESS_PIC_UPLOAD} from '../../constants/strings';
 import {MainStackParams} from '../../routes';
-import {postMoment} from '../../services';
+import {postMoment, postMomentTags} from '../../services';
 import {
   loadUserMoments,
   updateProfileCompletionStage,
 } from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
+import {ProfilePreviewType} from '../../types';
 import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
 
@@ -43,41 +47,34 @@ interface CaptionScreenProps {
 }
 
 const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
-  const {title, image, screenType} = route.params;
+  const {title, image, screenType, selectedUsers} = route.params;
   const {
     user: {userId},
   } = useSelector((state: RootState) => state.user);
   const dispatch = useDispatch();
   const [caption, setCaption] = useState('');
   const [loading, setLoading] = useState(false);
-  const imageRef = useRef(null);
+  const [taggedUsers, setTaggedUsers] = useState<ProfilePreviewType[]>([]);
+  const [taggedList, setTaggedList] = useState<string>('');
 
-  const [taggList, setTaggList] = useState([
-    {
-      first_name: 'Ivan',
-      id: 'cee45bf8-7f3d-43c8-99bb-ec04908efe58',
-      last_name: 'Chen',
-      thumbnail_url:
-        'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-cee45bf8-7f3d-43c8-99bb-ec04908efe58-thumbnail.jpg',
-      username: 'ivan.tagg',
-    },
-    {
-      first_name: 'Ankit',
-      id: '3bcf6947-bee6-46b0-ad02-6f4d25eaeac3',
-      last_name: 'Thanekar',
-      thumbnail_url:
-        'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-3bcf6947-bee6-46b0-ad02-6f4d25eaeac3-thumbnail.jpg',
-      username: 'ankit.thanekar',
-    },
-    {
-      first_name: 'Ankit',
-      id: '3bcf6947-bee6-46b0-ad02-6f4d25eaeac3',
-      last_name: 'Thanekar',
-      thumbnail_url:
-        'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-3bcf6947-bee6-46b0-ad02-6f4d25eaeac3-thumbnail.jpg',
-      username: 'ankit.thanekar',
-    },
-  ]);
+  useEffect(() => {
+    setTaggedUsers(selectedUsers ? selectedUsers : []);
+  }, [route.params]);
+
+  useEffect(() => {
+    const getTaggedUsersListString = () => {
+      let listString = '';
+      for (let i = 0; i < taggedUsers.length; i++) {
+        if (listString.length < 21) {
+          listString = listString.concat(`@${taggedUsers[i].username} `);
+        } else {
+          break;
+        }
+      }
+      setTaggedList(listString);
+    };
+    getTaggedUsersListString();
+  }, [taggedUsers]);
 
   const navigateToProfile = () => {
     //Since the logged In User is navigating to own profile, useXId is not required
@@ -88,27 +85,51 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
   };
 
   const handleShare = async () => {
+    const handleFailed = () => {
+      setLoading(false);
+      setTimeout(() => {
+        Alert.alert(ERROR_UPLOAD);
+      }, 500);
+    };
+    const handleSuccess = () => {
+      setLoading(false);
+      navigateToProfile();
+      setTimeout(() => {
+        Alert.alert(SUCCESS_PIC_UPLOAD);
+      }, 500);
+    };
     setLoading(true);
     if (!image.filename) {
       return;
     }
-    postMoment(image.filename, image.path, caption, title, userId).then(
-      (data) => {
-        setLoading(false);
-        if (data) {
-          dispatch(loadUserMoments(userId));
-          dispatch(updateProfileCompletionStage(data));
-          navigateToProfile();
-          setTimeout(() => {
-            Alert.alert(SUCCESS_PIC_UPLOAD);
-          }, 500);
-        } else {
-          setTimeout(() => {
-            Alert.alert(ERROR_UPLOAD);
-          }, 500);
-        }
-      },
+    const momentResponse = await postMoment(
+      image.filename,
+      image.path,
+      caption,
+      title,
+      userId,
+    );
+    if (!momentResponse) {
+      handleFailed();
+      return;
+    }
+    const momentTagResponse = await postMomentTags(
+      momentResponse.moment_id,
+      taggedUsers.map((u, index) => ({
+        x: index * 50 - 150,
+        y: index * 50 - 150,
+        user_id: u.id,
+      })),
     );
+    if (!momentTagResponse) {
+      handleFailed();
+      return;
+    }
+    dispatch(loadUserMoments(userId));
+    dispatch(
+      updateProfileCompletionStage(momentResponse.profile_completion_stage),
+    );
+    handleSuccess();
   };
 
   return (
@@ -135,7 +156,6 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
             <CaptionScreenHeader style={styles.header} {...{title: title}} />
             {/* this is the image we want to center our tags' initial location within */}
             <Image
-              ref={imageRef}
               style={styles.image}
               source={{uri: image.path}}
               resizeMode={'cover'}
@@ -148,19 +168,41 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               onChange={setCaption}
               partTypes={mentionPartTypes('blue')}
             />
-            <MomentTags
-              editing={true}
-              tags={taggList.map((user) => ({
-                id: '',
-                x: 0,
-                y: 0,
-                user,
-              }))}
-              imageRef={imageRef}
-              deleteFromList={(user) =>
-                setTaggList(taggList.filter((u) => u.id !== user.id))
+            <TouchableOpacity
+              onPress={() =>
+                navigation.navigate('TagFriendsScreen', {
+                  image: image,
+                  screenType: screenType,
+                  selectedUsers: taggedUsers,
+                })
               }
-            />
+              style={{
+                marginHorizontal: '5%',
+                marginTop: '3%',
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+              }}>
+              <Image
+                source={require('../../assets/icons/tagging/tag-icon.png')}
+                style={{width: 20, height: 20}}
+              />
+              <Text style={styles.tagFriendsTitle}>Tag Friends</Text>
+              <Text
+                numberOfLines={1}
+                style={{
+                  color: 'white',
+                  width: 150,
+                  fontSize: normalize(10),
+                  lineHeight: normalize(11),
+                  letterSpacing: normalize(0.3),
+                  textAlign: 'right',
+                }}>
+                {taggedList}
+                {taggedList.length > 21 ? '. . .' : ''}
+              </Text>
+              <FrontArrow width={12} height={12} color={'white'} />
+            </TouchableOpacity>
           </View>
         </KeyboardAvoidingView>
       </TouchableWithoutFeedback>
@@ -205,6 +247,17 @@ const styles = StyleSheet.create({
   flex: {
     flex: 1,
   },
+  tagFriendsTitle: {
+    color: 'white',
+    fontSize: normalize(12),
+    lineHeight: normalize(16.71),
+    letterSpacing: normalize(0.3),
+    fontWeight: '600',
+  },
+  tagFriendsContainer: {
+    flexDirection: 'row',
+    marginTop: '3%',
+  },
 });
 
 export default CaptionScreen;