From 73cc07e1adce4ecea0f15bd651f8db2e510c9644 Mon Sep 17 00:00:00 2001 From: George Rusu 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 ++++++++++++++++++++++++++++++++++++ 1 file changed, 352 insertions(+) create mode 100644 src/components/common/Draggable.tsx (limited to 'src/components/common') 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, + }, +}); -- 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/components/common') 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/components/common') 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/components/common') 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 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/components/common') 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 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/components/common') 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/components/common') 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 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/components/common') 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/components/common') 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 20:04:12 -0400 Subject: Refactor code --- src/components/common/MomentTags.tsx | 79 ++++++++++++++++++++++++++++ src/components/common/index.ts | 1 + src/components/moments/MomentPostContent.tsx | 9 ++-- src/screens/profile/CaptionScreen.tsx | 53 ++++++------------- 4 files changed, 101 insertions(+), 41 deletions(-) create mode 100644 src/components/common/MomentTags.tsx (limited to 'src/components/common') diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx new file mode 100644 index 00000000..f6f475bc --- /dev/null +++ b/src/components/common/MomentTags.tsx @@ -0,0 +1,79 @@ +import React, {MutableRefObject, useEffect, useState} from 'react'; +import {MomentTagType, ProfilePreviewType} from '../../types'; +import TaggDraggable from '../taggs/TaggDraggable'; +import Draggable from './Draggable'; + +interface MomentTagsProps { + editing: boolean; + tags: MomentTagType[]; + imageRef: MutableRefObject; + deleteFromList?: (user: ProfilePreviewType) => void; +} + +const MomentTags: React.FC = ({ + editing, + tags, + imageRef, + deleteFromList, +}) => { + const [offset, setOffset] = useState([0, 0]); + const [curStart, setCurStart] = useState([0, 0]); + const [imageDimensions, setImageDimensions] = useState([0, 0]); + + useEffect(() => { + imageRef.current.measure((fx, fy, width, height, px, py) => { + console.log(px, py); + console.log(width, height); + setOffset([px, py]); + setImageDimensions([width, height]); + }); + }, []); + + if (!tags) { + return null; + } + + return editing && deleteFromList ? ( + <> + {tags.map((tag) => ( + null}> + deleteFromList(tag.user)} + setStart={setCurStart} + /> + + ))} + + ) : ( + <> + {tags.map((tag) => ( + null}> + null} + setStart={setCurStart} + /> + + ))} + + ); +}; + +export default MomentTags; diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 48abb8b8..692c9f8a 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -27,3 +27,4 @@ export {default as Avatar} from './Avatar'; export {default as TaggTypeahead} from './TaggTypeahead'; export {default as TaggUserRowCell} from './TaggUserRowCell'; export {default as LikeButton} from './LikeButton'; +export {default as MomentTags} from './MomentTags'; diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx index 9a174e73..e702cb68 100644 --- a/src/components/moments/MomentPostContent.tsx +++ b/src/components/moments/MomentPostContent.tsx @@ -1,20 +1,20 @@ import {useNavigation} from '@react-navigation/native'; -import React, {useEffect, useState} from 'react'; +import React, {useEffect, useRef, useState} from 'react'; import {Image, StyleSheet, Text, View, ViewProps} from 'react-native'; import {useDispatch, useStore} from 'react-redux'; import {getCommentsCount, loadMomentTags} from '../../services'; -import {userMomentsFetched} from '../../store/reducers'; import {RootState} from '../../store/rootReducer'; import {MomentTagType, ScreenType, UserType} from '../../types'; import { getTimePosted, navigateToProfile, + normalize, SCREEN_HEIGHT, SCREEN_WIDTH, - normalize, } from '../../utils'; import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments'; import {CommentsCount} from '../comments'; +import {MomentTags} from '../common'; interface MomentPostContentProps extends ViewProps { screenType: ScreenType; @@ -37,6 +37,7 @@ const MomentPostContent: React.FC = ({ const state: RootState = useStore().getState(); const navigation = useNavigation(); const dispatch = useDispatch(); + const imageRef = useRef(null); useEffect(() => { const loadTags = async () => { @@ -60,10 +61,12 @@ const MomentPostContent: React.FC = ({ return ( + = ({route, navigation}) => { const [loading, setLoading] = useState(false); 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]); - const [taggList, setTaggList] = useState([ { first_name: 'Ivan', @@ -94,16 +87,6 @@ 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. - */ - useEffect(() => { - imageRef.current.measure((fx, fy, width, height, px, py) => { - setOffset([px, py]); - setImageDimensions([width, height]); - }); - }, []); - const handleShare = async () => { setLoading(true); if (!image.filename) { @@ -165,25 +148,19 @@ const CaptionScreen: React.FC = ({route, navigation}) => { onChange={setCaption} partTypes={mentionPartTypes('blue')} /> - {taggList.map((user) => ( - null}> - - setTaggList(taggList.filter((u) => u.id !== user.id)) - } - setStart={setCurStart} - /> - - ))} + ({ + id: '', + x: 0, + y: 0, + user, + }))} + imageRef={imageRef} + deleteFromList={(user) => + setTaggList(taggList.filter((u) => u.id !== user.id)) + } + /> -- cgit v1.2.3-70-g09d2 From 4434d06df897f844832a92d66956825ea58c2b01 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 21 May 2021 20:06:11 -0400 Subject: Clean up code --- src/components/common/MomentTags.tsx | 2 -- 1 file changed, 2 deletions(-) (limited to 'src/components/common') diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx index f6f475bc..fb9ef5be 100644 --- a/src/components/common/MomentTags.tsx +++ b/src/components/common/MomentTags.tsx @@ -22,8 +22,6 @@ const MomentTags: React.FC = ({ useEffect(() => { imageRef.current.measure((fx, fy, width, height, px, py) => { - console.log(px, py); - console.log(width, height); setOffset([px, py]); setImageDimensions([width, height]); }); -- cgit v1.2.3-70-g09d2