2 files changed, 64 insertions, 77 deletions

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 156ee41c..041f0da2 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -11,9 +11,10 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
+import {MentionInput} from 'react-native-controlled-mentions';
 import {Button} from 'react-native-elements';
 import {useDispatch, useSelector} from 'react-redux';
-import {SearchBackground, TaggBigInput} from '../../components';
+import {SearchBackground} from '../../components';
 import {CaptionScreenHeader} from '../../components/';
 import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator';
 import {TAGG_LIGHT_BLUE_2} from '../../constants';
@@ -26,6 +27,7 @@ import {
 } from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
+import {mentionPartTypes} from '../../utils/comments';
 
 /**
  * Upload Screen to allow users to upload posts to Tagg
@@ -49,10 +51,6 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
   const [caption, setCaption] = useState('');
   const [loading, setLoading] = useState(false);
 
-  const handleCaptionUpdate = (newCaption: string) => {
-    setCaption(newCaption);
-  };
-
   const navigateToProfile = () => {
     //Since the logged In User is navigating to own profile, useXId is not required
     navigation.navigate('Profile', {
@@ -112,12 +110,13 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               source={{uri: image.path}}
               resizeMode={'cover'}
             />
-            <TaggBigInput
-              style={styles.text}
-              multiline
+            <MentionInput
+              containerStyle={styles.text}
               placeholder="Write something....."
               placeholderTextColor="gray"
-              onChangeText={handleCaptionUpdate}
+              value={caption}
+              onChange={setCaption}
+              partTypes={mentionPartTypes}
             />
           </View>
         </KeyboardAvoidingView>
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index b0208f6f..1a913e58 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -7,13 +7,8 @@ import {AddComment} from '../../components/';
 import CommentsContainer from '../../components/comments/CommentsContainer';
 import {ADD_COMMENT_TEXT} from '../../constants/strings';
 import {headerBarOptions, MainStackParams} from '../../routes/main';
-import {CommentType} from '../../types';
-import {
-  HeaderHeight,
-  normalize,
-  SCREEN_HEIGHT,
-  SCREEN_WIDTH,
-} from '../../utils';
+import {CommentThreadType, CommentType} from '../../types';
+import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 /**
  * Comments Screen for an image uploaded
@@ -30,18 +25,35 @@ interface MomentCommentsScreenProps {
   route: MomentCommentsScreenRouteProps;
 }
 
+type MomentCommentContextType = {
+  commentTapped: CommentType | CommentThreadType | undefined;
+  setCommentTapped: (
+    comment: CommentType | CommentThreadType | undefined,
+  ) => void;
+  shouldUpdateAllComments: boolean;
+  setShouldUpdateAllComments: (available: boolean) => void;
+  commentsLength: number;
+  setCommentsLength: (length: number) => void;
+};
+
+export const CommentContext = React.createContext(
+  {} as MomentCommentContextType,
+);
+
 const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
   const navigation = useNavigation();
   const {moment_id, screenType, comment_id} = route.params;
 
   //Receives comment length from child CommentsContainer
   const [commentsLength, setCommentsLength] = useState<number>(0);
-  const [newCommentsAvailable, setNewCommentsAvailable] = React.useState(true);
+  const [shouldUpdateAllComments, setShouldUpdateAllComments] = React.useState(
+    true,
+  );
 
   //Keeps track of the current comments object in focus so that the application knows which comment to post a reply to
-  const [commentObjectInFocus, setCommentObjectInFocus] = useState<
-    CommentType | undefined
-  >(undefined);
+  const [commentTapped, setCommentTapped] = useState<
+    CommentType | CommentThreadType | undefined
+  >();
 
   useEffect(() => {
     navigation.setOptions({
@@ -50,36 +62,39 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
   }, [commentsLength, navigation]);
 
   return (
-    <View style={styles.background}>
-      <SafeAreaView>
-        <View style={styles.body}>
-          <CommentsContainer
-            objectId={moment_id}
-            commentId={comment_id}
-            screenType={screenType}
-            setCommentsLength={setCommentsLength}
-            newCommentsAvailable={newCommentsAvailable}
-            setNewCommentsAvailable={setNewCommentsAvailable}
-            setCommentObjectInFocus={setCommentObjectInFocus}
-            commentObjectInFocus={commentObjectInFocus}
-            typeOfComment={'Comment'}
-          />
-          <AddComment
-            placeholderText={
-              commentObjectInFocus
-                ? ADD_COMMENT_TEXT(commentObjectInFocus.commenter.username)
-                : ADD_COMMENT_TEXT()
-            }
-            setNewCommentsAvailable={setNewCommentsAvailable}
-            objectId={
-              commentObjectInFocus ? commentObjectInFocus.comment_id : moment_id
-            }
-            isCommentInFocus={commentObjectInFocus ? true : false}
-          />
-        </View>
-      </SafeAreaView>
-      <TabsGradient />
-    </View>
+    <CommentContext.Provider
+      value={{
+        commentTapped,
+        setCommentTapped,
+        shouldUpdateAllComments,
+        setShouldUpdateAllComments,
+        commentsLength,
+        setCommentsLength,
+      }}>
+      <View style={styles.background}>
+        <SafeAreaView>
+          <View style={styles.body}>
+            <CommentsContainer
+              objectId={moment_id}
+              commentId={comment_id}
+              screenType={screenType}
+              shouldUpdate={shouldUpdateAllComments}
+              setShouldUpdate={setShouldUpdateAllComments}
+              isThread={false}
+            />
+            <AddComment
+              placeholderText={
+                !commentTapped
+                  ? ADD_COMMENT_TEXT()
+                  : ADD_COMMENT_TEXT(commentTapped.commenter.username)
+              }
+              momentId={moment_id}
+            />
+          </View>
+        </SafeAreaView>
+        <TabsGradient />
+      </View>
+    </CommentContext.Provider>
   );
 };
 
@@ -88,39 +103,12 @@ const styles = StyleSheet.create({
     backgroundColor: 'white',
     height: '100%',
   },
-  header: {justifyContent: 'center', padding: '3%'},
-  headerText: {
-    position: 'absolute',
-    alignSelf: 'center',
-    fontSize: normalize(18),
-    fontWeight: '700',
-    lineHeight: normalize(21.48),
-    letterSpacing: normalize(1.3),
-  },
-  headerButton: {
-    width: '5%',
-    aspectRatio: 1,
-    padding: 0,
-    marginLeft: '5%',
-    alignSelf: 'flex-start',
-  },
-  headerButtonText: {
-    color: 'black',
-    fontSize: 18,
-    fontWeight: '400',
-  },
   body: {
     marginTop: HeaderHeight,
     width: SCREEN_WIDTH * 0.9,
     height: SCREEN_HEIGHT * 0.8,
     paddingTop: '3%',
   },
-  scrollView: {
-    paddingHorizontal: 20,
-  },
-  scrollViewContent: {
-    justifyContent: 'center',
-  },
 });
 
 export default MomentCommentsScreen;