aboutsummaryrefslogtreecommitdiff
path: root/src/screens
diff options
context:
space:
mode:
Diffstat (limited to 'src/screens')
-rw-r--r--src/screens/profile/CaptionScreen.tsx251
1 files changed, 123 insertions, 128 deletions
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index b34c7c7a..a2b9a3ad 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, useRef, useState, useEffect} from 'react';
import {
Alert,
Image,
@@ -8,6 +8,7 @@ import {
KeyboardAvoidingView,
Platform,
StyleSheet,
+ Text,
TouchableWithoutFeedback,
View,
} from 'react-native';
@@ -16,9 +17,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 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';
@@ -30,6 +31,7 @@ import {
import {RootState} from '../../store/rootReducer';
import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
import {mentionPartTypes} from '../../utils/comments';
+import {TouchableOpacity} from 'react-native-gesture-handler';
/**
* Upload Screen to allow users to upload posts to Tagg
@@ -59,66 +61,36 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
const [caption, setCaption] = useState('');
const [loading, setLoading] = useState(false);
// 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 zIndex = [0, 999];
const imageRef = useRef(null);
- // const [offset, setOffset] = useState([0, 0]);
- // const [curStart, setCurStart] = 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',
- // };
+ const [offset, setOffset] = useState([0, 0]);
+ const [curStart, setCurStart] = useState([0, 0]);
+ const [imageDimensions, setImageDimensions] = useState([0, 0]);
// 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);
+ 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',
+ },
+ ]);
// 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[]>([]);
+ const [layerOrder, setLayerOrder] = useState<string[]>([]);
// created a test user - BUG - failed to register a profile visit -
// const testUser: UserType = {
// userId: 'ID-1234-567',
@@ -136,58 +108,80 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
* 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]);
- // };
+ const bringToFront = async (index: number) => {
+ let currUser = taggList[index].id;
+ // console.log(currUser);
+ // console.log('layer order : ' + layerOrder);
+ // if (layerOrder.length === 0) {
+ // setLayerOrder([currUser]);
+ // }
+ const newLayerOrder: string[] = [];
+ newLayerOrder.push(currUser);
+ newLayerOrder.concat(layerOrder);
+ // console.log('BEFORE NLOrder' + newLayerOrder);
+ // if (layerOrder.includes(currUser)) {
+ // newLayerOrder.splice(newLayerOrder.indexOf(currUser), 1);
+ // }
+ // console.log('NLOrder' + newLayerOrder);
+ // const newArray = ;
+ // console.log('should be', [currUser, ...newLayerOrder]);
+ await setLayerOrder(newLayerOrder);
+ // console.log('is', layerOrder);
+ // console.log('ON TOP IS THIS ONE: ' + layerOrder[0]);
+ };
+
+ useEffect(() => {
+ console.log(
+ 'layerOPrder is updating ' +
+ typeof layerOrder +
+ ' ' +
+ layerOrder +
+ ' ' +
+ layerOrder.length,
+ );
+ }, [layerOrder]);
+ console.log('outside: ' + layerOrder);
+ useEffect(() => {
+ console.log(
+ 'wer are nupdating is updating ' +
+ typeof layerOrder +
+ ' ' +
+ layerOrder +
+ ' ' +
+ layerOrder.length,
+ );
+ });
+
/**
* 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];
- // };
+ 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);
@@ -251,40 +245,41 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
partTypes={mentionPartTypes('blue')}
/>
{/* 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> */}
+ <Draggable
+ // ivan
+ x={imageDimensions[0] / 2 - curStart[0] / 2 + offset[0]}
+ y={offset[1] + imageDimensions[1] / 2 - curStart[1] / 2}
+ z={isOnTop(0) ? 999 : 0}
+ 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={isOnTop(0) ? 999 : 0}
+ minX={offset[0]}
+ minY={offset[1]}
+ maxX={imageDimensions[0] + offset[0]}
+ maxY={imageDimensions[1] + offset[1]}
+ onDragStart={() => bringToFront(1)}>
+ {/* onPressIn={() => console.log('bleh')}> */}
+ <TaggDraggable
+ taggedUser={taggList[1]}
+ editingView={true}
+ deleteFromList={() => console.log('Hello world')}
+ setStart={setCurStart}
+ />
+ </Draggable>
</View>
</KeyboardAvoidingView>
</TouchableWithoutFeedback>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-31 06:49:58 +0000