Respond to comments, simplify boundaries, place calculations within useEffect

1 files changed, 14 insertions, 12 deletions

diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx
index 36c87558..62b551f0 100644
--- a/src/components/common/MomentTags.tsx
+++ b/src/components/common/MomentTags.tsx
@@ -31,10 +31,8 @@ const MomentTags: React.FC<MomentTagsProps> = ({
   const [imageDimensions, setImageDimensions] = useState([0, 0]);
   const [maxZIndex, setMaxZIndex] = useState(1);
   const [draggableRefs, setDraggableRefs] = useState<RefObject<View>[]>([]);
-  const [minXBoundary, setMinXBoundary] = useState<number>(0);
-  const [maxXBoundary, setMaxXBoundary] = useState<number>(0);
-  const [minYBoundary, setMinYBoundary] = useState<number>(0);
-  const [maxYBoundary, setMaxYBoundary] = useState<number>(0);
+  // [minXBoundary, maxXBoundary, minYBoundary, maxYBoundary]
+  const [boundariesList, setBoundariesList] = useState<number[]>([0, 0, 0, 0]);
 
   const updateTagPosition = (ref: RefObject<Image>, userId: string) => {
     if (ref !== null && ref.current !== null) {
@@ -92,18 +90,22 @@ const MomentTags: React.FC<MomentTagsProps> = ({
 
         // Checks for and adds boundaries
         if (boundaries) {
+          console.log(boundaries);
+          const newBounds = [...boundariesList];
           if (boundaries.top) {
-            setMinYBoundary(boundaries.top);
+            newBounds[2] = boundaries.top;
           }
           if (boundaries.bottom) {
-            setMaxYBoundary(boundaries.bottom);
+            newBounds[3] = boundaries.bottom;
           }
           if (boundaries.left) {
-            setMinXBoundary(boundaries.left);
+            newBounds[0] = boundaries.left;
           }
           if (boundaries.right) {
-            setMaxXBoundary(boundaries.right);
+            newBounds[1] = boundaries.right;
           }
+          console.log(newBounds);
+          setBoundariesList(newBounds);
         }
       },
       editing ? 100 : 0,
@@ -122,10 +124,10 @@ const MomentTags: React.FC<MomentTagsProps> = ({
           x={(imageDimensions[0] * tag.x) / 100 + offset[0]}
           y={(imageDimensions[1] * tag.y) / 100 + offset[1]}
           z={tag.z}
-          minX={offset[0] + minXBoundary}
-          minY={offset[1] + minYBoundary}
-          maxX={imageDimensions[0] + offset[0] - maxXBoundary}
-          maxY={imageDimensions[1] + offset[1] - maxYBoundary}
+          minX={offset[0] + boundariesList[0]}
+          minY={offset[1] + boundariesList[2]}
+          maxX={imageDimensions[0] + offset[0] - boundariesList[1]}
+          maxY={imageDimensions[1] + offset[1] - boundariesList[3]}
           onDragStart={() => {
             const currZIndex = maxZIndex;
             setMaxZIndex(currZIndex + 1);