merge

5 files changed, 72 insertions, 32 deletions

diff --git a/package.json b/package.json
index ea8c946a..14ed4f37 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "react-native-date-picker": "^3.2.5",
     "react-native-device-info": "^7.3.1",
     "react-native-document-picker": "^5.0.3",
+    "react-native-draggable": "^3.3.0",
     "react-native-elements": "^2.3.2",
     "react-native-fs": "^2.16.6",
     "react-native-gesture-handler": "^1.10.3",
@@ -105,4 +106,4 @@
       "./node_modules/react-native-gesture-handler/jestSetup.js"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/icons/tag-icon.png b/src/assets/icons/tag-icon.png
new file mode 100644
index 00000000..9111b036
--- /dev/null
+++ b/src/assets/icons/tag-icon.png
diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx
index 0990d924..a0872c2d 100644
--- a/src/components/taggs/TaggDraggable.tsx
+++ b/src/components/taggs/TaggDraggable.tsx
@@ -2,9 +2,16 @@ import {useNavigation} from '@react-navigation/native';
 import React, {useState} from 'react';
 import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import Draggable from 'react-native-draggable';
-import {ScreenType} from 'src/types';
-import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {ScreenType, UserType} from '../../types';
+import {
+  normalize,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+  navigateToProfile,
+} from '../../utils';
 import TaggAvatar from '../profile/TaggAvatar';
+import {RootState} from '../../store/rootReducer';
+import {useStore, useDispatch} from 'react-redux';
 
 interface TaggDraggableProps {
   draggable?: boolean;
@@ -12,15 +19,19 @@ interface TaggDraggableProps {
   minY: number;
   maxX: number;
   maxY: number;
-  taggedUser: string;
+  taggedUser: UserType;
   redirect: boolean;
   deleteFromList: Function;
 }
 
-const TaggDraggable: React.FC<TaggDraggableProps> = (props) => {
+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 {
     draggable,
     minX,
@@ -39,33 +50,40 @@ const TaggDraggable: React.FC<TaggDraggableProps> = (props) => {
   /**
    * This function returns x,y pairing for each tagg.
    */
-  const getCoords = () => {
-    return [xCoord, yCoord];
-  };
+  // const getCoords = () => {
+  //   return [xCoord, yCoord];
+  // };
   const renderTagg = () => {
-    <View style={styles.container}>
-      {/* user profile pic */}
-      <TouchableOpacity style={styles.imageRectangle}>
-        <TaggAvatar
-          screenType={ScreenType.Tagging}
-          editable={false}
-          userXId={taggedUser}
-        />
-        {/* @username  */}
-        <Text
-          onPress={navigation.push('Profile', {
-            userXId: taggedUser,
-            screenType: ScreenType.Profile,
-          })}>
-          {taggedUser}
-        </Text>
-        {/* x button */}
-        <Image style={styles.imageTip} source={uriTip} />
-        <TouchableOpacity onPress={() => deleteFromList()}>
-          <Image style={styles.imageX} source={uriX} />
+    return (
+      <View style={styles.container}>
+        {/* user profile pic */}
+        <TouchableOpacity style={styles.imageRectangle}>
+          <TaggAvatar
+            screenType={ScreenType.Tagging}
+            editable={false}
+            userXId={taggedUser.userId}
+          />
+          {/* @username  */}
+          <Text
+            onPress={() =>
+              navigateToProfile(
+                state,
+                dispatch,
+                navigation,
+                ScreenType.Profile,
+                taggedUser,
+              )
+            }>
+            {taggedUser}
+          </Text>
+          {/* x button */}
+          <Image style={styles.imageTip} source={uriTip} />
+          <TouchableOpacity onPress={() => deleteFromList()}>
+            <Image style={styles.imageX} source={uriX} />
+          </TouchableOpacity>
         </TouchableOpacity>
-      </TouchableOpacity>
-    </View>;
+      </View>
+    );
   };
   if (redirect) {
     if (draggable) {
@@ -84,7 +102,7 @@ const TaggDraggable: React.FC<TaggDraggableProps> = (props) => {
               <TaggAvatar
                 screenType={ScreenType.Tagging}
                 editable={false}
-                userXId={taggedUser}
+                userXId={taggedUser.userId}
               />
               <Text>{taggedUser}</Text>
               <Image style={styles.imageTip} source={uriTip} />
@@ -103,9 +121,10 @@ const TaggDraggable: React.FC<TaggDraggableProps> = (props) => {
         </View>
       );
     } else {
-      renderTagg;
+      return renderTagg();
     }
   } else {
+    return renderTagg();
   }
 };
 
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index a41abba6..50b60024 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -29,6 +29,8 @@ import {RootState} from '../../store/rootReducer';
 import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
 
+import TaggDraggable from '../../components/taggs/TaggDraggable';
+
 /**
  * Upload Screen to allow users to upload posts to Tagg
  */
@@ -47,6 +49,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
   const {
     user: {userId},
   } = useSelector((state: RootState) => state.user);
+  console.log(userId);
   const dispatch = useDispatch();
   const [caption, setCaption] = useState('');
   const [loading, setLoading] = useState(false);
@@ -118,6 +121,16 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               onChange={setCaption}
               partTypes={mentionPartTypes('blue')}
             />
+            <TaggDraggable
+              draggable={true}
+              minX={0}
+              minY={0}
+              maxX={50}
+              maxY={50}
+              taggedUser={user}
+              redirect={true}
+              deleteFromList={() => console.log('Hello world')}
+            />
           </View>
         </KeyboardAvoidingView>
       </TouchableWithoutFeedback>
diff --git a/yarn.lock b/yarn.lock
index 1e1b3371..33c372fb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6382,6 +6382,13 @@ react-native-document-picker@^5.0.3:
   resolved "https://registry.yarnpkg.com/react-native-document-picker/-/react-native-document-picker-5.0.3.tgz#f31f18ee7a90fb8ea94f301d7a5fdb069322dcd8"
   integrity sha512-OLTUB9SvY2J6bYZ6F/b4FKwDfEimP+sRsEP3OSp1oosYD4+G9C5J3CKiJ69B7CCXmA89Bi/QBr5j2lW9y9rWlQ==
 
+react-native-draggable@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/react-native-draggable/-/react-native-draggable-3.3.0.tgz#6f07c3ad4cff018bf0455fc48dbfe5f0af9b72cd"
+  integrity sha512-aU20CaKBmzXrwE9eTJZ+GDOr52mXLchg5Vydbx5rz8nYXlN+ppHIoTPgyXduyWNwpZ/DR6tyFtMwdgUHpuN6oA==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-native-elements@^2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/react-native-elements/-/react-native-elements-2.3.2.tgz#f6b974127a3484bb46ebd98fbc012fb2208decd7"