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') 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