Cleaned up code, Add logic for removing tag

1 files changed, 63 insertions, 72 deletions

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index ec55e43a..68956407 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, useRef, useState} from 'react';
+import React, {Fragment, useEffect, useRef, useState} from 'react';
 import {
   Alert,
   Image,
@@ -8,7 +8,6 @@ import {
   KeyboardAvoidingView,
   Platform,
   StyleSheet,
-  // Text,
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
@@ -17,7 +16,9 @@ import {Button} from 'react-native-elements';
 import {useDispatch, useSelector} from 'react-redux';
 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';
@@ -57,38 +58,45 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
   const dispatch = useDispatch();
   const [caption, setCaption] = useState('');
   const [loading, setLoading] = useState(false);
-  // const [isTop, setIsTop] = useState(false);
   const imageRef = useRef(null);
 
   // const zIndex = [0, 999];
   // 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 [offset, setOffset] = useState([0, 0]);
+  const [curStart, setCurStart] = useState([0, 0]);
+  const [imageDimensions, setImageDimensions] = useState([0, 0]);
 
   // state var used to keep track of draggable z ordering
   // const [layerOrder, setLayerOrder] = useState<string[]>([]);
 
   // created a state variable to keep track of every tag
   // idea is that each element in the list
-  // const [taggList, setTaggList] = useState([
-  //   {
-  //     first_name: 'Ivan',
-  //     id: 'cee45bf8-7f3d-43c8-99bb-ec04908efe58',
-  //     last_name: 'Chen',
-  //     thumbnail_url:
-  //       'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-cee45bf8-7f3d-43c8-99bb-ec04908efe58-thumbnail.jpg',
-  //     username: 'ivan.tagg',
-  //   },
-  //   {
-  //     first_name: 'Ankit',
-  //     id: '3bcf6947-bee6-46b0-ad02-6f4d25eaeac3',
-  //     last_name: 'Thanekar',
-  //     thumbnail_url:
-  //       'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-3bcf6947-bee6-46b0-ad02-6f4d25eaeac3-thumbnail.jpg',
-  //     username: 'ankit.thanekar',
-  //   },
-  // ]);
+  const [taggList, setTaggList] = useState([
+    {
+      first_name: 'Ivan',
+      id: 'cee45bf8-7f3d-43c8-99bb-ec04908efe58',
+      last_name: 'Chen',
+      thumbnail_url:
+        'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-cee45bf8-7f3d-43c8-99bb-ec04908efe58-thumbnail.jpg',
+      username: 'ivan.tagg',
+    },
+    {
+      first_name: 'Ankit',
+      id: '3bcf6947-bee6-46b0-ad02-6f4d25eaeac3',
+      last_name: 'Thanekar',
+      thumbnail_url:
+        'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-3bcf6947-bee6-46b0-ad02-6f4d25eaeac3-thumbnail.jpg',
+      username: 'ankit.thanekar',
+    },
+    {
+      first_name: 'Ankit',
+      id: '3bcf6947-bee6-46b0-ad02-6f4d25eaeac3',
+      last_name: 'Thanekar',
+      thumbnail_url:
+        'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-3bcf6947-bee6-46b0-ad02-6f4d25eaeac3-thumbnail.jpg',
+      username: 'ankit.thanekar',
+    },
+  ]);
 
   const navigateToProfile = () => {
     //Since the logged In User is navigating to own profile, useXId is not required
@@ -125,21 +133,19 @@ 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.
-   * @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);
-  //     setOffset([px, py]);
-  //     setImageDimensions([width, height]);
-  //   });
-  // }, []);
+  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);
+      setOffset([px, py]);
+      setImageDimensions([width, height]);
+    });
+  }, []);
 
   const handleShare = async () => {
     setLoading(true);
@@ -202,40 +208,25 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               onChange={setCaption}
               partTypes={mentionPartTypes('blue')}
             />
-            {/* Draggables - Commented out for now */}
-            {/* <Draggable
-              // ivan
-              x={imageDimensions[0] / 2 - curStart[0] / 2 + offset[0]}
-              y={offset[1] + imageDimensions[1] / 2 - curStart[1] / 2}
-              z={999}
-              minX={offset[0]}
-              minY={offset[1]}
-              maxX={imageDimensions[0] + offset[0]}
-              maxY={imageDimensions[1] + offset[1]}
-              onDragStart={() => bringToFront(0)}>
-              <TaggDraggable
-                taggedUser={taggList[0]}
-                editingView={true}
-                deleteFromList={() => console.log('Hello world')}
-                setStart={setCurStart}
-              />
-            </Draggable>
-            <Draggable
-              x={imageDimensions[0] / 2 - curStart[0] / 2 + offset[0]}
-              y={offset[1] + imageDimensions[1] / 2 - curStart[1] / 2}
-              z={0}
-              minX={offset[0]}
-              minY={offset[1]}
-              maxX={imageDimensions[0] + offset[0]}
-              maxY={imageDimensions[1] + offset[1]}
-              onDragStart={() => bringToFront(1)}>
-              <TaggDraggable
-                taggedUser={taggList[1]}
-                editingView={true}
-                deleteFromList={() => console.log('Hello world')}
-                setStart={setCurStart}
-              />
-            </Draggable> */}
+            {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>
+            ))}
           </View>
         </KeyboardAvoidingView>
       </TouchableWithoutFeedback>