diff options
| -rw-r--r-- | src/screens/profile/CaptionScreen.tsx | 209 |
1 files changed, 149 insertions, 60 deletions
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 1f49f917..b34c7c7a 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, useEffect, useRef, useState} from 'react'; +import React, {Fragment, useRef, useState} from 'react'; import { Alert, Image, @@ -14,12 +14,11 @@ import { import {MentionInput} from 'react-native-controlled-mentions'; import {Button} from 'react-native-elements'; import {useDispatch, useSelector} from 'react-redux'; -import {UserType} from 'src/types'; import {SearchBackground} from '../../components'; import {CaptionScreenHeader} from '../../components/'; -import Draggable from '../../components/common/Draggable'; +// import Draggable from '../../components/common/Draggable'; import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator'; -import TaggDraggable from '../../components/taggs/TaggDraggable'; +// 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'; @@ -59,38 +58,72 @@ 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 zIndex = [0, 999]; + // 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 [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]); + // const [offset, setOffset] = useState([0, 0]); + // const [curStart, setCurStart] = useState([0, 0]); - const [imageDimensions, setImageDimensions] = 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', + // }; + + // 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); + // 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<string[]>([]); // created a test user - BUG - failed to register a profile visit - - const testUser: UserType = { - userId: 'ID-1234-567', - username: 'dragonofthewest', - }; + // 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 @@ -99,24 +132,62 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => { userXId: undefined, }); }; + /** + * 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]); + // }; + /** + * 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]; + // }; + /** + * 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); @@ -179,23 +250,41 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => { onChange={setCaption} partTypes={mentionPartTypes('blue')} /> - <Draggable - x={imageDimensions[0] / 2 - curStart[0] / 2 + offset[0]} - y={offset[1] + imageDimensions[1] / 2 - curStart[1] / 2} - z={isTop ? zIndex[1] : zIndex[0]} - minX={offset[0]} - minY={offset[1]} - maxX={imageDimensions[0] + offset[0]} - maxY={imageDimensions[1] + offset[1]} - onPressIn={() => setIsTop(true)} - onPressOut={() => setIsTop(false)}> - <TaggDraggable - taggedUser={taggList[1]} - editingView={true} - deleteFromList={() => console.log('Hello world')} - setStart={setCurStart} - /> - </Draggable> + {/* Draggables - Commented out for now */} + {/* <View> + <Draggable + x={imageDimensions[0] / 2 - curStart[0] / 2 + offset[0]} + y={offset[1] + imageDimensions[1] / 2 - curStart[1] / 2} + z={isOnTop(0) ? 99999999 : zIndex[0]} + minX={offset[0]} + minY={offset[1]} + maxX={imageDimensions[0] + offset[0]} + maxY={imageDimensions[1] + offset[1]} + onDrag={() => 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={isOnTop(1) ? 99999999 : 0} + minX={offset[0]} + minY={offset[1]} + maxX={imageDimensions[0] + offset[0]} + maxY={imageDimensions[1] + offset[1]} + onDrag={() => bringToFront(1)}> + <TaggDraggable + taggedUser={taggList[1]} + editingView={true} + deleteFromList={() => console.log('Hello world')} + setStart={setCurStart} + /> + </Draggable> */} + {/* </View> */} </View> </KeyboardAvoidingView> </TouchableWithoutFeedback> |