Fix zIndex draggable placement

4 files changed, 146 insertions, 141 deletions

diff --git a/src/components/common/Draggable.tsx b/src/components/common/Draggable.tsx
index 409ca6de..59ea78f0 100644
--- a/src/components/common/Draggable.tsx
+++ b/src/components/common/Draggable.tsx
@@ -60,6 +60,7 @@ interface IProps {
   minY?: number;
   maxX?: number;
   maxY?: number;
+  onDragStart?: () => void;
 }
 
 export default function Draggable(props: IProps) {
@@ -89,6 +90,7 @@ export default function Draggable(props: IProps) {
     minY,
     maxX,
     maxY,
+    onDragStart,
   } = props;
 
   // The Animated object housing our xy value so that we can spring back
@@ -102,6 +104,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 getBounds = React.useCallback(() => {
     const left = x + offsetFromStart.current.x;
     const top = y + offsetFromStart.current.y;
@@ -151,6 +155,7 @@ export default function Draggable(props: IProps) {
         pan.current.setOffset(offsetFromStart.current);
         pan.current.setValue({x: 0, y: 0});
       }
+      onDragStart();
     },
     [getBounds, shouldReverse],
   );
@@ -183,12 +188,16 @@ export default function Draggable(props: IProps) {
       onMoveShouldSetPanResponderCapture: (_, gestureState) =>
         shouldStartDrag(gestureState),
       onPanResponderGrant,
+      // onPanResponderStart,
       onPanResponderMove: Animated.event([], {
         // Typed incorrectly https://reactnative.dev/docs/panresponder
         listener: handleOnDrag,
         useNativeDriver: false,
       }),
-      onPanResponderRelease,
+      onPanResponderRelease: (_) => {
+        console.log('end');
+        // setZIndex(1);
+      },
     });
   }, [
     handleOnDrag,
@@ -218,16 +227,17 @@ export default function Draggable(props: IProps) {
       left: 0,
       width: Window.width,
       height: Window.height,
-      zIndex: z,
+      elevation: zIndex,
+      zIndex: zIndex,
     };
-  }, []);
+  }, [zIndex]);
 
   const dragItemCss = React.useMemo(() => {
     const style: StyleProp<ViewStyle> = {
       top: y,
       left: x,
-      elevation: z,
-      zIndex: z,
+      elevation: zIndex,
+      zIndex: zIndex,
     };
     if (renderColor) {
       style.backgroundColor = renderColor;
@@ -248,7 +258,7 @@ export default function Draggable(props: IProps) {
       width: renderSize,
       height: renderSize,
     };
-  }, [children, isCircle, renderColor, renderSize, x, y, z]);
+  }, [children, isCircle, renderColor, renderSize, x, y, zIndex]);
 
   const touchableContent = React.useMemo(() => {
     if (children) {
@@ -312,10 +322,10 @@ export default function Draggable(props: IProps) {
           onLayout={handleOnLayout}
           style={dragItemCss}
           disabled={true}
-          onPress={onShortPressRelease}
-          onLongPress={onLongPress}
-          onPressIn={onPressIn}
-          onPressOut={handlePressOut}>
+          onPress={() => console.log('ere')}
+          onLongPress={() => console.log('eeee')}
+          onPressIn={() => console.log('HERE')}
+          onPressOut={() => console.log('reeee')}>
           {touchableContent}
         </TouchableOpacity>
       </Animated.View>
diff --git a/src/components/profile/TaggAvatar.tsx b/src/components/profile/TaggAvatar.tsx
index 8cd52a2f..135c6e5a 100644
--- a/src/components/profile/TaggAvatar.tsx
+++ b/src/components/profile/TaggAvatar.tsx
@@ -23,8 +23,8 @@ const TaggAvatar: React.FC<TaggAvatarProps> = ({
   userXId,
   editable = false,
 }) => {
-  const state = useSelector((state: RootState) => state);
-  console.log('STATE', state.userX);
+  // const state = useSelector((state: RootState) => state);
+  // console.log('STATE', state.userX);
   const {avatar, user} = useSelector((state: RootState) =>
     userXId ? state.userX[screenType][userXId] : state.user,
   );
diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx
index e31f69c2..1ef2e69f 100644
--- a/src/components/taggs/TaggDraggable.tsx
+++ b/src/components/taggs/TaggDraggable.tsx
@@ -53,7 +53,7 @@ const TaggDraggable: React.FC<TaggDraggableProps> = (
   };
 
   return (
-    <TouchableWithoutFeedback>
+    <TouchableWithoutFeedback style={{borderColor: 'red'}}>
       <View style={styles.container}>
         <Image style={styles.imageTip} source={uriTip} />
         <TouchableOpacity
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index b34c7c7a..a2b9a3ad 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -1,6 +1,6 @@
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import React, {Fragment, useRef, useState} from 'react';
+import React, {Fragment, useRef, useState, useEffect} from 'react';
 import {
   Alert,
   Image,
@@ -8,6 +8,7 @@ import {
   KeyboardAvoidingView,
   Platform,
   StyleSheet,
+  Text,
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
@@ -16,9 +17,9 @@ import {Button} from 'react-native-elements';
 import {useDispatch, useSelector} from 'react-redux';
 import {SearchBackground} from '../../components';
 import {CaptionScreenHeader} from '../../components/';
-// import Draggable from '../../components/common/Draggable';
+import Draggable from '../../components/common/Draggable';
 import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator';
-// import TaggDraggable from '../../components/taggs/TaggDraggable';
+import TaggDraggable from '../../components/taggs/TaggDraggable';
 import {TAGG_LIGHT_BLUE_2} from '../../constants';
 import {ERROR_UPLOAD, SUCCESS_PIC_UPLOAD} from '../../constants/strings';
 import {MainStackParams} from '../../routes';
@@ -30,6 +31,7 @@ import {
 import {RootState} from '../../store/rootReducer';
 import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
+import {TouchableOpacity} from 'react-native-gesture-handler';
 
 /**
  * Upload Screen to allow users to upload posts to Tagg
@@ -59,66 +61,36 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
   const [caption, setCaption] = useState('');
   const [loading, setLoading] = useState(false);
   // const [isTop, setIsTop] = useState(false);
-  // const zIndex = [0, 999];
-  // created a state variable to keep track of every tag
-  // idea is that each element in the list
-  // const [taggList, setTaggList] = useState([
-  //   {
-  //     first_name: 'Ivan',
-  //     id: 'cee45bf8-7f3d-43c8-99bb-ec04908efe58',
-  //     last_name: 'Chen',
-  //     thumbnail_url:
-  //       'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-cee45bf8-7f3d-43c8-99bb-ec04908efe58-thumbnail.jpg',
-  //     username: 'ivan.tagg',
-  //   },
-  //   {
-  //     first_name: 'Ankit',
-  //     id: '3bcf6947-bee6-46b0-ad02-6f4d25eaeac3',
-  //     last_name: 'Thanekar',
-  //     thumbnail_url:
-  //       'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-3bcf6947-bee6-46b0-ad02-6f4d25eaeac3-thumbnail.jpg',
-  //     username: 'ankit.thanekar',
-  //   },
-  // ]);
+  const zIndex = [0, 999];
   const imageRef = useRef(null);
-  // const [offset, setOffset] = useState([0, 0]);
-  // const [curStart, setCurStart] = useState([0, 0]);
-
-  // const [imageDimensions, setImageDimensions] = useState([0, 0]);
-  // // created a test user - BUG - failed to register a profile visit -
-  // const testUser: UserType = {
-  //   userId: 'ID-1234-567',
-  //   username: 'dragonofthewest',
-  // };
+  const [offset, setOffset] = useState([0, 0]);
+  const [curStart, setCurStart] = useState([0, 0]);
 
+  const [imageDimensions, setImageDimensions] = useState([0, 0]);
   // created a state variable to keep track of every tag
   // idea is that each element in the list
-  // const [taggList, setTaggList] = useState([
-  //   {
-  //     first_name: 'Ivan',
-  //     id: 'cee45bf8-7f3d-43c8-99bb-ec04908efe58',
-  //     last_name: 'Chen',
-  //     thumbnail_url:
-  //       'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-cee45bf8-7f3d-43c8-99bb-ec04908efe58-thumbnail.jpg',
-  //     username: 'ivan.tagg',
-  //   },
-  //   {
-  //     first_name: 'Ankit',
-  //     id: '3bcf6947-bee6-46b0-ad02-6f4d25eaeac3',
-  //     last_name: 'Thanekar',
-  //     thumbnail_url:
-  //       'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-3bcf6947-bee6-46b0-ad02-6f4d25eaeac3-thumbnail.jpg',
-  //     username: 'ankit.thanekar',
-  //   },
-  // ]);
-  // const imageRef = useRef(null);
+  const [taggList, setTaggList] = useState([
+    {
+      first_name: 'Ivan',
+      id: 'cee45bf8-7f3d-43c8-99bb-ec04908efe58',
+      last_name: 'Chen',
+      thumbnail_url:
+        'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-cee45bf8-7f3d-43c8-99bb-ec04908efe58-thumbnail.jpg',
+      username: 'ivan.tagg',
+    },
+    {
+      first_name: 'Ankit',
+      id: '3bcf6947-bee6-46b0-ad02-6f4d25eaeac3',
+      last_name: 'Thanekar',
+      thumbnail_url:
+        'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-3bcf6947-bee6-46b0-ad02-6f4d25eaeac3-thumbnail.jpg',
+      username: 'ankit.thanekar',
+    },
+  ]);
   // state variables used to position draggables
-  // const [offset, setOffset] = useState([0, 0]);
-  // const [curStart, setCurStart] = useState([0, 0]);
-  // const [imageDimensions, setImageDimensions] = useState([0, 0]);
 
   // state var used to keep track of draggable z ordering
-  // const [layerOrder, setLayerOrder] = useState<string[]>([]);
+  const [layerOrder, setLayerOrder] = useState<string[]>([]);
   // created a test user - BUG - failed to register a profile visit -
   // const testUser: UserType = {
   //   userId: 'ID-1234-567',
@@ -136,58 +108,80 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
    * Helper function that we use to keep track of which element should be on top most layer
    * @param index
    */
-  // const bringToFront = (index: number) => {
-  //   let currUser = taggList[index].id;
-  //   const newLayerOrder = [...layerOrder];
-  //   if (layerOrder.includes(currUser)) {
-  //     newLayerOrder.splice(newLayerOrder.indexOf(currUser), 1);
-  //   }
-  //   setLayerOrder([currUser, ...newLayerOrder]);
-  //   console.log('ON TOP IS THIS ONE: ' + layerOrder[0]);
-  // };
+  const bringToFront = async (index: number) => {
+    let currUser = taggList[index].id;
+    // console.log(currUser);
+    // console.log('layer order : ' + layerOrder);
+    // if (layerOrder.length === 0) {
+    //   setLayerOrder([currUser]);
+    // }
+    const newLayerOrder: string[] = [];
+    newLayerOrder.push(currUser);
+    newLayerOrder.concat(layerOrder);
+    // console.log('BEFORE NLOrder' + newLayerOrder);
+    // if (layerOrder.includes(currUser)) {
+    //   newLayerOrder.splice(newLayerOrder.indexOf(currUser), 1);
+    // }
+    // console.log('NLOrder' + newLayerOrder);
+    // const newArray = ;
+    // console.log('should be', [currUser, ...newLayerOrder]);
+    await setLayerOrder(newLayerOrder);
+    // console.log('is', layerOrder);
+    // console.log('ON TOP IS THIS ONE: ' + layerOrder[0]);
+  };
+
+  useEffect(() => {
+    console.log(
+      'layerOPrder is updating ' +
+        typeof layerOrder +
+        ' ' +
+        layerOrder +
+        ' ' +
+        layerOrder.length,
+    );
+  }, [layerOrder]);
+  console.log('outside: ' + layerOrder);
+  useEffect(() => {
+    console.log(
+      'wer are nupdating is updating ' +
+        typeof layerOrder +
+        ' ' +
+        layerOrder +
+        ' ' +
+        layerOrder.length,
+    );
+  });
+
   /**
    * Helper function that tells us if the current draggable is the topmost one.
    * @param index
    */
-  // const isOnTop = (index: number) => {
-  //   let currUser = taggList[index].id;
-  //   return currUser === layerOrder[0];
-  // };
+  const isOnTop = (index: number) => {
+    let currUser = taggList[index].id;
+    return currUser === layerOrder[0];
+  };
   /**
    * function that sets the initial position of each newly created tag
    * @returns
    */
 
-  // useEffect(() => {
-  //   imageRef.current.measure((fx, fy, width, height, px, py) => {
-  //     console.log('Component width is: ' + width);
-  //     console.log('Component height is: ' + height);
-  //     console.log('X offset to frame: ' + fx);
-  //     console.log('Y offset to frame: ' + fy);
-  //     console.log('X offset to page: ' + px);
-  //     console.log('Y offset to page: ' + py);
-  //     setOffset([px, py]);
-  //     setImageDimensions([width, height]);
-  //   });
-  // }, []);
-
   /**
    * need a handler to take care of creating a tagged user object, append that object to the taggList state variable.
    * @returns
    */
 
-  // useEffect(() => {
-  //   imageRef.current.measure((fx, fy, width, height, px, py) => {
-  //     console.log('Component width is: ' + width);
-  //     console.log('Component height is: ' + height);
-  //     console.log('X offset to frame: ' + fx);
-  //     console.log('Y offset to frame: ' + fy);
-  //     console.log('X offset to page: ' + px);
-  //     console.log('Y offset to page: ' + py);
-  //     setOffset([px, py]);
-  //     setImageDimensions([width, height]);
-  //   });
-  // }, []);
+  useEffect(() => {
+    imageRef.current.measure((fx, fy, width, height, px, py) => {
+      console.log('Component width is: ' + width);
+      console.log('Component height is: ' + height);
+      console.log('X offset to frame: ' + fx);
+      console.log('Y offset to frame: ' + fy);
+      console.log('X offset to page: ' + px);
+      console.log('Y offset to page: ' + py);
+      setOffset([px, py]);
+      setImageDimensions([width, height]);
+    });
+  }, []);
 
   const handleShare = async () => {
     setLoading(true);
@@ -251,40 +245,41 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               partTypes={mentionPartTypes('blue')}
             />
             {/* Draggables - Commented out for now */}
-            {/* <View>
-              <Draggable
-                x={imageDimensions[0] / 2 - curStart[0] / 2 + offset[0]}
-                y={offset[1] + imageDimensions[1] / 2 - curStart[1] / 2}
-                z={isOnTop(0) ? 99999999 : zIndex[0]}
-                minX={offset[0]}
-                minY={offset[1]}
-                maxX={imageDimensions[0] + offset[0]}
-                maxY={imageDimensions[1] + offset[1]}
-                onDrag={() => bringToFront(0)}>
-                <TaggDraggable
-                  taggedUser={taggList[0]}
-                  editingView={true}
-                  deleteFromList={() => console.log('Hello world')}
-                  setStart={setCurStart}
-                />
-              </Draggable>
-              <Draggable
-                x={imageDimensions[0] / 2 - curStart[0] / 2 + offset[0]}
-                y={offset[1] + imageDimensions[1] / 2 - curStart[1] / 2}
-                z={isOnTop(1) ? 99999999 : 0}
-                minX={offset[0]}
-                minY={offset[1]}
-                maxX={imageDimensions[0] + offset[0]}
-                maxY={imageDimensions[1] + offset[1]}
-                onDrag={() => bringToFront(1)}>
-                <TaggDraggable
-                  taggedUser={taggList[1]}
-                  editingView={true}
-                  deleteFromList={() => console.log('Hello world')}
-                  setStart={setCurStart}
-                />
-              </Draggable> */}
-            {/* </View> */}
+            <Draggable
+              // ivan
+              x={imageDimensions[0] / 2 - curStart[0] / 2 + offset[0]}
+              y={offset[1] + imageDimensions[1] / 2 - curStart[1] / 2}
+              z={isOnTop(0) ? 999 : 0}
+              minX={offset[0]}
+              minY={offset[1]}
+              maxX={imageDimensions[0] + offset[0]}
+              maxY={imageDimensions[1] + offset[1]}
+              onDragStart={() => bringToFront(0)}>
+              {/* > */}
+              <TaggDraggable
+                taggedUser={taggList[0]}
+                editingView={true}
+                deleteFromList={() => console.log('Hello world')}
+                setStart={setCurStart}
+              />
+            </Draggable>
+            <Draggable
+              x={imageDimensions[0] / 2 - curStart[0] / 2 + offset[0]}
+              y={offset[1] + imageDimensions[1] / 2 - curStart[1] / 2}
+              z={isOnTop(0) ? 999 : 0}
+              minX={offset[0]}
+              minY={offset[1]}
+              maxX={imageDimensions[0] + offset[0]}
+              maxY={imageDimensions[1] + offset[1]}
+              onDragStart={() => bringToFront(1)}>
+              {/* onPressIn={() => console.log('bleh')}> */}
+              <TaggDraggable
+                taggedUser={taggList[1]}
+                editingView={true}
+                deleteFromList={() => console.log('Hello world')}
+                setStart={setCurStart}
+              />
+            </Draggable>
           </View>
         </KeyboardAvoidingView>
       </TouchableWithoutFeedback>