diff options
| -rw-r--r-- | src/screens/profile/CaptionScreen.tsx | 135 |
1 files changed, 63 insertions, 72 deletions
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index ec55e43a..68956407 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -1,6 +1,6 @@ import {RouteProp} from '@react-navigation/native'; import {StackNavigationProp} from '@react-navigation/stack'; -import React, {Fragment, useRef, useState} from 'react'; +import React, {Fragment, useEffect, useRef, useState} from 'react'; import { Alert, Image, @@ -8,7 +8,6 @@ import { KeyboardAvoidingView, Platform, StyleSheet, - // Text, TouchableWithoutFeedback, View, } from 'react-native'; @@ -17,7 +16,9 @@ import {Button} from 'react-native-elements'; import {useDispatch, useSelector} from 'react-redux'; import {SearchBackground} from '../../components'; import {CaptionScreenHeader} from '../../components/'; +import Draggable from '../../components/common/Draggable'; import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator'; +import TaggDraggable from '../../components/taggs/TaggDraggable'; import {TAGG_LIGHT_BLUE_2} from '../../constants'; import {ERROR_UPLOAD, SUCCESS_PIC_UPLOAD} from '../../constants/strings'; import {MainStackParams} from '../../routes'; @@ -57,38 +58,45 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => { const dispatch = useDispatch(); const [caption, setCaption] = useState(''); const [loading, setLoading] = useState(false); - // const [isTop, setIsTop] = useState(false); const imageRef = useRef(null); // const zIndex = [0, 999]; // state variables used to position draggables - // const [offset, setOffset] = useState([0, 0]); - // const [curStart, setCurStart] = useState([0, 0]); - // const [imageDimensions, setImageDimensions] = useState([0, 0]); + const [offset, setOffset] = useState([0, 0]); + const [curStart, setCurStart] = useState([0, 0]); + const [imageDimensions, setImageDimensions] = useState([0, 0]); // state var used to keep track of draggable z ordering // const [layerOrder, setLayerOrder] = useState<string[]>([]); // created a state variable to keep track of every tag // idea is that each element in the list - // const [taggList, setTaggList] = useState([ - // { - // first_name: 'Ivan', - // id: 'cee45bf8-7f3d-43c8-99bb-ec04908efe58', - // last_name: 'Chen', - // thumbnail_url: - // 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-cee45bf8-7f3d-43c8-99bb-ec04908efe58-thumbnail.jpg', - // username: 'ivan.tagg', - // }, - // { - // first_name: 'Ankit', - // id: '3bcf6947-bee6-46b0-ad02-6f4d25eaeac3', - // last_name: 'Thanekar', - // thumbnail_url: - // 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-3bcf6947-bee6-46b0-ad02-6f4d25eaeac3-thumbnail.jpg', - // username: 'ankit.thanekar', - // }, - // ]); + const [taggList, setTaggList] = useState([ + { + first_name: 'Ivan', + id: 'cee45bf8-7f3d-43c8-99bb-ec04908efe58', + last_name: 'Chen', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-cee45bf8-7f3d-43c8-99bb-ec04908efe58-thumbnail.jpg', + username: 'ivan.tagg', + }, + { + first_name: 'Ankit', + id: '3bcf6947-bee6-46b0-ad02-6f4d25eaeac3', + last_name: 'Thanekar', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-3bcf6947-bee6-46b0-ad02-6f4d25eaeac3-thumbnail.jpg', + username: 'ankit.thanekar', + }, + { + first_name: 'Ankit', + id: '3bcf6947-bee6-46b0-ad02-6f4d25eaeac3', + last_name: 'Thanekar', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-3bcf6947-bee6-46b0-ad02-6f4d25eaeac3-thumbnail.jpg', + username: 'ankit.thanekar', + }, + ]); const navigateToProfile = () => { //Since the logged In User is navigating to own profile, useXId is not required @@ -125,21 +133,19 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => { /** * need a handler to take care of creating a tagged user object, append that object to the taggList state variable. - * @returns */ - - // useEffect(() => { - // imageRef.current.measure((fx, fy, width, height, px, py) => { - // // console.log('Component width is: ' + width); - // // console.log('Component height is: ' + height); - // // console.log('X offset to frame: ' + fx); - // // console.log('Y offset to frame: ' + fy); - // // console.log('X offset to page: ' + px); - // // console.log('Y offset to page: ' + py); - // setOffset([px, py]); - // setImageDimensions([width, height]); - // }); - // }, []); + useEffect(() => { + imageRef.current.measure((fx, fy, width, height, px, py) => { + // console.log('Component width is: ' + width); + // console.log('Component height is: ' + height); + // console.log('X offset to frame: ' + fx); + // console.log('Y offset to frame: ' + fy); + // console.log('X offset to page: ' + px); + // console.log('Y offset to page: ' + py); + setOffset([px, py]); + setImageDimensions([width, height]); + }); + }, []); const handleShare = async () => { setLoading(true); @@ -202,40 +208,25 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => { onChange={setCaption} partTypes={mentionPartTypes('blue')} /> - {/* Draggables - Commented out for now */} - {/* <Draggable - // ivan - x={imageDimensions[0] / 2 - curStart[0] / 2 + offset[0]} - y={offset[1] + imageDimensions[1] / 2 - curStart[1] / 2} - z={999} - minX={offset[0]} - minY={offset[1]} - maxX={imageDimensions[0] + offset[0]} - maxY={imageDimensions[1] + offset[1]} - onDragStart={() => bringToFront(0)}> - <TaggDraggable - taggedUser={taggList[0]} - editingView={true} - deleteFromList={() => console.log('Hello world')} - setStart={setCurStart} - /> - </Draggable> - <Draggable - x={imageDimensions[0] / 2 - curStart[0] / 2 + offset[0]} - y={offset[1] + imageDimensions[1] / 2 - curStart[1] / 2} - z={0} - minX={offset[0]} - minY={offset[1]} - maxX={imageDimensions[0] + offset[0]} - maxY={imageDimensions[1] + offset[1]} - onDragStart={() => bringToFront(1)}> - <TaggDraggable - taggedUser={taggList[1]} - editingView={true} - deleteFromList={() => console.log('Hello world')} - setStart={setCurStart} - /> - </Draggable> */} + {taggList.map((user) => ( + <Draggable + x={imageDimensions[0] / 2 - curStart[0] / 2 + offset[0]} + y={offset[1] + imageDimensions[1] / 2 - curStart[1] / 2} + minX={offset[0]} + minY={offset[1]} + maxX={imageDimensions[0] + offset[0]} + maxY={imageDimensions[1] + offset[1]} + onDragStart={() => null}> + <TaggDraggable + taggedUser={user} + editingView={true} + deleteFromList={() => + setTaggList(taggList.filter((u) => u.id !== user.id)) + } + setStart={setCurStart} + /> + </Draggable> + ))} </View> </KeyboardAvoidingView> </TouchableWithoutFeedback> |