aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/comments/AddComment.tsx6
-rw-r--r--src/components/moments/MomentCommentPreview.tsx25
-rw-r--r--src/components/moments/MomentPostContent.tsx24
3 files changed, 40 insertions, 15 deletions
diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 12fd7e4d..18b9c24e 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -24,12 +24,14 @@ import {MentionInputControlled} from './MentionInputControlled';
export interface AddCommentProps {
momentId: string;
placeholderText: string;
+ callback?: (message: string) => void;
theme?: 'dark' | 'white';
}
const AddComment: React.FC<AddCommentProps> = ({
momentId,
placeholderText,
+ callback = (msg) => null,
theme = 'white',
}) => {
const {setShouldUpdateAllComments = () => null, commentTapped} =
@@ -55,13 +57,15 @@ const AddComment: React.FC<AddCommentProps> = ({
if (trimmed === '') {
return;
}
+ const message = inReplyToMention + trimmed;
const postedComment = await postComment(
- inReplyToMention + trimmed,
+ message,
objectId,
isReplyingToComment || isReplyingToReply,
);
if (postedComment) {
+ callback(message);
setComment('');
setInReplyToMention('');
diff --git a/src/components/moments/MomentCommentPreview.tsx b/src/components/moments/MomentCommentPreview.tsx
index 94fcb008..092f8936 100644
--- a/src/components/moments/MomentCommentPreview.tsx
+++ b/src/components/moments/MomentCommentPreview.tsx
@@ -3,50 +3,52 @@ import React from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';
import {TouchableOpacity} from 'react-native-gesture-handler';
import {useDispatch, useStore} from 'react-redux';
-import {MomentPostType, ScreenType, UserType} from '../../types';
+import {MomentCommentPreviewType, ScreenType, UserType} from '../../types';
import {navigateToProfile, normalize} from '../../utils';
import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
interface MomentCommentPreviewProps {
- moment: MomentPostType;
+ momentId: string;
+ commentsCount: number;
+ commentPreview: MomentCommentPreviewType | null;
screenType: ScreenType;
}
const MomentCommentPreview: React.FC<MomentCommentPreviewProps> = ({
- moment,
+ momentId,
+ commentsCount,
+ commentPreview,
screenType,
}) => {
const navigation = useNavigation();
const state = useStore().getState();
const commentCountText =
- moment.comments_count === 0
- ? 'No Comments'
- : moment.comments_count + ' comments';
+ commentsCount === 0 ? 'No Comments' : commentsCount + ' comments';
return (
<TouchableOpacity
style={styles.commentsPreviewContainer}
onPress={() =>
navigation.push('MomentCommentsScreen', {
- moment_id: moment.moment_id,
+ moment_id: momentId,
screenType,
})
}>
<Text style={styles.whiteBold}>{commentCountText}</Text>
- {moment.comment_preview !== null && (
+ {commentPreview !== null && (
<View style={styles.previewContainer}>
<Image
source={{
- uri: moment.comment_preview.commenter.thumbnail_url,
+ uri: commentPreview.commenter.thumbnail_url,
}}
style={styles.avatar}
/>
<Text style={styles.whiteBold} numberOfLines={1}>
<Text> </Text>
- <Text>{moment.comment_preview.commenter.username}</Text>
+ <Text>{commentPreview.commenter.username}</Text>
<Text> </Text>
{renderTextWithMentions({
- value: moment.comment_preview.comment,
+ value: commentPreview.comment,
styles: styles.normalFont,
partTypes: mentionPartTypes('commentPreview'),
onPress: (user: UserType) =>
@@ -88,7 +90,6 @@ const styles = StyleSheet.create({
borderRadius: 99,
},
normalFont: {
- // top: -5,
fontWeight: 'normal',
},
});
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index 378931d1..5192fdf0 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -5,12 +5,19 @@ import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
import Animated, {EasingNode} from 'react-native-reanimated';
import {useDispatch, useStore} from 'react-redux';
import {RootState} from '../../store/rootReducer';
-import {MomentPostType, MomentTagType, ScreenType, UserType} from '../../types';
+import {
+ MomentCommentPreviewType,
+ MomentPostType,
+ MomentTagType,
+ ScreenType,
+ UserType,
+} from '../../types';
import {
getTimePosted,
navigateToProfile,
normalize,
SCREEN_WIDTH,
+ getLoggedInUserAsProfilePreview,
} from '../../utils';
import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
import {AddComment} from '../comments';
@@ -37,6 +44,8 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
const [fadeValue, setFadeValue] = useState<Animated.Value<number>>(
new Animated.Value(0),
);
+ const [commentPreview, setCommentPreview] =
+ useState<MomentCommentPreviewType | null>(moment.comment_preview);
useEffect(() => {
setTags(momentTags);
@@ -91,10 +100,21 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
onPress: (user: UserType) =>
navigateToProfile(state, dispatch, navigation, screenType, user),
})}
- <MomentCommentPreview moment={moment} screenType={screenType} />
+ <MomentCommentPreview
+ momentId={moment.moment_id}
+ commentsCount={moment.comments_count}
+ commentPreview={commentPreview}
+ screenType={screenType}
+ />
<AddComment
placeholderText={'Add a comment here!'}
momentId={moment.moment_id}
+ callback={(message) =>
+ setCommentPreview({
+ commenter: getLoggedInUserAsProfilePreview(state),
+ comment: message,
+ })
+ }
theme={'dark'}
/>
<Text style={styles.text}>{getTimePosted(moment.date_created)}</Text>