Refactor footer component, Add key

2 files changed, 11 insertions, 93 deletions

diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index e810b510..941fea3e 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -7,8 +7,6 @@ import {
   KeyboardAvoidingView,
   Platform,
   StyleSheet,
-  Text,
-  TouchableOpacity,
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
@@ -16,13 +14,13 @@ import {Button} from 'react-native-elements';
 import {MainStackParams} from 'src/routes';
 import {
   CaptionScreenHeader,
-  ProfilePreview,
   SearchBackground,
   TaggLoadingIndicator,
 } from '../../components';
+import {TagFriendsFooter} from '../../components/moments';
 import {TAGG_LIGHT_BLUE_2} from '../../constants';
-import {ProfilePreviewType, ScreenType} from '../../types';
-import {normalize, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
+import {ProfilePreviewType} from '../../types';
+import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
 
 type TagFriendsScreenRouteProps = RouteProp<
   MainStackParams,
@@ -37,6 +35,9 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
   const [loading, setLoading] = useState(false);
   const [taggedUsers, setTaggedUsers] = useState<ProfilePreviewType[]>([]);
 
+  /*
+   * Update list of tagged users from route params
+   */
   useEffect(() => {
     setTaggedUsers(selectedUsers ? selectedUsers : []);
   }, [route.params]);
@@ -82,72 +83,10 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
               resizeMode={'cover'}
             />
             <View style={{marginHorizontal: '5%', marginTop: '3%'}}>
-              <TouchableOpacity
-                style={{
-                  flexDirection: 'row',
-                }}
-                disabled={taggedUsers.length !== 0}
-                onPress={() =>
-                  navigation.navigate('TagSelectionScreen', {
-                    selectedUsers: taggedUsers,
-                  })
-                }>
-                <Image
-                  source={require('../../assets/icons/tagging/tag-icon.png')}
-                  style={{width: 20, height: 20, marginRight: '3%'}}
-                />
-                <Text style={styles.tagFriendsTitle}>Tag Friends</Text>
-              </TouchableOpacity>
-              <View style={styles.tagFriendsContainer}>
-                {taggedUsers.map((user) => (
-                  <View>
-                    <TouchableOpacity
-                      style={{
-                        width: 20,
-                        height: 20,
-                      }}
-                      onPress={() => {
-                        const filteredSelection = taggedUsers.filter(
-                          (item) => user.id !== item.id,
-                        );
-                        setTaggedUsers(filteredSelection);
-                      }}>
-                      <Image
-                        source={require('../../assets/icons/tagging/x-icon.png')}
-                        style={{
-                          width: 20,
-                          height: 20,
-                          position: 'absolute',
-                          right: 15,
-                        }}
-                      />
-                    </TouchableOpacity>
-                    <ProfilePreview
-                      profilePreview={user}
-                      previewType={'Tag Selection'}
-                      screenType={ScreenType.Profile}
-                    />
-                  </View>
-                ))}
-                {taggedUsers.length !== 0 && (
-                  <TouchableOpacity
-                    onPress={() =>
-                      navigation.navigate('TagSelectionScreen', {
-                        selectedUsers: taggedUsers,
-                      })
-                    }
-                    style={{
-                      flexDirection: 'column',
-                      alignItems: 'center',
-                    }}>
-                    <Image
-                      source={require('../../assets/icons/tagging/white-plus-icon.png')}
-                      style={{width: 38, height: 38, top: -2}}
-                    />
-                    <Text style={styles.taggMoreLabel}>{'Tagg More'}</Text>
-                  </TouchableOpacity>
-                )}
-              </View>
+              <TagFriendsFooter
+                taggedUsers={taggedUsers}
+                setTaggedUsers={setTaggedUsers}
+              />
             </View>
           </View>
         </KeyboardAvoidingView>
@@ -194,28 +133,6 @@ 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%',
-    flexWrap: 'wrap',
-    justifyContent: 'flex-start',
-  },
-  taggMoreLabel: {
-    fontWeight: '500',
-    fontSize: normalize(9),
-    lineHeight: normalize(10),
-    letterSpacing: normalize(0.2),
-    color: 'white',
-    textAlign: 'center',
-    marginVertical: '5%',
-  },
 });
 
 export default TagFriendsScreen;
diff --git a/src/screens/moments/TagSelectionScreen.tsx b/src/screens/moments/TagSelectionScreen.tsx
index c49dd17d..8d679b87 100644
--- a/src/screens/moments/TagSelectionScreen.tsx
+++ b/src/screens/moments/TagSelectionScreen.tsx
@@ -129,6 +129,7 @@ const TagSelectionScreen: React.FC<TagSelectionScreenProps> = ({route}) => {
           keyExtractor={(item) => item.id}
           renderItem={(item) => (
             <TaggUserSelectionCell
+              key={item.item.id}
               item={item.item}
               selectedUsers={selectedUsers}
               setSelectedUsers={setSelectedUsers}