GAL-4161 refactor how comments are rendered to solve wrapping (#1986)

* refactor how comments are rendered to solve wrapping

* update layout and refactor to Comments component

* clean

* usememo

apps/mobile/src/components/Feed/CommentsBottomSheet/CommentsBottomSheetLine.tsx

@@ -1,20 +1,18 @@
 import { useNavigation } from '@react-navigation/native';
-import { useCallback, useRef, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { useCallback } from 'react';
+import { View } from 'react-native';
 import { useFragment } from 'react-relay';
 import { graphql } from 'relay-runtime';
 
-import { WarningLinkBottomSheet } from '~/components/Feed/Posts/WarningLinkBottomSheet';
-import { GalleryBottomSheetModalType } from '~/components/GalleryBottomSheet/GalleryBottomSheetModal';
 import { GalleryTouchableOpacity } from '~/components/GalleryTouchableOpacity';
-import { Markdown } from '~/components/Markdown';
 import { ProfilePicture } from '~/components/ProfilePicture/ProfilePicture';
 import { Typography } from '~/components/Typography';
 import { CommentsBottomSheetLineFragment$key } from '~/generated/CommentsBottomSheetLineFragment.graphql';
 import { MainTabStackNavigatorProp } from '~/navigation/types';
-import { replaceUrlsWithMarkdownFormat } from '~/shared/utils/replaceUrlsWithMarkdownFormat';
 import { getTimeSince } from '~/shared/utils/time';
 
+import ProcessedCommentText from '../Socialize/ProcessedCommentText';
+
 type CommentLineProps = {
   commentRef: CommentsBottomSheetLineFragment$key;
 };
@@ -39,23 +37,17 @@ export function CommentsBottomSheetLine({ commentRef }: CommentLineProps) {
   const timeAgo = getTimeSince(comment.creationTime);
   const navigation = useNavigation<MainTabStackNavigatorProp>();
 
-  const [redirectUrl, setRedirectUrl] = useState('');
-  const captionWithMarkdownLinks = replaceUrlsWithMarkdownFormat(comment.comment ?? '');
-
-  const bottomSheetRef = useRef<GalleryBottomSheetModalType | null>(null);
-
-  const handleLinkPress = useCallback((url: string) => {
-    bottomSheetRef.current?.present();
-    setRedirectUrl(url);
-  }, []);
-
   const handleUserPress = useCallback(() => {
     const username = comment?.commenter?.username;
     if (username) {
       navigation.push('Profile', { username: username, hideBackButton: false });
     }
   }, [comment?.commenter?.username, navigation]);
 
+  if (!comment.comment) {
+    return null;
+  }
+
   return (
     <GalleryTouchableOpacity
       className="flex flex-row space-x-2 px-2"
@@ -80,18 +72,8 @@ export function CommentsBottomSheetLine({ commentRef }: CommentLineProps) {
             {timeAgo}
           </Typography>
         </View>
-        <View className="flex">
-          <Markdown onBypassLinkPress={handleLinkPress} style={markdownStyles}>
-            {captionWithMarkdownLinks}
-          </Markdown>
-          <WarningLinkBottomSheet redirectUrl={redirectUrl} ref={bottomSheetRef} />
-        </View>
+        <ProcessedCommentText comment={comment.comment} />
       </View>
     </GalleryTouchableOpacity>
   );
 }
-const markdownStyles = StyleSheet.create({
-  body: {
-    fontSize: 14,
-  },
-});

apps/mobile/src/components/Feed/Posts/FeedPostSocializeSection.tsx

@@ -4,15 +4,14 @@ import { graphql, useFragment } from 'react-relay';
 import { useTogglePostAdmire } from 'src/hooks/useTogglePostAdmire';
 
 import { GalleryBottomSheetModalType } from '~/components/GalleryBottomSheet/GalleryBottomSheetModal';
-import { GalleryTouchableOpacity } from '~/components/GalleryTouchableOpacity';
-import { Typography } from '~/components/Typography';
 import { FeedPostSocializeSectionFragment$key } from '~/generated/FeedPostSocializeSectionFragment.graphql';
 import { FeedPostSocializeSectionQueryFragment$key } from '~/generated/FeedPostSocializeSectionQueryFragment.graphql';
 
 import { CommentsBottomSheet } from '../CommentsBottomSheet/CommentsBottomSheet';
 import { AdmireButton } from '../Socialize/AdmireButton';
+import { Admires } from '../Socialize/Admires';
 import { CommentButton } from '../Socialize/CommentButton';
-import { Interactions } from '../Socialize/Interactions';
+import Comments from '../Socialize/Comments';
 
 type Props = {
   feedPostRef: FeedPostSocializeSectionFragment$key;
@@ -35,7 +34,7 @@ export function FeedPostSocializeSection({ feedPostRef, queryRef }: Props) {
           edges {
             node {
               dbid
-              ...InteractionsAdmiresFragment
+              ...AdmiresFragment
             }
           }
         }
@@ -48,7 +47,7 @@ export function FeedPostSocializeSection({ feedPostRef, queryRef }: Props) {
           }
           edges {
             node {
-              ...InteractionsCommentsFragment
+              ...CommentsFragment
             }
           }
         }
@@ -86,7 +85,6 @@ export function FeedPostSocializeSection({ feedPostRef, queryRef }: Props) {
   }, [post.comments?.edges]);
 
   const totalComments = post.comments?.pageInfo?.total ?? 0;
-  const isEmptyComments = totalComments === 0;
 
   const nonNullAdmires = useMemo(() => {
     const admires = [];
@@ -114,12 +112,10 @@ export function FeedPostSocializeSection({ feedPostRef, queryRef }: Props) {
       <View className="px-3 pb-8 pt-2">
         <View className="flex flex-row justify-between">
           <View className="flex-1 pr-4 pt-1">
-            <Interactions
+            <Admires
               type="Post"
               feedId={post.dbid}
-              commentRefs={nonNullComments}
               admireRefs={nonNullAdmires}
-              totalComments={totalComments}
               totalAdmires={totalAdmires}
               onAdmirePress={toggleAdmire}
               openCommentBottomSheet={handleOpenCommentBottomSheet}
@@ -131,20 +127,11 @@ export function FeedPostSocializeSection({ feedPostRef, queryRef }: Props) {
             <CommentButton openCommentBottomSheet={handleOpenCommentBottomSheet} />
           </View>
         </View>
-        {isEmptyComments && (
-          <GalleryTouchableOpacity
-            onPress={handleOpenCommentBottomSheet}
-            eventElementId={null}
-            eventName={null}
-          >
-            <Typography
-              font={{ family: 'ABCDiatype', weight: 'Regular' }}
-              className="text-sm text-shadow"
-            >
-              Add a comment
-            </Typography>
-          </GalleryTouchableOpacity>
-        )}
+        <Comments
+          commentRefs={nonNullComments}
+          totalComments={totalComments}
+          onCommentPress={handleOpenCommentBottomSheet}
+        />
       </View>
       <CommentsBottomSheet type="Post" feedId={post.dbid} bottomSheetRef={commentsBottomSheetRef} />
     </>

apps/mobile/src/components/Feed/Socialize/AdmireButton.tsx

@@ -15,7 +15,7 @@ export function AdmireButton({ isAdmired, onPress, style }: Props) {
   return (
     <GalleryTouchableOpacity
       onPress={onPress}
-      className="flex justify-center align-center w-8 h-8 pt-0.5"
+      className="flex w-8 h-8 pt-0.5"
       style={style}
       eventElementId="Admire Button"
       eventName="Admire Button Clicked"

apps/mobile/src/components/Feed/Socialize/Interactions.tsx → apps/mobile/src/components/Feed/Socialize/Admires.tsx

@@ -6,51 +6,23 @@ import { AdmireBottomSheet } from '~/components/Feed/AdmireBottomSheet/AdmireBot
 import { AdmireLine } from '~/components/Feed/Socialize/AdmireLine';
 import { GalleryBottomSheetModalType } from '~/components/GalleryBottomSheet/GalleryBottomSheetModal';
 import { ProfilePictureBubblesWithCount } from '~/components/ProfileView/ProfileViewSharedInfo/ProfileViewSharedFollowers';
-import { InteractionsAdmiresFragment$key } from '~/generated/InteractionsAdmiresFragment.graphql';
-import { InteractionsCommentsFragment$key } from '~/generated/InteractionsCommentsFragment.graphql';
+import { AdmiresFragment$key } from '~/generated/AdmiresFragment.graphql';
 
 import { FeedItemTypes } from '../createVirtualizedFeedEventItems';
-import { CommentLine } from './CommentLine';
-import { RemainingCommentCount } from './RemainingCommentCount';
-
-const PREVIEW_COMMENT_COUNT = 1;
 
 type Props = {
   type: FeedItemTypes;
   feedId: string;
-  admireRefs: InteractionsAdmiresFragment$key;
-  commentRefs: InteractionsCommentsFragment$key;
+  admireRefs: AdmiresFragment$key;
   totalAdmires: number;
-  totalComments: number;
-
   onAdmirePress: () => void;
   openCommentBottomSheet: () => void;
 };
 
-export function Interactions({
-  type,
-  feedId,
-  admireRefs,
-  commentRefs,
-  totalAdmires,
-  totalComments,
-  onAdmirePress,
-  openCommentBottomSheet,
-}: Props) {
-  const comments = useFragment(
-    graphql`
-      fragment InteractionsCommentsFragment on Comment @relay(plural: true) {
-        dbid
-        ...CommentLineFragment
-      }
-    `,
-    commentRefs
-  );
-
+export function Admires({ type, feedId, admireRefs, totalAdmires, onAdmirePress }: Props) {
   const admires = useFragment(
     graphql`
-      fragment InteractionsAdmiresFragment on Admire @relay(plural: true) {
-        dbid
+      fragment AdmiresFragment on Admire @relay(plural: true) {
         admirer {
           ...AdmireLineFragment
           ...ProfileViewSharedFollowersBubblesFragment
@@ -74,8 +46,6 @@ export function Interactions({
     return users;
   }, [admires]);
 
-  const previewComments = comments.slice(-PREVIEW_COMMENT_COUNT);
-
   const admiresBottomSheetRef = useRef<GalleryBottomSheetModalType | null>(null);
 
   return (
@@ -99,22 +69,6 @@ export function Interactions({
         />
       </View>
 
-      <View className="flex flex-col space-y-1">
-        {previewComments.map((comment) => {
-          return (
-            <CommentLine
-              key={comment.dbid}
-              commentRef={comment}
-              onCommentPress={openCommentBottomSheet}
-            />
-          );
-        })}
-
-        {totalComments > 1 && (
-          <RemainingCommentCount totalCount={totalComments} onPress={openCommentBottomSheet} />
-        )}
-      </View>
-
       <AdmireBottomSheet type={type} feedId={feedId} bottomSheetRef={admiresBottomSheetRef} />
     </View>
   );

apps/mobile/src/components/Feed/Socialize/CommentButton.tsx

@@ -13,7 +13,7 @@ export function CommentButton({ style, openCommentBottomSheet }: Props) {
   return (
     <GalleryTouchableOpacity
       onPress={openCommentBottomSheet}
-      className="flex justify-center items-center w-[32] h-[32] pt-1 "
+      className="flex justify-center items-center w-[32] h-[30] pt-1"
       style={style}
       eventElementId="Toggle Comment Box"
       eventName="Toggle Comment Box Clicked"

apps/mobile/src/components/Feed/Socialize/CommentLine.tsx

@@ -1,14 +1,11 @@
-import { useCallback, useRef, useState } from 'react';
-import { StyleSheet, View, ViewProps } from 'react-native';
+import { Text, View, ViewProps } from 'react-native';
 import { graphql, useFragment } from 'react-relay';
 
-import { WarningLinkBottomSheet } from '~/components/Feed/Posts/WarningLinkBottomSheet';
-import { GalleryBottomSheetModalType } from '~/components/GalleryBottomSheet/GalleryBottomSheetModal';
 import { GalleryTouchableOpacity } from '~/components/GalleryTouchableOpacity';
-import { Markdown } from '~/components/Markdown';
 import { UsernameDisplay } from '~/components/UsernameDisplay';
 import { CommentLineFragment$key } from '~/generated/CommentLineFragment.graphql';
-import { replaceUrlsWithMarkdownFormat } from '~/shared/utils/replaceUrlsWithMarkdownFormat';
+
+import ProcessedCommentText from './ProcessedCommentText';
 
 type Props = {
   commentRef: CommentLineFragment$key;
@@ -28,38 +25,20 @@ export function CommentLine({ commentRef, style, onCommentPress }: Props) {
     `,
     commentRef
   );
-  const [redirectUrl, setRedirectUrl] = useState('');
-  const bottomSheetRef = useRef<GalleryBottomSheetModalType | null>(null);
-  const captionWithMarkdownLinks = replaceUrlsWithMarkdownFormat(comment.comment ?? '');
-
-  const handleLinkPress = useCallback((url: string) => {
-    bottomSheetRef.current?.present();
-    setRedirectUrl(url);
-  }, []);
 
   return (
     <View className="flex flex-row space-x-1" style={style}>
-      <UsernameDisplay userRef={comment.commenter} size="sm" />
       <GalleryTouchableOpacity
         onPress={onCommentPress}
         eventElementId={null}
         eventName={null}
         className="flex flex-row wrap"
       >
-        <Markdown onBypassLinkPress={handleLinkPress} style={markdownStyles}>
-          {captionWithMarkdownLinks}
-        </Markdown>
-        <WarningLinkBottomSheet redirectUrl={redirectUrl} ref={bottomSheetRef} />
+        <Text numberOfLines={2}>
+          <UsernameDisplay userRef={comment.commenter} size="sm" style={{ marginRight: 4 }} />{' '}
+          <ProcessedCommentText comment={comment.comment} />
+        </Text>
       </GalleryTouchableOpacity>
     </View>
   );
 }
-
-const markdownStyles = StyleSheet.create({
-  body: {
-    fontSize: 14,
-  },
-  paragraph: {
-    marginBottom: 0,
-  },
-});

apps/mobile/src/components/Feed/Socialize/Comments.tsx

@@ -0,0 +1,54 @@
+import { View } from 'react-native';
+import { graphql, useFragment } from 'react-relay';
+
+import { GalleryTouchableOpacity } from '~/components/GalleryTouchableOpacity';
+import { Typography } from '~/components/Typography';
+import { CommentsFragment$key } from '~/generated/CommentsFragment.graphql';
+
+import { CommentLine } from './CommentLine';
+import { RemainingCommentCount } from './RemainingCommentCount';
+import { useMemo } from 'react';
+
+type Props = {
+  commentRefs: CommentsFragment$key;
+  totalComments: number;
+  onCommentPress: () => void;
+};
+
+export default function Comments({ commentRefs, totalComments, onCommentPress }: Props) {
+  const comments = useFragment(
+    graphql`
+      fragment CommentsFragment on Comment @relay(plural: true) {
+        dbid
+        ...CommentLineFragment
+      }
+    `,
+    commentRefs
+  );
+
+  const previewComments = useMemo(() => comments.slice(-1), [comments]);
+
+  return (
+    <View className="flex flex-col space-y-1">
+      {previewComments.map((comment) => {
+        return (
+          <CommentLine key={comment.dbid} commentRef={comment} onCommentPress={onCommentPress} />
+        );
+      })}
+
+      {totalComments > 1 && (
+        <RemainingCommentCount totalCount={totalComments} onPress={onCommentPress} />
+      )}
+      {totalComments === 0 && (
+        <GalleryTouchableOpacity onPress={onCommentPress} eventElementId={null} eventName={null}>
+          <Typography
+            font={{ family: 'ABCDiatype', weight: 'Regular' }}
+            className="text-sm text-shadow"
+          >
+            Add a comment
+          </Typography>
+        </GalleryTouchableOpacity>
+      )}
+    </View>
+  );
+}