aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/common/MomentTags.tsx79
-rw-r--r--src/components/common/index.ts1
-rw-r--r--src/components/moments/MomentPostContent.tsx9
-rw-r--r--src/screens/profile/CaptionScreen.tsx53
4 files changed, 101 insertions, 41 deletions
diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx
new file mode 100644
index 00000000..f6f475bc
--- /dev/null
+++ b/src/components/common/MomentTags.tsx
@@ -0,0 +1,79 @@
+import React, {MutableRefObject, useEffect, useState} from 'react';
+import {MomentTagType, ProfilePreviewType} from '../../types';
+import TaggDraggable from '../taggs/TaggDraggable';
+import Draggable from './Draggable';
+
+interface MomentTagsProps {
+ editing: boolean;
+ tags: MomentTagType[];
+ imageRef: MutableRefObject<null>;
+ deleteFromList?: (user: ProfilePreviewType) => void;
+}
+
+const MomentTags: React.FC<MomentTagsProps> = ({
+ editing,
+ tags,
+ imageRef,
+ deleteFromList,
+}) => {
+ const [offset, setOffset] = useState([0, 0]);
+ const [curStart, setCurStart] = useState([0, 0]);
+ const [imageDimensions, setImageDimensions] = useState([0, 0]);
+
+ useEffect(() => {
+ imageRef.current.measure((fx, fy, width, height, px, py) => {
+ console.log(px, py);
+ console.log(width, height);
+ setOffset([px, py]);
+ setImageDimensions([width, height]);
+ });
+ }, []);
+
+ if (!tags) {
+ return null;
+ }
+
+ return editing && deleteFromList ? (
+ <>
+ {tags.map((tag) => (
+ <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={tag.user}
+ editingView={true}
+ deleteFromList={() => deleteFromList(tag.user)}
+ setStart={setCurStart}
+ />
+ </Draggable>
+ ))}
+ </>
+ ) : (
+ <>
+ {tags.map((tag) => (
+ <Draggable
+ x={imageDimensions[0] / 2 - curStart[0] / 2 + tag.x}
+ y={imageDimensions[0] / 2 - curStart[0] / 2 + tag.y}
+ minX={offset[0]}
+ minY={offset[1]}
+ maxX={imageDimensions[0] + offset[0]}
+ maxY={imageDimensions[1] + offset[1]}
+ onDragStart={() => null}>
+ <TaggDraggable
+ taggedUser={tag.user}
+ editingView={editing}
+ deleteFromList={() => null}
+ setStart={setCurStart}
+ />
+ </Draggable>
+ ))}
+ </>
+ );
+};
+
+export default MomentTags;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 48abb8b8..692c9f8a 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -27,3 +27,4 @@ export {default as Avatar} from './Avatar';
export {default as TaggTypeahead} from './TaggTypeahead';
export {default as TaggUserRowCell} from './TaggUserRowCell';
export {default as LikeButton} from './LikeButton';
+export {default as MomentTags} from './MomentTags';
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index 9a174e73..e702cb68 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -1,20 +1,20 @@
import {useNavigation} from '@react-navigation/native';
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
import {Image, StyleSheet, Text, View, ViewProps} from 'react-native';
import {useDispatch, useStore} from 'react-redux';
import {getCommentsCount, loadMomentTags} from '../../services';
-import {userMomentsFetched} from '../../store/reducers';
import {RootState} from '../../store/rootReducer';
import {MomentTagType, ScreenType, UserType} from '../../types';
import {
getTimePosted,
navigateToProfile,
+ normalize,
SCREEN_HEIGHT,
SCREEN_WIDTH,
- normalize,
} from '../../utils';
import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
import {CommentsCount} from '../comments';
+import {MomentTags} from '../common';
interface MomentPostContentProps extends ViewProps {
screenType: ScreenType;
@@ -37,6 +37,7 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
const state: RootState = useStore().getState();
const navigation = useNavigation();
const dispatch = useDispatch();
+ const imageRef = useRef(null);
useEffect(() => {
const loadTags = async () => {
@@ -60,10 +61,12 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
return (
<View style={[styles.container, style]}>
<Image
+ ref={imageRef}
style={styles.image}
source={{uri: pathHash}}
resizeMode={'cover'}
/>
+ <MomentTags editing={false} tags={tags} imageRef={imageRef} />
<View style={styles.footerContainer}>
<CommentsCount
commentsCount={comments_count}
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 8e972e07..56fe672e 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,11 +14,9 @@ import {
import {MentionInput} from 'react-native-controlled-mentions';
import {Button} from 'react-native-elements';
import {useDispatch, useSelector} from 'react-redux';
-import {SearchBackground} from '../../components';
+import {MomentTags, 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';
@@ -54,11 +52,6 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
const [loading, setLoading] = useState(false);
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]);
-
const [taggList, setTaggList] = useState([
{
first_name: 'Ivan',
@@ -94,16 +87,6 @@ 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.
- */
- useEffect(() => {
- imageRef.current.measure((fx, fy, width, height, px, py) => {
- setOffset([px, py]);
- setImageDimensions([width, height]);
- });
- }, []);
-
const handleShare = async () => {
setLoading(true);
if (!image.filename) {
@@ -165,25 +148,19 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
onChange={setCaption}
partTypes={mentionPartTypes('blue')}
/>
- {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>
- ))}
+ <MomentTags
+ editing={true}
+ tags={taggList.map((user) => ({
+ id: '',
+ x: 0,
+ y: 0,
+ user,
+ }))}
+ imageRef={imageRef}
+ deleteFromList={(user) =>
+ setTaggList(taggList.filter((u) => u.id !== user.id))
+ }
+ />
</View>
</KeyboardAvoidingView>
</TouchableWithoutFeedback>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 12:05:33 +0000