fix: fix bio parsing with mentions handling - [CU-869b6djqx] (#106)

Co-authored-by: Youssef Noser <121557650+Exo1i@users.noreply.github.com>
Co-authored-by: Saif <78622218+im-saif@users.noreply.github.com>

Author: 3 people

src/__tests__/components/profile/ProfileInfo.test.tsx

@@ -91,10 +91,11 @@ describe('Profile Info Component', () => {
 
     const { getByText } = render(<ProfileInfo profile={profile} />);
 
-    expect(getByText('@janedoe ')).toBeTruthy();
+    expect(getByText('@janedoe')).toBeTruthy();
   });
 
   it('navigates to user profile when mention is clicked', () => {
+    const mockOnPressMention = jest.fn();
     const profile = {
       ...mockProfile,
       bio: 'Hello @janedoe',
@@ -104,12 +105,14 @@ describe('Profile Info Component', () => {
       },
     };
 
-    const { getAllByText } = render(<ProfileInfo profile={profile} />);
+    const { getByText } = render(
+      <ProfileInfo profile={profile} onPressMention={mockOnPressMention} />
+    );
 
-    const mentions = getAllByText('@janedoe ');
-    fireEvent.press(mentions[0]); // Press the first one (the link)
+    const mention = getByText('@janedoe');
+    fireEvent.press(mention);
 
-    expect(mockPush).toHaveBeenCalledWith('UserProfile', { username: 'janedoe' });
+    expect(mockOnPressMention).toHaveBeenCalledWith('janedoe');
   });
 
   it('renders bio with hashtags as links', () => {
@@ -125,13 +128,10 @@ describe('Profile Info Component', () => {
       },
     };
 
-    const { getAllByText } = render(<ProfileInfo profile={profile} />);
-
-    const codingHashtags = getAllByText('#Coding ');
-    const techHashtags = getAllByText('#Tech ');
+    const { getByText } = render(<ProfileInfo profile={profile} />);
 
-    expect(codingHashtags.length).toBeGreaterThan(0);
-    expect(techHashtags.length).toBeGreaterThan(0);
+    expect(getByText('#Coding')).toBeTruthy();
+    expect(getByText('#Tech')).toBeTruthy();
   });
 
   it('renders bio with mixed mentions and hashtags', () => {
@@ -144,15 +144,10 @@ describe('Profile Info Component', () => {
       },
     };
 
-    const { getAllByText } = render(<ProfileInfo profile={profile} />);
-
-    const mentions = getAllByText('@janedoe ');
-    expect(mentions.length).toBeGreaterThan(0);
-
-    const hashtags = getAllByText('#Coding ');
-    expect(hashtags.length).toBeGreaterThan(0);
+    const { getByText } = render(<ProfileInfo profile={profile} />);
 
-    // Note: "check " is part of a larger text segment, not a separate text node
+    expect(getByText('@janedoe')).toBeTruthy();
+    expect(getByText('#Coding')).toBeTruthy();
   });
 
   it('handles bio with no entities', () => {
@@ -192,12 +187,10 @@ describe('Profile Info Component', () => {
       },
     };
 
-    const { getByText, getAllByText } = render(<ProfileInfo profile={profile} />);
+    const { getByText } = render(<ProfileInfo profile={profile} />);
 
     expect(getByText('Text with hashtag ')).toBeTruthy();
-
-    const hashtags = getAllByText('#Test ');
-    expect(hashtags.length).toBeGreaterThan(0);
+    expect(getByText('#Test')).toBeTruthy();
   });
 
   it('handles bio with undefined hashtags in bioEntities', () => {
@@ -210,12 +203,10 @@ describe('Profile Info Component', () => {
       },
     };
 
-    const { getByText, getAllByText } = render(<ProfileInfo profile={profile} />);
+    const { getByText } = render(<ProfileInfo profile={profile} />);
 
     expect(getByText('Text with mention ')).toBeTruthy();
-
-    const mentions = getAllByText('@user ');
-    expect(mentions.length).toBeGreaterThan(0);
+    expect(getByText('@user')).toBeTruthy();
   });
 
   it('passes correct data to ProfileUser', () => {
@@ -240,12 +231,10 @@ describe('Profile Info Component', () => {
       },
     };
 
-    const { getAllByText } = render(<ProfileInfo profile={profile} />);
-
-    const mentions = getAllByText('@janedoe ');
-    expect(mentions.length).toBeGreaterThan(0);
+    const { getByText } = render(<ProfileInfo profile={profile} />);
 
-    // Note: "hello" is part of the bio text that follows the mention
+    expect(getByText('@janedoe')).toBeTruthy();
+    expect(getByText(' hello')).toBeTruthy();
   });
 
   it('handles bio entities at the end of the bio', () => {
@@ -258,12 +247,10 @@ describe('Profile Info Component', () => {
       },
     };
 
-    const { getByText, getAllByText } = render(<ProfileInfo profile={profile} />);
+    const { getByText } = render(<ProfileInfo profile={profile} />);
 
     expect(getByText('hello ')).toBeTruthy();
-
-    const mentions = getAllByText('@janedoe ');
-    expect(mentions.length).toBeGreaterThan(0);
+    expect(getByText('@janedoe')).toBeTruthy();
   });
 
   it('sorts entities by start position', () => {
@@ -276,14 +263,9 @@ describe('Profile Info Component', () => {
       },
     };
 
-    const { getAllByText } = render(<ProfileInfo profile={profile} />);
-
-    const hashtags = getAllByText('#Tech ');
-    expect(hashtags.length).toBeGreaterThan(0);
-
-    const mentions = getAllByText('@janedoe ');
-    expect(mentions.length).toBeGreaterThan(0);
+    const { getByText } = render(<ProfileInfo profile={profile} />);
 
-    // Entities are sorted and rendered in correct order
+    expect(getByText('#Tech')).toBeTruthy();
+    expect(getByText('@janedoe')).toBeTruthy();
   });
 });

