Add proper bounds, need tip

3 files changed, 32 insertions, 72 deletions

diff --git a/src/assets/images/Tagg-Triangle.png b/src/assets/images/Tagg-Triangle.png
new file mode 100644
index 00000000..dfe97282
--- /dev/null
+++ b/src/assets/images/Tagg-Triangle.png
diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx
index 06185bd1..6a93aee5 100644
--- a/src/components/taggs/TaggDraggable.tsx
+++ b/src/components/taggs/TaggDraggable.tsx
@@ -1,5 +1,5 @@
 import {useNavigation} from '@react-navigation/native';
-import React, {useState, useEffect, useRef} from 'react';
+import React, {useEffect, useRef} from 'react';
 import {
   Image,
   StyleSheet,
@@ -8,21 +8,13 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
-import {useDispatch, useStore} from 'react-redux';
-import {RootState} from '../../store/rootReducer';
 import {ScreenType, UserType} from '../../types';
-import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {normalize} from '../../utils';
 import TaggAvatar from '../profile/TaggAvatar';
-import {RefObject} from 'react';
 
 interface TaggDraggableProps {
-  draggable?: boolean;
-  minX: number;
-  minY: number;
-  maxX: number;
-  maxY: number;
   taggedUser: UserType;
-  redirect: boolean;
+  editingView: boolean;
   deleteFromList: () => void;
   setStart: Function;
 }
@@ -30,11 +22,7 @@ interface TaggDraggableProps {
 const TaggDraggable: React.FC<TaggDraggableProps> = (
   props: TaggDraggableProps,
 ) => {
-  const [xCoord, setXcoord] = useState<number>(SCREEN_HEIGHT / 2);
-  const [yCoord, setYcoord] = useState<number>(SCREEN_WIDTH / 2);
-  const dispatch = useDispatch();
   const navigation = useNavigation();
-  const state: RootState = useStore().getState();
 
   const gotoTaggedProfile = (userID: string) => {
     //Since the logged In User is navigating to own profile, useXId is not required
@@ -44,18 +32,7 @@ const TaggDraggable: React.FC<TaggDraggableProps> = (
     });
   };
 
-  const {
-    draggable,
-    minX,
-    minY,
-    maxX,
-    maxY,
-    taggedUser,
-    redirect,
-    deleteFromList,
-    setStart,
-  } = props;
-  let uriTip = require('../../assets/images/tagg-tip.png');
+  const {taggedUser, editingView, deleteFromList, setStart} = props;
   let uriX = require('../../assets/images/draggableX.png');
 
   const draggableRef = useRef(null);
@@ -74,12 +51,10 @@ const TaggDraggable: React.FC<TaggDraggableProps> = (
 
   return (
     <TouchableWithoutFeedback>
-      <View
-        style={styles.container}
-        onLayout={(event) => console.log(event.nativeEvent.layout)}>
+      <View style={styles.container}>
         <TouchableOpacity
           onPressIn={() => gotoTaggedProfile(taggedUser.userId)}
-          disabled={redirect}
+          disabled={editingView}
           style={[styles.button]}
           ref={draggableRef}>
           <TaggAvatar
@@ -88,8 +63,10 @@ const TaggDraggable: React.FC<TaggDraggableProps> = (
             editable={false}
             userXId={taggedUser.userId}
           />
-          <Text style={styles.buttonTitle}>@{taggedUser.username}</Text>
-          {redirect && (
+          <Text style={editingView ? styles.buttonTitle : styles.buttonTitleX}>
+            @{taggedUser.username}
+          </Text>
+          {editingView && (
             <TouchableOpacity
               disabled={false}
               onPressIn={() => deleteFromList()}>
@@ -121,21 +98,22 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     fontSize: normalize(14),
   },
-  rectangle: {
-    width: 100 * 2,
-    height: 100,
-    borderRadius: 25,
-    paddingLeft: 10,
-    paddingBottom: 0,
-    paddingTop: 10,
-  },
   buttonTitle: {
     color: 'white',
     fontSize: normalize(11),
     fontWeight: '700',
     lineHeight: normalize(13.13),
     letterSpacing: normalize(0.6),
-    paddingHorizontal: '1.5%',
+    paddingHorizontal: '1%',
+  },
+  buttonTitleX: {
+    color: 'white',
+    fontSize: normalize(11),
+    fontWeight: '700',
+    lineHeight: normalize(13.13),
+    letterSpacing: normalize(0.6),
+    paddingHorizontal: '1%',
+    marginRight: '-10%',
   },
   avatar: {
     marginLeft: '4%',
@@ -151,9 +129,6 @@ const styles = StyleSheet.create({
     borderWidth: 2,
     borderRadius: 2,
   },
-  imageTip: {
-    backgroundColor: 'black',
-  },
   imageX: {
     width: normalize(15),
     height: normalize(15),
@@ -163,7 +138,6 @@ const styles = StyleSheet.create({
     color: 'white',
   },
   button: {
-    paddingLeft: 1,
     paddingTop: 3,
     paddingBottom: 3,
     // justifyContent: 'space-evenly',
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index f72b1165..f77a2d23 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -14,9 +14,12 @@ import {
 import {MentionInput} from 'react-native-controlled-mentions';
 import {Button} from 'react-native-elements';
 import {useDispatch, useSelector} from 'react-redux';
+import {UserType} from 'src/types';
 import {SearchBackground} from '../../components';
 import {CaptionScreenHeader} from '../../components/';
+import Draggable from '../../components/common/Draggable';
 import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator';
+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';
@@ -26,18 +29,9 @@ import {
   updateProfileCompletionStage,
 } from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
-import {
-  normalize,
-  SCREEN_HEIGHT,
-  SCREEN_WIDTH,
-  StatusBarHeight,
-} from '../../utils';
+import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
 
-import TaggDraggable from '../../components/taggs/TaggDraggable';
-import Draggable from '../../components/common/Draggable';
-import {UserType} from 'src/types';
-
 /**
  * Upload Screen to allow users to upload posts to Tagg
  */
@@ -59,7 +53,6 @@ interface momentTag {
 
 const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
   const {title, image, screenType} = route.params;
-  const {user} = useSelector((state: RootState) => state.user);
   const {
     user: {userId},
   } = useSelector((state: RootState) => state.user);
@@ -70,14 +63,12 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
   // idea is that each element in the list
   const [taggList, setTaggList] = useState([]);
   const imageRef = useRef(null);
-  const [tagInitCoords, setTagInitCoords] = useState([]);
   const [offset, setOffset] = useState([0, 0]);
-
   const [curStart, setCurStart] = useState([0, 0]);
-  const [dim, setDim] = useState([0, 0]);
 
+  const [imageDimensions, setImageDimensions] = useState([0, 0]);
+  // created a test user - BUG - failed to register a profile visit -
   const testUser: UserType = {
-    // userId: '1216bbb4-f778-4ef3-b7f8-a55bde1ab1a1',
     userId: 'ID-1234-567',
     username: 'dragonofthewest',
   };
@@ -104,7 +95,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
       console.log('X offset to page: ' + px);
       console.log('Y offset to page: ' + py);
       setOffset([px, py]);
-      setDim([width, height]);
+      setImageDimensions([width, height]);
     });
   }, []);
 
@@ -170,20 +161,15 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               partTypes={mentionPartTypes('blue')}
             />
             <Draggable
-              x={dim[0] / 2 - curStart[0] / 2 + offset[0]}
-              y={offset[1] + dim[1] / 2 - curStart[1] / 2}
+              x={imageDimensions[0] / 2 - curStart[0] / 2 + offset[0]}
+              y={offset[1] + imageDimensions[1] / 2 - curStart[1] / 2}
               minX={offset[0]}
               minY={offset[1]}
-              maxX={dim[0] + offset[0] + curStart[0] / 2}
-              maxY={dim[1] + offset[1] + curStart[1]}>
+              maxX={imageDimensions[0] + offset[0] + curStart[0] / 3}
+              maxY={imageDimensions[1] + offset[1] + curStart[1]}>
               <TaggDraggable
-                draggable={true}
-                minX={0}
-                minY={0}
-                maxX={50}
-                maxY={50}
                 taggedUser={testUser}
-                redirect={false}
+                editingView={true}
                 deleteFromList={() => console.log('Hello world')}
                 setStart={setCurStart}
               />