diff options
Diffstat (limited to 'src/components/comments/AddComment.tsx')
-rw-r--r-- | src/components/comments/AddComment.tsx | 62 |
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 |