diff options
| -rw-r--r-- | package.json | 3 | ||||
| -rw-r--r-- | src/assets/icons/tag-icon.png | bin | 0 -> 1708 bytes | |||
| -rw-r--r-- | src/components/taggs/TaggDraggable.tsx | 81 | ||||
| -rw-r--r-- | src/screens/profile/CaptionScreen.tsx | 13 | ||||
| -rw-r--r-- | yarn.lock | 7 |
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 Binary files differnew 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> @@ -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" |
