Add layering functionality when editing tags

5 files changed, 63 insertions, 25 deletions

diff --git a/src/components/common/Draggable.tsx b/src/components/common/Draggable.tsx
index edd29b78..1253fed4 100644
--- a/src/components/common/Draggable.tsx
+++ b/src/components/common/Draggable.tsx
@@ -59,7 +59,7 @@ interface IProps {
   minY?: number;
   maxX?: number;
   maxY?: number;
-  onDragStart?: () => void;
+  onDragStart?: () => number;
 }
 
 export default function Draggable(props: IProps) {
@@ -103,8 +103,8 @@ export default function Draggable(props: IProps) {
   // Whether we're currently dragging or not
   const isDragging = React.useRef(false);
 
-  // const [zIndex, setZIndex] = React.useState(z);
-  const zIndex = z;
+  const [zIndex, setZIndex] = React.useState(z);
+  // const zIndex = z;
 
   const getBounds = React.useCallback(() => {
     const left = x + offsetFromStart.current.x;
@@ -147,18 +147,17 @@ export default function Draggable(props: IProps) {
     [onDragRelease, shouldReverse, onRelease, reversePosition],
   );
 
-  const onPanResponderGrant = React.useCallback(
-    (_: GestureResponderEvent) => {
-      startBounds.current = getBounds();
-      isDragging.current = true;
-      if (!shouldReverse) {
-        pan.current.setOffset(offsetFromStart.current);
-        pan.current.setValue({x: 0, y: 0});
-      }
-      onDragStart();
-    },
-    [getBounds, shouldReverse],
-  );
+  const onPanResponderGrant = (_: GestureResponderEvent) => {
+    startBounds.current = getBounds();
+    isDragging.current = true;
+    if (!shouldReverse) {
+      pan.current.setOffset(offsetFromStart.current);
+      pan.current.setValue({x: 0, y: 0});
+    }
+    if (onDragStart) {
+      setZIndex(onDragStart());
+    }
+  };
 
   const handleOnDrag = React.useCallback(
     (e: GestureResponderEvent, gestureState: PanResponderGestureState) => {
diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx
index 04b0558b..9a6cd08b 100644
--- a/src/components/common/MomentTags.tsx
+++ b/src/components/common/MomentTags.tsx
@@ -19,6 +19,7 @@ const MomentTags: React.FC<MomentTagsProps> = ({
   const [offset, setOffset] = useState([0, 0]);
   const [curStart, setCurStart] = useState([0, 0]);
   const [imageDimensions, setImageDimensions] = useState([0, 0]);
+  const [maxZIndex, setMaxZIndex] = useState(1);
 
   useEffect(() => {
     imageRef.current.measure((fx, fy, width, height, px, py) => {
@@ -34,17 +35,25 @@ const MomentTags: React.FC<MomentTagsProps> = ({
     <>
       {tags.map((tag) => (
         <Draggable
+          key={tag.user.id}
           x={imageDimensions[0] / 2 - curStart[0] / 2 + offset[0]}
           y={offset[1] + imageDimensions[1] / 2 - curStart[1] / 2}
+          z={maxZIndex + 1}
           minX={offset[0]}
           minY={offset[1]}
           maxX={imageDimensions[0] + offset[0]}
           maxY={imageDimensions[1] + offset[1]}
-          onDragStart={() => null}>
+          onDragStart={() => {
+            const currZIndex = maxZIndex;
+            setMaxZIndex(currZIndex + 1);
+            return currZIndex;
+          }}>
           <TaggDraggable
             taggedUser={tag.user}
             editingView={true}
-            deleteFromList={() => deleteFromList(tag.user)}
+            deleteFromList={() => {
+              deleteFromList(tag.user);
+            }}
             setStart={setCurStart}
           />
         </Draggable>
@@ -54,13 +63,15 @@ const MomentTags: React.FC<MomentTagsProps> = ({
     <>
       {tags.map((tag) => (
         <Draggable
+          key={tag.user.id}
           x={imageDimensions[0] / 2 - curStart[0] / 2 + tag.x}
           y={imageDimensions[0] / 2 - curStart[0] / 2 + tag.y}
+          z={tag.z}
           minX={offset[0]}
           minY={offset[1]}
           maxX={imageDimensions[0] + offset[0]}
           maxY={imageDimensions[1] + offset[1]}
-          onDragStart={() => null}>
+          disabled={true}>
           <TaggDraggable
             taggedUser={tag.user}
             editingView={editing}
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index e702cb68..df7f4e68 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -1,6 +1,8 @@
 import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useRef, useState} from 'react';
 import {Image, StyleSheet, Text, View, ViewProps} from 'react-native';
+import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
+import Animated, {Easing} from 'react-native-reanimated';
 import {useDispatch, useStore} from 'react-redux';
 import {getCommentsCount, loadMomentTags} from '../../services';
 import {RootState} from '../../store/rootReducer';
@@ -58,15 +60,36 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
     fetchCommentsCount();
   }, [dateTime, momentId]);
 
+  useEffect(() => {
+    const fade = async () => {
+      Animated.timing(fadeValue, {
+        toValue: 1,
+        duration: 250,
+        easing: Easing.linear,
+      }).start();
+    };
+    fade();
+  }, [fadeValue]);
+
   return (
     <View style={[styles.container, style]}>
-      <Image
-        ref={imageRef}
-        style={styles.image}
-        source={{uri: pathHash}}
-        resizeMode={'cover'}
-      />
-      <MomentTags editing={false} tags={tags} imageRef={imageRef} />
+      <TouchableWithoutFeedback
+        onPress={() => {
+          setVisible(!visible);
+          setFadeValue(new Animated.Value(0));
+        }}>
+        <Image
+          ref={imageRef}
+          style={styles.image}
+          source={{uri: pathHash}}
+          resizeMode={'cover'}
+        />
+      </TouchableWithoutFeedback>
+      {visible && (
+        <Animated.View style={[styles.tapTag, {opacity: fadeValue}]}>
+          <MomentTags editing={false} tags={tags} imageRef={imageRef} />
+        </Animated.View>
+      )}
       <View style={styles.footerContainer}>
         <CommentsCount
           commentsCount={comments_count}
@@ -95,6 +118,9 @@ const styles = StyleSheet.create({
     aspectRatio: 1,
     marginBottom: '3%',
   },
+  tapTag: {
+    position: 'absolute',
+  },
   footerContainer: {
     flexDirection: 'row',
     justifyContent: 'space-between',
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 188ccc1f..731e001c 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -118,6 +118,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
       taggedUsers.map((u, index) => ({
         x: index * 50 - 150,
         y: index * 50 - 150,
+        z: 1,
         user_id: u.id,
       })),
     );
diff --git a/src/types/types.ts b/src/types/types.ts
index e957483b..b294e3f1 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -123,6 +123,7 @@ export interface MomentTagType {
   user: ProfilePreviewType;
   x: number;
   y: number;
+  z: number;
 }
 
 export interface CommentBaseType {