From 18770a692d03fb68267b51ef05cd4b58917b0e62 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Tue, 8 Jun 2021 17:43:04 -0400
Subject: Create MomentCommentPrevew component

---
 src/components/moments/MomentCommentPreview.tsx | 52 +++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 src/components/moments/MomentCommentPreview.tsx

(limited to 'src/components/moments/MomentCommentPreview.tsx')

diff --git a/src/components/moments/MomentCommentPreview.tsx b/src/components/moments/MomentCommentPreview.tsx
new file mode 100644
index 00000000..45bbbfad
--- /dev/null
+++ b/src/components/moments/MomentCommentPreview.tsx
@@ -0,0 +1,52 @@
+import {useNavigation} from '@react-navigation/native';
+import React from 'react';
+import {StyleSheet, Text} from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {MomentPostType, ScreenType} from '../../types';
+import {normalize} from '../../utils';
+
+interface MomentCommentPreviewProps {
+  moment: MomentPostType;
+  screenType: ScreenType;
+}
+
+const MomentCommentPreview: React.FC<MomentCommentPreviewProps> = ({
+  moment,
+  screenType,
+}) => {
+  const navigation = useNavigation();
+  const commentCountText =
+    moment.comments_count === 0
+      ? 'No Comments'
+      : moment.comments_count + ' comments';
+
+  return (
+    <TouchableOpacity
+      style={styles.commentsPreviewContainer}
+      onPress={() =>
+        navigation.push('MomentCommentsScreen', {
+          moment_id: moment.moment_id,
+          screenType,
+        })
+      }>
+      <Text style={styles.commentCount}>{commentCountText}</Text>
+      <Text>TODO: Add comment preview here</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  commentsPreviewContainer: {
+    flexDirection: 'column',
+    marginHorizontal: '5%',
+    marginBottom: '2%',
+    borderWidth: 1,
+  },
+  commentCount: {
+    fontWeight: '700',
+    color: 'white',
+    fontSize: normalize(12),
+  },
+});
+
+export default MomentCommentPreview;
-- 
cgit v1.2.3-70-g09d2


From f0b18db9dc3d0321fb01677e98f3968b21af36fa Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Tue, 8 Jun 2021 18:19:19 -0400
Subject: Added comment preview, WIP on mention part types

---
 src/components/moments/MomentCommentPreview.tsx | 66 ++++++++++++++++++++++---
 src/components/moments/MomentPostContent.tsx    |  6 +--
 src/utils/comments.tsx                          | 41 ++++++++++-----
 3 files changed, 88 insertions(+), 25 deletions(-)

(limited to 'src/components/moments/MomentCommentPreview.tsx')

diff --git a/src/components/moments/MomentCommentPreview.tsx b/src/components/moments/MomentCommentPreview.tsx
index 45bbbfad..03f30dda 100644
--- a/src/components/moments/MomentCommentPreview.tsx
+++ b/src/components/moments/MomentCommentPreview.tsx
@@ -1,9 +1,11 @@
 import {useNavigation} from '@react-navigation/native';
 import React from 'react';
