From 3a585b1bee36168fb2f33ae889bc5f207f25f793 Mon Sep 17 00:00:00 2001 From: George Rusu Date: Tue, 18 May 2021 14:13:40 -0700 Subject: add draggable component for tagging --- src/assets/images/tagg-rectangle.png | Bin 0 -> 521 bytes src/assets/images/tagg-tip.png | Bin 0 -> 233 bytes src/assets/images/tagg-x-button.png | Bin 0 -> 549 bytes 3 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/assets/images/tagg-rectangle.png create mode 100644 src/assets/images/tagg-tip.png create mode 100644 src/assets/images/tagg-x-button.png (limited to 'src/assets') diff --git a/src/assets/images/tagg-rectangle.png b/src/assets/images/tagg-rectangle.png new file mode 100644 index 00000000..24bfd67e Binary files /dev/null and b/src/assets/images/tagg-rectangle.png differ diff --git a/src/assets/images/tagg-tip.png b/src/assets/images/tagg-tip.png new file mode 100644 index 00000000..eb3c5bad Binary files /dev/null and b/src/assets/images/tagg-tip.png differ diff --git a/src/assets/images/tagg-x-button.png b/src/assets/images/tagg-x-button.png new file mode 100644 index 00000000..5ce3846d Binary files /dev/null and b/src/assets/images/tagg-x-button.png differ -- cgit v1.2.3-70-g09d2 From 7e93ac3f0b2b6b1509d95d020a3138968ac1cfc7 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Tue, 18 May 2021 16:21:21 -0700 Subject: Messing around with captionscreen --- package.json | 3 +- src/assets/icons/tag-icon.png | Bin 0 -> 1708 bytes src/components/taggs/TaggDraggable.tsx | 81 ++++++++++++++++++++------------- src/screens/profile/CaptionScreen.tsx | 13 ++++++ yarn.lock | 7 +++ 5 files changed, 72 insertions(+), 32 deletions(-) create mode 100644 src/assets/icons/tag-icon.png (limited to 'src/assets') diff --git a/package.json b/package.json index 16932be4..f917ab4e 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,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", @@ -102,4 +103,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 Binary files /dev/null and b/src/assets/icons/tag-icon.png differ 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 = (props) => { +const TaggDraggable: React.FC = ( + props: TaggDraggableProps, +) => { const [xCoord, setXcoord] = useState(SCREEN_HEIGHT / 2); const [yCoord, setYcoord] = useState(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 = (props) => { /** * This function returns x,y pairing for each tagg. */ - const getCoords = () => { - return [xCoord, yCoord]; - }; + // const getCoords = () => { + // return [xCoord, yCoord]; + // }; const renderTagg = () => { - - {/* user profile pic */} - - - {/* @username */} - - {taggedUser} - - {/* x button */} - - deleteFromList()}> - + return ( + + {/* user profile pic */} + + + {/* @username */} + + navigateToProfile( + state, + dispatch, + navigation, + ScreenType.Profile, + taggedUser, + ) + }> + {taggedUser} + + {/* x button */} + + deleteFromList()}> + + - - ; + + ); }; if (redirect) { if (draggable) { @@ -84,7 +102,7 @@ const TaggDraggable: React.FC = (props) => { {taggedUser} @@ -103,9 +121,10 @@ const TaggDraggable: React.FC = (props) => { ); } 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 = ({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 = ({route, navigation}) => { onChange={setCaption} partTypes={mentionPartTypes('blue')} /> + console.log('Hello world')} + /> diff --git a/yarn.lock b/yarn.lock index 29248e92..ca0cf2d4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6278,6 +6278,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" -- cgit v1.2.3-70-g09d2 From 9c61216d0a64a259fc6a0180627c322b4f26ffea Mon Sep 17 00:00:00 2001 From: George Rusu Date: Wed, 19 May 2021 12:44:43 -0700 Subject: Create basic component and styling --- src/assets/images/draggableX.png | Bin 0 -> 1780 bytes src/components/taggs/TaggDraggable.tsx | 143 +++++++++++++++------------------ src/screens/profile/CaptionScreen.tsx | 29 ++++--- 3 files changed, 84 insertions(+), 88 deletions(-) create mode 100644 src/assets/images/draggableX.png (limited to 'src/assets') diff --git a/src/assets/images/draggableX.png b/src/assets/images/draggableX.png new file mode 100644 index 00000000..b99c5dfc Binary files /dev/null and b/src/assets/images/draggableX.png differ 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 = ( deleteFromList, } = props; let uriTip = require('../../assets/images/tagg-tip.png'); - let uriX = require('../../assets/images/tagg-x-button.png'); - - // + 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 ( + - {/* user profile pic */} - + - {/* @username */} - - navigateToProfile( - state, - dispatch, - navigation, - ScreenType.Profile, - taggedUser, - ) - }> - {taggedUser.userId} - - {/* x button */} - - deleteFromList()}> + @{taggedUser.username} + - ); - }; - if (redirect) { - if (draggable) { - return ( - - {console.log("this guy's userid is: " + taggedUser.userId)} - { - setXcoord(gestureState.moveX); - setYcoord(gestureState.moveY); - }}> - - - {taggedUser.userId} - - deleteFromList()}> - - - - - - {taggedUser.userId} - - deleteFromList()}> - - - - - ); - } else { - return renderTagg(); - } - } else { - return renderTagg(); - } + + ); }; 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 = ({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 = ({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 = ({route, navigation}) => { onChange={setCaption} partTypes={mentionPartTypes('blue')} /> - console.log('Hello world')} - /> + + console.log('Hello world')} + /> + -- cgit v1.2.3-70-g09d2 From afc117ccaf5127c68e6dd3088bbf11238de615f3 Mon Sep 17 00:00:00 2001 From: George Rusu Date: Wed, 19 May 2021 18:06:53 -0700 Subject: Add proper bounds, need tip --- src/assets/images/Tagg-Triangle.png | Bin 0 -> 561 bytes src/components/taggs/TaggDraggable.tsx | 66 ++++++++++----------------------- src/screens/profile/CaptionScreen.tsx | 38 ++++++------------- 3 files changed, 32 insertions(+), 72 deletions(-) create mode 100644 src/assets/images/Tagg-Triangle.png (limited to 'src/assets') diff --git a/src/assets/images/Tagg-Triangle.png b/src/assets/images/Tagg-Triangle.png new file mode 100644 index 00000000..dfe97282 Binary files /dev/null and b/src/assets/images/Tagg-Triangle.png differ diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx index 06185bd1..6a93aee5 100644 --- a/src/components/taggs/TaggDraggable.tsx +++ b/src/components/taggs/TaggDraggable.tsx @@ -1,5 +1,5 @@ import {useNavigation} from '@react-navigation/native'; -import React, {useState, useEffect, useRef} from 'react'; +import React, {useEffect, useRef} from 'react'; import { Image, StyleSheet, @@ -8,21 +8,13 @@ import { TouchableWithoutFeedback, View, } from 'react-native'; -import {useDispatch, useStore} from 'react-redux'; -import {RootState} from '../../store/rootReducer'; import {ScreenType, UserType} from '../../types'; -import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; +import {normalize} from '../../utils'; import TaggAvatar from '../profile/TaggAvatar'; -import {RefObject} from 'react'; interface TaggDraggableProps { - draggable?: boolean; - minX: number; - minY: number; - maxX: number; - maxY: number; taggedUser: UserType; - redirect: boolean; + editingView: boolean; deleteFromList: () => void; setStart: Function; } @@ -30,11 +22,7 @@ interface TaggDraggableProps { const TaggDraggable: React.FC = ( props: TaggDraggableProps, ) => { - const [xCoord, setXcoord] = useState(SCREEN_HEIGHT / 2); - const [yCoord, setYcoord] = useState(SCREEN_WIDTH / 2); - const dispatch = useDispatch(); const navigation = useNavigation(); - const state: RootState = useStore().getState(); const gotoTaggedProfile = (userID: string) => { //Since the logged In User is navigating to own profile, useXId is not required @@ -44,18 +32,7 @@ const TaggDraggable: React.FC = ( }); }; - const { - draggable, - minX, - minY, - maxX, - maxY, - taggedUser, - redirect, - deleteFromList, - setStart, - } = props; - let uriTip = require('../../assets/images/tagg-tip.png'); + const {taggedUser, editingView, deleteFromList, setStart} = props; let uriX = require('../../assets/images/draggableX.png'); const draggableRef = useRef(null); @@ -74,12 +51,10 @@ const TaggDraggable: React.FC = ( return ( - console.log(event.nativeEvent.layout)}> + gotoTaggedProfile(taggedUser.userId)} - disabled={redirect} + disabled={editingView} style={[styles.button]} ref={draggableRef}> = ( editable={false} userXId={taggedUser.userId} /> - @{taggedUser.username} - {redirect && ( + + @{taggedUser.username} + + {editingView && ( deleteFromList()}> @@ -121,21 +98,22 @@ const styles = StyleSheet.create({ 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: '1.5%', + paddingHorizontal: '1%', + }, + buttonTitleX: { + color: 'white', + fontSize: normalize(11), + fontWeight: '700', + lineHeight: normalize(13.13), + letterSpacing: normalize(0.6), + paddingHorizontal: '1%', + marginRight: '-10%', }, avatar: { marginLeft: '4%', @@ -151,9 +129,6 @@ const styles = StyleSheet.create({ borderWidth: 2, borderRadius: 2, }, - imageTip: { - backgroundColor: 'black', - }, imageX: { width: normalize(15), height: normalize(15), @@ -163,7 +138,6 @@ const styles = StyleSheet.create({ color: 'white', }, button: { - paddingLeft: 1, paddingTop: 3, paddingBottom: 3, // justifyContent: 'space-evenly', diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index f72b1165..f77a2d23 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -14,9 +14,12 @@ import { import {MentionInput} from 'react-native-controlled-mentions'; import {Button} from 'react-native-elements'; import {useDispatch, useSelector} from 'react-redux'; +import {UserType} from 'src/types'; 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'; @@ -26,18 +29,9 @@ import { updateProfileCompletionStage, } from '../../store/actions'; import {RootState} from '../../store/rootReducer'; -import { - normalize, - SCREEN_HEIGHT, - SCREEN_WIDTH, - StatusBarHeight, -} from '../../utils'; +import {SCREEN_WIDTH, StatusBarHeight} from '../../utils'; import {mentionPartTypes} from '../../utils/comments'; -import TaggDraggable from '../../components/taggs/TaggDraggable'; -import Draggable from '../../components/common/Draggable'; -import {UserType} from 'src/types'; - /** * Upload Screen to allow users to upload posts to Tagg */ @@ -59,7 +53,6 @@ interface momentTag { const CaptionScreen: React.FC = ({route, navigation}) => { const {title, image, screenType} = route.params; - const {user} = useSelector((state: RootState) => state.user); const { user: {userId}, } = useSelector((state: RootState) => state.user); @@ -70,14 +63,12 @@ const CaptionScreen: React.FC = ({route, navigation}) => { // idea is that each element in the list const [taggList, setTaggList] = useState([]); const imageRef = useRef(null); - const [tagInitCoords, setTagInitCoords] = useState([]); const [offset, setOffset] = useState([0, 0]); - const [curStart, setCurStart] = useState([0, 0]); - const [dim, setDim] = useState([0, 0]); + const [imageDimensions, setImageDimensions] = useState([0, 0]); + // created a test user - BUG - failed to register a profile visit - const testUser: UserType = { - // userId: '1216bbb4-f778-4ef3-b7f8-a55bde1ab1a1', userId: 'ID-1234-567', username: 'dragonofthewest', }; @@ -104,7 +95,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { console.log('X offset to page: ' + px); console.log('Y offset to page: ' + py); setOffset([px, py]); - setDim([width, height]); + setImageDimensions([width, height]); }); }, []); @@ -170,20 +161,15 @@ const CaptionScreen: React.FC = ({route, navigation}) => { partTypes={mentionPartTypes('blue')} /> + maxX={imageDimensions[0] + offset[0] + curStart[0] / 3} + maxY={imageDimensions[1] + offset[1] + curStart[1]}> console.log('Hello world')} setStart={setCurStart} /> -- cgit v1.2.3-70-g09d2