Add proper bounds, need tip

1 files changed, 12 insertions, 26 deletions

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}
               />