From a5ef509d2a1f79d85c76ee766dabe96acac2a989 Mon Sep 17 00:00:00 2001 From: George Rusu Date: Tue, 25 May 2021 13:22:52 -0700 Subject: Add layering functionality when editing tags --- src/components/common/Draggable.tsx | 29 ++++++++++++++--------------- src/components/common/MomentTags.tsx | 17 ++++++++++++++--- 2 files changed, 28 insertions(+), 18 deletions(-) (limited to 'src/components/common') diff --git a/src/components/common/Draggable.tsx b/src/components/common/Draggable.tsx index edd29b78..1253fed4 100644 --- a/src/components/common/Draggable.tsx +++ b/src/components/common/Draggable.tsx @@ -59,7 +59,7 @@ interface IProps { minY?: number; maxX?: number; maxY?: number; - onDragStart?: () => void; + onDragStart?: () => number; } export default function Draggable(props: IProps) { @@ -103,8 +103,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 = z; + const [zIndex, setZIndex] = React.useState(z); + // const zIndex = z; const getBounds = React.useCallback(() => { const left = x + offsetFromStart.current.x; @@ -147,18 +147,17 @@ export default function Draggable(props: IProps) { [onDragRelease, shouldReverse, onRelease, reversePosition], ); - const onPanResponderGrant = React.useCallback( - (_: GestureResponderEvent) => { - startBounds.current = getBounds(); - isDragging.current = true; - if (!shouldReverse) { - pan.current.setOffset(offsetFromStart.current); - pan.current.setValue({x: 0, y: 0}); - } - onDragStart(); - }, - [getBounds, shouldReverse], - ); + const onPanResponderGrant = (_: GestureResponderEvent) => { + startBounds.current = getBounds(); + isDragging.current = true; + if (!shouldReverse) { + pan.current.setOffset(offsetFromStart.current); + pan.current.setValue({x: 0, y: 0}); + } + if (onDragStart) { + setZIndex(onDragStart()); + } + }; const handleOnDrag = React.useCallback( (e: GestureResponderEvent, gestureState: PanResponderGestureState) => { diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx index 04b0558b..9a6cd08b 100644 --- a/src/components/common/MomentTags.tsx +++ b/src/components/common/MomentTags.tsx @@ -19,6 +19,7 @@ const MomentTags: React.FC = ({ const [offset, setOffset] = useState([0, 0]); const [curStart, setCurStart] = useState([0, 0]); const [imageDimensions, setImageDimensions] = useState([0, 0]); + const [maxZIndex, setMaxZIndex] = useState(1); useEffect(() => { imageRef.current.measure((fx, fy, width, height, px, py) => { @@ -34,17 +35,25 @@ const MomentTags: React.FC = ({ <> {tags.map((tag) => ( null}> + onDragStart={() => { + const currZIndex = maxZIndex; + setMaxZIndex(currZIndex + 1); + return currZIndex; + }}> deleteFromList(tag.user)} + deleteFromList={() => { + deleteFromList(tag.user); + }} setStart={setCurStart} /> @@ -54,13 +63,15 @@ const MomentTags: React.FC = ({ <> {tags.map((tag) => ( null}> + disabled={true}> Date: Tue, 25 May 2021 17:13:12 -0400 Subject: Squashed commit of the following: commit 7711d92c8dab4f00e36ad3bbca9bc202fa313e43 Author: Brian Kim Date: Tue May 25 17:08:41 2021 -0400 Integrate with layering commit cbd01996ae4784b737fb4b634eb0048bb7d85967 Author: Brian Kim Date: Tue May 25 16:48:52 2021 -0400 Fix yarn commit 39164064b903df36b7373e177d00c3307a8a311a Author: Brian Kim Date: Tue May 25 16:46:34 2021 -0400 Add horizontal scroll commit 02841df862aa68dcf615d0264236d9a14b52befe Author: Brian Kim Date: Tue May 25 15:03:13 2021 -0400 Lint fixes commit 5c6e8e453026005f6621efe751d90c76f457a72f Author: Brian Kim Date: Tue May 25 14:46:39 2021 -0400 Set boundaries, fix offset calculation, fix length and height calculation to be individual commit 6d27d859fd5364556928e5a2feadad1aff4dc6b9 Author: Brian Kim Date: Tue May 25 11:32:08 2021 -0400 Pause --- src/components/common/MomentTags.tsx | 71 +++++++++++++++++++++------- src/components/moments/TagFriendsFoooter.tsx | 46 ++++++++++++------ src/components/profile/ProfilePreview.tsx | 4 +- src/components/taggs/TaggDraggable.tsx | 10 ++-- 4 files changed, 95 insertions(+), 36 deletions(-) (limited to 'src/components/common') diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx index 9a6cd08b..75a81814 100644 --- a/src/components/common/MomentTags.tsx +++ b/src/components/common/MomentTags.tsx @@ -17,27 +17,56 @@ const MomentTags: React.FC = ({ deleteFromList, }) => { const [offset, setOffset] = useState([0, 0]); - const [curStart, setCurStart] = useState([0, 0]); + const [curStart, setCurStart] = useState({}); const [imageDimensions, setImageDimensions] = useState([0, 0]); const [maxZIndex, setMaxZIndex] = useState(1); + const editCurStart = (idName: number, coords: number[]) => { + setCurStart((prev) => ({...prev, [idName]: coords})); + }; + useEffect(() => { - imageRef.current.measure((fx, fy, width, height, px, py) => { - setOffset([px, py]); - setImageDimensions([width, height]); - }); + setTimeout(() => { + imageRef.current.measure( + ( + fx: number, + fy: number, + width: number, + height: number, + _x: number, + _y: number, + ) => { + setOffset([fx, fy]); + setImageDimensions([width, height]); + }, + ); + }, 250); }, []); + useEffect(() => {}, [curStart]); + if (!tags) { return null; } return editing && deleteFromList ? ( <> - {tags.map((tag) => ( + {tags.map((tag, index) => ( = ({ { - deleteFromList(tag.user); - }} - setStart={setCurStart} + deleteFromList={() => deleteFromList(tag.user)} + setStart={(coords: number[]) => editCurStart(index, coords)} /> ))} ) : ( <> - {tags.map((tag) => ( + {tags.map((tag, index) => ( = ({ taggedUser={tag.user} editingView={editing} deleteFromList={() => null} - setStart={setCurStart} + setStart={(coords: number[]) => editCurStart(index, coords)} /> ))} diff --git a/src/components/moments/TagFriendsFoooter.tsx b/src/components/moments/TagFriendsFoooter.tsx index 7b109877..2a844680 100644 --- a/src/components/moments/TagFriendsFoooter.tsx +++ b/src/components/moments/TagFriendsFoooter.tsx @@ -1,9 +1,16 @@ import {useNavigation} from '@react-navigation/native'; import React, {Dispatch, SetStateAction} from 'react'; -import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'; +import { + Image, + ScrollView, + StyleSheet, + Text, + TouchableOpacity, + View, +} from 'react-native'; import {ProfilePreview} from '..'; import {ProfilePreviewType, ScreenType} from '../../types'; -import {normalize} from '../../utils/layouts'; +import {normalize, SCREEN_HEIGHT} from '../../utils/layouts'; interface TagFriendsFooterProps { taggedUsers: ProfilePreviewType[]; @@ -80,10 +87,12 @@ const TagFriendsFooter: React.FC = ({ <> - {taggedUsers.map((user) => ( - - ))} - {taggedUsers.length !== 0 && } + + {taggedUsers.map((user) => ( + + ))} + {taggedUsers.length !== 0 && } + ); @@ -99,10 +108,9 @@ const styles = StyleSheet.create({ fontWeight: '600', }, tagFriendsContainer: { - flexDirection: 'row', - marginTop: '3%', - flexWrap: 'wrap', - justifyContent: 'flex-start', + height: SCREEN_HEIGHT * 0.1, + marginTop: 2, + marginBottom: 5, }, tagMoreLabel: { fontWeight: '500', @@ -111,7 +119,6 @@ const styles = StyleSheet.create({ letterSpacing: normalize(0.2), color: 'white', textAlign: 'center', - marginVertical: '5%', }, closeIconContainer: { width: 20, @@ -120,14 +127,25 @@ const styles = StyleSheet.create({ zIndex: 1, }, tagMoreContainer: { - flexDirection: 'column', + width: 60, alignItems: 'center', + justifyContent: 'flex-start', + marginTop: -12, + }, + tagMoreIcon: { + width: 38, + height: 38, + marginTop: 13, + marginBottom: '10%', + }, + taggedUserContainer: { + marginTop: -12, }, - tagMoreIcon: {width: 38, height: 38, top: -2}, - taggedUserContainer: {flexDirection: 'row-reverse'}, closeIcon: { width: 20, height: 20, + left: 15, + top: 10, }, tagFriendsTitleContainer: { flexDirection: 'row', diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx index 88c075e2..dd93a5fd 100644 --- a/src/components/profile/ProfilePreview.tsx +++ b/src/components/profile/ProfilePreview.tsx @@ -377,10 +377,8 @@ const styles = StyleSheet.create({ }, tagSelectionContainer: { width: 60, - flexDirection: 'column', alignItems: 'center', justifyContent: 'flex-start', - margin: '1%', }, tagSelectionAvatar: { width: 34, @@ -389,7 +387,7 @@ const styles = StyleSheet.create({ }, tagSelectionNameContainer: { width: '100%', - marginVertical: '10%', + marginVertical: normalize(5), }, tagSelectionUsername: { fontWeight: '500', diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx index 55f8162b..3dd5f230 100644 --- a/src/components/taggs/TaggDraggable.tsx +++ b/src/components/taggs/TaggDraggable.tsx @@ -35,9 +35,13 @@ const TaggDraggable: React.FC = ( const draggableRef = useRef(null); useEffect(() => { - draggableRef.current.measure((width: number, height: number) => { - setStart([width, height]); - }); + setTimeout(() => { + draggableRef.current.measure( + (_1: number, _2: number, width: number, height: number) => { + setStart([width, height]); + }, + ); + }, 250); }, []); const user: UserType = { -- cgit v1.2.3-70-g09d2 From 6fd5a5516595d1731af35e1cef9607ce7b32e8f6 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 25 May 2021 18:55:42 -0400 Subject: More investigation with draggable, Progress --- src/components/common/Draggable.tsx | 5 ++++- src/components/common/MomentTags.tsx | 32 +++++++++++++++++++++++++++----- src/components/taggs/TaggDraggable.tsx | 20 ++++++++++++++++++-- src/screens/moments/TagFriendsScreen.tsx | 5 +++-- src/screens/profile/CaptionScreen.tsx | 4 ++-- 5 files changed, 54 insertions(+), 12 deletions(-) (limited to 'src/components/common') diff --git a/src/components/common/Draggable.tsx b/src/components/common/Draggable.tsx index 1253fed4..15ba3325 100644 --- a/src/components/common/Draggable.tsx +++ b/src/components/common/Draggable.tsx @@ -136,7 +136,9 @@ export default function Draggable(props: IProps) { isDragging.current = false; if (onDragRelease) { onDragRelease(e, gestureState); - onRelease(e, true); + } + if (onRelease) { + onRelease(e, gestureState); } if (!shouldReverse) { pan.current.flattenOffset(); @@ -193,6 +195,7 @@ export default function Draggable(props: IProps) { listener: handleOnDrag, useNativeDriver: false, }), + onPanResponderRelease, // onPanResponderRelease: (_) => { // // console.log('end'); // // setZIndex(1); diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx index 75a81814..56113758 100644 --- a/src/components/common/MomentTags.tsx +++ b/src/components/common/MomentTags.tsx @@ -17,8 +17,8 @@ const MomentTags: React.FC = ({ deleteFromList, }) => { const [offset, setOffset] = useState([0, 0]); - const [curStart, setCurStart] = useState({}); const [imageDimensions, setImageDimensions] = useState([0, 0]); + const [curStart, setCurStart] = useState({}); const [maxZIndex, setMaxZIndex] = useState(1); const editCurStart = (idName: number, coords: number[]) => { @@ -43,8 +43,6 @@ const MomentTags: React.FC = ({ }, 250); }, []); - useEffect(() => {}, [curStart]); - if (!tags) { return null; } @@ -67,7 +65,7 @@ const MomentTags: React.FC = ({ curStart[index][1] / 2 : (imageDimensions[1] * tag.y) / 100 + offset[1] + offset[1] } - z={maxZIndex + 1} + z={tag.z} minX={offset[0]} minY={offset[1]} maxX={imageDimensions[0] + offset[0]} @@ -76,7 +74,31 @@ const MomentTags: React.FC = ({ const currZIndex = maxZIndex; setMaxZIndex(currZIndex + 1); return currZIndex; - }}> + }} + onDragRelease={(e, state) => { + // console.log(state.moveX); + // console.log(state.moveY); + // console.log(state); + // console.log(offset[0]); + // console.log(offset[1]); + // console.log(imageDimensions[0]); + // console.log(imageDimensions[1]); + // console.log(state.moveX / imageDimensions[0]); + // console.log( + // Math.floor( + // ((state.moveY - offset[0] + curStart[index][0] / 2) / + // imageDimensions[1]) * + // 100, + // ), + // ); + }} + // onPressIn={() => { + // console.log('fooo'); + // }} + // onPressOut={() => { + // console.log('fooo'); + // // console.log(state); + > = ( useEffect(() => { setTimeout(() => { draggableRef.current.measure( - (_1: number, _2: number, width: number, height: number) => { + (_1: number, _2: number, width: number, height: number, px, py) => { setStart([width, height]); }, ); }, 250); }, []); + useEffect(() => { + draggableRef.current.measure( + ( + fx: number, + fy: number, + width: number, + height: number, + px: number, + py: number, + ) => { + console.log(px); + // TODO: george + }, + ); + }); + const user: UserType = { userId: taggedUser.id, username: taggedUser.username, @@ -51,7 +67,7 @@ const TaggDraggable: React.FC = ( return ( - + = ({route}) => { editing={true} tags={taggedUsers.map((user) => ({ id: '', - x: 0, - y: 0, + x: 50, + y: 50, + z: 1, user, }))} imageRef={imageRef} diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index e2fce032..69f4b3d9 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -116,8 +116,8 @@ const CaptionScreen: React.FC = ({route, navigation}) => { const momentTagResponse = await postMomentTags( momentResponse.moment_id, taggedUsers.map((u, index) => ({ - x: index * 50 - 150, - y: index * 50 - 150, + x: index * 50, + y: index * 50, z: 1, user_id: u.id, })), -- cgit v1.2.3-70-g09d2 From 10d3ed80b3b84956cf7364140313ea465a95ba8b Mon Sep 17 00:00:00 2001 From: George Rusu Date: Tue, 25 May 2021 16:29:54 -0700 Subject: Currently pushes tags offscreen --- src/components/common/Draggable.tsx | 3 +++ src/components/common/MomentTags.tsx | 16 ++++++++++++---- src/components/taggs/TaggDraggable.tsx | 19 +++++++++++++++++-- 3 files changed, 32 insertions(+), 6 deletions(-) (limited to 'src/components/common') diff --git a/src/components/common/Draggable.tsx b/src/components/common/Draggable.tsx index 15ba3325..0a480e92 100644 --- a/src/components/common/Draggable.tsx +++ b/src/components/common/Draggable.tsx @@ -60,6 +60,7 @@ interface IProps { maxX?: number; maxY?: number; onDragStart?: () => number; + measureAdd?: () => void; } export default function Draggable(props: IProps) { @@ -90,6 +91,7 @@ export default function Draggable(props: IProps) { maxX, maxY, onDragStart, + measureAdd, } = props; // The Animated object housing our xy value so that we can spring back @@ -139,6 +141,7 @@ export default function Draggable(props: IProps) { } if (onRelease) { onRelease(e, gestureState); + measureAdd(); } if (!shouldReverse) { pan.current.flattenOffset(); diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx index 56113758..2ba16a6b 100644 --- a/src/components/common/MomentTags.tsx +++ b/src/components/common/MomentTags.tsx @@ -21,19 +21,19 @@ const MomentTags: React.FC = ({ const [curStart, setCurStart] = useState({}); const [maxZIndex, setMaxZIndex] = useState(1); - const editCurStart = (idName: number, coords: number[]) => { - setCurStart((prev) => ({...prev, [idName]: coords})); + const editCurStart = (idName: number, dimensions: number[]) => { + setCurStart((prev) => ({...prev, [idName]: dimensions})); }; useEffect(() => { setTimeout(() => { imageRef.current.measure( ( - fx: number, + fx: number, // location of ref relative to parent element fy: number, width: number, height: number, - _x: number, + _x: number, // location of ref relative to entire screen _y: number, ) => { setOffset([fx, fy]); @@ -46,11 +46,19 @@ const MomentTags: React.FC = ({ if (!tags) { return null; } + + const measureAdd = () => {}; + return editing && deleteFromList ? ( <> {tags.map((tag, index) => ( = ( useEffect(() => { draggableRef.current.measure( ( - fx: number, + fx: number, // location of ref relative to parent element fy: number, width: number, height: number, - px: number, + px: number, // location of ref relative to entire screen py: number, ) => { console.log(px); @@ -60,6 +60,21 @@ const TaggDraggable: React.FC = ( ); }); + const getCoords = () => { + draggableRef.current.measure( + ( + fx: number, // location of ref relative to parent element + fy: number, + width: number, + height: number, + px: number, // location of ref relative to entire screen + py: number, + ) => { + return [px, py]; + }, + ); + }; + const user: UserType = { userId: taggedUser.id, username: taggedUser.username, -- cgit v1.2.3-70-g09d2 From 2408c8ee0d6b2a6b2366fb66dc06c63fa2d0aa2e Mon Sep 17 00:00:00 2001 From: George Rusu Date: Wed, 26 May 2021 10:48:07 -0700 Subject: Fix view and edit tag jumping --- src/components/common/MomentTags.tsx | 33 ++++++++++++++++++--------------- src/components/taggs/TaggDraggable.tsx | 10 ---------- 2 files changed, 18 insertions(+), 25 deletions(-) (limited to 'src/components/common') diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx index 2ba16a6b..a75701f0 100644 --- a/src/components/common/MomentTags.tsx +++ b/src/components/common/MomentTags.tsx @@ -26,21 +26,24 @@ const MomentTags: React.FC = ({ }; useEffect(() => { - setTimeout(() => { - imageRef.current.measure( - ( - fx: number, // location of ref relative to parent element - fy: number, - width: number, - height: number, - _x: number, // location of ref relative to entire screen - _y: number, - ) => { - setOffset([fx, fy]); - setImageDimensions([width, height]); - }, - ); - }, 250); + setTimeout( + () => { + imageRef.current.measure( + ( + fx: number, // location of ref relative to parent element + fy: number, + width: number, + height: number, + _x: number, // location of ref relative to entire screen + _y: number, + ) => { + setOffset([fx, fy]); + setImageDimensions([width, height]); + }, + ); + }, + editing ? 250 : 0, + ); }, []); if (!tags) { diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx index 7be4a88f..e31be729 100644 --- a/src/components/taggs/TaggDraggable.tsx +++ b/src/components/taggs/TaggDraggable.tsx @@ -34,16 +34,6 @@ const TaggDraggable: React.FC = ( const draggableRef = useRef(null); - useEffect(() => { - setTimeout(() => { - draggableRef.current.measure( - (_1: number, _2: number, width: number, height: number, px, py) => { - setStart([width, height]); - }, - ); - }, 250); - }, []); - useEffect(() => { draggableRef.current.measure( ( -- cgit v1.2.3-70-g09d2 From 2787ddea5c8c354c0ca58378b1297ee2b42a907f Mon Sep 17 00:00:00 2001 From: George Rusu Date: Wed, 26 May 2021 10:55:57 -0700 Subject: Fix tag selection screen clickable --- src/components/common/TaggUserSelectionCell.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) (limited to 'src/components/common') diff --git a/src/components/common/TaggUserSelectionCell.tsx b/src/components/common/TaggUserSelectionCell.tsx index 2ea1e4ce..5424ab9b 100644 --- a/src/components/common/TaggUserSelectionCell.tsx +++ b/src/components/common/TaggUserSelectionCell.tsx @@ -1,5 +1,9 @@ import React, {useEffect, useState} from 'react'; import {StyleSheet, View} from 'react-native'; +import { + TouchableOpacity, + TouchableWithoutFeedback, +} from 'react-native-gesture-handler'; import {ProfilePreview} from '..'; import {ProfilePreviewType, ScreenType} from '../../types'; import {SCREEN_WIDTH} from '../../utils'; @@ -48,7 +52,7 @@ const TaggUserSelectionCell: React.FC = ({ } }; return ( - + = ({ /> - + ); }; -- cgit v1.2.3-70-g09d2 From 716caad656f8435f93a33596692e7e83f0a2af12 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 26 May 2021 16:14:55 -0400 Subject: Add logic to get correct percentage coordinate, Cleanup code --- src/components/common/MomentTags.tsx | 35 +++++++------------------ src/components/taggs/TaggDraggable.tsx | 48 ++++++++++++++++------------------ 2 files changed, 32 insertions(+), 51 deletions(-) (limited to 'src/components/common') diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx index a75701f0..d76e1481 100644 --- a/src/components/common/MomentTags.tsx +++ b/src/components/common/MomentTags.tsx @@ -74,7 +74,7 @@ const MomentTags: React.FC = ({ ? (imageDimensions[1] * tag.y) / 100 + offset[1] - curStart[index][1] / 2 - : (imageDimensions[1] * tag.y) / 100 + offset[1] + offset[1] + : (imageDimensions[1] * tag.y) / 100 + offset[1] } z={tag.z} minX={offset[0]} @@ -86,35 +86,20 @@ const MomentTags: React.FC = ({ setMaxZIndex(currZIndex + 1); return currZIndex; }} - onDragRelease={(e, state) => { - // console.log(state.moveX); - // console.log(state.moveY); - // console.log(state); - // console.log(offset[0]); - // console.log(offset[1]); - // console.log(imageDimensions[0]); - // console.log(imageDimensions[1]); - // console.log(state.moveX / imageDimensions[0]); - // console.log( - // Math.floor( - // ((state.moveY - offset[0] + curStart[index][0] / 2) / - // imageDimensions[1]) * - // 100, - // ), - // ); - }} - // onPressIn={() => { - // console.log('fooo'); - // }} - // onPressOut={() => { - // console.log('fooo'); - // // console.log(state); - > + onDragRelease={() => { + console.log('fooo'); + // TODO: george + }}> deleteFromList(tag.user)} setStart={(coords: number[]) => editCurStart(index, coords)} + offset={{fx: offset[0], fy: offset[1]}} + imageDimensions={{ + width: imageDimensions[0], + height: imageDimensions[1], + }} /> ))} diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx index e31be729..e964d3d1 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, {useEffect, useRef} from 'react'; +import React, {useRef} from 'react'; import { Image, StyleSheet, @@ -7,6 +7,7 @@ import { TouchableOpacity, TouchableWithoutFeedback, View, + ViewProps, } from 'react-native'; import {useDispatch, useSelector} from 'react-redux'; import Avatar from '../../components/common/Avatar'; @@ -15,11 +16,13 @@ import {ProfilePreviewType, ScreenType, UserType} from '../../types'; import {normalize} from '../../utils'; import {navigateToProfile} from '../../utils/users'; -interface TaggDraggableProps { +interface TaggDraggableProps extends ViewProps { taggedUser: ProfilePreviewType; editingView: boolean; deleteFromList: () => void; setStart: Function; + offset: {fx: number; fy: number}; + imageDimensions: {width: number; height: number}; } const TaggDraggable: React.FC = ( @@ -28,42 +31,35 @@ const TaggDraggable: React.FC = ( const navigation = useNavigation(); const dispatch = useDispatch(); const state = useSelector((rs: RootState) => rs); - const {taggedUser, editingView, deleteFromList, setStart} = props; + const { + taggedUser, + editingView, + deleteFromList, + setStart, + offset, + imageDimensions, + } = props; let uriX = require('../../assets/images/draggableX.png'); let uriTip = require('../../assets/images/Tagg-Triangle.png'); const draggableRef = useRef(null); - useEffect(() => { + const getPositions = () => draggableRef.current.measure( ( - fx: number, // location of ref relative to parent element - fy: number, - width: number, - height: number, + _fx: number, // location of ref relative to parent element + _fy: number, + _width: number, + _height: number, px: number, // location of ref relative to entire screen py: number, ) => { - console.log(px); - // TODO: george + return [ + Math.floor(((px - offset.fx) / imageDimensions.width) * 100), + Math.floor(((py - offset.fy) / imageDimensions.height) * 100), + ]; }, ); - }); - - const getCoords = () => { - draggableRef.current.measure( - ( - fx: number, // location of ref relative to parent element - fy: number, - width: number, - height: number, - px: number, // location of ref relative to entire screen - py: number, - ) => { - return [px, py]; - }, - ); - }; const user: UserType = { userId: taggedUser.id, -- cgit v1.2.3-70-g09d2 From 2fa874efdc5d1b2a1cd508c46ddcc6e2e7511157 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 26 May 2021 18:19:23 -0400 Subject: Cleanup draggable, Pass ref to each draggable --- src/components/common/Draggable.tsx | 3 -- src/components/common/MomentTags.tsx | 89 +++++++++++++++------------------- src/components/taggs/TaggDraggable.tsx | 34 ++----------- 3 files changed, 42 insertions(+), 84 deletions(-) (limited to 'src/components/common') diff --git a/src/components/common/Draggable.tsx b/src/components/common/Draggable.tsx index 0a480e92..15ba3325 100644 --- a/src/components/common/Draggable.tsx +++ b/src/components/common/Draggable.tsx @@ -60,7 +60,6 @@ interface IProps { maxX?: number; maxY?: number; onDragStart?: () => number; - measureAdd?: () => void; } export default function Draggable(props: IProps) { @@ -91,7 +90,6 @@ export default function Draggable(props: IProps) { maxX, maxY, onDragStart, - measureAdd, } = props; // The Animated object housing our xy value so that we can spring back @@ -141,7 +139,6 @@ export default function Draggable(props: IProps) { } if (onRelease) { onRelease(e, gestureState); - measureAdd(); } if (!shouldReverse) { pan.current.flattenOffset(); diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx index d76e1481..12a7d70a 100644 --- a/src/components/common/MomentTags.tsx +++ b/src/components/common/MomentTags.tsx @@ -1,4 +1,4 @@ -import React, {MutableRefObject, useEffect, useState} from 'react'; +import React, {createRef, MutableRefObject, useEffect, useState} from 'react'; import {MomentTagType, ProfilePreviewType} from '../../types'; import TaggDraggable from '../taggs/TaggDraggable'; import Draggable from './Draggable'; @@ -6,6 +6,7 @@ import Draggable from './Draggable'; interface MomentTagsProps { editing: boolean; tags: MomentTagType[]; + // setTags: (tag: MomentTagType[]) => void; imageRef: MutableRefObject; deleteFromList?: (user: ProfilePreviewType) => void; } @@ -13,18 +14,43 @@ interface MomentTagsProps { const MomentTags: React.FC = ({ editing, tags, + // setTags, imageRef, deleteFromList, }) => { const [offset, setOffset] = useState([0, 0]); const [imageDimensions, setImageDimensions] = useState([0, 0]); - const [curStart, setCurStart] = useState({}); const [maxZIndex, setMaxZIndex] = useState(1); + const [draggableRefs, setDraggableRefs] = useState< + React.MutableRefObject[] + >([]); - const editCurStart = (idName: number, dimensions: number[]) => { - setCurStart((prev) => ({...prev, [idName]: dimensions})); + const updateTagPosition = ( + ref: React.MutableRefObject, + userId: string, + ) => { + if (ref !== null && ref.current !== null) { + ref.current.measure( + ( + _fx: number, // location of ref relative to parent element + _fy: number, + _width: number, + _height: number, + px: number, // location of ref relative to entire screen + py: number, + ) => { + const x = Math.floor(((px - offset[0]) / imageDimensions[0]) * 100); + const y = Math.floor(((py - offset[1]) / imageDimensions[1]) * 100); + console.log(x, y); + }, + ); + } }; + useEffect(() => { + setDraggableRefs(tags.map((_) => createRef())); + }, [tags]); + useEffect(() => { setTimeout( () => { @@ -50,32 +76,13 @@ const MomentTags: React.FC = ({ return null; } - const measureAdd = () => {}; - return editing && deleteFromList ? ( <> {tags.map((tag, index) => ( = ({ setMaxZIndex(currZIndex + 1); return currZIndex; }} - onDragRelease={() => { - console.log('fooo'); - // TODO: george - }}> + onDragRelease={() => + updateTagPosition(draggableRefs[index], tag.user.id) + }> deleteFromList(tag.user)} - setStart={(coords: number[]) => editCurStart(index, coords)} - offset={{fx: offset[0], fy: offset[1]}} - imageDimensions={{ - width: imageDimensions[0], - height: imageDimensions[1], - }} /> ))} @@ -109,20 +110,8 @@ const MomentTags: React.FC = ({ {tags.map((tag, index) => ( = ({ maxY={imageDimensions[1] + offset[1]} disabled={true}> null} - setStart={(coords: number[]) => editCurStart(index, coords)} /> ))} diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx index e964d3d1..06825641 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, {useRef} from 'react'; +import React from 'react'; import { Image, StyleSheet, @@ -17,12 +17,10 @@ import {normalize} from '../../utils'; import {navigateToProfile} from '../../utils/users'; interface TaggDraggableProps extends ViewProps { + draggableRef: React.MutableRefObject; taggedUser: ProfilePreviewType; editingView: boolean; deleteFromList: () => void; - setStart: Function; - offset: {fx: number; fy: number}; - imageDimensions: {width: number; height: number}; } const TaggDraggable: React.FC = ( @@ -31,36 +29,10 @@ const TaggDraggable: React.FC = ( const navigation = useNavigation(); const dispatch = useDispatch(); const state = useSelector((rs: RootState) => rs); - const { - taggedUser, - editingView, - deleteFromList, - setStart, - offset, - imageDimensions, - } = props; + const {draggableRef, taggedUser, editingView, deleteFromList} = props; let uriX = require('../../assets/images/draggableX.png'); let uriTip = require('../../assets/images/Tagg-Triangle.png'); - const draggableRef = useRef(null); - - const getPositions = () => - draggableRef.current.measure( - ( - _fx: number, // location of ref relative to parent element - _fy: number, - _width: number, - _height: number, - px: number, // location of ref relative to entire screen - py: number, - ) => { - return [ - Math.floor(((px - offset.fx) / imageDimensions.width) * 100), - Math.floor(((py - offset.fy) / imageDimensions.height) * 100), - ]; - }, - ); - const user: UserType = { userId: taggedUser.id, username: taggedUser.username, -- cgit v1.2.3-70-g09d2 From e3571b2fcb4a78ea11466ff4bfb0405ae4028aea Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 26 May 2021 19:08:28 -0400 Subject: Finish logic for draggables, Caption screen logic is done --- src/components/common/MomentTags.tsx | 24 ++++++--- src/components/moments/TagFriendsFoooter.tsx | 74 +++++++++++++++------------- src/components/taggs/TaggDraggable.tsx | 2 +- src/routes/main/MainStackNavigator.tsx | 19 +++---- src/screens/moments/TagFriendsScreen.tsx | 34 ++++++------- src/screens/moments/TagSelectionScreen.tsx | 8 ++- src/screens/profile/CaptionScreen.tsx | 28 +++++------ 7 files changed, 105 insertions(+), 84 deletions(-) (limited to 'src/components/common') diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx index 12a7d70a..d1bb03ff 100644 --- a/src/components/common/MomentTags.tsx +++ b/src/components/common/MomentTags.tsx @@ -6,7 +6,7 @@ import Draggable from './Draggable'; interface MomentTagsProps { editing: boolean; tags: MomentTagType[]; - // setTags: (tag: MomentTagType[]) => void; + setTags: (tag: MomentTagType[]) => void; imageRef: MutableRefObject; deleteFromList?: (user: ProfilePreviewType) => void; } @@ -14,7 +14,7 @@ interface MomentTagsProps { const MomentTags: React.FC = ({ editing, tags, - // setTags, + setTags, imageRef, deleteFromList, }) => { @@ -39,9 +39,21 @@ const MomentTags: React.FC = ({ px: number, // location of ref relative to entire screen py: number, ) => { - const x = Math.floor(((px - offset[0]) / imageDimensions[0]) * 100); - const y = Math.floor(((py - offset[1]) / imageDimensions[1]) * 100); - console.log(x, y); + const x = ((px - offset[0]) / imageDimensions[0]) * 100; + const y = ((py - offset[1]) / imageDimensions[1]) * 100; + setTags( + tags.map((tag) => + tag.user.id === userId + ? { + id: '', + x, + y, + z: maxZIndex - 1, // TODO: change this + user: tag.user, + } + : tag, + ), + ); }, ); } @@ -80,7 +92,7 @@ const MomentTags: React.FC = ({ <> {tags.map((tag, index) => ( = ({ setTaggedUsers(filteredSelection); }; - const TaggMoreButton = () => ( - - navigation.navigate('TagSelectionScreen', { - selectedUsers: taggedUsers, - }) - } - style={styles.tagMoreContainer}> - - {'Tagg More'} - + const goToSelectionScreen = () => { + navigation.navigate('TagSelectionScreen', { + selectedUsers: taggedUsers, + }); + }; + + const taggMoreButton = useMemo( + () => ( + + + {'Tagg More'} + + ), + [], ); const TaggedUser = (user: ProfilePreviewType) => ( @@ -66,32 +71,35 @@ const TagFriendsFooter: React.FC = ({ * If taggUsers is empty, title acts as a button * Else, gets disabled and TaggMore button appears */ - const TagFriendsTitle = () => ( - - navigation.navigate('TagSelectionScreen', { - selectedUsers: taggedUsers, - }) - }> - - Tag Friends - + const tagFriendsTitle = useMemo( + () => ( + + navigation.navigate('TagSelectionScreen', { + selectedUsers: taggedUsers, + }) + }> + + Tag Friends + + ), + [taggedUsers.length], ); return ( <> - + {tagFriendsTitle} {taggedUsers.map((user) => ( - + ))} - {taggedUsers.length !== 0 && } + {taggedUsers.length !== 0 && taggMoreButton} diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx index 06825641..86915bb4 100644 --- a/src/components/taggs/TaggDraggable.tsx +++ b/src/components/taggs/TaggDraggable.tsx @@ -26,10 +26,10 @@ interface TaggDraggableProps extends ViewProps { const TaggDraggable: React.FC = ( props: TaggDraggableProps, ) => { + const {draggableRef, taggedUser, editingView, deleteFromList} = props; const navigation = useNavigation(); const dispatch = useDispatch(); const state = useSelector((rs: RootState) => rs); - const {draggableRef, taggedUser, editingView, deleteFromList} = props; let uriX = require('../../assets/images/draggableX.png'); let uriTip = require('../../assets/images/Tagg-Triangle.png'); diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index aeead38d..9ca11458 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -5,6 +5,7 @@ import {createStackNavigator} from '@react-navigation/stack'; import {Image} from 'react-native-image-crop-picker'; import { CommentBaseType, + MomentTagType, MomentType, ProfilePreviewType, ScreenType, @@ -40,7 +41,15 @@ export type MainStackParams = { title: string; image: Image; screenType: ScreenType; - selectedUsers?: ProfilePreviewType[]; + selectedTags?: MomentTagType[]; + }; + TagFriendsScreen: { + image: Image; + screenType: ScreenType; + selectedTags?: MomentTagType[]; + }; + TagSelectionScreen: { + selectedUsers: ProfilePreviewType[]; }; IndividualMoment: { moment: MomentType; @@ -99,14 +108,6 @@ export type MainStackParams = { ChatList: undefined; Chat: undefined; NewChatModal: undefined; - TagSelectionScreen: { - selectedUsers: ProfilePreviewType[]; - }; - TagFriendsScreen: { - image: Image; - screenType: ScreenType; - selectedUsers?: ProfilePreviewType[]; - }; }; export const MainStack = createStackNavigator(); diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx index b9b35742..30a7015f 100644 --- a/src/screens/moments/TagFriendsScreen.tsx +++ b/src/screens/moments/TagFriendsScreen.tsx @@ -19,7 +19,7 @@ import { } from '../../components'; import {TagFriendsFooter} from '../../components/moments'; import {TAGG_LIGHT_BLUE_2} from '../../constants'; -import {ProfilePreviewType} from '../../types'; +import {MomentTagType} from '../../types'; import {SCREEN_WIDTH, StatusBarHeight} from '../../utils'; type TagFriendsScreenRouteProps = RouteProp< @@ -30,19 +30,17 @@ interface TagFriendsScreenProps { route: TagFriendsScreenRouteProps; } const TagFriendsScreen: React.FC = ({route}) => { - const {image, selectedUsers} = route.params; + const {image, selectedTags} = route.params; const navigation = useNavigation(); const imageRef = useRef(null); - const [taggedUsers, setTaggedUsers] = useState([]); + const [tags, setTags] = useState([]); /* * Update list of tagged users from route params */ useEffect(() => { - if (selectedUsers !== undefined) { - setTaggedUsers(selectedUsers); - } - }, [selectedUsers]); + setTags(selectedTags ? selectedTags : []); + }, [selectedTags]); /* * Navigate back to Tag Users Screen, send selected users @@ -50,7 +48,7 @@ const TagFriendsScreen: React.FC = ({route}) => { const handleDone = () => { navigation.navigate('CaptionScreen', { ...route.params, - selectedUsers: taggedUsers, + selectedTags: tags, }); }; @@ -79,7 +77,7 @@ const TagFriendsScreen: React.FC = ({route}) => { title={'Tap on photo to Tag friends!'} /> 0} + disabled={tags.length > 0} onPress={() => navigation.navigate('TagSelectionScreen', { selectedUsers: [], @@ -92,27 +90,23 @@ const TagFriendsScreen: React.FC = ({route}) => { resizeMode={'cover'} /> - {taggedUsers.length !== 0 && ( + {tags.length !== 0 && ( ({ - id: '', - x: 50, - y: 50, - z: 1, - user, - }))} imageRef={imageRef} deleteFromList={(user) => - setTaggedUsers(taggedUsers.filter((u) => u.id !== user.id)) + setTags(tags.filter((tag) => tag.user.id !== user.id)) } /> )} tag.user)} + setTaggedUsers={(users) => null} /> + {/* */} diff --git a/src/screens/moments/TagSelectionScreen.tsx b/src/screens/moments/TagSelectionScreen.tsx index a698a07b..6a4006e8 100644 --- a/src/screens/moments/TagSelectionScreen.tsx +++ b/src/screens/moments/TagSelectionScreen.tsx @@ -48,7 +48,13 @@ const TagSelectionScreen: React.FC = ({route}) => { onPress={() => { navigation.navigate('TagFriendsScreen', { ...route.params, - selectedUsers: selectedUsers, + selectedTags: selectedUsers.map((user) => ({ + id: '', + x: 50, + y: 50, + z: 1, + user, + })), }); }}> = ({route, navigation}) => { - const {title, image, screenType, selectedUsers} = route.params; + const {title, image, screenType, selectedTags} = route.params; const { user: {userId}, } = useSelector((state: RootState) => state.user); const dispatch = useDispatch(); const [caption, setCaption] = useState(''); const [loading, setLoading] = useState(false); - const [taggedUsers, setTaggedUsers] = useState([]); + const [tags, setTags] = useState([]); const [taggedList, setTaggedList] = useState(''); useEffect(() => { - setTaggedUsers(selectedUsers ? selectedUsers : []); - }, [route.params]); + setTags(selectedTags ? selectedTags : []); + }, [selectedTags]); useEffect(() => { const getTaggedUsersListString = () => { let listString = ''; - for (let i = 0; i < taggedUsers.length; i++) { + for (let i = 0; i < tags.length; i++) { if (listString.length < 21) { - listString = listString.concat(`@${taggedUsers[i].username} `); + listString = listString.concat(`@${tags[i].user.username} `); } else { break; } @@ -74,7 +74,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { setTaggedList(listString); }; getTaggedUsersListString(); - }, [taggedUsers]); + }, [tags]); const navigateToProfile = () => { //Since the logged In User is navigating to own profile, useXId is not required @@ -115,11 +115,11 @@ const CaptionScreen: React.FC = ({route, navigation}) => { } const momentTagResponse = await postMomentTags( momentResponse.moment_id, - taggedUsers.map((u, index) => ({ - x: index * 50, - y: index * 50, - z: 1, - user_id: u.id, + tags.map((tag) => ({ + x: tag.x, + y: tag.y, + z: tag.z, + user_id: tag.id, })), ); if (!momentTagResponse) { @@ -174,7 +174,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { navigation.navigate('TagFriendsScreen', { image: image, screenType: screenType, - selectedUsers: taggedUsers, + selectedTags: tags, }) } style={styles.tagFriendsContainer}> -- cgit v1.2.3-70-g09d2 From e2a17e5ec691252164cdd11fb2e769aa8b83addc Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 26 May 2021 19:10:10 -0400 Subject: Set timing to quicker (100) --- src/components/common/MomentTags.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components/common') diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx index d1bb03ff..bdd1fbeb 100644 --- a/src/components/common/MomentTags.tsx +++ b/src/components/common/MomentTags.tsx @@ -80,7 +80,7 @@ const MomentTags: React.FC = ({ }, ); }, - editing ? 250 : 0, + editing ? 100 : 0, ); }, []); -- cgit v1.2.3-70-g09d2 From 50660677fca55f550f8ab56558046409aad13461 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 26 May 2021 19:51:01 -0400 Subject: Finish tagging functionality --- src/components/common/TaggUserSelectionCell.tsx | 37 +++++++++++++------------ src/components/moments/TagFriendsFoooter.tsx | 2 +- src/components/taggs/TaggDraggable.tsx | 2 +- src/screens/moments/TagSelectionScreen.tsx | 26 ++++++----------- src/screens/profile/CaptionScreen.tsx | 8 +++--- src/services/MomentService.ts | 16 +++++------ 6 files changed, 41 insertions(+), 50 deletions(-) (limited to 'src/components/common') diff --git a/src/components/common/TaggUserSelectionCell.tsx b/src/components/common/TaggUserSelectionCell.tsx index 5424ab9b..72c98822 100644 --- a/src/components/common/TaggUserSelectionCell.tsx +++ b/src/components/common/TaggUserSelectionCell.tsx @@ -1,23 +1,20 @@ import React, {useEffect, useState} from 'react'; import {StyleSheet, View} from 'react-native'; -import { - TouchableOpacity, - TouchableWithoutFeedback, -} from 'react-native-gesture-handler'; +import {TouchableWithoutFeedback} from 'react-native-gesture-handler'; import {ProfilePreview} from '..'; -import {ProfilePreviewType, ScreenType} from '../../types'; +import {MomentTagType, ProfilePreviewType, ScreenType} from '../../types'; import {SCREEN_WIDTH} from '../../utils'; import TaggRadioButton from './TaggRadioButton'; interface TaggUserSelectionCellProps { item: ProfilePreviewType; - selectedUsers: ProfilePreviewType[]; - setSelectedUsers: Function; + tags: MomentTagType[]; + setTags: (tags: MomentTagType[]) => void; } const TaggUserSelectionCell: React.FC = ({ item, - selectedUsers, - setSelectedUsers, + tags, + setTags, }) => { const [pressed, setPressed] = useState(false); @@ -26,9 +23,7 @@ const TaggUserSelectionCell: React.FC = ({ */ useEffect(() => { const updatePressed = () => { - const userSelected = selectedUsers.findIndex( - (selectedUser) => item.id === selectedUser.id, - ); + const userSelected = tags.findIndex((tag) => item.id === tag.user.id); setPressed(userSelected !== -1); }; updatePressed(); @@ -41,14 +36,20 @@ const TaggUserSelectionCell: React.FC = ({ const handlePress = () => { // Add to selected list of users if (pressed === false) { - setSelectedUsers([...selectedUsers, item]); + setTags([ + ...tags, + { + id: '', + x: 50, + y: 50, + z: 1, + user: item, + }, + ]); } // Remove item from selected list of users else { - const filteredSelection = selectedUsers.filter( - (user) => user.id !== item.id, - ); - setSelectedUsers(filteredSelection); + setTags(tags.filter((tag) => tag.user.id !== item.id)); } }; return ( @@ -60,7 +61,7 @@ const TaggUserSelectionCell: React.FC = ({ screenType={ScreenType.Profile} /> - + null} /> ); }; diff --git a/src/components/moments/TagFriendsFoooter.tsx b/src/components/moments/TagFriendsFoooter.tsx index 352ee49a..365d709d 100644 --- a/src/components/moments/TagFriendsFoooter.tsx +++ b/src/components/moments/TagFriendsFoooter.tsx @@ -41,7 +41,7 @@ const TagFriendsFooter: React.FC = ({tags, setTags}) => { {'Tagg More'} ), - [], + [tags], ); const TaggedUser = (user: ProfilePreviewType) => ( diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx index 86915bb4..8e330d0b 100644 --- a/src/components/taggs/TaggDraggable.tsx +++ b/src/components/taggs/TaggDraggable.tsx @@ -40,7 +40,7 @@ const TaggDraggable: React.FC = ( return ( - + = ({route}) => { const navigation = useNavigation(); const [users, setUsers] = useState([]); - const [selectedUsers, setSelectedUsers] = useState( - route.params.selectedTags.map((tag) => tag.user), - ); + const [tags, setTags] = useState(route.params.selectedTags); const [searching, setSearching] = useState(false); const [query, setQuery] = useState(''); const [label, setLabel] = useState('Recent'); @@ -48,13 +46,7 @@ const TagSelectionScreen: React.FC = ({route}) => { onPress={() => { navigation.navigate('TagFriendsScreen', { ...route.params, - selectedTags: selectedUsers.map((user) => ({ - id: '', - x: 50, - y: 50, - z: 1, - user, - })), + selectedTags: tags, }); }}> = ({route}) => { * that the loggedInUser might want to select */ const loadUsers = async () => { - const data: ProfilePreviewType[] = await loadTaggUserSuggestions(); + const data = await loadTaggUserSuggestions(); const filteredData: ProfilePreviewType[] = data.filter((user) => { - const index = selectedUsers.findIndex((s) => s.id === user.id); + const index = tags.findIndex((tag) => tag.user.id === user.id); return index === -1; }); - setUsers([...filteredData, ...selectedUsers]); + setUsers([...filteredData, ...tags.map((tag) => tag.user)]); }; /* @@ -89,7 +81,7 @@ const TagSelectionScreen: React.FC = ({route}) => { const searchResults = await loadSearchResults( `${SEARCH_ENDPOINT_MESSAGES}?query=${query}`, ); - setUsers(searchResults?.users); + setUsers(searchResults ? searchResults.users : []); } else { setUsers([]); } @@ -136,8 +128,8 @@ const TagSelectionScreen: React.FC = ({route}) => { )} /> diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index d85ffead..8bffd82b 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -116,10 +116,10 @@ const CaptionScreen: React.FC = ({route, navigation}) => { const momentTagResponse = await postMomentTags( momentResponse.moment_id, tags.map((tag) => ({ - x: tag.x, - y: tag.y, - z: tag.z, - user_id: tag.id, + x: Math.floor(tag.x), + y: Math.floor(tag.y), + z: Math.floor(tag.z), + user_id: tag.user.id, })), ); if (!momentTagResponse) { diff --git a/src/services/MomentService.ts b/src/services/MomentService.ts index 46b55066..423d962c 100644 --- a/src/services/MomentService.ts +++ b/src/services/MomentService.ts @@ -147,6 +147,7 @@ export const postMomentTags = async ( tags: { x: number; y: number; + z: number; user_id: string; }[], ) => { @@ -155,16 +156,13 @@ export const postMomentTags = async ( const form = new FormData(); form.append('moment_id', moment_id); form.append('tags', JSON.stringify(tags)); - const response = await fetch( - MOMENTTAG_ENDPOINT + `?moment_id=${moment_id}`, - { - method: 'POST', - headers: { - Authorization: 'Token ' + token, - }, - body: form, + const response = await fetch(MOMENTTAG_ENDPOINT, { + method: 'POST', + headers: { + Authorization: 'Token ' + token, }, - ); + body: form, + }); return response.status === 201 || response.status === 200; } catch (error) { console.error(error); -- cgit v1.2.3-70-g09d2