diff options
| -rw-r--r-- | src/components/comments/AddComment.tsx | 35 | ||||
| -rw-r--r-- | src/screens/profile/MomentCommentsScreen.tsx | 7 |
2 files changed, 27 insertions, 15 deletions
diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx index cf5d19ee..caba68d5 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -15,6 +15,7 @@ import {TAGG_LIGHT_BLUE} from '../../constants'; import {postComment} from '../../services'; import {updateReplyPosted} from '../../store/actions'; import {RootState} from '../../store/rootreducer'; +import {CommentType} from '../../types'; import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; import {Avatar} from '../common'; import {mentionPartTypes} from '../../utils/comments'; @@ -27,33 +28,36 @@ import {mentionPartTypes} from '../../utils/comments'; export interface AddCommentProps { setNewCommentsAvailable: Function; - objectId: string; + // 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; placeholderText: string; - isCommentInFocus: boolean; } const AddComment: React.FC<AddCommentProps> = ({ setNewCommentsAvailable, - objectId, + commentInReplyTo, + momentId, placeholderText, - isCommentInFocus, + isReplying, }) => { 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 addComment = async () => { const trimmed = comment.trim(); if (trimmed === '') { return; } - const postedComment = await postComment( - trimmed, - objectId, - isCommentInFocus, - ); + const postedComment = await postComment(trimmed, objectId, isReplying); if (postedComment) { setComment(''); @@ -61,7 +65,7 @@ const AddComment: React.FC<AddCommentProps> = ({ //Set new reply posted object //This helps us show the latest reply on top //Data set is kind of stale but it works - if (isCommentInFocus) { + if (isReplying) { dispatch( updateReplyPosted({ comment_id: postedComment.comment_id, @@ -74,6 +78,13 @@ const AddComment: React.FC<AddCommentProps> = ({ }; useEffect(() => { + if (isReplying && commentInReplyTo) { + const commenter = commentInReplyTo.commenter; + setComment(`@[${commenter.username}](${commenter.id}) `); + } + }, [isReplying, commentInReplyTo]); + + useEffect(() => { const showKeyboard = () => setKeyboardVisible(true); Keyboard.addListener('keyboardWillShow', showKeyboard); return () => Keyboard.removeListener('keyboardWillShow', showKeyboard); @@ -87,10 +98,10 @@ const AddComment: React.FC<AddCommentProps> = ({ //If a comment is in Focus, bring the keyboard up so user is able to type in a reply useEffect(() => { - if (isCommentInFocus) { + if (isReplying) { ref.current?.focus(); } - }, [isCommentInFocus]); + }, [isReplying]); return ( <KeyboardAvoidingView diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx index effbbb63..73266a39 100644 --- a/src/screens/profile/MomentCommentsScreen.tsx +++ b/src/screens/profile/MomentCommentsScreen.tsx @@ -66,10 +66,11 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => { : ADD_COMMENT_TEXT() } setNewCommentsAvailable={setNewCommentsAvailable} - objectId={ - commentObjectInFocus ? commentObjectInFocus.comment_id : moment_id + commentInReplyTo={ + commentObjectInFocus ? commentObjectInFocus : undefined } - isCommentInFocus={commentObjectInFocus ? true : false} + momentId={commentObjectInFocus ? undefined : moment_id} + isReplying={commentObjectInFocus ? true : false} /> </View> </SafeAreaView> |