Replace tag component on current caption screen

1 files changed, 50 insertions, 20 deletions

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 146ad86c..f41487c9 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, useEffect, useState} from 'react';
+import React, {Fragment, useCallback, useEffect, useState} from 'react';
 import {
   Alert,
   Image,
@@ -16,7 +16,7 @@ import {
 import {MentionInput} from 'react-native-controlled-mentions';
 import {Button, normalize} from 'react-native-elements';
 import {useDispatch, useSelector} from 'react-redux';
-import {ProfilePreview, SearchBackground} from '../../components';
+import {SearchBackground} from '../../components';
 import {CaptionScreenHeader} from '../../components/';
 import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator';
 import {TAGG_LIGHT_BLUE_2} from '../../constants';
@@ -28,9 +28,10 @@ import {
   updateProfileCompletionStage,
 } from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
-import {ProfilePreviewType, ScreenType} from '../../types';
+import {ProfilePreviewType} from '../../types';
 import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
+import FrontArrow from '../../assets/icons/front-arrow.svg';
 
 /**
  * Upload Screen to allow users to upload posts to Tagg
@@ -54,11 +55,26 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
   const [caption, setCaption] = useState('');
   const [loading, setLoading] = useState(false);
   const [taggedUsers, setTaggedUsers] = useState<ProfilePreviewType[]>([]);
-
+  const [taggedList, setTaggedList] = useState<string>('');
   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
     navigation.navigate('Profile', {
@@ -126,28 +142,42 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               onChange={setCaption}
               partTypes={mentionPartTypes('blue')}
             />
-            <View style={{marginHorizontal: '5%', marginTop: '3%'}}>
+            <View
+              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>
               <TouchableOpacity
-                style={{width: SCREEN_WIDTH}}
                 onPress={() =>
-                  navigation.navigate('TagSelectionScreen', {
+                  navigation.navigate('TagFriendsScreen', {
+                    image: image,
+                    screenType: screenType,
                     selectedUsers: taggedUsers,
                   })
                 }>
-                <Text style={styles.tagFriendsTitle}>Tag Friends</Text>
+                <FrontArrow width={12} height={12} color={'white'} />
               </TouchableOpacity>
-              <View style={styles.tagFriendsContainer}>
-                {taggedUsers.map((user) => (
-                  <View>
-                    {/* TODO: Add Icon for Tag Friends */}
-                    <ProfilePreview
-                      profilePreview={user}
-                      previewType={'Tag Selection'}
-                      screenType={ScreenType.Profile}
-                    />
-                  </View>
-                ))}
-              </View>
             </View>
           </View>
         </KeyboardAvoidingView>