Finish logic for draggables, Caption screen logic is done

1 files changed, 18 insertions, 6 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}