Find true center, add callback functionality

2 files changed, 43 insertions, 20 deletions

diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx
index afd2a212..bd0d01bd 100644
--- a/src/components/taggs/TaggDraggable.tsx
+++ b/src/components/taggs/TaggDraggable.tsx
@@ -8,20 +8,11 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
-import Draggable from 'react-native-draggable';
+import {useDispatch, useStore} from 'react-redux';
+import {RootState} from '../../store/rootReducer';
 import {ScreenType, UserType} from '../../types';
-import {
-  normalize,
-  SCREEN_HEIGHT,
-  SCREEN_WIDTH,
-  navigateToProfile,
-} from '../../utils';
+import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import TaggAvatar from '../profile/TaggAvatar';
-import {RootState} from '../../store/rootReducer';
-import {useStore, useDispatch} from 'react-redux';
-import {Button} from 'react-native-share';
-import {userBlockFetched} from 'src/store/reducers';
-import {color} from 'react-native-reanimated';
 
 interface TaggDraggableProps {
   draggable?: boolean;
@@ -31,7 +22,7 @@ interface TaggDraggableProps {
   maxY: number;
   taggedUser: UserType;
   redirect: boolean;
-  deleteFromList: Function;
+  deleteFromList: () => void;
 }
 
 const TaggDraggable: React.FC<TaggDraggableProps> = (
@@ -66,7 +57,7 @@ const TaggDraggable: React.FC<TaggDraggableProps> = (
             userXId={undefined}
           />
           <Text style={styles.buttonTitle}>@{taggedUser.username}</Text>
-          <TouchableOpacity disabled={false}>
+          <TouchableOpacity disabled={false} onPressIn={deleteFromList()}>
             <Image style={styles.imageX} source={uriX} />
           </TouchableOpacity>
         </TouchableOpacity>
@@ -108,9 +99,11 @@ const styles = StyleSheet.create({
     fontWeight: '700',
     lineHeight: normalize(13.13),
     letterSpacing: normalize(0.6),
-    paddingHorizontal: '3.8%',
+    paddingHorizontal: '1.5%',
   },
   avatar: {
+    marginLeft: '4%',
+    marginRight: '-1%',
     flex: 0.45,
     aspectRatio: 1,
   },
@@ -128,6 +121,7 @@ const styles = StyleSheet.create({
   imageX: {
     width: normalize(15),
     height: normalize(15),
+    marginRight: '-15%',
   },
   pendingButtonTitle: {
     color: 'white',
@@ -136,14 +130,13 @@ const styles = StyleSheet.create({
     paddingLeft: 1,
     paddingTop: 3,
     paddingBottom: 3,
-    justifyContent: 'space-evenly',
+    // justifyContent: 'space-evenly',
     alignSelf: 'flex-start',
     alignItems: 'center',
     borderWidth: 1.5,
     borderRadius: 20,
     flexDirection: 'row',
     flexWrap: 'wrap',
-    borderColor: 'black',
     backgroundColor: 'rgba(0, 0, 0, 0.8)',
   },
 });
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index bfe9a0e4..5adb27cb 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, useState} from 'react';
+import React, {Fragment, useEffect, useRef, useState} from 'react';
 import {
   Alert,
   Image,
@@ -26,7 +26,12 @@ import {
   updateProfileCompletionStage,
 } from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
-import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
+import {
+  normalize,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+  StatusBarHeight,
+} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
 
 import TaggDraggable from '../../components/taggs/TaggDraggable';
@@ -44,6 +49,12 @@ interface CaptionScreenProps {
   route: CaptionScreenRouteProp;
   navigation: CaptionScreenNavigationProp;
 }
+interface momentTag {
+  userID: string;
+  username: string;
+  xLocation: number;
+  yLocation: number;
+}
 
 const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
   const {title, image, screenType} = route.params;
@@ -54,7 +65,12 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
   const dispatch = useDispatch();
   const [caption, setCaption] = useState('');
   const [loading, setLoading] = useState(false);
+  // created a state variable to keep track of every tag
+  // idea is that each element in the list
   const [taggList, setTaggList] = useState([]);
+  const draggableRef = useRef(null);
+  const imageRef = useRef(null);
+  const [tagInitCoords, setTagInitCoords] = useState([]);
 
   const navigateToProfile = () => {
     //Since the logged In User is navigating to own profile, useXId is not required
@@ -69,6 +85,17 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
    * @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);
+    });
+  }, []);
+
   const handleShare = async () => {
     setLoading(true);
     if (!image.filename) {
@@ -115,7 +142,9 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               />
             </View>
             <CaptionScreenHeader style={styles.header} {...{title: title}} />
+            {/* this is the image we want to center our tags' initial location within */}
             <Image
+              ref={imageRef}
               style={styles.image}
               source={{uri: image.path}}
               resizeMode={'cover'}
@@ -128,8 +157,9 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               onChange={setCaption}
               partTypes={mentionPartTypes('blue')}
             />
-            <Draggable x={50} y={50}>
+            <Draggable x={207} y={(414 + 153) / 2}>
               <TaggDraggable
+                ref={draggableRef}
                 draggable={true}
                 minX={0}
                 minY={0}