From e3571b2fcb4a78ea11466ff4bfb0405ae4028aea Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Wed, 26 May 2021 19:08:28 -0400
Subject: Finish logic for draggables, Caption screen logic is done

---
 src/components/moments/TagFriendsFoooter.tsx | 74 +++++++++++++++-------------
 1 file changed, 41 insertions(+), 33 deletions(-)

(limited to 'src/components/moments')

diff --git a/src/components/moments/TagFriendsFoooter.tsx b/src/components/moments/TagFriendsFoooter.tsx
index 2a844680..16158612 100644
--- a/src/components/moments/TagFriendsFoooter.tsx
+++ b/src/components/moments/TagFriendsFoooter.tsx
@@ -1,5 +1,5 @@
 import {useNavigation} from '@react-navigation/native';
-import React, {Dispatch, SetStateAction} from 'react';
+import React, {Dispatch, SetStateAction, useMemo} from 'react';
 import {
   Image,
   ScrollView,
@@ -27,20 +27,25 @@ const TagFriendsFooter: React.FC<TagFriendsFooterProps> = ({
     setTaggedUsers(filteredSelection);
   };
 
-  const TaggMoreButton = () => (
-    <TouchableOpacity
-      onPress={() =>
-        navigation.navigate('TagSelectionScreen', {
-          selectedUsers: taggedUsers,
-        })
-      }
-      style={styles.tagMoreContainer}>
-      <Image
-        source={require('../../assets/icons/tagging/white-plus-icon.png')}
-        style={styles.tagMoreIcon}
-      />
-      <Text style={styles.tagMoreLabel}>{'Tagg More'}</Text>
-    </TouchableOpacity>
+  const goToSelectionScreen = () => {
+    navigation.navigate('TagSelectionScreen', {
+      selectedUsers: taggedUsers,
+    });
+  };
+
+  const taggMoreButton = useMemo(
+    () => (
+      <TouchableOpacity
+        onPress={goToSelectionScreen}
+        style={styles.tagMoreContainer}>
+        <Image
+          source={require('../../assets/icons/tagging/white-plus-icon.png')}
+          style={styles.tagMoreIcon}
+        />
+        <Text style={styles.tagMoreLabel}>{'Tagg More'}</Text>
+      </TouchableOpacity>
+    ),
+    [],
   );
 
   const TaggedUser = (user: ProfilePreviewType) => (
@@ -66,32 +71,35 @@ const TagFriendsFooter: React.FC<TagFriendsFooterProps> = ({
    * If taggUsers is empty, title acts as a button
    * Else, gets disabled and TaggMore button appears
    */
-  const TagFriendsTitle = () => (
-    <TouchableOpacity
-      style={styles.tagFriendsTitleContainer}
-      disabled={taggedUsers.length !== 0}
-      onPress={() =>
-        navigation.navigate('TagSelectionScreen', {
-          selectedUsers: taggedUsers,
-        })
-      }>
-      <Image
-        source={require('../../assets/icons/tagging/tag-icon.png')}
-        style={styles.tagIcon}
-      />
-      <Text style={styles.tagFriendsTitle}>Tag Friends</Text>
-    </TouchableOpacity>
+  const tagFriendsTitle = useMemo(
+    () => (
+      <TouchableOpacity
+        style={styles.tagFriendsTitleContainer}
+        disabled={taggedUsers.length !== 0}
+        onPress={() =>
+          navigation.navigate('TagSelectionScreen', {
+            selectedUsers: taggedUsers,
+          })
+        }>
+        <Image
+          source={require('../../assets/icons/tagging/tag-icon.png')}
+          style={styles.tagIcon}
+        />
+        <Text style={styles.tagFriendsTitle}>Tag Friends</Text>
+      </TouchableOpacity>
+    ),
+    [taggedUsers.length],
   );
 
   return (
     <>
-      <TagFriendsTitle />
+      {tagFriendsTitle}
       <View style={styles.tagFriendsContainer}>
         <ScrollView horizontal>
           {taggedUsers.map((user) => (
-            <TaggedUser {...user} />
+            <TaggedUser key={user.id} {...user} />
           ))}
-          {taggedUsers.length !== 0 && <TaggMoreButton />}
+          {taggedUsers.length !== 0 && taggMoreButton}
         </ScrollView>
       </View>
     </>
-- 
cgit v1.2.3-70-g09d2