aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/common/GenericMoreInfoDrawer.tsx14
-rw-r--r--src/components/moments/MomentPost.tsx8
-rw-r--r--src/components/moments/MomentPostContent.tsx24
-rw-r--r--src/components/moments/MomentPostHeader.tsx12
-rw-r--r--src/components/profile/MomentMoreInfoDrawer.tsx90
-rw-r--r--src/components/profile/ProfileMoreInfoDrawer.tsx5
6 files changed, 86 insertions, 67 deletions
diff --git a/src/components/common/GenericMoreInfoDrawer.tsx b/src/components/common/GenericMoreInfoDrawer.tsx
index 0928ed44..cfc45131 100644
--- a/src/components/common/GenericMoreInfoDrawer.tsx
+++ b/src/components/common/GenericMoreInfoDrawer.tsx
@@ -3,15 +3,16 @@ import {
GestureResponderEvent,
StyleSheet,
Text,
+ TextStyle,
TouchableOpacity,
View,
ViewProps,
ViewStyle,
} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import BottomDrawer from './BottomDrawer';
import {TAGG_LIGHT_BLUE} from '../../constants';
import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import BottomDrawer from './BottomDrawer';
// conforms the JSX onPress attribute type
type OnPressHandler = (event: GestureResponderEvent) => void;
@@ -20,13 +21,12 @@ interface GenericMoreInfoDrawerProps extends ViewProps {
isOpen: boolean;
setIsOpen: (visible: boolean) => void;
showIcons: boolean;
- textColor: string;
// An array of title, onPressHandler, and icon component
- buttons: [string, OnPressHandler, JSX.Element?][];
+ buttons: [string, OnPressHandler, JSX.Element?, TextStyle?][];
}
const GenericMoreInfoDrawer: React.FC<GenericMoreInfoDrawerProps> = (props) => {
- const {buttons, showIcons, textColor} = props;
+ const {buttons, showIcons} = props;
// each button is 80px high, cancel button is always there
const initialSnapPosition =
(buttons.length + 1) * 80 + useSafeAreaInsets().bottom;
@@ -44,13 +44,11 @@ const GenericMoreInfoDrawer: React.FC<GenericMoreInfoDrawerProps> = (props) => {
showHeader={false}
initialSnapPosition={initialSnapPosition}>
<View style={styles.panel}>
- {buttons.map(([title, action, icon], index) => (
+ {buttons.map(([title, action, icon, textStyle], index) => (
<View key={index}>
<TouchableOpacity style={panelButtonStyle} onPress={action}>
{showIcons && <View style={styles.icon}>{icon}</View>}
- <Text style={[styles.panelButtonTitle, {color: textColor}]}>
- {title}
- </Text>
+ <Text style={[styles.panelButtonTitle, textStyle]}>{title}</Text>
</TouchableOpacity>
<View style={styles.divider} />
</View>
diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 7149a5b4..e744fcd9 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -76,18 +76,16 @@ const MomentPost: React.FC<MomentPostProps> = ({item, userXId, screenType}) => {
userXId={userXId}
screenType={screenType}
username={isOwnProfile ? loggedInUsername : username}
- momentId={item.moment_id}
style={styles.postHeader}
momentTagId={momentTagId}
removeTag={removeTag}
+ moment={item}
+ tags={tags}
/>
<MomentPostContent
style={styles.postContent}
- momentId={item.moment_id}
- caption={item.caption}
- pathHash={item.moment_url}
- dateTime={item.date_created}
screenType={screenType}
+ moment={item}
momentTags={tags}
/>
</View>
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index ecbfb3a2..d831d7ee 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -6,7 +6,7 @@ import Animated, {Easing} from 'react-native-reanimated';
import {useDispatch, useStore} from 'react-redux';
import {getCommentsCount} from '../../services';
import {RootState} from '../../store/rootReducer';
-import {MomentTagType, ScreenType, UserType} from '../../types';
+import {MomentTagType, MomentType, ScreenType, UserType} from '../../types';
import {
getTimePosted,
navigateToProfile,
@@ -20,19 +20,13 @@ import {MomentTags} from '../common';
interface MomentPostContentProps extends ViewProps {
screenType: ScreenType;
- momentId: string;
- caption: string;
- pathHash: string;
- dateTime: string;
+ moment: MomentType;
momentTags: MomentTagType[];
}
const MomentPostContent: React.FC<MomentPostContentProps> = ({
screenType,
- momentId,
- caption,
- pathHash,
- dateTime,
style,
+ moment,
momentTags,
}) => {
const [elapsedTime, setElapsedTime] = useState('');
@@ -54,12 +48,12 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
useEffect(() => {
const fetchCommentsCount = async () => {
- const count = await getCommentsCount(momentId, false);
+ const count = await getCommentsCount(moment.moment_id, false);
setCommentsCount(count);
};
- setElapsedTime(getTimePosted(dateTime));
+ setElapsedTime(getTimePosted(moment.date_created));
fetchCommentsCount();
- }, [dateTime, momentId]);
+ }, [moment.date_created, moment.moment_id]);
useEffect(() => {
const fade = async () => {
@@ -82,7 +76,7 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
<Image
ref={imageRef}
style={styles.image}
- source={{uri: pathHash}}
+ source={{uri: moment.moment_url}}
resizeMode={'cover'}
/>
{tags.length > 0 && (
@@ -100,13 +94,13 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
<View style={styles.footerContainer}>
<CommentsCount
commentsCount={comments_count}
- momentId={momentId}
+ momentId={moment.moment_id}
screenType={screenType}
/>
<Text style={styles.text}>{elapsedTime}</Text>
</View>
{renderTextWithMentions({
- value: caption,
+ value: moment.caption,
styles: styles.captionText,
partTypes: mentionPartTypes('white'),
onPress: (user: UserType) =>
diff --git a/src/components/moments/MomentPostHeader.tsx b/src/components/moments/MomentPostHeader.tsx
index dc6a3cd9..cde7639c 100644
--- a/src/components/moments/MomentPostHeader.tsx
+++ b/src/components/moments/MomentPostHeader.tsx
@@ -10,7 +10,7 @@ import {
import {useDispatch, useSelector, useStore} from 'react-redux';
import {loadUserMoments} from '../../store/actions';
import {RootState} from '../../store/rootReducer';
-import {ScreenType} from '../../types';
+import {MomentTagType, MomentType, ScreenType} from '../../types';
import {fetchUserX, userXInStore} from '../../utils';
import {MomentMoreInfoDrawer} from '../profile';
import TaggAvatar from '../profile/TaggAvatar';
@@ -19,19 +19,21 @@ interface MomentPostHeaderProps extends ViewProps {
userXId?: string;
screenType: ScreenType;
username: string;
- momentId: string;
momentTagId: string;
removeTag: () => Promise<void>;
+ moment: MomentType;
+ tags: MomentTagType[];
}
const MomentPostHeader: React.FC<MomentPostHeaderProps> = ({
userXId,
screenType,
username,
- momentId,
style,
momentTagId,
removeTag,
+ moment,
+ tags,
}) => {
const [drawerVisible, setDrawerVisible] = useState(false);
const dispatch = useDispatch();
@@ -68,7 +70,6 @@ const MomentPostHeader: React.FC<MomentPostHeaderProps> = ({
<MomentMoreInfoDrawer
isOpen={drawerVisible}
setIsOpen={setDrawerVisible}
- momentId={momentId}
isOwnProfile={isOwnProfile}
momentTagId={momentTagId}
removeTag={removeTag}
@@ -76,6 +77,9 @@ const MomentPostHeader: React.FC<MomentPostHeaderProps> = ({
dispatch(loadUserMoments(loggedInUserId));
navigation.pop();
}}
+ screenType={screenType}
+ moment={moment}
+ tags={tags}
/>
</View>
);
diff --git a/src/components/profile/MomentMoreInfoDrawer.tsx b/src/components/profile/MomentMoreInfoDrawer.tsx
index 1265497e..a796ffd8 100644
--- a/src/components/profile/MomentMoreInfoDrawer.tsx
+++ b/src/components/profile/MomentMoreInfoDrawer.tsx
@@ -1,44 +1,58 @@
+import {useNavigation} from '@react-navigation/core';
import React, {useEffect, useState} from 'react';
import {
Alert,
GestureResponderEvent,
StyleSheet,
+ TextStyle,
TouchableOpacity,
ViewProps,
} from 'react-native';
import MoreIcon from '../../assets/icons/more_horiz-24px.svg';
import {ERROR_DELETE_MOMENT, MOMENT_DELETED_MSG} from '../../constants/strings';
import {deleteMoment, sendReport} from '../../services';
+import {MomentTagType, MomentType, ScreenType} from '../../types/types';
import {GenericMoreInfoDrawer} from '../common';
enum MomentDrawerOptions {
DeleteMoment = 'Delete Moment',
ReportIssue = 'Report an Issue',
RemoveTag = 'Remove yourself from moment',
+ EditMoment = 'Edit Moment',
}
interface MomentMoreInfoDrawerProps extends ViewProps {
isOpen: boolean;
setIsOpen: (visible: boolean) => void;
- momentId: string;
isOwnProfile: boolean;
momentTagId: string;
removeTag: () => Promise<void>;
dismissScreenAndUpdate: () => void;
+ screenType: ScreenType;
+ moment: MomentType;
+ tags: MomentTagType[];
}
const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
const {
- momentId,
setIsOpen,
isOwnProfile,
dismissScreenAndUpdate,
momentTagId,
removeTag,
+ screenType,
+ moment,
+ tags,
} = props;
+ const navigation = useNavigation();
+
+ const [drawerButtons, setDrawerButtons] = useState<
+ [string, (event: GestureResponderEvent) => void, JSX.Element?, TextStyle?][]
+ >([]);
+
const handleDeleteMoment = async () => {
setIsOpen(false);
- deleteMoment(momentId).then((success) => {
+ deleteMoment(moment.moment_id).then((success) => {
if (success) {
// set time out for UI transitions
setTimeout(() => {
@@ -88,7 +102,8 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
[
{
text: 'Mark as inappropriate',
- onPress: () => sendReport(momentId, 'Mark as inappropriate'),
+ onPress: () =>
+ sendReport(moment.moment_id, 'Mark as inappropriate'),
},
{
text: 'Cancel',
@@ -96,7 +111,7 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
},
{
text: 'Mark as abusive',
- onPress: () => sendReport(momentId, 'Mark as abusive'),
+ onPress: () => sendReport(moment.moment_id, 'Mark as abusive'),
},
],
{cancelable: false},
@@ -104,42 +119,52 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
}, 500);
};
- const [drawerButtons, setDrawerButtons] = useState<
- [string, (event: GestureResponderEvent) => void, JSX.Element?][]
- >([
- isOwnProfile
- ? [MomentDrawerOptions.DeleteMoment, handleDeleteMoment]
- : [MomentDrawerOptions.ReportIssue, handleReportMoment],
- ]);
+ const handleEditMoment = async () => {
+ setIsOpen(false);
+ navigation.navigate('CaptionScreen', {
+ screenType: screenType,
+ selectedTags: tags,
+ moment: moment,
+ });
+ };
/*
* Update bottom drawer options to contain/not contain 'remove tag' option
*/
useEffect(() => {
- const setupBottomDrawer = () => {
- const present = drawerButtons.findIndex(
- (button) => button[0] === MomentDrawerOptions.RemoveTag,
- );
- /*
- * If user is not tagged but button is present, remove button from bottom drawer
- * If user is tagged but button is not present, add button to bottom drawer
- */
- if (momentTagId !== '' && present === -1) {
- const localDrawerButtons = drawerButtons;
- localDrawerButtons.push([
+ let newButtons: [
+ string,
+ (event: GestureResponderEvent) => void,
+ JSX.Element?,
+ TextStyle?,
+ ][] = [];
+ if (!isOwnProfile) {
+ newButtons.push([
+ MomentDrawerOptions.ReportIssue,
+ handleReportMoment,
+ undefined,
+ {color: 'red'},
+ ]);
+ // should we have the "delete moment" option?
+ if (momentTagId !== '') {
+ newButtons.push([
MomentDrawerOptions.RemoveTag,
handleRemoveTag,
+ undefined,
+ {color: 'red'},
]);
- setDrawerButtons(localDrawerButtons);
- } else if (momentTagId === '' && present !== -1) {
- const filteredButtons = drawerButtons.filter(
- (button) => button[0] !== MomentDrawerOptions.RemoveTag,
- );
- setDrawerButtons(filteredButtons);
}
- };
- setupBottomDrawer();
- }, [momentTagId]);
+ } else {
+ newButtons.push([
+ MomentDrawerOptions.DeleteMoment,
+ handleDeleteMoment,
+ undefined,
+ {color: 'red'},
+ ]);
+ newButtons.push([MomentDrawerOptions.EditMoment, handleEditMoment]);
+ }
+ setDrawerButtons(newButtons);
+ }, [tags, momentTagId]);
return (
<>
@@ -153,7 +178,6 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
<GenericMoreInfoDrawer
{...props}
showIcons={false}
- textColor={'red'}
buttons={drawerButtons}
/>
</>
diff --git a/src/components/profile/ProfileMoreInfoDrawer.tsx b/src/components/profile/ProfileMoreInfoDrawer.tsx
index ecc45211..656f81bb 100644
--- a/src/components/profile/ProfileMoreInfoDrawer.tsx
+++ b/src/components/profile/ProfileMoreInfoDrawer.tsx
@@ -55,12 +55,12 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => {
<GenericMoreInfoDrawer
{...props}
showIcons={false}
- textColor={'red'}
buttons={[
[
(isBlocked ? 'Unblock' : 'Block') + ` ${userXName}`,
onBlockUnblock,
undefined,
+ {color: 'red'},
],
]}
/>
@@ -68,7 +68,6 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => {
<GenericMoreInfoDrawer
{...props}
showIcons={true}
- textColor={'black'}
buttons={[
[
'Settings',
@@ -77,6 +76,7 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => {
source={require('../../assets/images/settings/settings.png')}
style={styles.image}
/>,
+ {color: 'black'},
],
[
'Edit Profile',
@@ -85,6 +85,7 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => {
source={require('../../assets/images/settings/edit-profile.png')}
style={styles.image}
/>,
+ {color: 'black'},
],
]}
/>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 02:47:58 +0000