Cleanup draggable, Pass ref to each draggable

3 files changed, 42 insertions, 84 deletions

diff --git a/src/components/common/Draggable.tsx b/src/components/common/Draggable.tsx
index 0a480e92..15ba3325 100644
--- a/src/components/common/Draggable.tsx
+++ b/src/components/common/Draggable.tsx
@@ -60,7 +60,6 @@ interface IProps {
   maxX?: number;
   maxY?: number;
   onDragStart?: () => number;
-  measureAdd?: () => void;
 }
 
 export default function Draggable(props: IProps) {
@@ -91,7 +90,6 @@ export default function Draggable(props: IProps) {
     maxX,
     maxY,
     onDragStart,
-    measureAdd,
   } = props;
 
   // The Animated object housing our xy value so that we can spring back
@@ -141,7 +139,6 @@ export default function Draggable(props: IProps) {
       }
       if (onRelease) {
         onRelease(e, gestureState);
-        measureAdd();
       }
       if (!shouldReverse) {
         pan.current.flattenOffset();
diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx
index d76e1481..12a7d70a 100644
--- a/src/components/common/MomentTags.tsx
+++ b/src/components/common/MomentTags.tsx
@@ -1,4 +1,4 @@
-import React, {MutableRefObject, useEffect, useState} from 'react';
+import React, {createRef, MutableRefObject, useEffect, useState} from 'react';
 import {MomentTagType, ProfilePreviewType} from '../../types';
 import TaggDraggable from '../taggs/TaggDraggable';
 import Draggable from './Draggable';
@@ -6,6 +6,7 @@ import Draggable from './Draggable';
 interface MomentTagsProps {
   editing: boolean;
   tags: MomentTagType[];
+  // setTags: (tag: MomentTagType[]) => void;
   imageRef: MutableRefObject<null>;
   deleteFromList?: (user: ProfilePreviewType) => void;
 }
@@ -13,19 +14,44 @@ interface MomentTagsProps {
 const MomentTags: React.FC<MomentTagsProps> = ({
   editing,
   tags,
+  // setTags,
   imageRef,
   deleteFromList,
 }) => {
   const [offset, setOffset] = useState([0, 0]);
   const [imageDimensions, setImageDimensions] = useState([0, 0]);
-  const [curStart, setCurStart] = useState({});
   const [maxZIndex, setMaxZIndex] = useState(1);
+  const [draggableRefs, setDraggableRefs] = useState<
+    React.MutableRefObject<null>[]
+  >([]);
 
-  const editCurStart = (idName: number, dimensions: number[]) => {
-    setCurStart((prev) => ({...prev, [idName]: dimensions}));
+  const updateTagPosition = (
+    ref: React.MutableRefObject<null>,
+    userId: string,
+  ) => {
+    if (ref !== null && ref.current !== null) {
+      ref.current.measure(
+        (
+          _fx: number, // location of ref relative to parent element
+          _fy: number,
+          _width: number,
+          _height: number,
+          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);
+        },
+      );
+    }
   };
 
   useEffect(() => {
+    setDraggableRefs(tags.map((_) => createRef()));
+  }, [tags]);
+
+  useEffect(() => {
     setTimeout(
       () => {
         imageRef.current.measure(
@@ -50,32 +76,13 @@ const MomentTags: React.FC<MomentTagsProps> = ({
     return null;
   }
 
-  const measureAdd = () => {};
-
   return editing && deleteFromList ? (
     <>
       {tags.map((tag, index) => (
         <Draggable
           key={tag.user.id}
-          measureAdd={measureAdd}
-          //imageDimensions width, height
-          // tag.x, tag.y % from backend
-          // offset - the padding/offset
-          //curStart - list ofevery momentTag's dimensions
-          x={
-            curStart[index]
-              ? (imageDimensions[0] * tag.x) / 100 +
-                offset[0] -
-                curStart[index][0] / 2
-              : (imageDimensions[0] * tag.x) / 100 + offset[0]
-          }
-          y={
-            curStart[index]
-              ? (imageDimensions[1] * tag.y) / 100 +
-                offset[1] -
-                curStart[index][1] / 2
-              : (imageDimensions[1] * tag.y) / 100 + offset[1]
-          }
+          x={(imageDimensions[0] * tag.x) / 100 + offset[0]}
+          y={(imageDimensions[1] * tag.y) / 100 + offset[1]}
           z={tag.z}
           minX={offset[0]}
           minY={offset[1]}
@@ -86,20 +93,14 @@ const MomentTags: React.FC<MomentTagsProps> = ({
             setMaxZIndex(currZIndex + 1);
             return currZIndex;
           }}
-          onDragRelease={() => {
-            console.log('fooo');
-            // TODO: george
-          }}>
+          onDragRelease={() =>
+            updateTagPosition(draggableRefs[index], tag.user.id)
+          }>
           <TaggDraggable
+            draggableRef={draggableRefs[index]}
             taggedUser={tag.user}
             editingView={true}
             deleteFromList={() => deleteFromList(tag.user)}
-            setStart={(coords: number[]) => editCurStart(index, coords)}
-            offset={{fx: offset[0], fy: offset[1]}}
-            imageDimensions={{
-              width: imageDimensions[0],
-              height: imageDimensions[1],
-            }}
           />
         </Draggable>
       ))}
@@ -109,20 +110,8 @@ const MomentTags: React.FC<MomentTagsProps> = ({
       {tags.map((tag, index) => (
         <Draggable
           key={tag.user.id}
-          x={
-            curStart[index]
-              ? (imageDimensions[0] * tag.x) / 100 +
-                offset[0] -
-                curStart[index][0] / 2
-              : (imageDimensions[0] * tag.x) / 100 + offset[0]
-          }
-          y={
-            curStart[index]
-              ? (imageDimensions[1] * tag.y) / 100 +
-                offset[1] -
-                curStart[index][1] / 2
-              : (imageDimensions[1] * tag.y) / 100 + offset[1] + offset[1]
-          }
+          x={(imageDimensions[0] * tag.x) / 100 + offset[0]}
+          y={(imageDimensions[1] * tag.y) / 100 + offset[1]}
           z={tag.z}
           minX={offset[0]}
           minY={offset[1]}
@@ -130,10 +119,10 @@ const MomentTags: React.FC<MomentTagsProps> = ({
           maxY={imageDimensions[1] + offset[1]}
           disabled={true}>
           <TaggDraggable
+            draggableRef={draggableRefs[index]}
             taggedUser={tag.user}
             editingView={editing}
             deleteFromList={() => null}
-            setStart={(coords: number[]) => editCurStart(index, coords)}
           />
         </Draggable>
       ))}
diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx
index e964d3d1..06825641 100644
--- a/src/components/taggs/TaggDraggable.tsx
+++ b/src/components/taggs/TaggDraggable.tsx
@@ -1,5 +1,5 @@
 import {useNavigation} from '@react-navigation/native';
-import React, {useRef} from 'react';
+import React from 'react';
 import {
   Image,
   StyleSheet,
@@ -17,12 +17,10 @@ import {normalize} from '../../utils';
 import {navigateToProfile} from '../../utils/users';
 
 interface TaggDraggableProps extends ViewProps {
+  draggableRef: React.MutableRefObject<null>;
   taggedUser: ProfilePreviewType;
   editingView: boolean;
   deleteFromList: () => void;
-  setStart: Function;
-  offset: {fx: number; fy: number};
-  imageDimensions: {width: number; height: number};
 }
 
 const TaggDraggable: React.FC<TaggDraggableProps> = (
@@ -31,36 +29,10 @@ const TaggDraggable: React.FC<TaggDraggableProps> = (
   const navigation = useNavigation();
   const dispatch = useDispatch();
   const state = useSelector((rs: RootState) => rs);
-  const {
-    taggedUser,
-    editingView,
-    deleteFromList,
-    setStart,
-    offset,
-    imageDimensions,
-  } = props;
+  const {draggableRef, taggedUser, editingView, deleteFromList} = props;
   let uriX = require('../../assets/images/draggableX.png');
   let uriTip = require('../../assets/images/Tagg-Triangle.png');
 
-  const draggableRef = useRef(null);
-
-  const getPositions = () =>
-    draggableRef.current.measure(
-      (
-        _fx: number, // location of ref relative to parent element
-        _fy: number,
-        _width: number,
-        _height: number,
-        px: number, // location of ref relative to entire screen
-        py: number,
-      ) => {
-        return [
-          Math.floor(((px - offset.fx) / imageDimensions.width) * 100),
-          Math.floor(((py - offset.fy) / imageDimensions.height) * 100),
-        ];
-      },
-    );
-
   const user: UserType = {
     userId: taggedUser.id,
     username: taggedUser.username,