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 src/components/taggs/TaggDraggable.tsx | 144 +++++++++++++++++++++++++++++++++ src/types/types.ts | 1 + 5 files changed, 145 insertions(+) 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 create mode 100644 src/components/taggs/TaggDraggable.tsx (limited to 'src') 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 diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx new file mode 100644 index 00000000..0990d924 --- /dev/null +++ b/src/components/taggs/TaggDraggable.tsx @@ -0,0 +1,144 @@ +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 TaggAvatar from '../profile/TaggAvatar'; + +interface TaggDraggableProps { + draggable?: boolean; + minX: number; + minY: number; + maxX: number; + maxY: number; + taggedUser: string; + redirect: boolean; + deleteFromList: Function; +} + +const TaggDraggable: React.FC = (props) => { + const [xCoord, setXcoord] = useState(SCREEN_HEIGHT / 2); + const [yCoord, setYcoord] = useState(SCREEN_WIDTH / 2); + const navigation = useNavigation(); + const { + draggable, + minX, + minY, + maxX, + maxY, + taggedUser, + redirect, + deleteFromList, + } = props; + let uriTip = require('../../assets/images/tagg-tip.png'); + let uriX = require('../../assets/images/tagg-x-button.png'); + + // + + /** + * This function returns x,y pairing for each tagg. + */ + const getCoords = () => { + return [xCoord, yCoord]; + }; + const renderTagg = () => { + + {/* user profile pic */} + + + {/* @username */} + + {taggedUser} + + {/* x button */} + + deleteFromList()}> + + + + ; + }; + if (redirect) { + if (draggable) { + return ( + + { + setXcoord(gestureState.moveX); + setYcoord(gestureState.moveY); + }}> + + + {taggedUser} + + deleteFromList()}> + + + + + + {taggedUser} + + deleteFromList()}> + + + + + ); + } else { + renderTagg; + } + } else { + } +}; + +const styles = StyleSheet.create({ + container: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + height: normalize(42), + marginBottom: '5%', + }, + bodyContainer: { + flexDirection: 'column', + height: normalize(42), + justifyContent: 'space-around', + }, + inviteButton: { + backgroundColor: 'transparent', + }, + imageRectangle: { + width: '100%', + height: '100%', + backgroundColor: 'black', + borderWidth: 2, + borderRadius: 2, + }, + imageTip: { + backgroundColor: 'black', + }, + imageX: { + width: '100%', + height: '100%', + }, +}); + +export default TaggDraggable; diff --git a/src/types/types.ts b/src/types/types.ts index e9975529..5aae9a6d 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -150,6 +150,7 @@ export enum ScreenType { Notifications, SuggestedPeople, Chat, + Tagging, } /** -- 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') 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 458b01324dcf9ce8fdfdbf9999986390e506e23a 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 src/components/taggs/TaggDraggable.tsx | 144 +++++++++++++++++++++++++++++++++ src/types/types.ts | 1 + 5 files changed, 145 insertions(+) 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 create mode 100644 src/components/taggs/TaggDraggable.tsx (limited to 'src') 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 diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx new file mode 100644 index 00000000..0990d924 --- /dev/null +++ b/src/components/taggs/TaggDraggable.tsx @@ -0,0 +1,144 @@ +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 TaggAvatar from '../profile/TaggAvatar'; + +interface TaggDraggableProps { + draggable?: boolean; + minX: number; + minY: number; + maxX: number; + maxY: number; + taggedUser: string; + redirect: boolean; + deleteFromList: Function; +} + +const TaggDraggable: React.FC = (props) => { + const [xCoord, setXcoord] = useState(SCREEN_HEIGHT / 2); + const [yCoord, setYcoord] = useState(SCREEN_WIDTH / 2); + const navigation = useNavigation(); + const { + draggable, + minX, + minY, + maxX, + maxY, + taggedUser, + redirect, + deleteFromList, + } = props; + let uriTip = require('../../assets/images/tagg-tip.png'); + let uriX = require('../../assets/images/tagg-x-button.png'); + + // + + /** + * This function returns x,y pairing for each tagg. + */ + const getCoords = () => { + return [xCoord, yCoord]; + }; + const renderTagg = () => { + + {/* user profile pic */} + + + {/* @username */} + + {taggedUser} + + {/* x button */} + + deleteFromList()}> + + + + ; + }; + if (redirect) { + if (draggable) { + return ( + + { + setXcoord(gestureState.moveX); + setYcoord(gestureState.moveY); + }}> + + + {taggedUser} + + deleteFromList()}> + + + + + + {taggedUser} + + deleteFromList()}> + + + + + ); + } else { + renderTagg; + } + } else { + } +}; + +const styles = StyleSheet.create({ + container: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + height: normalize(42), + marginBottom: '5%', + }, + bodyContainer: { + flexDirection: 'column', + height: normalize(42), + justifyContent: 'space-around', + }, + inviteButton: { + backgroundColor: 'transparent', + }, + imageRectangle: { + width: '100%', + height: '100%', + backgroundColor: 'black', + borderWidth: 2, + borderRadius: 2, + }, + imageTip: { + backgroundColor: 'black', + }, + imageX: { + width: '100%', + height: '100%', + }, +}); + +export default TaggDraggable; diff --git a/src/types/types.ts b/src/types/types.ts index e9975529..5aae9a6d 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -150,6 +150,7 @@ export enum ScreenType { Notifications, SuggestedPeople, Chat, + Tagging, } /** -- cgit v1.2.3-70-g09d2 From 1ae1359fc2a28230101817fe8037d6fd95e9109f Mon Sep 17 00:00:00 2001 From: George Rusu Date: Tue, 18 May 2021 17:01:13 -0700 Subject: fix draggable userID prop --- src/components/taggs/TaggDraggable.tsx | 15 ++++++++------- src/screens/profile/CaptionScreen.tsx | 2 +- 2 files changed, 9 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx index a0872c2d..2c7ae2ce 100644 --- a/src/components/taggs/TaggDraggable.tsx +++ b/src/components/taggs/TaggDraggable.tsx @@ -59,9 +59,9 @@ const TaggDraggable: React.FC = ( {/* user profile pic */} {/* @username */} = ( taggedUser, ) }> - {taggedUser} + {taggedUser.userId} {/* x button */} @@ -89,6 +89,7 @@ const TaggDraggable: React.FC = ( if (draggable) { return ( + {console.log("this guy's userid is: " + taggedUser.userId)} = ( }}> - {taggedUser} + {taggedUser.userId} deleteFromList()}> @@ -112,7 +113,7 @@ const TaggDraggable: React.FC = ( - {taggedUser} + {taggedUser.userId} deleteFromList()}> diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 50b60024..3fd2e7ef 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -46,10 +46,10 @@ interface CaptionScreenProps { 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); - console.log(userId); const dispatch = useDispatch(); const [caption, setCaption] = useState(''); const [loading, setLoading] = useState(false); -- 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') 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 0eda9c024f57b131263c8191903eb5d1d8c2aa57 Mon Sep 17 00:00:00 2001 From: George Rusu Date: Wed, 19 May 2021 14:28:25 -0700 Subject: Find true center, add callback functionality --- src/components/taggs/TaggDraggable.tsx | 27 ++++++++++--------------- src/screens/profile/CaptionScreen.tsx | 36 +++++++++++++++++++++++++++++++--- 2 files changed, 43 insertions(+), 20 deletions(-) (limited to 'src') diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx index afd2a212..bd0d01bd 100644 --- a/src/components/taggs/TaggDraggable.tsx +++ b/src/components/taggs/TaggDraggable.tsx @@ -8,20 +8,11 @@ import { TouchableWithoutFeedback, View, } from 'react-native'; -import Draggable from 'react-native-draggable'; +import {useDispatch, useStore} from 'react-redux'; +import {RootState} from '../../store/rootReducer'; import {ScreenType, UserType} from '../../types'; -import { - normalize, - SCREEN_HEIGHT, - SCREEN_WIDTH, - navigateToProfile, -} from '../../utils'; +import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; 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; @@ -31,7 +22,7 @@ interface TaggDraggableProps { maxY: number; taggedUser: UserType; redirect: boolean; - deleteFromList: Function; + deleteFromList: () => void; } const TaggDraggable: React.FC = ( @@ -66,7 +57,7 @@ const TaggDraggable: React.FC = ( userXId={undefined} /> @{taggedUser.username} - + @@ -108,9 +99,11 @@ const styles = StyleSheet.create({ fontWeight: '700', lineHeight: normalize(13.13), letterSpacing: normalize(0.6), - paddingHorizontal: '3.8%', + paddingHorizontal: '1.5%', }, avatar: { + marginLeft: '4%', + marginRight: '-1%', flex: 0.45, aspectRatio: 1, }, @@ -128,6 +121,7 @@ const styles = StyleSheet.create({ imageX: { width: normalize(15), height: normalize(15), + marginRight: '-15%', }, pendingButtonTitle: { color: 'white', @@ -136,14 +130,13 @@ const styles = StyleSheet.create({ paddingLeft: 1, paddingTop: 3, paddingBottom: 3, - justifyContent: 'space-evenly', + // 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 bfe9a0e4..5adb27cb 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -1,6 +1,6 @@ import {RouteProp} from '@react-navigation/native'; import {StackNavigationProp} from '@react-navigation/stack'; -import React, {Fragment, useState} from 'react'; +import React, {Fragment, useEffect, useRef, useState} from 'react'; import { Alert, Image, @@ -26,7 +26,12 @@ import { updateProfileCompletionStage, } from '../../store/actions'; import {RootState} from '../../store/rootReducer'; -import {SCREEN_WIDTH, StatusBarHeight} from '../../utils'; +import { + normalize, + SCREEN_HEIGHT, + SCREEN_WIDTH, + StatusBarHeight, +} from '../../utils'; import {mentionPartTypes} from '../../utils/comments'; import TaggDraggable from '../../components/taggs/TaggDraggable'; @@ -44,6 +49,12 @@ interface CaptionScreenProps { route: CaptionScreenRouteProp; navigation: CaptionScreenNavigationProp; } +interface momentTag { + userID: string; + username: string; + xLocation: number; + yLocation: number; +} const CaptionScreen: React.FC = ({route, navigation}) => { const {title, image, screenType} = route.params; @@ -54,7 +65,12 @@ const CaptionScreen: React.FC = ({route, navigation}) => { const dispatch = useDispatch(); const [caption, setCaption] = useState(''); const [loading, setLoading] = useState(false); + // created a state variable to keep track of every tag + // idea is that each element in the list const [taggList, setTaggList] = useState([]); + const draggableRef = useRef(null); + const imageRef = useRef(null); + const [tagInitCoords, setTagInitCoords] = useState([]); const navigateToProfile = () => { //Since the logged In User is navigating to own profile, useXId is not required @@ -69,6 +85,17 @@ const CaptionScreen: React.FC = ({route, navigation}) => { * @returns */ + useEffect(() => { + imageRef.current.measure((fx, fy, width, height, px, py) => { + console.log('Component width is: ' + width); + console.log('Component height is: ' + height); + console.log('X offset to frame: ' + fx); + console.log('Y offset to frame: ' + fy); + console.log('X offset to page: ' + px); + console.log('Y offset to page: ' + py); + }); + }, []); + const handleShare = async () => { setLoading(true); if (!image.filename) { @@ -115,7 +142,9 @@ const CaptionScreen: React.FC = ({route, navigation}) => { /> + {/* this is the image we want to center our tags' initial location within */} = ({route, navigation}) => { onChange={setCaption} partTypes={mentionPartTypes('blue')} /> - + Date: Wed, 19 May 2021 15:10:04 -0700 Subject: Set middle placement --- src/components/taggs/TaggDraggable.tsx | 28 +++++++++++++++++++++++++--- src/screens/profile/CaptionScreen.tsx | 13 ++++++++++--- 2 files changed, 35 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx index bd0d01bd..0d57c590 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} from 'react'; +import React, {useState, useEffect, useRef} from 'react'; import { Image, StyleSheet, @@ -13,6 +13,7 @@ import {RootState} from '../../store/rootReducer'; import {ScreenType, UserType} from '../../types'; import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; import TaggAvatar from '../profile/TaggAvatar'; +import {RefObject} from 'react'; interface TaggDraggableProps { draggable?: boolean; @@ -23,6 +24,7 @@ interface TaggDraggableProps { taggedUser: UserType; redirect: boolean; deleteFromList: () => void; + setStart: Function; } const TaggDraggable: React.FC = ( @@ -42,14 +44,34 @@ const TaggDraggable: React.FC = ( taggedUser, redirect, deleteFromList, + setStart, } = props; let uriTip = require('../../assets/images/tagg-tip.png'); let uriX = require('../../assets/images/draggableX.png'); + const draggableRef = useRef(null); + + useEffect(() => { + draggableRef.current.measure((fx, fy, width, height, px, py) => { + console.log('Drag Component width is: ' + width); + console.log('Drag Component height is: ' + height); + console.log('X offset to frame: ' + fx); + console.log('Y offset to frame: ' + fy); + console.log('X offset to page: ' + px); + console.log('Y offset to page: ' + py); + setStart([width, height]); + }); + }, []); + return ( - - + console.log(event.nativeEvent.layout)}> + = ({route, navigation}) => { // created a state variable to keep track of every tag // idea is that each element in the list const [taggList, setTaggList] = useState([]); - const draggableRef = useRef(null); 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 navigateToProfile = () => { //Since the logged In User is navigating to own profile, useXId is not required @@ -93,6 +96,8 @@ const CaptionScreen: React.FC = ({route, navigation}) => { console.log('Y offset to frame: ' + fy); console.log('X offset to page: ' + px); console.log('Y offset to page: ' + py); + setOffset([px, py]); + setDim([width, height]); }); }, []); @@ -157,9 +162,10 @@ const CaptionScreen: React.FC = ({route, navigation}) => { onChange={setCaption} partTypes={mentionPartTypes('blue')} /> - + = ({route, navigation}) => { taggedUser={user} redirect={true} deleteFromList={() => console.log('Hello world')} + setStart={setCurStart} /> -- cgit v1.2.3-70-g09d2 From 5ddbf16658a6e3f7bb53e78b821e62190b804cf1 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Wed, 19 May 2021 15:57:54 -0700 Subject: Save central position --- src/screens/profile/CaptionScreen.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 309701b5..bd715a53 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -164,7 +164,11 @@ const CaptionScreen: React.FC = ({route, navigation}) => { /> + y={offset[1] + dim[1] / 2 - curStart[1] / 2} + minX={offset[0]} + minY={offset[1]} + maxX={dim[0] + offset[0] + curStart[0] / 2} + maxY={dim[1] + offset[1] + curStart[1]}> Date: Wed, 19 May 2021 16:55:04 -0700 Subject: Add delte from list, need to add rediret to profile --- src/components/common/Draggable.tsx | 352 +++++++++++++++++++++++++++++++++ src/components/taggs/TaggDraggable.tsx | 14 +- src/screens/profile/CaptionScreen.tsx | 2 +- 3 files changed, 365 insertions(+), 3 deletions(-) create mode 100644 src/components/common/Draggable.tsx (limited to 'src') diff --git a/src/components/common/Draggable.tsx b/src/components/common/Draggable.tsx new file mode 100644 index 00000000..347d2121 --- /dev/null +++ b/src/components/common/Draggable.tsx @@ -0,0 +1,352 @@ +/** + * * https://github.com/tongyy/react-native-draggable + * + */ + +import React from 'react'; +import { + View, + Text, + Image, + PanResponder, + Animated, + Dimensions, + TouchableOpacity, + StyleSheet, + GestureResponderEvent, + PanResponderGestureState, + StyleProp, +} from 'react-native'; +// import PropTypes from 'prop-types'; +import {ViewStyle} from 'react-native'; + +function clamp(number: number, min: number, max: number) { + return Math.max(min, Math.min(number, max)); +} + +interface IProps { + /**** props that should probably be removed in favor of "children" */ + renderText?: string; + isCircle?: boolean; + renderSize?: number; + imageSource?: number; + renderColor?: string; + /**** */ + children?: React.ReactNode; + shouldReverse?: boolean; + disabled?: boolean; + debug?: boolean; + animatedViewProps?: object; + touchableOpacityProps?: object; + onDrag?: ( + e: GestureResponderEvent, + gestureState: PanResponderGestureState, + ) => void; + onShortPressRelease?: (event: GestureResponderEvent) => void; + onDragRelease?: ( + e: GestureResponderEvent, + gestureState: PanResponderGestureState, + ) => void; + onLongPress?: (event: GestureResponderEvent) => void; + onPressIn?: (event: GestureResponderEvent) => void; + onPressOut?: (event: GestureResponderEvent) => void; + onRelease?: (event: GestureResponderEvent, wasDragging: boolean) => void; + onReverse?: () => {x: number; y: number}; + x?: number; + y?: number; + // z/elevation should be removed because it doesn't sync up visually and haptically + z?: number; + minX?: number; + minY?: number; + maxX?: number; + maxY?: number; +} + +export default function Draggable(props: IProps) { + const { + renderText, + isCircle, + renderSize, + imageSource, + renderColor, + children, + shouldReverse, + disabled, + debug, + animatedViewProps, + touchableOpacityProps, + onDrag, + onShortPressRelease, + onDragRelease, + onLongPress, + onPressIn, + onPressOut, + onRelease, + x, + y, + z, + minX, + minY, + maxX, + maxY, + } = props; + + // The Animated object housing our xy value so that we can spring back + const pan = React.useRef(new Animated.ValueXY()); + // Always set to xy value of pan, would like to remove + const offsetFromStart = React.useRef({x: 0, y: 0}); + // Width/Height of Draggable (renderSize is arbitrary if children are passed in) + const childSize = React.useRef({x: renderSize, y: renderSize}); + // Top/Left/Right/Bottom location on screen from start of most recent touch + const startBounds = React.useRef({top: 0, bottom: 0, left: 0, right: 0}); + // Whether we're currently dragging or not + const isDragging = React.useRef(false); + + const getBounds = React.useCallback(() => { + const left = x + offsetFromStart.current.x; + const top = y + offsetFromStart.current.y; + return { + left, + top, + right: left + childSize.current.x, + bottom: top + childSize.current.y, + }; + }, [x, y]); + + const shouldStartDrag = React.useCallback( + (gs) => { + return !disabled && (Math.abs(gs.dx) > 2 || Math.abs(gs.dy) > 2); + }, + [disabled], + ); + + const reversePosition = React.useCallback(() => { + Animated.spring(pan.current, { + toValue: {x: 0, y: 0}, + useNativeDriver: false, + }).start(); + }, [pan]); + + const onPanResponderRelease = React.useCallback( + (e: GestureResponderEvent, gestureState: PanResponderGestureState) => { + isDragging.current = false; + if (onDragRelease) { + onDragRelease(e, gestureState); + onRelease(e, true); + } + if (!shouldReverse) { + pan.current.flattenOffset(); + } else { + reversePosition(); + } + }, + [onDragRelease, shouldReverse, onRelease, reversePosition], + ); + + const onPanResponderGrant = React.useCallback( + (e: GestureResponderEvent, gestureState: PanResponderGestureState) => { + startBounds.current = getBounds(); + isDragging.current = true; + if (!shouldReverse) { + pan.current.setOffset(offsetFromStart.current); + pan.current.setValue({x: 0, y: 0}); + } + }, + [getBounds, shouldReverse], + ); + + const handleOnDrag = React.useCallback( + (e: GestureResponderEvent, gestureState: PanResponderGestureState) => { + const {dx, dy} = gestureState; + const {top, right, left, bottom} = startBounds.current; + const far = 999999999; + const changeX = clamp( + dx, + Number.isFinite(minX) ? minX - left : -far, + Number.isFinite(maxX) ? maxX - right : far, + ); + const changeY = clamp( + dy, + Number.isFinite(minY) ? minY - top : -far, + Number.isFinite(maxY) ? maxY - bottom : far, + ); + pan.current.setValue({x: changeX, y: changeY}); + onDrag(e, gestureState); + }, + [maxX, maxY, minX, minY, onDrag], + ); + + const panResponder = React.useMemo(() => { + return PanResponder.create({ + onMoveShouldSetPanResponder: (_, gestureState) => + shouldStartDrag(gestureState), + onMoveShouldSetPanResponderCapture: (_, gestureState) => + shouldStartDrag(gestureState), + onPanResponderGrant, + onPanResponderMove: Animated.event([], { + // Typed incorrectly https://reactnative.dev/docs/panresponder + listener: handleOnDrag, + useNativeDriver: false, + }), + onPanResponderRelease, + }); + }, [ + handleOnDrag, + onPanResponderGrant, + onPanResponderRelease, + shouldStartDrag, + ]); + + // TODO Figure out a way to destroy and remove offsetFromStart entirely + React.useEffect(() => { + const curPan = pan.current; // Using an instance to avoid losing the pointer before the cleanup + if (!shouldReverse) { + curPan.addListener((c) => (offsetFromStart.current = c)); + } + return () => { + // Typed incorrectly + curPan.removeAllListeners(); + }; + }, [shouldReverse]); + + const positionCss: StyleProp = React.useMemo(() => { + const Window = Dimensions.get('window'); + return { + position: 'absolute', + top: 0, + left: 0, + width: Window.width, + height: Window.height, + }; + }, []); + + const dragItemCss = React.useMemo(() => { + const style: StyleProp = { + top: y, + left: x, + elevation: z, + zIndex: z, + }; + if (renderColor) { + style.backgroundColor = renderColor; + } + if (isCircle) { + style.borderRadius = renderSize; + } + + if (children) { + return { + ...style, + alignSelf: 'baseline', + }; + } + return { + ...style, + justifyContent: 'center', + width: renderSize, + height: renderSize, + }; + }, [children, isCircle, renderColor, renderSize, x, y, z]); + + const touchableContent = React.useMemo(() => { + if (children) { + return children; + } else if (imageSource) { + return ( + + ); + } else { + return {renderText}; + } + }, [children, imageSource, renderSize, renderText]); + + const handleOnLayout = React.useCallback((event) => { + const {height, width} = event.nativeEvent.layout; + childSize.current = {x: width, y: height}; + }, []); + + const handlePressOut = React.useCallback( + (event: GestureResponderEvent) => { + onPressOut(event); + if (!isDragging.current) { + onRelease(event, false); + } + }, + [onPressOut, onRelease], + ); + + const getDebugView = React.useCallback(() => { + const {width, height} = Dimensions.get('window'); + const far = 9999; + const constrained = minX || maxX || minY || maxY; + if (!constrained) { + return null; + } // could show other debug info here + const left = minX || -far; + const right = maxX ? width - maxX : -far; + const top = minY || -far; + const bottom = maxY ? height - maxY : -far; + return ( + + ); + }, [maxX, maxY, minX, minY]); + + return ( + + {debug && getDebugView()} + + + {touchableContent} + + + + ); +} + +/***** Default props and types */ + +Draggable.defaultProps = { + renderText: '＋', + renderSize: 36, + shouldReverse: false, + disabled: false, + debug: false, + onDrag: () => {}, + onShortPressRelease: () => {}, + onDragRelease: () => {}, + onLongPress: () => {}, + onPressIn: () => {}, + onPressOut: () => {}, + onRelease: () => {}, + x: 0, + y: 0, + z: 1, +}; + +const styles = StyleSheet.create({ + text: {color: '#fff', textAlign: 'center'}, + debugView: { + backgroundColor: '#ff000044', + position: 'absolute', + borderColor: '#fced0ecc', + borderWidth: 4, + }, +}); diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx index 0d57c590..ac494a6b 100644 --- a/src/components/taggs/TaggDraggable.tsx +++ b/src/components/taggs/TaggDraggable.tsx @@ -35,6 +35,15 @@ const TaggDraggable: React.FC = ( 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 + navigation.navigate('Profile', { + ScreenType, + userXId: userID, + }); + }; + const { draggable, minX, @@ -69,7 +78,8 @@ const TaggDraggable: React.FC = ( style={styles.container} onLayout={(event) => console.log(event.nativeEvent.layout)}> gotoTaggedProfile(taggedUser.userId)} + disabled={false} style={[styles.button]} ref={draggableRef}> = ( userXId={undefined} /> @{taggedUser.username} - + deleteFromList()}> diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index bd715a53..37003207 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -35,7 +35,7 @@ import { import {mentionPartTypes} from '../../utils/comments'; import TaggDraggable from '../../components/taggs/TaggDraggable'; -import Draggable from 'react-native-draggable'; +import Draggable from '../../components/common/Draggable'; /** * Upload Screen to allow users to upload posts to Tagg -- cgit v1.2.3-70-g09d2 From 6e09b4245f3a96560ca0eb74d46e8fd40a164f44 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Wed, 19 May 2021 17:26:40 -0700 Subject: Fix redirect --- src/components/profile/TaggAvatar.tsx | 2 ++ src/components/taggs/TaggDraggable.tsx | 14 +++++++++----- src/screens/profile/CaptionScreen.tsx | 11 +++++++++-- src/screens/profile/DraggableNoPress.tsx | 0 4 files changed, 20 insertions(+), 7 deletions(-) create mode 100644 src/screens/profile/DraggableNoPress.tsx (limited to 'src') diff --git a/src/components/profile/TaggAvatar.tsx b/src/components/profile/TaggAvatar.tsx index 8ccae2ef..8cd52a2f 100644 --- a/src/components/profile/TaggAvatar.tsx +++ b/src/components/profile/TaggAvatar.tsx @@ -23,6 +23,8 @@ const TaggAvatar: React.FC = ({ userXId, editable = false, }) => { + const state = useSelector((state: RootState) => state); + console.log('STATE', state.userX); const {avatar, user} = useSelector((state: RootState) => userXId ? state.userX[screenType][userXId] : state.user, ); diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx index ac494a6b..06185bd1 100644 --- a/src/components/taggs/TaggDraggable.tsx +++ b/src/components/taggs/TaggDraggable.tsx @@ -79,19 +79,23 @@ const TaggDraggable: React.FC = ( onLayout={(event) => console.log(event.nativeEvent.layout)}> gotoTaggedProfile(taggedUser.userId)} - disabled={false} + disabled={redirect} style={[styles.button]} ref={draggableRef}> @{taggedUser.username} - deleteFromList()}> - - + {redirect && ( + deleteFromList()}> + + + )} diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 37003207..f72b1165 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -36,6 +36,7 @@ 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 @@ -75,6 +76,12 @@ const CaptionScreen: React.FC = ({route, navigation}) => { const [curStart, setCurStart] = useState([0, 0]); const [dim, setDim] = useState([0, 0]); + const testUser: UserType = { + // userId: '1216bbb4-f778-4ef3-b7f8-a55bde1ab1a1', + userId: 'ID-1234-567', + username: 'dragonofthewest', + }; + const navigateToProfile = () => { //Since the logged In User is navigating to own profile, useXId is not required navigation.navigate('Profile', { @@ -175,8 +182,8 @@ const CaptionScreen: React.FC = ({route, navigation}) => { minY={0} maxX={50} maxY={50} - taggedUser={user} - redirect={true} + taggedUser={testUser} + redirect={false} deleteFromList={() => console.log('Hello world')} setStart={setCurStart} /> diff --git a/src/screens/profile/DraggableNoPress.tsx b/src/screens/profile/DraggableNoPress.tsx new file mode 100644 index 00000000..e69de29b -- 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') 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 From 74734ecde9d26e0d08a62574f41dc7174572467d Mon Sep 17 00:00:00 2001 From: George Rusu Date: Thu, 20 May 2021 12:18:16 -0700 Subject: Fix styling for tip,container --- src/components/common/Draggable.tsx | 2 + src/components/taggs/TaggDraggable.tsx | 119 ++++++++++++++++++--------------- src/screens/profile/CaptionScreen.tsx | 30 +++++++-- 3 files changed, 92 insertions(+), 59 deletions(-) (limited to 'src') diff --git a/src/components/common/Draggable.tsx b/src/components/common/Draggable.tsx index 347d2121..409ca6de 100644 --- a/src/components/common/Draggable.tsx +++ b/src/components/common/Draggable.tsx @@ -211,12 +211,14 @@ export default function Draggable(props: IProps) { const positionCss: StyleProp = React.useMemo(() => { const Window = Dimensions.get('window'); + return { position: 'absolute', top: 0, left: 0, width: Window.width, height: Window.height, + zIndex: z, }; }, []); diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx index 6a93aee5..bb9949e4 100644 --- a/src/components/taggs/TaggDraggable.tsx +++ b/src/components/taggs/TaggDraggable.tsx @@ -8,12 +8,15 @@ import { TouchableWithoutFeedback, View, } from 'react-native'; -import {ScreenType, UserType} from '../../types'; +import {ProfilePreviewType, ScreenType, UserType} from '../../types'; import {normalize} from '../../utils'; -import TaggAvatar from '../profile/TaggAvatar'; +import Avatar from '../../components/common/Avatar'; +import {navigateToProfile} from '../../utils/users'; +import {useDispatch, useSelector} from 'react-redux'; +import {RootState} from 'src/store/rootReducer'; interface TaggDraggableProps { - taggedUser: UserType; + taggedUser: ProfilePreviewType; editingView: boolean; deleteFromList: () => void; setStart: Function; @@ -33,10 +36,13 @@ const TaggDraggable: React.FC = ( }; const {taggedUser, editingView, deleteFromList, setStart} = props; + const state = useSelector((rs: RootState) => rs); + + const dispatch = useDispatch(); let uriX = require('../../assets/images/draggableX.png'); + let uriTip = require('../../assets/images/Tagg-Triangle.png'); const draggableRef = useRef(null); - useEffect(() => { draggableRef.current.measure((fx, fy, width, height, px, py) => { console.log('Drag Component width is: ' + width); @@ -49,31 +55,49 @@ const TaggDraggable: React.FC = ( }); }, []); + const user: UserType = { + userId: taggedUser.id, + username: taggedUser.username, + }; + return ( - - gotoTaggedProfile(taggedUser.userId)} - disabled={editingView} - style={[styles.button]} - ref={draggableRef}> - - - @{taggedUser.username} - - {editingView && ( - deleteFromList()}> - - - )} - + + + + + navigateToProfile( + state, + dispatch, + navigation, + ScreenType.Profile, + user, + ) + } + disabled={editingView} + style={[styles.button]} + ref={draggableRef}> + + + @{taggedUser.username} + + {editingView && ( + deleteFromList()}> + + + )} + + ); @@ -81,24 +105,13 @@ const TaggDraggable: React.FC = ( const styles = StyleSheet.create({ container: { - color: 'red', + borderWidth: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', - height: normalize(42), - marginBottom: '5%', - }, - bodyContainer: { - color: 'blue', - flexDirection: 'column', - height: normalize(42), - justifyContent: 'space-around', - }, - label: { - fontWeight: '500', - fontSize: normalize(14), }, buttonTitle: { + borderWidth: 1, color: 'white', fontSize: normalize(11), fontWeight: '700', @@ -116,37 +129,33 @@ const styles = StyleSheet.create({ marginRight: '-10%', }, avatar: { + borderWidth: 1, + borderRadius: 100 / 2, + overflow: 'hidden', marginLeft: '4%', marginRight: '-1%', flex: 0.45, aspectRatio: 1, }, - inviteButton: { - backgroundColor: 'transparent', - }, - imageRectangle: { - backgroundColor: 'black', - borderWidth: 2, - borderRadius: 2, - }, imageX: { + borderWidth: 1, width: normalize(15), height: normalize(15), - marginRight: '-15%', }, - pendingButtonTitle: { - color: 'white', + imageTip: { + borderWidth: 1, + bottom: -5, + width: normalize(15), + height: normalize(15), }, button: { + borderWidth: 1, paddingTop: 3, paddingBottom: 3, - // justifyContent: 'space-evenly', - alignSelf: 'flex-start', + justifyContent: 'space-evenly', alignItems: 'center', - borderWidth: 1.5, borderRadius: 20, flexDirection: 'row', - flexWrap: 'wrap', backgroundColor: 'rgba(0, 0, 0, 0.8)', }, }); diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index f77a2d23..1f49f917 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -59,9 +59,28 @@ const CaptionScreen: React.FC = ({route, navigation}) => { const dispatch = useDispatch(); const [caption, setCaption] = useState(''); const [loading, setLoading] = useState(false); + const [isTop, setIsTop] = useState(false); + const zIndex = [0, 999]; // created a state variable to keep track of every tag // idea is that each element in the list - const [taggList, setTaggList] = useState([]); + const [taggList, setTaggList] = useState([ + { + first_name: 'Ivan', + id: 'cee45bf8-7f3d-43c8-99bb-ec04908efe58', + last_name: 'Chen', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-cee45bf8-7f3d-43c8-99bb-ec04908efe58-thumbnail.jpg', + username: 'ivan.tagg', + }, + { + first_name: 'Ankit', + id: '3bcf6947-bee6-46b0-ad02-6f4d25eaeac3', + last_name: 'Thanekar', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-3bcf6947-bee6-46b0-ad02-6f4d25eaeac3-thumbnail.jpg', + username: 'ankit.thanekar', + }, + ]); const imageRef = useRef(null); const [offset, setOffset] = useState([0, 0]); const [curStart, setCurStart] = useState([0, 0]); @@ -163,12 +182,15 @@ const CaptionScreen: React.FC = ({route, navigation}) => { + maxX={imageDimensions[0] + offset[0]} + maxY={imageDimensions[1] + offset[1]} + onPressIn={() => setIsTop(true)} + onPressOut={() => setIsTop(false)}> console.log('Hello world')} setStart={setCurStart} -- cgit v1.2.3-70-g09d2 From 3fd9c10aadb874a0fd0c0c206c8a4a9d83e939a0 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 20 May 2021 16:19:04 -0400 Subject: Remove loading style, Clean up styling --- src/components/common/Avatar.tsx | 29 +++++---- src/components/profile/TaggAvatar.tsx | 4 +- src/components/taggs/TaggDraggable.tsx | 113 +++++++++++++-------------------- 3 files changed, 60 insertions(+), 86 deletions(-) (limited to 'src') diff --git a/src/components/common/Avatar.tsx b/src/components/common/Avatar.tsx index 86ebedf3..46a3814c 100644 --- a/src/components/common/Avatar.tsx +++ b/src/components/common/Avatar.tsx @@ -4,27 +4,28 @@ import {Image, ImageStyle, StyleProp, ImageBackground} from 'react-native'; type AvatarProps = { style: StyleProp; uri: string | undefined; - loading: boolean; - loadingStyle: StyleProp | undefined; + // loading: boolean; + // loadingStyle: StyleProp | undefined; }; const Avatar: FC = ({ style, uri, - loading = false, - loadingStyle, + // loading = false, + // loadingStyle, }) => { return ( - + // {loading && ( + - {loading && ( - - )} - + source={{uri, cache: 'reload'}} + style={style} + /> + // )} + // ); }; diff --git a/src/components/profile/TaggAvatar.tsx b/src/components/profile/TaggAvatar.tsx index 8cd52a2f..7b0f0d6f 100644 --- a/src/components/profile/TaggAvatar.tsx +++ b/src/components/profile/TaggAvatar.tsx @@ -79,8 +79,8 @@ const TaggAvatar: React.FC = ({ {editable && !validImage && diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx index bb9949e4..e31f69c2 100644 --- a/src/components/taggs/TaggDraggable.tsx +++ b/src/components/taggs/TaggDraggable.tsx @@ -8,12 +8,12 @@ import { TouchableWithoutFeedback, View, } from 'react-native'; +import {useDispatch, useSelector} from 'react-redux'; +import {RootState} from 'src/store/rootReducer'; +import Avatar from '../../components/common/Avatar'; import {ProfilePreviewType, ScreenType, UserType} from '../../types'; import {normalize} from '../../utils'; -import Avatar from '../../components/common/Avatar'; import {navigateToProfile} from '../../utils/users'; -import {useDispatch, useSelector} from 'react-redux'; -import {RootState} from 'src/store/rootReducer'; interface TaggDraggableProps { taggedUser: ProfilePreviewType; @@ -27,14 +27,6 @@ const TaggDraggable: React.FC = ( ) => { const navigation = useNavigation(); - const gotoTaggedProfile = (userID: string) => { - //Since the logged In User is navigating to own profile, useXId is not required - navigation.navigate('Profile', { - ScreenType, - userXId: userID, - }); - }; - const {taggedUser, editingView, deleteFromList, setStart} = props; const state = useSelector((rs: RootState) => rs); @@ -62,56 +54,50 @@ const TaggDraggable: React.FC = ( return ( - + - - - navigateToProfile( - state, - dispatch, - navigation, - ScreenType.Profile, - user, - ) - } - disabled={editingView} - style={[styles.button]} - ref={draggableRef}> - - - @{taggedUser.username} - - {editingView && ( - deleteFromList()}> - - - )} - - + + navigateToProfile( + state, + dispatch, + navigation, + ScreenType.Profile, + user, + ) + } + disabled={editingView} + style={styles.content} + ref={draggableRef}> + + + @{taggedUser.username} + + {editingView && ( + deleteFromList()} + style={styles.imageX}> + + + )} + ); }; const styles = StyleSheet.create({ + imageTip: { + height: normalize(12), + aspectRatio: 12 / 8, + }, container: { - borderWidth: 1, - flexDirection: 'row', + flexDirection: 'column', alignItems: 'center', - justifyContent: 'space-between', + justifyContent: 'center', }, buttonTitle: { - borderWidth: 1, color: 'white', fontSize: normalize(11), fontWeight: '700', @@ -126,36 +112,23 @@ const styles = StyleSheet.create({ lineHeight: normalize(13.13), letterSpacing: normalize(0.6), paddingHorizontal: '1%', - marginRight: '-10%', }, avatar: { - borderWidth: 1, - borderRadius: 100 / 2, - overflow: 'hidden', - marginLeft: '4%', - marginRight: '-1%', - flex: 0.45, - aspectRatio: 1, + height: normalize(20), + width: normalize(20), + borderRadius: normalize(20) / 2, }, imageX: { - borderWidth: 1, width: normalize(15), height: normalize(15), }, - imageTip: { - borderWidth: 1, - bottom: -5, - width: normalize(15), - height: normalize(15), - }, - button: { - borderWidth: 1, - paddingTop: 3, - paddingBottom: 3, + content: { justifyContent: 'space-evenly', alignItems: 'center', - borderRadius: 20, flexDirection: 'row', + borderRadius: 20, + paddingVertical: normalize(5), + paddingHorizontal: normalize(8), backgroundColor: 'rgba(0, 0, 0, 0.8)', }, }); -- cgit v1.2.3-70-g09d2 From e797361b81778a08de2bc81038196ba62126fc59 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 20 May 2021 16:40:31 -0400 Subject: Revert change to avatar, using another design --- src/components/common/Avatar.tsx | 29 +++++++++++++++++------------ src/components/profile/TaggAvatar.tsx | 4 ++-- 2 files changed, 19 insertions(+), 14 deletions(-) (limited to 'src') diff --git a/src/components/common/Avatar.tsx b/src/components/common/Avatar.tsx index 46a3814c..fa80f121 100644 --- a/src/components/common/Avatar.tsx +++ b/src/components/common/Avatar.tsx @@ -4,28 +4,33 @@ import {Image, ImageStyle, StyleProp, ImageBackground} from 'react-native'; type AvatarProps = { style: StyleProp; uri: string | undefined; - // loading: boolean; - // loadingStyle: StyleProp | undefined; + loading?: boolean; + loadingStyle?: StyleProp | undefined; }; const Avatar: FC = ({ style, uri, - // loading = false, - // loadingStyle, + loading = false, + loadingStyle, }) => { - return ( - // - // {loading && ( + return loading ? ( + + {loading && ( + + )} + + ) : ( - // )} - // ); }; diff --git a/src/components/profile/TaggAvatar.tsx b/src/components/profile/TaggAvatar.tsx index 7b0f0d6f..8cd52a2f 100644 --- a/src/components/profile/TaggAvatar.tsx +++ b/src/components/profile/TaggAvatar.tsx @@ -79,8 +79,8 @@ const TaggAvatar: React.FC = ({ {editable && !validImage && -- cgit v1.2.3-70-g09d2 From 12d2930aa67e0c03aada966d6bb50541730cc656 Mon Sep 17 00:00:00 2001 From: George Rusu Date: Thu, 20 May 2021 14:07:13 -0700 Subject: Comment out Draggable components --- src/screens/profile/CaptionScreen.tsx | 209 ++++++++++++++++++++++++---------- 1 file changed, 149 insertions(+), 60 deletions(-) (limited to 'src') diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 1f49f917..b34c7c7a 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -1,6 +1,6 @@ import {RouteProp} from '@react-navigation/native'; import {StackNavigationProp} from '@react-navigation/stack'; -import React, {Fragment, useEffect, useRef, useState} from 'react'; +import React, {Fragment, useRef, useState} from 'react'; import { Alert, Image, @@ -14,12 +14,11 @@ 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 Draggable from '../../components/common/Draggable'; import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator'; -import TaggDraggable from '../../components/taggs/TaggDraggable'; +// 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'; @@ -59,38 +58,72 @@ const CaptionScreen: React.FC = ({route, navigation}) => { const dispatch = useDispatch(); const [caption, setCaption] = useState(''); const [loading, setLoading] = useState(false); - const [isTop, setIsTop] = useState(false); - const zIndex = [0, 999]; + // const [isTop, setIsTop] = useState(false); + // const zIndex = [0, 999]; // created a state variable to keep track of every tag // idea is that each element in the list - const [taggList, setTaggList] = useState([ - { - first_name: 'Ivan', - id: 'cee45bf8-7f3d-43c8-99bb-ec04908efe58', - last_name: 'Chen', - thumbnail_url: - 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-cee45bf8-7f3d-43c8-99bb-ec04908efe58-thumbnail.jpg', - username: 'ivan.tagg', - }, - { - first_name: 'Ankit', - id: '3bcf6947-bee6-46b0-ad02-6f4d25eaeac3', - last_name: 'Thanekar', - thumbnail_url: - 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-3bcf6947-bee6-46b0-ad02-6f4d25eaeac3-thumbnail.jpg', - username: 'ankit.thanekar', - }, - ]); + // const [taggList, setTaggList] = useState([ + // { + // first_name: 'Ivan', + // id: 'cee45bf8-7f3d-43c8-99bb-ec04908efe58', + // last_name: 'Chen', + // thumbnail_url: + // 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-cee45bf8-7f3d-43c8-99bb-ec04908efe58-thumbnail.jpg', + // username: 'ivan.tagg', + // }, + // { + // first_name: 'Ankit', + // id: '3bcf6947-bee6-46b0-ad02-6f4d25eaeac3', + // last_name: 'Thanekar', + // thumbnail_url: + // 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-3bcf6947-bee6-46b0-ad02-6f4d25eaeac3-thumbnail.jpg', + // username: 'ankit.thanekar', + // }, + // ]); const imageRef = useRef(null); - const [offset, setOffset] = useState([0, 0]); - const [curStart, setCurStart] = useState([0, 0]); + // const [offset, setOffset] = useState([0, 0]); + // const [curStart, setCurStart] = useState([0, 0]); - const [imageDimensions, setImageDimensions] = useState([0, 0]); + // const [imageDimensions, setImageDimensions] = useState([0, 0]); + // // created a test user - BUG - failed to register a profile visit - + // const testUser: UserType = { + // userId: 'ID-1234-567', + // username: 'dragonofthewest', + // }; + + // created a state variable to keep track of every tag + // idea is that each element in the list + // const [taggList, setTaggList] = useState([ + // { + // first_name: 'Ivan', + // id: 'cee45bf8-7f3d-43c8-99bb-ec04908efe58', + // last_name: 'Chen', + // thumbnail_url: + // 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-cee45bf8-7f3d-43c8-99bb-ec04908efe58-thumbnail.jpg', + // username: 'ivan.tagg', + // }, + // { + // first_name: 'Ankit', + // id: '3bcf6947-bee6-46b0-ad02-6f4d25eaeac3', + // last_name: 'Thanekar', + // thumbnail_url: + // 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-3bcf6947-bee6-46b0-ad02-6f4d25eaeac3-thumbnail.jpg', + // username: 'ankit.thanekar', + // }, + // ]); + // const imageRef = useRef(null); + // state variables used to position draggables + // const [offset, setOffset] = useState([0, 0]); + // const [curStart, setCurStart] = useState([0, 0]); + // const [imageDimensions, setImageDimensions] = useState([0, 0]); + + // state var used to keep track of draggable z ordering + // const [layerOrder, setLayerOrder] = useState([]); // created a test user - BUG - failed to register a profile visit - - const testUser: UserType = { - userId: 'ID-1234-567', - username: 'dragonofthewest', - }; + // const testUser: UserType = { + // userId: 'ID-1234-567', + // username: 'dragonofthewest', + // }; const navigateToProfile = () => { //Since the logged In User is navigating to own profile, useXId is not required @@ -99,24 +132,62 @@ const CaptionScreen: React.FC = ({route, navigation}) => { userXId: undefined, }); }; + /** + * Helper function that we use to keep track of which element should be on top most layer + * @param index + */ + // const bringToFront = (index: number) => { + // let currUser = taggList[index].id; + // const newLayerOrder = [...layerOrder]; + // if (layerOrder.includes(currUser)) { + // newLayerOrder.splice(newLayerOrder.indexOf(currUser), 1); + // } + // setLayerOrder([currUser, ...newLayerOrder]); + // console.log('ON TOP IS THIS ONE: ' + layerOrder[0]); + // }; + /** + * Helper function that tells us if the current draggable is the topmost one. + * @param index + */ + // const isOnTop = (index: number) => { + // let currUser = taggList[index].id; + // return currUser === layerOrder[0]; + // }; + /** + * function that sets the initial position of each newly created tag + * @returns + */ + + // useEffect(() => { + // imageRef.current.measure((fx, fy, width, height, px, py) => { + // console.log('Component width is: ' + width); + // console.log('Component height is: ' + height); + // console.log('X offset to frame: ' + fx); + // console.log('Y offset to frame: ' + fy); + // console.log('X offset to page: ' + px); + // console.log('Y offset to page: ' + py); + // setOffset([px, py]); + // setImageDimensions([width, height]); + // }); + // }, []); /** * need a handler to take care of creating a tagged user object, append that object to the taggList state variable. * @returns */ - useEffect(() => { - imageRef.current.measure((fx, fy, width, height, px, py) => { - console.log('Component width is: ' + width); - console.log('Component height is: ' + height); - console.log('X offset to frame: ' + fx); - console.log('Y offset to frame: ' + fy); - console.log('X offset to page: ' + px); - console.log('Y offset to page: ' + py); - setOffset([px, py]); - setImageDimensions([width, height]); - }); - }, []); + // useEffect(() => { + // imageRef.current.measure((fx, fy, width, height, px, py) => { + // console.log('Component width is: ' + width); + // console.log('Component height is: ' + height); + // console.log('X offset to frame: ' + fx); + // console.log('Y offset to frame: ' + fy); + // console.log('X offset to page: ' + px); + // console.log('Y offset to page: ' + py); + // setOffset([px, py]); + // setImageDimensions([width, height]); + // }); + // }, []); const handleShare = async () => { setLoading(true); @@ -179,23 +250,41 @@ const CaptionScreen: React.FC = ({route, navigation}) => { onChange={setCaption} partTypes={mentionPartTypes('blue')} /> - setIsTop(true)} - onPressOut={() => setIsTop(false)}> - console.log('Hello world')} - setStart={setCurStart} - /> - + {/* Draggables - Commented out for now */} + {/* + bringToFront(0)}> + console.log('Hello world')} + setStart={setCurStart} + /> + + bringToFront(1)}> + console.log('Hello world')} + setStart={setCurStart} + /> + */} + {/* */} -- cgit v1.2.3-70-g09d2 From 0b4cbd6f9d7aa56c0200bd19ea5df4abd6964964 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Thu, 20 May 2021 16:50:24 -0700 Subject: Fix zIndex draggable placement --- src/components/common/Draggable.tsx | 30 ++-- src/components/profile/TaggAvatar.tsx | 4 +- src/components/taggs/TaggDraggable.tsx | 2 +- src/screens/profile/CaptionScreen.tsx | 251 ++++++++++++++++----------------- 4 files changed, 146 insertions(+), 141 deletions(-) (limited to 'src') diff --git a/src/components/common/Draggable.tsx b/src/components/common/Draggable.tsx index 409ca6de..59ea78f0 100644 --- a/src/components/common/Draggable.tsx +++ b/src/components/common/Draggable.tsx @@ -60,6 +60,7 @@ interface IProps { minY?: number; maxX?: number; maxY?: number; + onDragStart?: () => void; } export default function Draggable(props: IProps) { @@ -89,6 +90,7 @@ export default function Draggable(props: IProps) { minY, maxX, maxY, + onDragStart, } = props; // The Animated object housing our xy value so that we can spring back @@ -102,6 +104,8 @@ export default function Draggable(props: IProps) { // Whether we're currently dragging or not const isDragging = React.useRef(false); + const [zIndex, setZIndex] = React.useState(z); + const getBounds = React.useCallback(() => { const left = x + offsetFromStart.current.x; const top = y + offsetFromStart.current.y; @@ -151,6 +155,7 @@ export default function Draggable(props: IProps) { pan.current.setOffset(offsetFromStart.current); pan.current.setValue({x: 0, y: 0}); } + onDragStart(); }, [getBounds, shouldReverse], ); @@ -183,12 +188,16 @@ export default function Draggable(props: IProps) { onMoveShouldSetPanResponderCapture: (_, gestureState) => shouldStartDrag(gestureState), onPanResponderGrant, + // onPanResponderStart, onPanResponderMove: Animated.event([], { // Typed incorrectly https://reactnative.dev/docs/panresponder listener: handleOnDrag, useNativeDriver: false, }), - onPanResponderRelease, + onPanResponderRelease: (_) => { + console.log('end'); + // setZIndex(1); + }, }); }, [ handleOnDrag, @@ -218,16 +227,17 @@ export default function Draggable(props: IProps) { left: 0, width: Window.width, height: Window.height, - zIndex: z, + elevation: zIndex, + zIndex: zIndex, }; - }, []); + }, [zIndex]); const dragItemCss = React.useMemo(() => { const style: StyleProp = { top: y, left: x, - elevation: z, - zIndex: z, + elevation: zIndex, + zIndex: zIndex, }; if (renderColor) { style.backgroundColor = renderColor; @@ -248,7 +258,7 @@ export default function Draggable(props: IProps) { width: renderSize, height: renderSize, }; - }, [children, isCircle, renderColor, renderSize, x, y, z]); + }, [children, isCircle, renderColor, renderSize, x, y, zIndex]); const touchableContent = React.useMemo(() => { if (children) { @@ -312,10 +322,10 @@ export default function Draggable(props: IProps) { onLayout={handleOnLayout} style={dragItemCss} disabled={true} - onPress={onShortPressRelease} - onLongPress={onLongPress} - onPressIn={onPressIn} - onPressOut={handlePressOut}> + onPress={() => console.log('ere')} + onLongPress={() => console.log('eeee')} + onPressIn={() => console.log('HERE')} + onPressOut={() => console.log('reeee')}> {touchableContent} diff --git a/src/components/profile/TaggAvatar.tsx b/src/components/profile/TaggAvatar.tsx index 8cd52a2f..135c6e5a 100644 --- a/src/components/profile/TaggAvatar.tsx +++ b/src/components/profile/TaggAvatar.tsx @@ -23,8 +23,8 @@ const TaggAvatar: React.FC = ({ userXId, editable = false, }) => { - const state = useSelector((state: RootState) => state); - console.log('STATE', state.userX); + // const state = useSelector((state: RootState) => state); + // console.log('STATE', state.userX); const {avatar, user} = useSelector((state: RootState) => userXId ? state.userX[screenType][userXId] : state.user, ); diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx index e31f69c2..1ef2e69f 100644 --- a/src/components/taggs/TaggDraggable.tsx +++ b/src/components/taggs/TaggDraggable.tsx @@ -53,7 +53,7 @@ const TaggDraggable: React.FC = ( }; return ( - + = ({route, navigation}) => { const [caption, setCaption] = useState(''); const [loading, setLoading] = useState(false); // const [isTop, setIsTop] = useState(false); - // const zIndex = [0, 999]; - // created a state variable to keep track of every tag - // idea is that each element in the list - // const [taggList, setTaggList] = useState([ - // { - // first_name: 'Ivan', - // id: 'cee45bf8-7f3d-43c8-99bb-ec04908efe58', - // last_name: 'Chen', - // thumbnail_url: - // 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-cee45bf8-7f3d-43c8-99bb-ec04908efe58-thumbnail.jpg', - // username: 'ivan.tagg', - // }, - // { - // first_name: 'Ankit', - // id: '3bcf6947-bee6-46b0-ad02-6f4d25eaeac3', - // last_name: 'Thanekar', - // thumbnail_url: - // 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-3bcf6947-bee6-46b0-ad02-6f4d25eaeac3-thumbnail.jpg', - // username: 'ankit.thanekar', - // }, - // ]); + const zIndex = [0, 999]; const imageRef = useRef(null); - // const [offset, setOffset] = useState([0, 0]); - // const [curStart, setCurStart] = useState([0, 0]); - - // const [imageDimensions, setImageDimensions] = useState([0, 0]); - // // created a test user - BUG - failed to register a profile visit - - // const testUser: UserType = { - // userId: 'ID-1234-567', - // username: 'dragonofthewest', - // }; + const [offset, setOffset] = useState([0, 0]); + const [curStart, setCurStart] = useState([0, 0]); + const [imageDimensions, setImageDimensions] = useState([0, 0]); // created a state variable to keep track of every tag // idea is that each element in the list - // const [taggList, setTaggList] = useState([ - // { - // first_name: 'Ivan', - // id: 'cee45bf8-7f3d-43c8-99bb-ec04908efe58', - // last_name: 'Chen', - // thumbnail_url: - // 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-cee45bf8-7f3d-43c8-99bb-ec04908efe58-thumbnail.jpg', - // username: 'ivan.tagg', - // }, - // { - // first_name: 'Ankit', - // id: '3bcf6947-bee6-46b0-ad02-6f4d25eaeac3', - // last_name: 'Thanekar', - // thumbnail_url: - // 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-3bcf6947-bee6-46b0-ad02-6f4d25eaeac3-thumbnail.jpg', - // username: 'ankit.thanekar', - // }, - // ]); - // const imageRef = useRef(null); + const [taggList, setTaggList] = useState([ + { + first_name: 'Ivan', + id: 'cee45bf8-7f3d-43c8-99bb-ec04908efe58', + last_name: 'Chen', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-cee45bf8-7f3d-43c8-99bb-ec04908efe58-thumbnail.jpg', + username: 'ivan.tagg', + }, + { + first_name: 'Ankit', + id: '3bcf6947-bee6-46b0-ad02-6f4d25eaeac3', + last_name: 'Thanekar', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-3bcf6947-bee6-46b0-ad02-6f4d25eaeac3-thumbnail.jpg', + username: 'ankit.thanekar', + }, + ]); // state variables used to position draggables - // const [offset, setOffset] = useState([0, 0]); - // const [curStart, setCurStart] = useState([0, 0]); - // const [imageDimensions, setImageDimensions] = useState([0, 0]); // state var used to keep track of draggable z ordering - // const [layerOrder, setLayerOrder] = useState([]); + const [layerOrder, setLayerOrder] = useState([]); // created a test user - BUG - failed to register a profile visit - // const testUser: UserType = { // userId: 'ID-1234-567', @@ -136,58 +108,80 @@ const CaptionScreen: React.FC = ({route, navigation}) => { * Helper function that we use to keep track of which element should be on top most layer * @param index */ - // const bringToFront = (index: number) => { - // let currUser = taggList[index].id; - // const newLayerOrder = [...layerOrder]; - // if (layerOrder.includes(currUser)) { - // newLayerOrder.splice(newLayerOrder.indexOf(currUser), 1); - // } - // setLayerOrder([currUser, ...newLayerOrder]); - // console.log('ON TOP IS THIS ONE: ' + layerOrder[0]); - // }; + const bringToFront = async (index: number) => { + let currUser = taggList[index].id; + // console.log(currUser); + // console.log('layer order : ' + layerOrder); + // if (layerOrder.length === 0) { + // setLayerOrder([currUser]); + // } + const newLayerOrder: string[] = []; + newLayerOrder.push(currUser); + newLayerOrder.concat(layerOrder); + // console.log('BEFORE NLOrder' + newLayerOrder); + // if (layerOrder.includes(currUser)) { + // newLayerOrder.splice(newLayerOrder.indexOf(currUser), 1); + // } + // console.log('NLOrder' + newLayerOrder); + // const newArray = ; + // console.log('should be', [currUser, ...newLayerOrder]); + await setLayerOrder(newLayerOrder); + // console.log('is', layerOrder); + // console.log('ON TOP IS THIS ONE: ' + layerOrder[0]); + }; + + useEffect(() => { + console.log( + 'layerOPrder is updating ' + + typeof layerOrder + + ' ' + + layerOrder + + ' ' + + layerOrder.length, + ); + }, [layerOrder]); + console.log('outside: ' + layerOrder); + useEffect(() => { + console.log( + 'wer are nupdating is updating ' + + typeof layerOrder + + ' ' + + layerOrder + + ' ' + + layerOrder.length, + ); + }); + /** * Helper function that tells us if the current draggable is the topmost one. * @param index */ - // const isOnTop = (index: number) => { - // let currUser = taggList[index].id; - // return currUser === layerOrder[0]; - // }; + const isOnTop = (index: number) => { + let currUser = taggList[index].id; + return currUser === layerOrder[0]; + }; /** * function that sets the initial position of each newly created tag * @returns */ - // useEffect(() => { - // imageRef.current.measure((fx, fy, width, height, px, py) => { - // console.log('Component width is: ' + width); - // console.log('Component height is: ' + height); - // console.log('X offset to frame: ' + fx); - // console.log('Y offset to frame: ' + fy); - // console.log('X offset to page: ' + px); - // console.log('Y offset to page: ' + py); - // setOffset([px, py]); - // setImageDimensions([width, height]); - // }); - // }, []); - /** * need a handler to take care of creating a tagged user object, append that object to the taggList state variable. * @returns */ - // useEffect(() => { - // imageRef.current.measure((fx, fy, width, height, px, py) => { - // console.log('Component width is: ' + width); - // console.log('Component height is: ' + height); - // console.log('X offset to frame: ' + fx); - // console.log('Y offset to frame: ' + fy); - // console.log('X offset to page: ' + px); - // console.log('Y offset to page: ' + py); - // setOffset([px, py]); - // setImageDimensions([width, height]); - // }); - // }, []); + useEffect(() => { + imageRef.current.measure((fx, fy, width, height, px, py) => { + console.log('Component width is: ' + width); + console.log('Component height is: ' + height); + console.log('X offset to frame: ' + fx); + console.log('Y offset to frame: ' + fy); + console.log('X offset to page: ' + px); + console.log('Y offset to page: ' + py); + setOffset([px, py]); + setImageDimensions([width, height]); + }); + }, []); const handleShare = async () => { setLoading(true); @@ -251,40 +245,41 @@ const CaptionScreen: React.FC = ({route, navigation}) => { partTypes={mentionPartTypes('blue')} /> {/* Draggables - Commented out for now */} - {/* - bringToFront(0)}> - console.log('Hello world')} - setStart={setCurStart} - /> - - bringToFront(1)}> - console.log('Hello world')} - setStart={setCurStart} - /> - */} - {/* */} + bringToFront(0)}> + {/* > */} + console.log('Hello world')} + setStart={setCurStart} + /> + + bringToFront(1)}> + {/* onPressIn={() => console.log('bleh')}> */} + console.log('Hello world')} + setStart={setCurStart} + /> + -- cgit v1.2.3-70-g09d2 From cd25cc9bd421f142e84741a03c1c1e4da47a094c Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 20 May 2021 17:10:08 -0700 Subject: Update layer order --- src/screens/profile/CaptionScreen.tsx | 47 +++++------------------------------ 1 file changed, 6 insertions(+), 41 deletions(-) (limited to 'src') diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index a2b9a3ad..cffb7153 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -108,50 +108,15 @@ const CaptionScreen: React.FC = ({route, navigation}) => { * Helper function that we use to keep track of which element should be on top most layer * @param index */ - const bringToFront = async (index: number) => { + const bringToFront = (index: number) => { let currUser = taggList[index].id; - // console.log(currUser); - // console.log('layer order : ' + layerOrder); - // if (layerOrder.length === 0) { - // setLayerOrder([currUser]); - // } - const newLayerOrder: string[] = []; - newLayerOrder.push(currUser); - newLayerOrder.concat(layerOrder); - // console.log('BEFORE NLOrder' + newLayerOrder); - // if (layerOrder.includes(currUser)) { - // newLayerOrder.splice(newLayerOrder.indexOf(currUser), 1); - // } - // console.log('NLOrder' + newLayerOrder); - // const newArray = ; - // console.log('should be', [currUser, ...newLayerOrder]); - await setLayerOrder(newLayerOrder); - // console.log('is', layerOrder); - // console.log('ON TOP IS THIS ONE: ' + layerOrder[0]); + if (layerOrder.includes(currUser)) { + layerOrder.splice(layerOrder.indexOf(currUser), 1); + } + layerOrder.push(currUser); + setLayerOrder(layerOrder); }; - useEffect(() => { - console.log( - 'layerOPrder is updating ' + - typeof layerOrder + - ' ' + - layerOrder + - ' ' + - layerOrder.length, - ); - }, [layerOrder]); - console.log('outside: ' + layerOrder); - useEffect(() => { - console.log( - 'wer are nupdating is updating ' + - typeof layerOrder + - ' ' + - layerOrder + - ' ' + - layerOrder.length, - ); - }); - /** * Helper function that tells us if the current draggable is the topmost one. * @param index -- cgit v1.2.3-70-g09d2 From 55dd8ea512f7d7acda7189bf3a7e1a42c5b88e79 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Thu, 20 May 2021 17:15:09 -0700 Subject: Comment out draggables --- src/screens/profile/CaptionScreen.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index cffb7153..3d392361 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -210,17 +210,16 @@ const CaptionScreen: React.FC = ({route, navigation}) => { partTypes={mentionPartTypes('blue')} /> {/* Draggables - Commented out for now */} - bringToFront(0)}> - {/* > */} = ({route, navigation}) => { bringToFront(1)}> - {/* onPressIn={() => console.log('bleh')}> */} console.log('Hello world')} setStart={setCurStart} /> - + */} -- cgit v1.2.3-70-g09d2 From dc3f4fe893346be0416c4ba30a8ecc4a7f8b890c Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Thu, 20 May 2021 17:26:00 -0700 Subject: Fix Linter --- src/screens/profile/CaptionScreen.tsx | 105 +++++++++++++++++----------------- 1 file changed, 53 insertions(+), 52 deletions(-) (limited to 'src') diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 3d392361..ecb51531 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -1,6 +1,6 @@ import {RouteProp} from '@react-navigation/native'; import {StackNavigationProp} from '@react-navigation/stack'; -import React, {Fragment, useRef, useState, useEffect} from 'react'; +import React, {Fragment, useRef, useState} from 'react'; import { Alert, Image, @@ -8,7 +8,7 @@ import { KeyboardAvoidingView, Platform, StyleSheet, - Text, + // Text, TouchableWithoutFeedback, View, } from 'react-native'; @@ -17,9 +17,9 @@ import {Button} from 'react-native-elements'; import {useDispatch, useSelector} from 'react-redux'; import {SearchBackground} from '../../components'; import {CaptionScreenHeader} from '../../components/'; -import Draggable from '../../components/common/Draggable'; +// import Draggable from '../../components/common/Draggable'; import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator'; -import TaggDraggable from '../../components/taggs/TaggDraggable'; +// 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'; @@ -31,7 +31,7 @@ import { import {RootState} from '../../store/rootReducer'; import {SCREEN_WIDTH, StatusBarHeight} from '../../utils'; import {mentionPartTypes} from '../../utils/comments'; -import {TouchableOpacity} from 'react-native-gesture-handler'; +// import {TouchableOpacity} from 'react-native-gesture-handler'; /** * Upload Screen to allow users to upload posts to Tagg @@ -61,36 +61,37 @@ const CaptionScreen: React.FC = ({route, navigation}) => { const [caption, setCaption] = useState(''); const [loading, setLoading] = useState(false); // const [isTop, setIsTop] = useState(false); - const zIndex = [0, 999]; const imageRef = useRef(null); - const [offset, setOffset] = useState([0, 0]); - const [curStart, setCurStart] = useState([0, 0]); - const [imageDimensions, setImageDimensions] = useState([0, 0]); + // const zIndex = [0, 999]; + // const [offset, setOffset] = useState([0, 0]); + // const [curStart, setCurStart] = useState([0, 0]); + // const [imageDimensions, setImageDimensions] = useState([0, 0]); + // created a state variable to keep track of every tag // idea is that each element in the list - const [taggList, setTaggList] = useState([ - { - first_name: 'Ivan', - id: 'cee45bf8-7f3d-43c8-99bb-ec04908efe58', - last_name: 'Chen', - thumbnail_url: - 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-cee45bf8-7f3d-43c8-99bb-ec04908efe58-thumbnail.jpg', - username: 'ivan.tagg', - }, - { - first_name: 'Ankit', - id: '3bcf6947-bee6-46b0-ad02-6f4d25eaeac3', - last_name: 'Thanekar', - thumbnail_url: - 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-3bcf6947-bee6-46b0-ad02-6f4d25eaeac3-thumbnail.jpg', - username: 'ankit.thanekar', - }, - ]); + // const [taggList, setTaggList] = useState([ + // { + // first_name: 'Ivan', + // id: 'cee45bf8-7f3d-43c8-99bb-ec04908efe58', + // last_name: 'Chen', + // thumbnail_url: + // 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-cee45bf8-7f3d-43c8-99bb-ec04908efe58-thumbnail.jpg', + // username: 'ivan.tagg', + // }, + // { + // first_name: 'Ankit', + // id: '3bcf6947-bee6-46b0-ad02-6f4d25eaeac3', + // last_name: 'Thanekar', + // thumbnail_url: + // 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-3bcf6947-bee6-46b0-ad02-6f4d25eaeac3-thumbnail.jpg', + // username: 'ankit.thanekar', + // }, + // ]); // state variables used to position draggables // state var used to keep track of draggable z ordering - const [layerOrder, setLayerOrder] = useState([]); + // const [layerOrder, setLayerOrder] = useState([]); // created a test user - BUG - failed to register a profile visit - // const testUser: UserType = { // userId: 'ID-1234-567', @@ -108,23 +109,23 @@ const CaptionScreen: React.FC = ({route, navigation}) => { * Helper function that we use to keep track of which element should be on top most layer * @param index */ - const bringToFront = (index: number) => { - let currUser = taggList[index].id; - if (layerOrder.includes(currUser)) { - layerOrder.splice(layerOrder.indexOf(currUser), 1); - } - layerOrder.push(currUser); - setLayerOrder(layerOrder); - }; + // const bringToFront = (index: number) => { + // let currUser = taggList[index].id; + // if (layerOrder.includes(currUser)) { + // layerOrder.splice(layerOrder.indexOf(currUser), 1); + // } + // layerOrder.push(currUser); + // setLayerOrder(layerOrder); + // }; /** * Helper function that tells us if the current draggable is the topmost one. * @param index */ - const isOnTop = (index: number) => { - let currUser = taggList[index].id; - return currUser === layerOrder[0]; - }; + // const isOnTop = (index: number) => { + // let currUser = taggList[index].id; + // return currUser === layerOrder[0]; + // }; /** * function that sets the initial position of each newly created tag * @returns @@ -135,18 +136,18 @@ const CaptionScreen: React.FC = ({route, navigation}) => { * @returns */ - useEffect(() => { - imageRef.current.measure((fx, fy, width, height, px, py) => { - console.log('Component width is: ' + width); - console.log('Component height is: ' + height); - console.log('X offset to frame: ' + fx); - console.log('Y offset to frame: ' + fy); - console.log('X offset to page: ' + px); - console.log('Y offset to page: ' + py); - setOffset([px, py]); - setImageDimensions([width, height]); - }); - }, []); + // useEffect(() => { + // imageRef.current.measure((fx, fy, width, height, px, py) => { + // console.log('Component width is: ' + width); + // console.log('Component height is: ' + height); + // console.log('X offset to frame: ' + fx); + // console.log('Y offset to frame: ' + fy); + // console.log('X offset to page: ' + px); + // console.log('Y offset to page: ' + py); + // setOffset([px, py]); + // setImageDimensions([width, height]); + // }); + // }, []); const handleShare = async () => { setLoading(true); -- cgit v1.2.3-70-g09d2 From 8da7949203b574a2a80812fa5afabf42118898b5 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Thu, 20 May 2021 17:31:19 -0700 Subject: Fix Linter 2 --- src/components/common/Draggable.tsx | 29 +++++++++++++++-------------- 1 file changed, 15 insertions(+), 14 deletions(-) (limited to 'src') diff --git a/src/components/common/Draggable.tsx b/src/components/common/Draggable.tsx index 59ea78f0..64cec7b1 100644 --- a/src/components/common/Draggable.tsx +++ b/src/components/common/Draggable.tsx @@ -77,10 +77,10 @@ export default function Draggable(props: IProps) { animatedViewProps, touchableOpacityProps, onDrag, - onShortPressRelease, + // onShortPressRelease, onDragRelease, - onLongPress, - onPressIn, + // onLongPress, + // onPressIn, onPressOut, onRelease, x, @@ -104,7 +104,8 @@ export default function Draggable(props: IProps) { // Whether we're currently dragging or not const isDragging = React.useRef(false); - const [zIndex, setZIndex] = React.useState(z); + // const [zIndex, setZIndex] = React.useState(z); + const zIndex = z; const getBounds = React.useCallback(() => { const left = x + offsetFromStart.current.x; @@ -148,7 +149,7 @@ export default function Draggable(props: IProps) { ); const onPanResponderGrant = React.useCallback( - (e: GestureResponderEvent, gestureState: PanResponderGestureState) => { + (_: GestureResponderEvent) => { startBounds.current = getBounds(); isDragging.current = true; if (!shouldReverse) { @@ -280,15 +281,15 @@ export default function Draggable(props: IProps) { childSize.current = {x: width, y: height}; }, []); - const handlePressOut = React.useCallback( - (event: GestureResponderEvent) => { - onPressOut(event); - if (!isDragging.current) { - onRelease(event, false); - } - }, - [onPressOut, onRelease], - ); + // const handlePressOut = React.useCallback( + // (event: GestureResponderEvent) => { + // onPressOut(event); + // if (!isDragging.current) { + // onRelease(event, false); + // } + // }, + // [onPressOut, onRelease], + // ); const getDebugView = React.useCallback(() => { const {width, height} = Dimensions.get('window'); -- cgit v1.2.3-70-g09d2 From 1dd836609297a287d4ce32ef61c72746f8ac838c Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Thu, 20 May 2021 17:33:18 -0700 Subject: Fix Linter 3 --- src/components/common/Draggable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/components/common/Draggable.tsx b/src/components/common/Draggable.tsx index 64cec7b1..94446a18 100644 --- a/src/components/common/Draggable.tsx +++ b/src/components/common/Draggable.tsx @@ -81,7 +81,7 @@ export default function Draggable(props: IProps) { onDragRelease, // onLongPress, // onPressIn, - onPressOut, + // onPressOut, onRelease, x, y, -- cgit v1.2.3-70-g09d2 From a472f6387b9530ce440cb02101b5b778875f04a1 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 20 May 2021 23:30:18 -0400 Subject: Add support for moment tag notifications --- src/components/notifications/Notification.tsx | 134 ++++++++++++++------------ src/types/types.ts | 2 + 2 files changed, 74 insertions(+), 62 deletions(-) (limited to 'src') diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx index cb62047a..b0692c9e 100644 --- a/src/components/notifications/Notification.tsx +++ b/src/components/notifications/Notification.tsx @@ -84,7 +84,8 @@ const Notification: React.FC = (props) => { let obj; if ( notification_type === 'MOM_3+' || - notification_type === 'MOM_FRIEND' + notification_type === 'MOM_FRIEND' || + notification_type === 'MOM_TAG' ) { obj = notification_object as MomentType; url = obj.thumbnail_url; @@ -185,6 +186,7 @@ const Notification: React.FC = (props) => { break; case 'MOM_3+': case 'MOM_FRIEND': + case 'MOM_TAG': const object = notification_object as MomentType; await fetchUserX( dispatch, @@ -236,19 +238,27 @@ const Notification: React.FC = (props) => { style={styles.avatarContainer}> - {notification_type === 'SYSTEM_MSG' ? ( - // Only verbage - - - {verbage} - - {getTimeInShorthand(timestamp)} - + <> + {/* Text content: Actor name and verbage*/} + {notification_type === 'SYSTEM_MSG' || + notification_type === 'MOM_TAG' ? ( + // Only verbage + + + {notification_type === 'SYSTEM_MSG' ? ( + {verbage} + ) : ( + + {notification_title} + {verbage} + + {getTimeInShorthand(timestamp)} + + + )} + - - ) : ( - <> - {/* Text content: Actor name and verbage*/} + ) : ( {notification_title} @@ -256,63 +266,63 @@ const Notification: React.FC = (props) => { - - {verbage} + + {verbage} - {' '} {getTimeInShorthand(timestamp)} {/* {verbage} */} - {/* Friend request accept/decline button */} - {notification_type === 'FRD_REQ' && ( - - - - )} - {notification_type === 'FRD_ACPT' && ( - - - + )} + {/* Friend request accept/decline button */} + {notification_type === 'FRD_REQ' && ( + + + + )} + {notification_type === 'FRD_ACPT' && ( + + + + )} + {/* Moment Image Preview */} + {(notification_type === 'CMT' || + notification_type === 'MOM_3+' || + notification_type === 'MOM_TAG' || + notification_type === 'MOM_FRIEND') && + notification_object && ( + + + )} - {/* Moment Image Preview */} - {(notification_type === 'CMT' || - notification_type === 'MOM_3+' || - notification_type === 'MOM_FRIEND') && - notification_object && ( - - - - )} - - )} + ); diff --git a/src/types/types.ts b/src/types/types.ts index e9975529..e1935d26 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -240,6 +240,8 @@ export type TypeOfNotification = | 'MOM_FRIEND' // notification_object is undefined | 'INVT_ONBRD' + // notification_object is MomentType + | 'MOM_TAG' // notification_object is undefined | 'SYSTEM_MSG'; -- cgit v1.2.3-70-g09d2 From 1530471e395eeae5a1de45aa7a2eaa054343b6af Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 20 May 2021 23:47:13 -0400 Subject: Clean up code --- src/components/notifications/Notification.tsx | 151 +++++++++++++------------- 1 file changed, 74 insertions(+), 77 deletions(-) (limited to 'src') diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx index b0692c9e..3f9cc56a 100644 --- a/src/components/notifications/Notification.tsx +++ b/src/components/notifications/Notification.tsx @@ -238,91 +238,88 @@ const Notification: React.FC = (props) => { style={styles.avatarContainer}> - <> - {/* Text content: Actor name and verbage*/} - {notification_type === 'SYSTEM_MSG' || - notification_type === 'MOM_TAG' ? ( - // Only verbage - - - {notification_type === 'SYSTEM_MSG' ? ( - {verbage} - ) : ( - - {notification_title} - {verbage} - - {getTimeInShorthand(timestamp)} - - - )} - - - ) : ( - - - {notification_title} - - + {notification_type === 'SYSTEM_MSG' || notification_type === 'MOM_TAG' ? ( + // Single-line body text with timestamp + + + {notification_type === 'SYSTEM_MSG' ? ( + {verbage} + ) : ( + {notification_title} {verbage} {getTimeInShorthand(timestamp)} - {/* {verbage} */} - - - )} - {/* Friend request accept/decline button */} - {notification_type === 'FRD_REQ' && ( - - - - )} - {notification_type === 'FRD_ACPT' && ( - - + )} + + ) : ( + // Two-line title and body text with timestamp + + + {notification_title} + + + + {verbage} + + {getTimeInShorthand(timestamp)} + + + + + )} + {/* Friend request accept/decline button */} + {notification_type === 'FRD_REQ' && ( + + + + )} + {/* Message button when user accepts friend request */} + {notification_type === 'FRD_ACPT' && ( + + + + )} + {/* Moment Image Preview */} + {(notification_type === 'CMT' || + notification_type === 'MOM_3+' || + notification_type === 'MOM_TAG' || + notification_type === 'MOM_FRIEND') && + notification_object && ( + + + )} - {/* Moment Image Preview */} - {(notification_type === 'CMT' || - notification_type === 'MOM_3+' || - notification_type === 'MOM_TAG' || - notification_type === 'MOM_FRIEND') && - notification_object && ( - - - - )} - ); -- cgit v1.2.3-70-g09d2 From 872c58ddcf3b6185da9909131161f418d9960c07 Mon Sep 17 00:00:00 2001 From: George Rusu Date: Fri, 21 May 2021 10:14:39 -0700 Subject: Remove unnecessary comments, print statements --- src/components/common/Draggable.tsx | 57 +++++++++++++++++----------------- src/components/taggs/TaggDraggable.tsx | 12 +++---- src/screens/profile/CaptionScreen.tsx | 28 ++++++----------- 3 files changed, 44 insertions(+), 53 deletions(-) (limited to 'src') diff --git a/src/components/common/Draggable.tsx b/src/components/common/Draggable.tsx index 94446a18..676e0fe5 100644 --- a/src/components/common/Draggable.tsx +++ b/src/components/common/Draggable.tsx @@ -5,20 +5,19 @@ import React from 'react'; import { - View, - Text, - Image, - PanResponder, Animated, Dimensions, - TouchableOpacity, - StyleSheet, GestureResponderEvent, + Image, + PanResponder, PanResponderGestureState, StyleProp, + StyleSheet, + Text, + TouchableOpacity, + View, + ViewStyle, } from 'react-native'; -// import PropTypes from 'prop-types'; -import {ViewStyle} from 'react-native'; function clamp(number: number, min: number, max: number) { return Math.max(min, Math.min(number, max)); @@ -77,11 +76,11 @@ export default function Draggable(props: IProps) { animatedViewProps, touchableOpacityProps, onDrag, - // onShortPressRelease, + onShortPressRelease, onDragRelease, - // onLongPress, - // onPressIn, - // onPressOut, + onLongPress, + onPressIn, + onPressOut, onRelease, x, y, @@ -195,10 +194,10 @@ export default function Draggable(props: IProps) { listener: handleOnDrag, useNativeDriver: false, }), - onPanResponderRelease: (_) => { - console.log('end'); - // setZIndex(1); - }, + // onPanResponderRelease: (_) => { + // // console.log('end'); + // // setZIndex(1); + // }, }); }, [ handleOnDrag, @@ -281,15 +280,15 @@ export default function Draggable(props: IProps) { childSize.current = {x: width, y: height}; }, []); - // const handlePressOut = React.useCallback( - // (event: GestureResponderEvent) => { - // onPressOut(event); - // if (!isDragging.current) { - // onRelease(event, false); - // } - // }, - // [onPressOut, onRelease], - // ); + const handlePressOut = React.useCallback( + (event: GestureResponderEvent) => { + onPressOut(event); + if (!isDragging.current) { + onRelease(event, false); + } + }, + [onPressOut, onRelease], + ); const getDebugView = React.useCallback(() => { const {width, height} = Dimensions.get('window'); @@ -323,10 +322,10 @@ export default function Draggable(props: IProps) { onLayout={handleOnLayout} style={dragItemCss} disabled={true} - onPress={() => console.log('ere')} - onLongPress={() => console.log('eeee')} - onPressIn={() => console.log('HERE')} - onPressOut={() => console.log('reeee')}> + onPress={onShortPressRelease} + onLongPress={onLongPress} + onPressIn={onPressIn} + onPressOut={onPressOut}> {touchableContent} diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx index 1ef2e69f..4e45f000 100644 --- a/src/components/taggs/TaggDraggable.tsx +++ b/src/components/taggs/TaggDraggable.tsx @@ -37,12 +37,12 @@ const TaggDraggable: React.FC = ( const draggableRef = useRef(null); useEffect(() => { draggableRef.current.measure((fx, fy, width, height, px, py) => { - console.log('Drag Component width is: ' + width); - console.log('Drag Component height is: ' + height); - console.log('X offset to frame: ' + fx); - console.log('Y offset to frame: ' + fy); - console.log('X offset to page: ' + px); - console.log('Y offset to page: ' + py); + // console.log('Drag Component width is: ' + width); + // console.log('Drag Component height is: ' + height); + // console.log('X offset to frame: ' + fx); + // console.log('Y offset to frame: ' + fy); + // console.log('X offset to page: ' + px); + // console.log('Y offset to page: ' + py); setStart([width, height]); }); }, []); diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index ecb51531..ec55e43a 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -17,9 +17,7 @@ import {Button} from 'react-native-elements'; import {useDispatch, useSelector} from 'react-redux'; 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'; @@ -31,7 +29,6 @@ import { import {RootState} from '../../store/rootReducer'; import {SCREEN_WIDTH, StatusBarHeight} from '../../utils'; import {mentionPartTypes} from '../../utils/comments'; -// import {TouchableOpacity} from 'react-native-gesture-handler'; /** * Upload Screen to allow users to upload posts to Tagg @@ -64,10 +61,14 @@ const CaptionScreen: React.FC = ({route, navigation}) => { const imageRef = useRef(null); // const zIndex = [0, 999]; + // state variables used to position draggables // const [offset, setOffset] = useState([0, 0]); // const [curStart, setCurStart] = useState([0, 0]); // const [imageDimensions, setImageDimensions] = useState([0, 0]); + // state var used to keep track of draggable z ordering + // const [layerOrder, setLayerOrder] = useState([]); + // created a state variable to keep track of every tag // idea is that each element in the list // const [taggList, setTaggList] = useState([ @@ -88,15 +89,6 @@ const CaptionScreen: React.FC = ({route, navigation}) => { // username: 'ankit.thanekar', // }, // ]); - // state variables used to position draggables - - // state var used to keep track of draggable z ordering - // const [layerOrder, setLayerOrder] = useState([]); - // created a test user - BUG - failed to register a profile visit - - // const testUser: UserType = { - // userId: 'ID-1234-567', - // username: 'dragonofthewest', - // }; const navigateToProfile = () => { //Since the logged In User is navigating to own profile, useXId is not required @@ -138,12 +130,12 @@ const CaptionScreen: React.FC = ({route, navigation}) => { // useEffect(() => { // imageRef.current.measure((fx, fy, width, height, px, py) => { - // console.log('Component width is: ' + width); - // console.log('Component height is: ' + height); - // console.log('X offset to frame: ' + fx); - // console.log('Y offset to frame: ' + fy); - // console.log('X offset to page: ' + px); - // console.log('Y offset to page: ' + py); + // // console.log('Component width is: ' + width); + // // console.log('Component height is: ' + height); + // // console.log('X offset to frame: ' + fx); + // // console.log('Y offset to frame: ' + fy); + // // console.log('X offset to page: ' + px); + // // console.log('Y offset to page: ' + py); // setOffset([px, py]); // setImageDimensions([width, height]); // }); -- cgit v1.2.3-70-g09d2 From 502c60aff2e57eb68050f29c3d32d27c9c54b15e Mon Sep 17 00:00:00 2001 From: George Rusu Date: Fri, 21 May 2021 10:28:11 -0700 Subject: Fix linting issues --- src/components/common/Draggable.tsx | 18 +++++++++--------- src/components/taggs/TaggDraggable.tsx | 22 ++++++++++++++-------- 2 files changed, 23 insertions(+), 17 deletions(-) (limited to 'src') diff --git a/src/components/common/Draggable.tsx b/src/components/common/Draggable.tsx index 676e0fe5..edd29b78 100644 --- a/src/components/common/Draggable.tsx +++ b/src/components/common/Draggable.tsx @@ -280,15 +280,15 @@ export default function Draggable(props: IProps) { childSize.current = {x: width, y: height}; }, []); - const handlePressOut = React.useCallback( - (event: GestureResponderEvent) => { - onPressOut(event); - if (!isDragging.current) { - onRelease(event, false); - } - }, - [onPressOut, onRelease], - ); + // const handlePressOut = React.useCallback( + // (event: GestureResponderEvent) => { + // onPressOut(event); + // if (!isDragging.current) { + // onRelease(event, false); + // } + // }, + // [onPressOut, onRelease], + // ); const getDebugView = React.useCallback(() => { const {width, height} = Dimensions.get('window'); diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx index 4e45f000..b18c35b2 100644 --- a/src/components/taggs/TaggDraggable.tsx +++ b/src/components/taggs/TaggDraggable.tsx @@ -35,14 +35,20 @@ const TaggDraggable: React.FC = ( let uriTip = require('../../assets/images/Tagg-Triangle.png'); const draggableRef = useRef(null); + // useEffect(() => { + // draggableRef.current.measure((fx, fy, width, height, px, py) => { + // // console.log('Drag Component width is: ' + width); + // // console.log('Drag Component height is: ' + height); + // // console.log('X offset to frame: ' + fx); + // // console.log('Y offset to frame: ' + fy); + // // console.log('X offset to page: ' + px); + // // console.log('Y offset to page: ' + py); + // setStart([width, height]); + // }); + // }, []); + useEffect(() => { - draggableRef.current.measure((fx, fy, width, height, px, py) => { - // console.log('Drag Component width is: ' + width); - // console.log('Drag Component height is: ' + height); - // console.log('X offset to frame: ' + fx); - // console.log('Y offset to frame: ' + fy); - // console.log('X offset to page: ' + px); - // console.log('Y offset to page: ' + py); + draggableRef.current.measure((width: number, height: number) => { setStart([width, height]); }); }, []); @@ -53,7 +59,7 @@ const TaggDraggable: React.FC = ( }; return ( - + Date: Fri, 21 May 2021 17:36:49 -0400 Subject: Clean up code --- src/components/profile/TaggAvatar.tsx | 2 -- 1 file changed, 2 deletions(-) (limited to 'src') diff --git a/src/components/profile/TaggAvatar.tsx b/src/components/profile/TaggAvatar.tsx index 135c6e5a..8ccae2ef 100644 --- a/src/components/profile/TaggAvatar.tsx +++ b/src/components/profile/TaggAvatar.tsx @@ -23,8 +23,6 @@ const TaggAvatar: React.FC = ({ userXId, editable = false, }) => { - // const state = useSelector((state: RootState) => state); - // console.log('STATE', state.userX); const {avatar, user} = useSelector((state: RootState) => userXId ? state.userX[screenType][userXId] : state.user, ); -- cgit v1.2.3-70-g09d2 From cad35f1032edbf0a326ba20db1aa03f7390c89b7 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 21 May 2021 18:30:03 -0400 Subject: Cleaned up code, Add logic for removing tag --- src/screens/profile/CaptionScreen.tsx | 135 ++++++++++++++++------------------ 1 file changed, 63 insertions(+), 72 deletions(-) (limited to 'src') diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index ec55e43a..68956407 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -1,6 +1,6 @@ import {RouteProp} from '@react-navigation/native'; import {StackNavigationProp} from '@react-navigation/stack'; -import React, {Fragment, useRef, useState} from 'react'; +import React, {Fragment, useEffect, useRef, useState} from 'react'; import { Alert, Image, @@ -8,7 +8,6 @@ import { KeyboardAvoidingView, Platform, StyleSheet, - // Text, TouchableWithoutFeedback, View, } from 'react-native'; @@ -17,7 +16,9 @@ import {Button} from 'react-native-elements'; import {useDispatch, useSelector} from 'react-redux'; 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'; @@ -57,38 +58,45 @@ const CaptionScreen: React.FC = ({route, navigation}) => { const dispatch = useDispatch(); const [caption, setCaption] = useState(''); const [loading, setLoading] = useState(false); - // const [isTop, setIsTop] = useState(false); const imageRef = useRef(null); // const zIndex = [0, 999]; // state variables used to position draggables - // const [offset, setOffset] = useState([0, 0]); - // const [curStart, setCurStart] = useState([0, 0]); - // const [imageDimensions, setImageDimensions] = useState([0, 0]); + const [offset, setOffset] = useState([0, 0]); + const [curStart, setCurStart] = useState([0, 0]); + const [imageDimensions, setImageDimensions] = useState([0, 0]); // state var used to keep track of draggable z ordering // const [layerOrder, setLayerOrder] = useState([]); // created a state variable to keep track of every tag // idea is that each element in the list - // const [taggList, setTaggList] = useState([ - // { - // first_name: 'Ivan', - // id: 'cee45bf8-7f3d-43c8-99bb-ec04908efe58', - // last_name: 'Chen', - // thumbnail_url: - // 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-cee45bf8-7f3d-43c8-99bb-ec04908efe58-thumbnail.jpg', - // username: 'ivan.tagg', - // }, - // { - // first_name: 'Ankit', - // id: '3bcf6947-bee6-46b0-ad02-6f4d25eaeac3', - // last_name: 'Thanekar', - // thumbnail_url: - // 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-3bcf6947-bee6-46b0-ad02-6f4d25eaeac3-thumbnail.jpg', - // username: 'ankit.thanekar', - // }, - // ]); + const [taggList, setTaggList] = useState([ + { + first_name: 'Ivan', + id: 'cee45bf8-7f3d-43c8-99bb-ec04908efe58', + last_name: 'Chen', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-cee45bf8-7f3d-43c8-99bb-ec04908efe58-thumbnail.jpg', + username: 'ivan.tagg', + }, + { + first_name: 'Ankit', + id: '3bcf6947-bee6-46b0-ad02-6f4d25eaeac3', + last_name: 'Thanekar', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-3bcf6947-bee6-46b0-ad02-6f4d25eaeac3-thumbnail.jpg', + username: 'ankit.thanekar', + }, + { + first_name: 'Ankit', + id: '3bcf6947-bee6-46b0-ad02-6f4d25eaeac3', + last_name: 'Thanekar', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-3bcf6947-bee6-46b0-ad02-6f4d25eaeac3-thumbnail.jpg', + username: 'ankit.thanekar', + }, + ]); const navigateToProfile = () => { //Since the logged In User is navigating to own profile, useXId is not required @@ -125,21 +133,19 @@ 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 */ - - // useEffect(() => { - // imageRef.current.measure((fx, fy, width, height, px, py) => { - // // console.log('Component width is: ' + width); - // // console.log('Component height is: ' + height); - // // console.log('X offset to frame: ' + fx); - // // console.log('Y offset to frame: ' + fy); - // // console.log('X offset to page: ' + px); - // // console.log('Y offset to page: ' + py); - // setOffset([px, py]); - // setImageDimensions([width, height]); - // }); - // }, []); + useEffect(() => { + imageRef.current.measure((fx, fy, width, height, px, py) => { + // console.log('Component width is: ' + width); + // console.log('Component height is: ' + height); + // console.log('X offset to frame: ' + fx); + // console.log('Y offset to frame: ' + fy); + // console.log('X offset to page: ' + px); + // console.log('Y offset to page: ' + py); + setOffset([px, py]); + setImageDimensions([width, height]); + }); + }, []); const handleShare = async () => { setLoading(true); @@ -202,40 +208,25 @@ const CaptionScreen: React.FC = ({route, navigation}) => { onChange={setCaption} partTypes={mentionPartTypes('blue')} /> - {/* Draggables - Commented out for now */} - {/* bringToFront(0)}> - console.log('Hello world')} - setStart={setCurStart} - /> - - bringToFront(1)}> - console.log('Hello world')} - setStart={setCurStart} - /> - */} + {taggList.map((user) => ( + null}> + + setTaggList(taggList.filter((u) => u.id !== user.id)) + } + setStart={setCurStart} + /> + + ))} -- cgit v1.2.3-70-g09d2 From f65ec50d935726aa45efb23f82fc2c5f15b0260c Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 21 May 2021 18:31:50 -0400 Subject: Clean up code --- src/components/taggs/TaggDraggable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx index b18c35b2..0a0d18d9 100644 --- a/src/components/taggs/TaggDraggable.tsx +++ b/src/components/taggs/TaggDraggable.tsx @@ -82,7 +82,7 @@ const TaggDraggable: React.FC = ( {editingView && ( deleteFromList()} + onPressIn={deleteFromList} style={styles.imageX}> -- cgit v1.2.3-70-g09d2 From 3ee7b70b28b03cebc73d04ba69a11e915466d5e1 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 21 May 2021 18:36:25 -0400 Subject: Clean up file --- src/screens/profile/DraggableNoPress.tsx | 0 src/types/types.ts | 1 - 2 files changed, 1 deletion(-) delete mode 100644 src/screens/profile/DraggableNoPress.tsx (limited to 'src') diff --git a/src/screens/profile/DraggableNoPress.tsx b/src/screens/profile/DraggableNoPress.tsx deleted file mode 100644 index e69de29b..00000000 diff --git a/src/types/types.ts b/src/types/types.ts index 5aae9a6d..e9975529 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -150,7 +150,6 @@ export enum ScreenType { Notifications, SuggestedPeople, Chat, - Tagging, } /** -- cgit v1.2.3-70-g09d2 From 6f571cb92a2948952a7fa5ea0843bdbc4affde64 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 21 May 2021 18:38:39 -0400 Subject: Remove commented code --- src/components/taggs/TaggDraggable.tsx | 17 ++------------ src/screens/profile/CaptionScreen.tsx | 43 ---------------------------------- 2 files changed, 2 insertions(+), 58 deletions(-) (limited to 'src') diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx index 0a0d18d9..a6ffb1ef 100644 --- a/src/components/taggs/TaggDraggable.tsx +++ b/src/components/taggs/TaggDraggable.tsx @@ -26,26 +26,13 @@ const TaggDraggable: React.FC = ( props: TaggDraggableProps, ) => { const navigation = useNavigation(); - - const {taggedUser, editingView, deleteFromList, setStart} = props; - const state = useSelector((rs: RootState) => rs); - const dispatch = useDispatch(); + const state = useSelector((rs: RootState) => rs); + const {taggedUser, editingView, deleteFromList, setStart} = props; let uriX = require('../../assets/images/draggableX.png'); let uriTip = require('../../assets/images/Tagg-Triangle.png'); const draggableRef = useRef(null); - // useEffect(() => { - // draggableRef.current.measure((fx, fy, width, height, px, py) => { - // // console.log('Drag Component width is: ' + width); - // // console.log('Drag Component height is: ' + height); - // // console.log('X offset to frame: ' + fx); - // // console.log('Y offset to frame: ' + fy); - // // console.log('X offset to page: ' + px); - // // console.log('Y offset to page: ' + py); - // setStart([width, height]); - // }); - // }, []); useEffect(() => { draggableRef.current.measure((width: number, height: number) => { diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 68956407..8e972e07 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -43,12 +43,6 @@ interface CaptionScreenProps { route: CaptionScreenRouteProp; navigation: CaptionScreenNavigationProp; } -interface momentTag { - userID: string; - username: string; - xLocation: number; - yLocation: number; -} const CaptionScreen: React.FC = ({route, navigation}) => { const {title, image, screenType} = route.params; @@ -60,17 +54,11 @@ const CaptionScreen: React.FC = ({route, navigation}) => { const [loading, setLoading] = useState(false); const imageRef = useRef(null); - // const zIndex = [0, 999]; // state variables used to position draggables const [offset, setOffset] = useState([0, 0]); const [curStart, setCurStart] = useState([0, 0]); const [imageDimensions, setImageDimensions] = useState([0, 0]); - // state var used to keep track of draggable z ordering - // const [layerOrder, setLayerOrder] = useState([]); - - // created a state variable to keep track of every tag - // idea is that each element in the list const [taggList, setTaggList] = useState([ { first_name: 'Ivan', @@ -105,43 +93,12 @@ const CaptionScreen: React.FC = ({route, navigation}) => { userXId: undefined, }); }; - /** - * Helper function that we use to keep track of which element should be on top most layer - * @param index - */ - // const bringToFront = (index: number) => { - // let currUser = taggList[index].id; - // if (layerOrder.includes(currUser)) { - // layerOrder.splice(layerOrder.indexOf(currUser), 1); - // } - // layerOrder.push(currUser); - // setLayerOrder(layerOrder); - // }; - - /** - * Helper function that tells us if the current draggable is the topmost one. - * @param index - */ - // const isOnTop = (index: number) => { - // let currUser = taggList[index].id; - // return currUser === layerOrder[0]; - // }; - /** - * function that sets the initial position of each newly created tag - * @returns - */ /** * need a handler to take care of creating a tagged user object, append that object to the taggList state variable. */ useEffect(() => { imageRef.current.measure((fx, fy, width, height, px, py) => { - // console.log('Component width is: ' + width); - // console.log('Component height is: ' + height); - // console.log('X offset to frame: ' + fx); - // console.log('Y offset to frame: ' + fy); - // console.log('X offset to page: ' + px); - // console.log('Y offset to page: ' + py); setOffset([px, py]); setImageDimensions([width, height]); }); -- cgit v1.2.3-70-g09d2