1 files changed, 15 insertions, 38 deletions

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 8e972e07..56fe672e 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, useEffect, useRef, useState} from 'react';
+import React, {Fragment, useRef, useState} from 'react';
 import {
   Alert,
   Image,
@@ -14,11 +14,9 @@ import {
 import {MentionInput} from 'react-native-controlled-mentions';
 import {Button} from 'react-native-elements';
 import {useDispatch, useSelector} from 'react-redux';
-import {SearchBackground} from '../../components';
+import {MomentTags, 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';
@@ -54,11 +52,6 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
   const [loading, setLoading] = useState(false);
   const imageRef = useRef(null);
 
-  // state variables used to position draggables
-  const [offset, setOffset] = useState([0, 0]);
-  const [curStart, setCurStart] = useState([0, 0]);
-  const [imageDimensions, setImageDimensions] = useState([0, 0]);
-
   const [taggList, setTaggList] = useState([
     {
       first_name: 'Ivan',
@@ -94,16 +87,6 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
     });
   };
 
-  /**
-   * need a handler to take care of creating a tagged user object, append that object to the taggList state variable.
-   */
-  useEffect(() => {
-    imageRef.current.measure((fx, fy, width, height, px, py) => {
-      setOffset([px, py]);
-      setImageDimensions([width, height]);
-    });
-  }, []);
-
   const handleShare = async () => {
     setLoading(true);
     if (!image.filename) {
@@ -165,25 +148,19 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               onChange={setCaption}
               partTypes={mentionPartTypes('blue')}
             />
-            {taggList.map((user) => (
-              <Draggable
-                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={imageDimensions[0] + offset[0]}
-                maxY={imageDimensions[1] + offset[1]}
-                onDragStart={() => null}>
-                <TaggDraggable
-                  taggedUser={user}
-                  editingView={true}
-                  deleteFromList={() =>
-                    setTaggList(taggList.filter((u) => u.id !== user.id))
-                  }
-                  setStart={setCurStart}
-                />
-              </Draggable>
-            ))}
+            <MomentTags
+              editing={true}
+              tags={taggList.map((user) => ({
+                id: '',
+                x: 0,
+                y: 0,
+                user,
+              }))}
+              imageRef={imageRef}
+              deleteFromList={(user) =>
+                setTaggList(taggList.filter((u) => u.id !== user.id))
+              }
+            />
           </View>
         </KeyboardAvoidingView>
       </TouchableWithoutFeedback>