aboutsummaryrefslogtreecommitdiff
path: root/src/components/comments/AddComment.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/comments/AddComment.tsx')
-rw-r--r--src/components/comments/AddComment.tsx62
1 files changed, 31 insertions, 31 deletions
diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index cce846e5..dd016109 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useContext, useEffect, useRef, useState} from 'react';
import {
Keyboard,
KeyboardAvoidingView,
@@ -12,61 +12,59 @@ import {TouchableOpacity} from 'react-native-gesture-handler';
import {useDispatch, useSelector} from 'react-redux';
import UpArrowIcon from '../../assets/icons/up_arrow.svg';
import {TAGG_LIGHT_BLUE} from '../../constants';
+import {CommentContext} from '../../screens/profile/MomentCommentsScreen';
import {postComment} from '../../services';
import {updateReplyPosted} from '../../store/actions';
import {RootState} from '../../store/rootreducer';
-import {CommentType} from '../../types';
+import {CommentThreadType, CommentType} from '../../types';
import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
-import {Avatar} from '../common';
import {mentionPartTypes} from '../../utils/comments';
-
-/**
- * This file provides the add comment view for a user.
- * Displays the logged in user's profile picture to the left and then provides space to add a comment.
- * Comment is posted when enter is pressed as requested by product team.
- */
+import {Avatar} from '../common';
export interface AddCommentProps {
- setNewCommentsAvailable: Function;
- // we either have a comment object if we're replying to a comment,
- // or a momentId if we're just commenting a moment.
- commentInReplyTo: CommentType | undefined;
- momentId: string | undefined;
- isReplying: boolean;
+ momentId: string;
placeholderText: string;
}
-const AddComment: React.FC<AddCommentProps> = ({
- setNewCommentsAvailable,
- commentInReplyTo,
- momentId,
- placeholderText,
- isReplying,
-}) => {
+const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
+ const {setShouldUpdateAllComments, commentTapped} = useContext(
+ CommentContext,
+ );
const [inReplyToMention, setInReplyToMention] = useState('');
const [comment, setComment] = useState('');
const [keyboardVisible, setKeyboardVisible] = useState(false);
const {avatar} = useSelector((state: RootState) => state.user);
const dispatch = useDispatch();
const ref = useRef<TextInput>(null);
- const objectId: string = isReplying
- ? commentInReplyTo!.comment_id
- : momentId!;
+ const isReplyingToComment =
+ commentTapped !== undefined && !('parent_comment' in commentTapped);
+ const isReplyingToReply =
+ commentTapped !== undefined && 'parent_comment' in commentTapped;
+ const objectId: string = commentTapped
+ ? 'parent_comment' in commentTapped
+ ? (commentTapped as CommentThreadType).parent_comment.comment_id
+ : (commentTapped as CommentType).comment_id
+ : momentId;
const addComment = async () => {
const trimmed = comment.trim();
if (trimmed === '') {
return;
}
- const postedComment = await postComment(trimmed, objectId, isReplying);
+ const postedComment = await postComment(
+ inReplyToMention + trimmed,
+ objectId,
+ isReplyingToComment || isReplyingToReply,
+ );
if (postedComment) {
setComment('');
+ setInReplyToMention('');
//Set new reply posted object
//This helps us show the latest reply on top
//Data set is kind of stale but it works
- if (isReplying) {
+ if (isReplyingToComment || isReplyingToReply) {
dispatch(
updateReplyPosted({
comment_id: postedComment.comment_id,
@@ -74,7 +72,7 @@ const AddComment: React.FC<AddCommentProps> = ({
}),
);
}
- setNewCommentsAvailable(true);
+ setShouldUpdateAllComments(true);
}
};
@@ -91,15 +89,17 @@ const AddComment: React.FC<AddCommentProps> = ({
}, []);
useEffect(() => {
- if (isReplying && commentInReplyTo) {
+ if (isReplyingToComment || isReplyingToReply) {
// bring up keyboard
ref.current?.focus();
- const commenter = commentInReplyTo.commenter;
+ }
+ if (commentTapped && isReplyingToReply) {
+ const commenter = (commentTapped as CommentThreadType).commenter;
setInReplyToMention(`@[${commenter.username}](${commenter.id}) `);
} else {
setInReplyToMention('');
}
- }, [isReplying, commentInReplyTo]);
+ }, [isReplyingToComment, isReplyingToReply, commentTapped]);
return (
<KeyboardAvoidingView