Add back button, Exchange selected users

2 files changed, 48 insertions, 5 deletions

diff --git a/src/screens/moments/TagSelection.tsx b/src/screens/moments/TagSelection.tsx
index 5a1e6ac9..4d1f664e 100644
--- a/src/screens/moments/TagSelection.tsx
+++ b/src/screens/moments/TagSelection.tsx
@@ -9,10 +9,41 @@ import {ProfilePreviewType} from '../../types';
 import {loadTaggUserSuggestions, SCREEN_HEIGHT} from '../../utils';
 import {ChatSearchBar} from '../chat';
 
-const TagSelection: React.FC = () => {
+type TagSelectionRouteProps = RouteProp<MainStackParams, 'TagSelection'>;
+interface TagSelectionProps {
+  route: TagSelectionRouteProps;
+}
+
+const TagSelection: React.FC<TagSelectionProps> = ({route}) => {
   const navigation = useNavigation();
   const [users, setUsers] = useState<ProfilePreviewType[]>([]);
-  const [selectedUsers, setSelectedUsers] = useState<ProfilePreviewType[]>([]);
+  const [selectedUsers, setSelectedUsers] = useState<ProfilePreviewType[]>(
+    route.params.selectedUsers,
+  );
+  const [searching, setSearching] = useState(false);
+  const [query, setQuery] = useState<string>('');
+  const [label, setLabel] = useState<string>('Recent');
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerLeft: () => (
+        <TouchableOpacity
+          onPress={() => {
+            if (selectedUsers.length > 0) {
+              navigation.setParams({selectedUsers: selectedUsers});
+            }
+            navigation.goBack();
+          }}>
+          <BackIcon
+            height={normalize(18)}
+            width={normalize(18)}
+            color={'black'}
+            style={styles.backButton}
+          />
+        </TouchableOpacity>
+      ),
+    });
+  });
 
   const loadUsers = async () => {
     const data: ProfilePreviewType[] = await loadTaggUserSuggestions();
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index fb382e53..bc7c9ed0 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, useState} from 'react';
+import React, {Fragment, useEffect, useState} from 'react';
 import {
   Alert,
   Image,
@@ -16,6 +16,7 @@ import {
 import {MentionInput} from 'react-native-controlled-mentions';
 import {Button} from 'react-native-elements';
 import {useDispatch, useSelector} from 'react-redux';
+import {ProfilePreviewType} from 'src/types';
 import {SearchBackground} from '../../components';
 import {CaptionScreenHeader} from '../../components/';
 import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator';
@@ -45,13 +46,18 @@ 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 [taggedUsers, setTaggedUsers] = useState<ProfilePreviewType[]>([]);
+
+  useEffect(() => {
+    setTaggedUsers(selectedUsers ? selectedUsers : []);
+  }, selectedUsers);
 
   const navigateToProfile = () => {
     //Since the logged In User is navigating to own profile, useXId is not required
@@ -122,11 +128,17 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
             />
             <TouchableOpacity
               style={{width: SCREEN_WIDTH}}
-              onPress={() => navigation.navigate('TagSelection')}>
+              onPress={() =>
+                navigation.navigate('TagSelection', {
+                  selectedUsers: taggedUsers,
+                })
+              }>
+              {/* TODO: Add tag friends component */}
               <Text style={{color: 'white', fontSize: normalize(14)}}>
                 Tag Friends
               </Text>
             </TouchableOpacity>
+            {/* TODO: Display tagged friends component */}
           </View>
         </KeyboardAvoidingView>
       </TouchableWithoutFeedback>