src/components/profile/ProfileHeader.tsx

@@ -1,6 +1,7 @@
 import { Alert, Dimensions, StyleSheet, TouchableOpacity, View } from 'react-native';
 
 import { useNavigation } from '@react-navigation/native';
+import { StackNavigationProp } from '@react-navigation/stack';
 
 import Avatar from '@/components/profile/Avatar';
 import ProfileBanner from '@/components/profile/Banner';
@@ -9,12 +10,12 @@ import { useFollowMutation } from '@/hooks/profile/useFollowMutation';
 import { useTheme } from '@/hooks/useTheme';
 import { useUserStore } from '@/stores/userStore';
 import { colors } from '@/utils/colorTheme';
-import { PROFILE } from '@/utils/navigation/routeNames';
+import { PROFILE, ROOT } from '@/utils/navigation/routeNames';
 
 import ProfileInfo from './ProfileInfo';
 import ProfileStats from './Statistics';
 
-import type { ProfileScreenOptionsProps } from '@/types/navigation';
+import type { ProfileScreenOptionsProps, RootStackParamList } from '@/types/navigation';
 import type { UserProfile } from '@/types/user';
 
 const { width, height } = Dimensions.get('window');
@@ -31,6 +32,7 @@ const ProfileHeader = ({ username, profile }: ProfileHeaderProps) => {
   const styles = getStyles(theme);
 
   const navigation = useNavigation<ProfileScreenProps['navigation']>();
+  const rootNavigation = useNavigation<StackNavigationProp<RootStackParamList>>();
   const authenticatedUsername = useUserStore((state) => state.user.username);
   const isAuthenticatedUser = username === authenticatedUsername;
   const followMutation = useFollowMutation();
@@ -65,6 +67,13 @@ const ProfileHeader = ({ username, profile }: ProfileHeaderProps) => {
     navigation.push(PROFILE.PROFILE_PIC, { uri, username: username, isAvatar });
   };
 
+  const handleMentionPress = (mentionedUsername: string) => {
+    rootNavigation.push(ROOT.PROFILE, {
+      screen: PROFILE.USER_PROFILE,
+      params: { username: mentionedUsername },
+    });
+  };
+
   const userStats = {
     followers: profile.followersCount,
     following: profile.followingCount,
@@ -112,7 +121,7 @@ const ProfileHeader = ({ username, profile }: ProfileHeaderProps) => {
       </View>
 
       <View style={styles.infoContainer}>
-        <ProfileInfo profile={profile} />
+        <ProfileInfo profile={profile} onPressMention={handleMentionPress} />
         <ProfileStats
           stats={userStats}
           onFollowersPress={() =>

src/components/profile/ProfileInfo.tsx

@@ -19,11 +19,21 @@ type DetailItem = {
 };
 
 type ProfileInfoProps = {
-  profile: UserProfile;
+  profile: UserProfile | null;
+  onPressMention?: (username: string) => void;
+  onPressHashtag?: (hashtag: string) => void;
 };
 
-const ProfileInfo = ({ profile }: ProfileInfoProps) => {
-  const bioElements = useBioParser(profile);
+const ProfileInfo = ({ profile, onPressMention, onPressHashtag }: ProfileInfoProps) => {
+  const bioElements = useBioParser({
+    bio: profile?.bio,
+    mentions: profile?.bioEntities?.mentions,
+    hashtags: profile?.bioEntities?.hashtags,
+    onPressMention,
+    onPressHashtag,
+  });
+
+  if (!profile) return null;
 
   const handleOpenLink = async (url: string) => {
     try {
@@ -53,7 +63,6 @@ const ProfileInfo = ({ profile }: ProfileInfoProps) => {
       console.error('Error opening URL:', error);
     }
   };
-  if (!profile) return null;
 
   const dynamicDetails = [
     profile.location && {

src/hooks/profile/useBioParser.tsx

@@ -1,82 +1,85 @@
-import { useNavigation } from '@react-navigation/native';
-import { StackNavigationProp } from '@react-navigation/stack';
-
 import AppText from '@/components/ui/AppText';
-import { ProfileStackParamList } from '@/types/navigation';
-import { UserProfile } from '@/types/user';
-import { PROFILE } from '@/utils/navigation/routeNames';
-
-type NavigationProp = StackNavigationProp<ProfileStackParamList>;
+import { type HashtagEntity, type MentionEntity } from '@/types/user';
 
-type BioEntity = {
-  type: 'mention' | 'hashtag';
-  start: number;
-  value: string;
+type BioParserProps = {
+  bio: string | null | undefined;
+  mentions?: MentionEntity[];
+  hashtags?: HashtagEntity[];
+  onPressMention?: (username: string) => void;
+  onPressHashtag?: (hashtag: string) => void;
 };
 
-export const useBioParser = (profile: UserProfile | undefined) => {
-  const navigation = useNavigation<NavigationProp>();
-
-  if (!profile || !profile?.bio || profile?.bio === '') return null;
-
-  const bio = profile.bio;
-  const mentions = profile.bioEntities?.mentions ?? [];
-  const hashtags = profile.bioEntities?.hashtags ?? [];
-
-  const entities: BioEntity[] = [
+function sortBioEntities(mentions: MentionEntity[] = [], hashtags: HashtagEntity[] = []) {
+  return [
     ...mentions.map((m) => ({
       type: 'mention' as const,
+      key: `@${m.username}`,
       start: m.startPosition,
-      value: `@${m.username} `,
     })),
     ...hashtags.map((h) => ({
       type: 'hashtag' as const,
+      key: `#${h.hashtag}`,
       start: h.startPosition,
-      value: `#${h.hashtag} `,
     })),
   ].sort((a, b) => a.start - b.start);
+}
 
-  const elements: React.ReactNode[] = [];
-  let lastIndex = 0;
+export const useBioParser = ({
+  bio,
+  mentions,
+  hashtags,
+  onPressMention,
+  onPressHashtag,
+}: BioParserProps) => {
+  if (!bio) return null;
 
-  for (let idx = 0; idx < entities.length; idx++) {
-    const entity = entities[idx];
+  const ordered = sortBioEntities(mentions, hashtags);
 
-    if (entity.start > lastIndex) {
-      elements.push(
-        <AppText key={`text-${idx}`} variant="bio">
-          {bio.slice(lastIndex, entity.start)}
-        </AppText>
-      );
-    }
+  const parts: {
+    content: string;
+    type: 'text' | 'mention' | 'hashtag';
+    value?: string;
+  }[] = [];
 
-    elements.push(
-      <AppText
-        key={`entity-${entity.start}`}
-        variant="link"
-        onPress={() => {
-          if (entity.type === 'mention') {
-            navigation.push(PROFILE.USER_PROFILE, {
-              username: entity.value.replace('@', '').trim(),
-            });
-          }
-          // TODO: Handle hashtag navigation
-        }}
-      >
-        {entity.value}
-      </AppText>
-    );
+  let current = 0;
+  for (const e of ordered) {
+    const value = e.key;
+    const len = value.length;
 
-    lastIndex = entity.start;
+    if (e.start > current) parts.push({ content: bio.slice(current, e.start), type: 'text' });
+
+    parts.push({ content: bio.slice(e.start, e.start + len), type: e.type, value });
+    current = e.start + len;
   }
 
-  if (lastIndex < bio.length) {
-    elements.push(
-      <AppText key="text-end" variant="bio">
-        {bio.slice(lastIndex)}
+  if (current < bio.length) parts.push({ content: bio.slice(current), type: 'text' });
+
+  return parts.map((p, idx) => {
+    if (p.type === 'mention')
+      return (
+        <AppText
+          key={`m-${idx}`}
+          variant="link"
+          onPress={() => onPressMention?.(p.value!.slice(1))}
+        >
+          {p.content}
+        </AppText>
+      );
+    if (p.type === 'hashtag')
+      return (
+        <AppText
+          key={`h-${idx}`}
+          variant="link"
+          onPress={() => onPressHashtag?.(p.value!.slice(1))}
+        >
+          {p.content}
+        </AppText>
+      );
+
+    return (
+      <AppText key={`t-${idx}`} variant="bio">
+        {p.content}
       </AppText>
     );
-  }
-
-  return elements;
+  });
 };