Add util function, Add logic for updating comment preview

5 files changed, 64 insertions, 19 deletions

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 12fd7e4d..18b9c24e 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -24,12 +24,14 @@ import {MentionInputControlled} from './MentionInputControlled';
 export interface AddCommentProps {
   momentId: string;
   placeholderText: string;
+  callback?: (message: string) => void;
   theme?: 'dark' | 'white';
 }
 
 const AddComment: React.FC<AddCommentProps> = ({
   momentId,
   placeholderText,
+  callback = (msg) => null,
   theme = 'white',
 }) => {
   const {setShouldUpdateAllComments = () => null, commentTapped} =
@@ -55,13 +57,15 @@ const AddComment: React.FC<AddCommentProps> = ({
     if (trimmed === '') {
       return;
     }
+    const message = inReplyToMention + trimmed;
     const postedComment = await postComment(
-      inReplyToMention + trimmed,
+      message,
       objectId,
       isReplyingToComment || isReplyingToReply,
     );
 
     if (postedComment) {
+      callback(message);
       setComment('');
       setInReplyToMention('');
 
diff --git a/src/components/moments/MomentCommentPreview.tsx b/src/components/moments/MomentCommentPreview.tsx
index 94fcb008..092f8936 100644
--- a/src/components/moments/MomentCommentPreview.tsx
+++ b/src/components/moments/MomentCommentPreview.tsx
@@ -3,50 +3,52 @@ import React from 'react';
 import {Image, StyleSheet, Text, View} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import {useDispatch, useStore} from 'react-redux';
-import {MomentPostType, ScreenType, UserType} from '../../types';
+import {MomentCommentPreviewType, ScreenType, UserType} from '../../types';
 import {navigateToProfile, normalize} from '../../utils';
 import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
 
 interface MomentCommentPreviewProps {
-  moment: MomentPostType;
+  momentId: string;
+  commentsCount: number;
+  commentPreview: MomentCommentPreviewType | null;
   screenType: ScreenType;
 }
 
 const MomentCommentPreview: React.FC<MomentCommentPreviewProps> = ({
-  moment,
+  momentId,
+  commentsCount,
+  commentPreview,
   screenType,
 }) => {
   const navigation = useNavigation();
   const state = useStore().getState();
   const commentCountText =
-    moment.comments_count === 0
-      ? 'No Comments'
-      : moment.comments_count + ' comments';
+    commentsCount === 0 ? 'No Comments' : commentsCount + ' comments';
 
   return (
     <TouchableOpacity
       style={styles.commentsPreviewContainer}
       onPress={() =>
         navigation.push('MomentCommentsScreen', {
-          moment_id: moment.moment_id,
+          moment_id: momentId,
           screenType,
         })
       }>
       <Text style={styles.whiteBold}>{commentCountText}</Text>
-      {moment.comment_preview !== null && (
+      {commentPreview !== null && (
         <View style={styles.previewContainer}>
           <Image
             source={{
-              uri: moment.comment_preview.commenter.thumbnail_url,
+              uri: commentPreview.commenter.thumbnail_url,
             }}
             style={styles.avatar}
           />
           <Text style={styles.whiteBold} numberOfLines={1}>
             <Text> </Text>
-            <Text>{moment.comment_preview.commenter.username}</Text>
+            <Text>{commentPreview.commenter.username}</Text>
             <Text> </Text>
             {renderTextWithMentions({
-              value: moment.comment_preview.comment,
+              value: commentPreview.comment,
               styles: styles.normalFont,
               partTypes: mentionPartTypes('commentPreview'),
               onPress: (user: UserType) =>
@@ -88,7 +90,6 @@ const styles = StyleSheet.create({
     borderRadius: 99,
   },
   normalFont: {
-    // top: -5,
     fontWeight: 'normal',
   },
 });
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index 378931d1..5192fdf0 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -5,12 +5,19 @@ import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
 import Animated, {EasingNode} from 'react-native-reanimated';
 import {useDispatch, useStore} from 'react-redux';
 import {RootState} from '../../store/rootReducer';
-import {MomentPostType, MomentTagType, ScreenType, UserType} from '../../types';
+import {
+  MomentCommentPreviewType,
+  MomentPostType,
+  MomentTagType,
+  ScreenType,
+  UserType,
+} from '../../types';
 import {
   getTimePosted,
   navigateToProfile,
   normalize,
   SCREEN_WIDTH,
+  getLoggedInUserAsProfilePreview,
 } from '../../utils';
 import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
 import {AddComment} from '../comments';
@@ -37,6 +44,8 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
   const [fadeValue, setFadeValue] = useState<Animated.Value<number>>(
     new Animated.Value(0),
   );
+  const [commentPreview, setCommentPreview] =
+    useState<MomentCommentPreviewType | null>(moment.comment_preview);
 
   useEffect(() => {
     setTags(momentTags);
@@ -91,10 +100,21 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
           onPress: (user: UserType) =>
             navigateToProfile(state, dispatch, navigation, screenType, user),
         })}
-      <MomentCommentPreview moment={moment} screenType={screenType} />
+      <MomentCommentPreview
+        momentId={moment.moment_id}
+        commentsCount={moment.comments_count}
+        commentPreview={commentPreview}
+        screenType={screenType}
+      />
       <AddComment
         placeholderText={'Add a comment here!'}
         momentId={moment.moment_id}
+        callback={(message) =>
+          setCommentPreview({
+            commenter: getLoggedInUserAsProfilePreview(state),
+            comment: message,
+          })
+        }
         theme={'dark'}
       />
       <Text style={styles.text}>{getTimePosted(moment.date_created)}</Text>
diff --git a/src/types/types.ts b/src/types/types.ts
index 1bdade5c..3ac7ec2f 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -121,10 +121,12 @@ export interface MomentType {
 
 export interface MomentPostType extends MomentType {
   comments_count: number;
-  comment_preview: {
-    commenter: ProfilePreviewType;
-    comment: string;
-  };
+  comment_preview: MomentCommentPreviewType;
+}
+
+export interface MomentCommentPreviewType {
+  commenter: ProfilePreviewType;
+  comment: string;
 }
 
 export interface MomentTagType {
diff --git a/src/utils/users.ts b/src/utils/users.ts
index 64ad10e9..c1c3b8bc 100644
--- a/src/utils/users.ts
+++ b/src/utils/users.ts
@@ -306,3 +306,21 @@ export const patchProfile = async (
       return false;
     });
 };
+
+/**
+ * Returns the logged-in user's info in ProfilePreviewType from redux store.
+ * @param state the current state of the redux store
+ * @returns logged-in user in ProfilePreviewType
+ */
+export const getLoggedInUserAsProfilePreview: (
+  state: RootState,
+) => ProfilePreviewType = (state) => {
+  const nameSplit = state.user.profile.name.split(' ');
+  return {
+    id: state.user.user.userId,
+    username: state.user.user.username,
+    first_name: nameSplit[0],
+    last_name: nameSplit[1],
+    thumbnail_url: state.user.avatar ?? '', // in full res
+  };
+};