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/screens/profile/CaptionScreen.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'src/screens') diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 188ccc1f..731e001c 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -118,6 +118,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { taggedUsers.map((u, index) => ({ x: index * 50 - 150, y: index * 50 - 150, + z: 1, user_id: u.id, })), ); -- 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/screens') 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 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/screens') 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 0c512ea9bc2ad75b1ae356fa7166044510750581 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 26 May 2021 19:16:55 -0400 Subject: Fix issue for TaggFooter, Delete works --- src/components/moments/TagFriendsFoooter.tsx | 30 ++++++++++++---------------- src/routes/main/MainStackNavigator.tsx | 2 +- src/screens/moments/TagFriendsScreen.tsx | 7 ++----- src/screens/moments/TagSelectionScreen.tsx | 2 +- 4 files changed, 17 insertions(+), 24 deletions(-) (limited to 'src/screens') diff --git a/src/components/moments/TagFriendsFoooter.tsx b/src/components/moments/TagFriendsFoooter.tsx index 16158612..352ee49a 100644 --- a/src/components/moments/TagFriendsFoooter.tsx +++ b/src/components/moments/TagFriendsFoooter.tsx @@ -1,5 +1,5 @@ import {useNavigation} from '@react-navigation/native'; -import React, {Dispatch, SetStateAction, useMemo} from 'react'; +import React, {useMemo} from 'react'; import { Image, ScrollView, @@ -9,27 +9,23 @@ import { View, } from 'react-native'; import {ProfilePreview} from '..'; -import {ProfilePreviewType, ScreenType} from '../../types'; +import {MomentTagType, ProfilePreviewType, ScreenType} from '../../types'; import {normalize, SCREEN_HEIGHT} from '../../utils/layouts'; interface TagFriendsFooterProps { - taggedUsers: ProfilePreviewType[]; - setTaggedUsers: Dispatch>; + tags: MomentTagType[]; + setTags: (tags: MomentTagType[]) => void; } -const TagFriendsFooter: React.FC = ({ - taggedUsers, - setTaggedUsers, -}) => { +const TagFriendsFooter: React.FC = ({tags, setTags}) => { const navigation = useNavigation(); const handleRemoveTag = (user: ProfilePreviewType) => { - const filteredSelection = taggedUsers.filter((item) => user.id !== item.id); - setTaggedUsers(filteredSelection); + setTags(tags.filter((tag) => tag.user.id !== user.id)); }; const goToSelectionScreen = () => { navigation.navigate('TagSelectionScreen', { - selectedUsers: taggedUsers, + selectedTags: tags, }); }; @@ -75,10 +71,10 @@ const TagFriendsFooter: React.FC = ({ () => ( navigation.navigate('TagSelectionScreen', { - selectedUsers: taggedUsers, + selectedTags: tags, }) }> = ({ Tag Friends ), - [taggedUsers.length], + [tags.length], ); return ( @@ -96,10 +92,10 @@ const TagFriendsFooter: React.FC = ({ {tagFriendsTitle} - {taggedUsers.map((user) => ( - + {tags.map((tag) => ( + ))} - {taggedUsers.length !== 0 && taggMoreButton} + {tags.length !== 0 && taggMoreButton} diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 9ca11458..805c8140 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -49,7 +49,7 @@ export type MainStackParams = { selectedTags?: MomentTagType[]; }; TagSelectionScreen: { - selectedUsers: ProfilePreviewType[]; + selectedTags: MomentTagType[]; }; IndividualMoment: { moment: MomentType; diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx index 30a7015f..c7b48f03 100644 --- a/src/screens/moments/TagFriendsScreen.tsx +++ b/src/screens/moments/TagFriendsScreen.tsx @@ -6,6 +6,7 @@ import { Keyboard, KeyboardAvoidingView, Platform, + Settings, StyleSheet, TouchableWithoutFeedback, View, @@ -102,11 +103,7 @@ const TagFriendsScreen: React.FC = ({route}) => { /> )} - tag.user)} - setTaggedUsers={(users) => null} - /> - {/* */} + diff --git a/src/screens/moments/TagSelectionScreen.tsx b/src/screens/moments/TagSelectionScreen.tsx index 6a4006e8..08e17eab 100644 --- a/src/screens/moments/TagSelectionScreen.tsx +++ b/src/screens/moments/TagSelectionScreen.tsx @@ -31,7 +31,7 @@ const TagSelectionScreen: React.FC = ({route}) => { const navigation = useNavigation(); const [users, setUsers] = useState([]); const [selectedUsers, setSelectedUsers] = useState( - route.params.selectedUsers, + route.params.selectedTags.map((tag) => tag.user), ); const [searching, setSearching] = useState(false); const [query, setQuery] = useState(''); -- 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/screens') 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 From b87ad0f18d491a27bbb458887abdd2ab09e64d1e Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 26 May 2021 19:54:52 -0400 Subject: Lint --- src/routes/main/MainStackNavigator.tsx | 1 - src/screens/moments/TagFriendsScreen.tsx | 1 - 2 files changed, 2 deletions(-) (limited to 'src/screens') diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 805c8140..d22c1874 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -7,7 +7,6 @@ import { CommentBaseType, MomentTagType, MomentType, - ProfilePreviewType, ScreenType, SearchCategoryType, } from '../../types'; diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx index c7b48f03..d960f3b9 100644 --- a/src/screens/moments/TagFriendsScreen.tsx +++ b/src/screens/moments/TagFriendsScreen.tsx @@ -6,7 +6,6 @@ import { Keyboard, KeyboardAvoidingView, Platform, - Settings, StyleSheet, TouchableWithoutFeedback, View, -- cgit v1.2.3-70-g09d2