merge

3 files changed, 63 insertions, 31 deletions

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>