-import {StyleSheet, Text} from 'react-native';
+import {Image, StyleSheet, Text, View} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
-import {MomentPostType, ScreenType} from '../../types';
-import {normalize} from '../../utils';
+import {useDispatch, useStore} from 'react-redux';
+import {MomentPostType, ScreenType, UserType} from '../../types';
+import {navigateToProfile, normalize} from '../../utils';
+import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
 
 interface MomentCommentPreviewProps {
   moment: MomentPostType;
@@ -15,11 +17,18 @@ const MomentCommentPreview: React.FC<MomentCommentPreviewProps> = ({
   screenType,
 }) => {
   const navigation = useNavigation();
+  const state = useStore().getState();
   const commentCountText =
     moment.comments_count === 0
       ? 'No Comments'
       : moment.comments_count + ' comments';
 
+  /**
+   * TODO:
+   * - figure out why mention PartTypes have type warnings
+   * - fix padding for all types (double check on iPhone 8)
+   */
+
   return (
     <TouchableOpacity
       style={styles.commentsPreviewContainer}
@@ -29,23 +38,64 @@ const MomentCommentPreview: React.FC<MomentCommentPreviewProps> = ({
           screenType,
         })
       }>
-      <Text style={styles.commentCount}>{commentCountText}</Text>
-      <Text>TODO: Add comment preview here</Text>
+      <Text style={styles.whiteBold}>{commentCountText}</Text>
+      {moment.comment_preview !== null && (
+        <View style={styles.previewContainer}>
+          <Image
+            source={{
+              uri: moment.comment_preview.commenter.thumbnail_url,
+            }}
+            style={styles.avatar}
+          />
+          <Text style={styles.whiteBold} numberOfLines={1}>
+            <Text> </Text>
+            <Text>{moment.comment_preview.commenter.username}</Text>
+            <Text> </Text>
+            {renderTextWithMentions({
+              value: moment.comment_preview.comment,
+              styles: styles.normalFont,
+              partTypes: mentionPartTypes('commentPreview'),
+              onPress: (user: UserType) =>
+                navigateToProfile(
+                  state,
+                  useDispatch,
+                  navigation,
+                  screenType,
+                  user,
+                ),
+            })}
+          </Text>
+        </View>
+      )}
     </TouchableOpacity>
   );
 };
 
 const styles = StyleSheet.create({
   commentsPreviewContainer: {
+    height: normalize(50),
     flexDirection: 'column',
+    justifyContent: 'space-around',
     marginHorizontal: '5%',
     marginBottom: '2%',
-    borderWidth: 1,
   },
-  commentCount: {
+  whiteBold: {
     fontWeight: '700',
     color: 'white',
-    fontSize: normalize(12),
+    fontSize: normalize(13),
+  },
+  previewContainer: {
+    flexDirection: 'row',
+    width: '95%',
+  },
+  avatar: {
+    height: normalize(16),
+    width: normalize(16),
+    borderRadius: 99,
+  },
+  normalFont: {
+    // top: -5,
+    fontWeight: 'normal',
   },
 });
 
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index 01863660..5fd683a4 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -120,16 +120,14 @@ const styles = StyleSheet.create({
   },
   captionText: {
     position: 'relative',
-    paddingTop: '1%',
-    marginLeft: '5%',
-    marginRight: '5%',
+    marginHorizontal: '5%',
     color: '#ffffff',
     fontWeight: '500',
     fontSize: normalize(13),
     lineHeight: normalize(15.51),
     letterSpacing: normalize(0.6),
-    borderWidth: 1,
     marginBottom: normalize(18),
+    borderWidth: 1,
   },
   tapTag: {
     position: 'absolute',
diff --git a/src/utils/comments.tsx b/src/utils/comments.tsx
index 5c17cefe..e700da88 100644
--- a/src/utils/comments.tsx
+++ b/src/utils/comments.tsx
@@ -79,26 +79,41 @@ export const renderTextWithMentions: React.FC<RenderProps> = ({
   );
 };
 
-export const mentionPartTypes: (style: 'blue' | 'white') => PartType[] = (
-  style,
+const textStyle: (theme: 'blue' | 'white' | 'commentPreview') => PartType = (
+  theme,
 ) => {
+  switch (theme) {
+    case 'blue':
+      return {
+        color: TAGG_LIGHT_BLUE,
+        top: normalize(3),
+      };
+    case 'commentPreview':
+      return {
+        color: 'white',
+        fontWeight: '800',
+        top: normalize(3),
+      };
+    case 'white':
+    default:
+      return {
+        color: 'white',
+        fontWeight: '800',
+        top: normalize(7.5),
+      };
+  }
+};
+
+export const mentionPartTypes: (
+  theme: 'blue' | 'white' | 'commentPreview',
+) => PartType[] = (theme) => {
   return [
     {
       trigger: '@',
       renderSuggestions: (props) => <TaggTypeahead {...props} />,
       allowedSpacesCount: 0,
       isInsertSpaceAfterMention: true,
-      textStyle:
-        style === 'blue'
-          ? {
-              color: TAGG_LIGHT_BLUE,
-              top: normalize(3),
-            }
-          : {
-              color: 'white',
-              fontWeight: '800',
-              top: normalize(7.5),
-            },
+      textStyle: textStyle(theme),
     },
   ];
 };
-- 
cgit v1.2.3-70-g09d2


From 54d5a79e3359a826c1fafd8322ee835b79438fd9 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 10 Jun 2021 16:33:53 -0400
Subject: Fix type warning

---
 src/components/moments/MomentCommentPreview.tsx |  6 ----
 src/components/moments/MomentPostContent.tsx    |  2 +-
 src/utils/comments.tsx                          | 38 ++++++++++++-------------
 3 files changed, 20 insertions(+), 26 deletions(-)

(limited to 'src/components/moments/MomentCommentPreview.tsx')

diff --git a/src/components/moments/MomentCommentPreview.tsx b/src/components/moments/MomentCommentPreview.tsx
index 03f30dda..94fcb008 100644
--- a/src/components/moments/MomentCommentPreview.tsx
+++ b/src/components/moments/MomentCommentPreview.tsx
@@ -23,12 +23,6 @@ const MomentCommentPreview: React.FC<MomentCommentPreviewProps> = ({
       ? 'No Comments'
       : moment.comments_count + ' comments';
 
-  /**
-   * TODO:
-   * - figure out why mention PartTypes have type warnings
-   * - fix padding for all types (double check on iPhone 8)
-   */
-
   return (
     <TouchableOpacity
       style={styles.commentsPreviewContainer}
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index 5fd683a4..378931d1 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -87,7 +87,7 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
         renderTextWithMentions({
           value: moment.caption,
           styles: styles.captionText,
-          partTypes: mentionPartTypes('white'),
+          partTypes: mentionPartTypes('momentCaption'),
           onPress: (user: UserType) =>
             navigateToProfile(state, dispatch, navigation, screenType, user),
         })}
diff --git a/src/utils/comments.tsx b/src/utils/comments.tsx
index e700da88..161ede0b 100644
--- a/src/utils/comments.tsx
+++ b/src/utils/comments.tsx
@@ -79,9 +79,23 @@ export const renderTextWithMentions: React.FC<RenderProps> = ({
   );
 };
 
-const textStyle: (theme: 'blue' | 'white' | 'commentPreview') => PartType = (
-  theme,
-) => {
+export const mentionPartTypes: (
+  theme: 'blue' | 'momentCaption' | 'commentPreview',
+) => PartType[] = (theme) => {
+  return [
+    {
+      trigger: '@',
+      renderSuggestions: (props) => <TaggTypeahead {...props} />,
+      allowedSpacesCount: 0,
+      isInsertSpaceAfterMention: true,
+      textStyle: _textStyle(theme),
+    },
+  ];
+};
+
+const _textStyle: (
+  theme: 'blue' | 'momentCaption' | 'commentPreview',
+) => StyleProp<TextStyle> = (theme) => {
   switch (theme) {
     case 'blue':
       return {
@@ -94,26 +108,12 @@ const textStyle: (theme: 'blue' | 'white' | 'commentPreview') => PartType = (
         fontWeight: '800',
         top: normalize(3),
       };
-    case 'white':
+    case 'momentCaption':
     default:
       return {
         color: 'white',
         fontWeight: '800',
-        top: normalize(7.5),
+        top: normalize(4.5),
       };
   }
 };
-
-export const mentionPartTypes: (
-  theme: 'blue' | 'white' | 'commentPreview',
-) => PartType[] = (theme) => {
-  return [
-    {
-      trigger: '@',
-      renderSuggestions: (props) => <TaggTypeahead {...props} />,
-      allowedSpacesCount: 0,
-      isInsertSpaceAfterMention: true,
-      textStyle: textStyle(theme),
-    },
-  ];
-};
-- 
cgit v1.2.3-70-g09d2


From 770dcf385fa99fbb93c4ae89a51b09fd96d23bf9 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 10 Jun 2021 17:23:47 -0400
Subject: Add util function, Add logic for updating comment preview

---
 src/components/comments/AddComment.tsx          |  6 +++++-
 src/components/moments/MomentCommentPreview.tsx | 25 +++++++++++++------------
 src/components/moments/MomentPostContent.tsx    | 24 ++++++++++++++++++++++--
 src/types/types.ts                              | 10 ++++++----
 src/utils/users.ts                              | 18 ++++++++++++++++++
 5 files changed, 64 insertions(+), 19 deletions(-)

(limited to 'src/components/moments/MomentCommentPreview.tsx')

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
+  };
+};
-- 
cgit v1.2.3-70-g09d2


From 22a58b2ad08297b6d5dd3dd241ae23a756ae7552 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 11 Jun 2021 17:44:24 -0400
Subject: Adjust mention text padding

---
 src/components/moments/MomentCommentPreview.tsx |  2 +-
 src/components/moments/MomentPostContent.tsx    |  2 +-
 src/utils/comments.tsx                          | 22 ++++++++--------------
 3 files changed, 10 insertions(+), 16 deletions(-)

(limited to 'src/components/moments/MomentCommentPreview.tsx')

diff --git a/src/components/moments/MomentCommentPreview.tsx b/src/components/moments/MomentCommentPreview.tsx
index 092f8936..e53ed258 100644
--- a/src/components/moments/MomentCommentPreview.tsx
+++ b/src/components/moments/MomentCommentPreview.tsx
@@ -50,7 +50,7 @@ const MomentCommentPreview: React.FC<MomentCommentPreviewProps> = ({
             {renderTextWithMentions({
               value: commentPreview.comment,
               styles: styles.normalFont,
-              partTypes: mentionPartTypes('commentPreview'),
+              partTypes: mentionPartTypes('white'),
               onPress: (user: UserType) =>
                 navigateToProfile(
                   state,
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index e43cba4f..aca2999c 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -112,7 +112,7 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
             renderTextWithMentions({
               value: moment.caption,
               styles: styles.captionText,
-              partTypes: mentionPartTypes('momentCaption'),
+              partTypes: mentionPartTypes('white'),
               onPress: (user: UserType) =>
                 navigateToProfile(
                   state,
diff --git a/src/utils/comments.tsx b/src/utils/comments.tsx
index 161ede0b..910b44e7 100644
--- a/src/utils/comments.tsx
+++ b/src/utils/comments.tsx
@@ -79,9 +79,9 @@ export const renderTextWithMentions: React.FC<RenderProps> = ({
   );
 };
 
-export const mentionPartTypes: (
-  theme: 'blue' | 'momentCaption' | 'commentPreview',
-) => PartType[] = (theme) => {
+export const mentionPartTypes: (theme: 'blue' | 'white') => PartType[] = (
+  theme,
+) => {
   return [
     {
       trigger: '@',
@@ -93,27 +93,21 @@ export const mentionPartTypes: (
   ];
 };
 
-const _textStyle: (
-  theme: 'blue' | 'momentCaption' | 'commentPreview',
-) => StyleProp<TextStyle> = (theme) => {
+const _textStyle: (theme: 'blue' | 'white') => StyleProp<TextStyle> = (
+  theme,
+) => {
   switch (theme) {
     case 'blue':
       return {
         color: TAGG_LIGHT_BLUE,
         top: normalize(3),
       };
-    case 'commentPreview':
-      return {
-        color: 'white',
-        fontWeight: '800',
-        top: normalize(3),
-      };
-    case 'momentCaption':
+    case 'white':
     default:
       return {
         color: 'white',
         fontWeight: '800',
-        top: normalize(4.5),
+        top: normalize(3),
       };
   }
 };
-- 
cgit v1.2.3-70-g09d2

