Respond to comments, simplify boundaries, place calculations within useEffect

3 files changed, 49 insertions, 29 deletions

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 19df8c81..82a5b8a8 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -455,7 +455,7 @@ PODS:
     - React-Core
     - React-RCTImage
     - TOCropViewController
-  - RNInAppBrowser (3.6.1):
+  - RNInAppBrowser (3.6.3):
     - React-Core
   - RNReactNativeHapticFeedback (1.11.0):
     - React-Core
@@ -801,7 +801,7 @@ SPEC CHECKSUMS:
   RNFS: 3ab21fa6c56d65566d1fb26c2228e2b6132e5e32
   RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
   RNImageCropPicker: 35a3ceb837446fa11547704709bb22b5fac6d584
-  RNInAppBrowser: 0523b3c15501fb8b54b4f32905d2e71ca902d914
+  RNInAppBrowser: 3ff3a3b8f458aaf25aaee879d057352862edf357
   RNReactNativeHapticFeedback: 653a8c126a0f5e88ce15ffe280b3ff37e1fbb285
   RNReanimated: b9c929bfff7dedc9c89ab1875f1c6151023358d9
   RNScreens: f7ad633b2e0190b77b6a7aab7f914fad6f198d8d
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);
diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index 1852e6a6..5c3501bb 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -38,19 +38,8 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
   const [tags, setTags] = useState<MomentTagType[]>([]);
   const [imageWidth, setImageWidth] = useState<number>(0);
   const [imageHeight, setImageHeight] = useState<number>(0);
-
-  // Calculate boundary (if any) for drag from bottom
-  let bottomBound;
-  if (SCREEN_HEIGHT / 2 - imageHeight / 2 < SCREEN_HEIGHT * 0.15) {
-    if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) {
-      bottomBound = SCREEN_HEIGHT * 0.15;
-    } else {
-      bottomBound =
-        SCREEN_HEIGHT * 0.15 - (SCREEN_HEIGHT / 2 - imageHeight / 2);
-    }
-  } else {
-    bottomBound = 0;
-  }
+  const [bottomBound, setBottomBound] = useState<number>(0);
+  const [topBound, setTopBound] = useState<number>(0);
 
   /*
    * Update list of tagged users from route params
@@ -105,6 +94,21 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
   };
 
   /*
+   * Calculate boundary (if any) for drag from bottom
+   */
+  useEffect(() => {
+    if (SCREEN_HEIGHT / 2 - imageHeight / 2 < SCREEN_HEIGHT * 0.15) {
+      if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) {
+        setBottomBound(SCREEN_HEIGHT * 0.15);
+      } else {
+        setBottomBound(
+          SCREEN_HEIGHT * 0.15 - (SCREEN_HEIGHT / 2 - imageHeight / 2),
+        );
+      }
+    }
+  }, [imageHeight, imageWidth]);
+
+  /*
    * Calculating image width and height with respect to it's enclosing view's dimensions. Only works for images.
    */
   useEffect(() => {
@@ -171,7 +175,21 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
           )}
         </TouchableWithoutFeedback>
       </View>
-      <View style={styles.titleContainer}>
+      <View
+        style={styles.titleContainer}
+        onLayout={(event) => {
+          const {_x, y, _width, height} = event.nativeEvent.layout;
+          const tempBound = y + height;
+          if (SCREEN_HEIGHT / 2 - imageHeight / 2 < tempBound) {
+            if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) {
+              setTopBound(tempBound + 15);
+            } else {
+              setTopBound(
+                tempBound - (SCREEN_HEIGHT / 2 - imageHeight / 2) + 15,
+              );
+            }
+          }
+        }}>
         <TouchableOpacity
           onPress={() => {
             navigation.goBack();
@@ -218,7 +236,7 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
           deleteFromList={(user) =>
             setTags(tags.filter((tag) => tag.user.id !== user.id))
           }
-          boundaries={{bottom: bottomBound}}
+          boundaries={{top: topBound, bottom: bottomBound}}
         />
       )}
       {tags.length !== 0 && (