Create basic component and styling

3 files changed, 84 insertions, 88 deletions

diff --git a/src/assets/images/draggableX.png b/src/assets/images/draggableX.png
new file mode 100644
index 00000000..b99c5dfc
--- /dev/null
+++ b/src/assets/images/draggableX.png
diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx
index 2c7ae2ce..afd2a212 100644
--- a/src/components/taggs/TaggDraggable.tsx
+++ b/src/components/taggs/TaggDraggable.tsx
@@ -1,6 +1,13 @@
 import {useNavigation} from '@react-navigation/native';
 import React, {useState} from 'react';
-import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {
+  Image,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
 import Draggable from 'react-native-draggable';
 import {ScreenType, UserType} from '../../types';
 import {
@@ -12,6 +19,9 @@ import {
 import TaggAvatar from '../profile/TaggAvatar';
 import {RootState} from '../../store/rootReducer';
 import {useStore, useDispatch} from 'react-redux';
+import {Button} from 'react-native-share';
+import {userBlockFetched} from 'src/store/reducers';
+import {color} from 'react-native-reanimated';
 
 interface TaggDraggableProps {
   draggable?: boolean;
@@ -43,94 +53,31 @@ const TaggDraggable: React.FC<TaggDraggableProps> = (
     deleteFromList,
   } = props;
   let uriTip = require('../../assets/images/tagg-tip.png');
-  let uriX = require('../../assets/images/tagg-x-button.png');
-
-  // <Image style={styles.image} source={uri} />
+  let uriX = require('../../assets/images/draggableX.png');
 
-  /**
-   * This function returns x,y pairing for each tagg.
-   */
-  // const getCoords = () => {
-  //   return [xCoord, yCoord];
-  // };
-  const renderTagg = () => {
-    return (
+  return (
+    <TouchableWithoutFeedback>
       <View style={styles.container}>
-        {/* user profile pic */}
-        <TouchableOpacity style={styles.imageRectangle}>
+        <TouchableOpacity disabled={true} style={[styles.button]}>
           <TaggAvatar
+            style={styles.avatar}
             screenType={ScreenType.Profile}
             editable={false}
             userXId={undefined}
           />
-          {/* @username  */}
-          <Text
-            onPress={() =>
-              navigateToProfile(
-                state,
-                dispatch,
-                navigation,
-                ScreenType.Profile,
-                taggedUser,
-              )
-            }>
-            {taggedUser.userId}
-          </Text>
-          {/* x button */}
-          <Image style={styles.imageTip} source={uriTip} />
-          <TouchableOpacity onPress={() => deleteFromList()}>
+          <Text style={styles.buttonTitle}>@{taggedUser.username}</Text>
+          <TouchableOpacity disabled={false}>
             <Image style={styles.imageX} source={uriX} />
           </TouchableOpacity>
         </TouchableOpacity>
       </View>
-    );
-  };
-  if (redirect) {
-    if (draggable) {
-      return (
-        <View style={styles.container}>
-          {console.log("this guy's userid is: " + taggedUser.userId)}
-          <Draggable
-            minX={minX}
-            minY={minY}
-            maxX={maxX}
-            maxY={maxY}
-            onDragRelease={(_, gestureState) => {
-              setXcoord(gestureState.moveX);
-              setYcoord(gestureState.moveY);
-            }}>
-            <TouchableOpacity style={styles.imageRectangle}>
-              <TaggAvatar
-                screenType={ScreenType.Profile}
-                editable={false}
-                userXId={undefined}
-              />
-              <Text>{taggedUser.userId}</Text>
-              <Image style={styles.imageTip} source={uriTip} />
-              <TouchableOpacity onPress={() => deleteFromList()}>
-                <Image style={styles.imageX} source={uriX} />
-              </TouchableOpacity>
-            </TouchableOpacity>
-          </Draggable>
-          <TouchableOpacity style={styles.imageRectangle}>
-            <Text>{taggedUser.userId}</Text>
-            <Image style={styles.imageTip} source={uriTip} />
-            <TouchableOpacity onPress={() => deleteFromList()}>
-              <Image style={styles.imageX} source={uriX} />
-            </TouchableOpacity>
-          </TouchableOpacity>
-        </View>
-      );
-    } else {
-      return renderTagg();
-    }
-  } else {
-    return renderTagg();
-  }
+    </TouchableWithoutFeedback>
+  );
 };
 
 const styles = StyleSheet.create({
   container: {
+    color: 'red',
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
@@ -138,16 +85,39 @@ const styles = StyleSheet.create({
     marginBottom: '5%',
   },
   bodyContainer: {
+    color: 'blue',
     flexDirection: 'column',
     height: normalize(42),
     justifyContent: 'space-around',
   },
+  label: {
+    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: '3.8%',
+  },
+  avatar: {
+    flex: 0.45,
+    aspectRatio: 1,
+  },
   inviteButton: {
     backgroundColor: 'transparent',
   },
   imageRectangle: {
-    width: '100%',
-    height: '100%',
     backgroundColor: 'black',
     borderWidth: 2,
     borderRadius: 2,
@@ -156,8 +126,25 @@ const styles = StyleSheet.create({
     backgroundColor: 'black',
   },
   imageX: {
-    width: '100%',
-    height: '100%',
+    width: normalize(15),
+    height: normalize(15),
+  },
+  pendingButtonTitle: {
+    color: 'white',
+  },
+  button: {
+    paddingLeft: 1,
+    paddingTop: 3,
+    paddingBottom: 3,
+    justifyContent: 'space-evenly',
+    alignSelf: 'flex-start',
+    alignItems: 'center',
+    borderWidth: 1.5,
+    borderRadius: 20,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    borderColor: 'black',
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
   },
 });
 
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 3fd2e7ef..bfe9a0e4 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -30,6 +30,7 @@ import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
 
 import TaggDraggable from '../../components/taggs/TaggDraggable';
+import Draggable from 'react-native-draggable';
 
 /**
  * Upload Screen to allow users to upload posts to Tagg
@@ -53,6 +54,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
   const dispatch = useDispatch();
   const [caption, setCaption] = useState('');
   const [loading, setLoading] = useState(false);
+  const [taggList, setTaggList] = useState([]);
 
   const navigateToProfile = () => {
     //Since the logged In User is navigating to own profile, useXId is not required
@@ -62,6 +64,11 @@ 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
+   */
+
   const handleShare = async () => {
     setLoading(true);
     if (!image.filename) {
@@ -121,16 +128,18 @@ 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')}
-            />
+            <Draggable x={50} y={50}>
+              <TaggDraggable
+                draggable={true}
+                minX={0}
+                minY={0}
+                maxX={50}
+                maxY={50}
+                taggedUser={user}
+                redirect={true}
+                deleteFromList={() => console.log('Hello world')}
+              />
+            </Draggable>
           </View>
         </KeyboardAvoidingView>
       </TouchableWithoutFeedback>