Add proper bounds, need tip

1 files changed, 20 insertions, 46 deletions

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',