Merge pull request #401 from IvanIFChen/tma296-add-mentions

[TMA-296] Add mentions

1 files changed, 51 insertions, 36 deletions

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 2a8c773e..dd016109 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -1,45 +1,50 @@
-import React, {useEffect, useRef} from 'react';
+import React, {useContext, useEffect, useRef, useState} from 'react';
 import {
   Keyboard,
   KeyboardAvoidingView,
   Platform,
   StyleSheet,
+  TextInput,
   View,
 } from 'react-native';
-import {TextInput, TouchableOpacity} from 'react-native-gesture-handler';
+import {MentionInput} from 'react-native-controlled-mentions';
+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 {CommentThreadType, CommentType} from '../../types';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {mentionPartTypes} from '../../utils/comments';
 import {Avatar} from '../common';
 
-/**
- * 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.
- */
-
 export interface AddCommentProps {
-  setNewCommentsAvailable: Function;
-  objectId: string;
+  momentId: string;
   placeholderText: string;
-  isCommentInFocus: boolean;
 }
 
-const AddComment: React.FC<AddCommentProps> = ({
-  setNewCommentsAvailable,
-  objectId,
-  placeholderText,
-  isCommentInFocus,
-}) => {
-  const [comment, setComment] = React.useState('');
-  const [keyboardVisible, setKeyboardVisible] = React.useState(false);
-
+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 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();
@@ -47,18 +52,19 @@ const AddComment: React.FC<AddCommentProps> = ({
       return;
     }
     const postedComment = await postComment(
-      trimmed,
+      inReplyToMention + trimmed,
       objectId,
-      isCommentInFocus,
+      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 (isCommentInFocus) {
+      if (isReplyingToComment || isReplyingToReply) {
         dispatch(
           updateReplyPosted({
             comment_id: postedComment.comment_id,
@@ -66,7 +72,7 @@ const AddComment: React.FC<AddCommentProps> = ({
           }),
         );
       }
-      setNewCommentsAvailable(true);
+      setShouldUpdateAllComments(true);
     }
   };
 
@@ -82,14 +88,18 @@ const AddComment: React.FC<AddCommentProps> = ({
     return () => Keyboard.removeListener('keyboardWillHide', hideKeyboard);
   }, []);
 
-  const ref = useRef<TextInput>(null);
-
-  //If a comment is in Focus, bring the keyboard up so user is able to type in a reply
   useEffect(() => {
-    if (isCommentInFocus) {
+    if (isReplyingToComment || isReplyingToReply) {
+      // bring up keyboard
       ref.current?.focus();
     }
-  }, [isCommentInFocus]);
+    if (commentTapped && isReplyingToReply) {
+      const commenter = (commentTapped as CommentThreadType).commenter;
+      setInReplyToMention(`@[${commenter.username}](${commenter.id}) `);
+    } else {
+      setInReplyToMention('');
+    }
+  }, [isReplyingToComment, isReplyingToReply, commentTapped]);
 
   return (
     <KeyboardAvoidingView
@@ -102,14 +112,18 @@ const AddComment: React.FC<AddCommentProps> = ({
         ]}>
         <View style={styles.textContainer}>
           <Avatar style={styles.avatar} uri={avatar} />
-          <TextInput
-            style={styles.text}
+          <MentionInput
+            containerStyle={styles.text}
             placeholder={placeholderText}
-            placeholderTextColor="grey"
-            onChangeText={setComment}
-            value={comment}
-            multiline={true}
-            ref={ref}
+            value={inReplyToMention + comment}
+            onChange={(newText: string) => {
+              // skipping the `inReplyToMention` text
+              setComment(
+                newText.substring(inReplyToMention.length, newText.length),
+              );
+            }}
+            inputRef={ref}
+            partTypes={mentionPartTypes}
           />
           <View style={styles.submitButton}>
             <TouchableOpacity style={styles.submitButton} onPress={addComment}>
@@ -141,6 +155,7 @@ const styles = StyleSheet.create({
     flex: 1,
     padding: '1%',
     marginHorizontal: '1%',
+    maxHeight: 100,
   },
   avatar: {
     height: 35,