Finish logic for draggables, Caption screen logic is done

3 files changed, 60 insertions, 40 deletions

diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx
index 12a7d70a..d1bb03ff 100644
--- a/src/components/common/MomentTags.tsx
+++ b/src/components/common/MomentTags.tsx
@@ -6,7 +6,7 @@ import Draggable from './Draggable';
 interface MomentTagsProps {
   editing: boolean;
   tags: MomentTagType[];
-  // setTags: (tag: MomentTagType[]) => void;
+  setTags: (tag: MomentTagType[]) => void;
   imageRef: MutableRefObject<null>;
   deleteFromList?: (user: ProfilePreviewType) => void;
 }
@@ -14,7 +14,7 @@ interface MomentTagsProps {
 const MomentTags: React.FC<MomentTagsProps> = ({
   editing,
   tags,
-  // setTags,
+  setTags,
   imageRef,
   deleteFromList,
 }) => {
@@ -39,9 +39,21 @@ const MomentTags: React.FC<MomentTagsProps> = ({
           px: number, // location of ref relative to entire screen
           py: number,
         ) => {
-          const x = Math.floor(((px - offset[0]) / imageDimensions[0]) * 100);
-          const y = Math.floor(((py - offset[1]) / imageDimensions[1]) * 100);
-          console.log(x, y);
+          const x = ((px - offset[0]) / imageDimensions[0]) * 100;
+          const y = ((py - offset[1]) / imageDimensions[1]) * 100;
+          setTags(
+            tags.map((tag) =>
+              tag.user.id === userId
+                ? {
+                    id: '',
+                    x,
+                    y,
+                    z: maxZIndex - 1, // TODO: change this
+                    user: tag.user,
+                  }
+                : tag,
+            ),
+          );
         },
       );
     }
@@ -80,7 +92,7 @@ const MomentTags: React.FC<MomentTagsProps> = ({
     <>
       {tags.map((tag, index) => (
         <Draggable
-          key={tag.user.id}
+          key={tag.user.id + tag.x + tag.y}
           x={(imageDimensions[0] * tag.x) / 100 + offset[0]}
           y={(imageDimensions[1] * tag.y) / 100 + offset[1]}
           z={tag.z}
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>
     </>
diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx
index 06825641..86915bb4 100644
--- a/src/components/taggs/TaggDraggable.tsx
+++ b/src/components/taggs/TaggDraggable.tsx
@@ -26,10 +26,10 @@ interface TaggDraggableProps extends ViewProps {
 const TaggDraggable: React.FC<TaggDraggableProps> = (
   props: TaggDraggableProps,
 ) => {
+  const {draggableRef, taggedUser, editingView, deleteFromList} = props;
   const navigation = useNavigation();
   const dispatch = useDispatch();
   const state = useSelector((rs: RootState) => rs);
-  const {draggableRef, taggedUser, editingView, deleteFromList} = props;
   let uriX = require('../../assets/images/draggableX.png');
   let uriTip = require('../../assets/images/Tagg-Triangle.png');