feat: Pressable Group Updates

components/Chat/ChatGroupUpdatedMessage.tsx

@@ -1,7 +1,14 @@
+import { PressableProfileWithText } from "@components/PressableProfileWithText";
+import { InboxIdStoreType } from "@data/store/inboxIdStore";
+import { ProfilesStoreType } from "@data/store/profilesStore";
+import { useSelect } from "@data/store/storeHelpers";
+import { VStack } from "@design-system/VStack";
+import { translate } from "@i18n";
 import { textSecondaryColor } from "@styles/colors";
+import { navigate } from "@utils/navigation";
 import { GroupUpdatedContent } from "@xmtp/react-native-sdk";
-import { useMemo } from "react";
-import { StyleSheet, Text, useColorScheme } from "react-native";
+import { useCallback, useMemo } from "react";
+import { StyleSheet, useColorScheme } from "react-native";
 
 import { MessageToDisplay } from "./Message/Message";
 import {
@@ -10,14 +17,16 @@ import {
 } from "../../data/store/accountsStore";
 import { getPreferredName, getProfile } from "../../utils/profile";
 
-export default function ChatGroupUpdatedMessage({
+const inboxIdStoreSelectedKeys: (keyof InboxIdStoreType)[] = ["byInboxId"];
+const profilesStoreSelectedKeys: (keyof ProfilesStoreType)[] = ["profiles"];
+export function ChatGroupUpdatedMessage({
   message,
 }: {
   message: MessageToDisplay;
 }) {
   const styles = useStyles();
-  const byInboxId = useInboxIdStore().byInboxId;
-  const profiles = useProfilesStore().profiles;
+  const { byInboxId } = useInboxIdStore(useSelect(inboxIdStoreSelectedKeys));
+  const { profiles } = useProfilesStore(useSelect(profilesStoreSelectedKeys));
   // JSON Parsing is heavy so useMemo
   const parsedContent = useMemo(
     () => JSON.parse(message.content) as GroupUpdatedContent,
@@ -26,11 +35,16 @@ export default function ChatGroupUpdatedMessage({
 
   // TODO: Feat: handle multiple members
   const initiatedByAddress = byInboxId[parsedContent.initiatedByInboxId]?.[0];
+  const initiatedByProfile = getProfile(initiatedByAddress, profiles)?.socials;
   const initiatedByReadableName = getPreferredName(
-    getProfile(initiatedByAddress, profiles)?.socials,
+    initiatedByProfile,
     initiatedByAddress
   );
-  const membersActions: string[] = [];
+  const membersActions: {
+    address: string;
+    content: string;
+    readableName: string;
+  }[] = [];
   parsedContent.membersAdded.forEach((m) => {
     // TODO: Feat: handle multiple members
     const firstAddress = byInboxId[m.inboxId]?.[0];
@@ -40,7 +54,13 @@ export default function ChatGroupUpdatedMessage({
       getProfile(firstAddress, profiles)?.socials,
       firstAddress
     );
-    membersActions.push(`${readableName} joined the conversation`);
+    membersActions.push({
+      address: firstAddress,
+      content: translate(`group_member_joined`, {
+        name: readableName,
+      }),
+      readableName,
+    });
   });
   parsedContent.membersRemoved.forEach((m) => {
     // TODO: Feat: handle multiple members
@@ -51,38 +71,73 @@ export default function ChatGroupUpdatedMessage({
       getProfile(firstAddress, profiles)?.socials,
       firstAddress
     );
-    membersActions.push(`${readableName} left the conversation`);
+    membersActions.push({
+      address: firstAddress,
+      content: translate(`group_member_left`, {
+        name: readableName,
+      }),
+      readableName,
+    });
   });
   parsedContent.metadataFieldsChanged.forEach((f) => {
     if (f.fieldName === "group_name") {
-      membersActions.push(
-        `${initiatedByReadableName} changed the group name to "${f.newValue}".`
-      );
+      membersActions.push({
+        address: initiatedByAddress,
+        content: translate(`group_name_changed_to`, {
+          name: initiatedByReadableName,
+          newValue: f.newValue,
+        }),
+        readableName: initiatedByReadableName,
+      });
     } else if (f.fieldName === "group_image_url_square") {
-      membersActions.push(
-        `${initiatedByReadableName} changed the group photo.`
-      );
+      membersActions.push({
+        address: initiatedByAddress,
+        content: translate(`group_photo_changed`, {
+          name: initiatedByReadableName,
+        }),
+        readableName: initiatedByReadableName,
+      });
     } else if (f.fieldName === "description") {
-      membersActions.push(
-        `${initiatedByReadableName} changed the group description to "${f.newValue}".`
-      );
+      membersActions.push({
+        address: initiatedByAddress,
+        content: translate(`group_description_changed`, {
+          name: initiatedByReadableName,
+          newValue: f.newValue,
+        }),
+        readableName: initiatedByReadableName,
+      });
     }
   });
 
+  const onPress = useCallback((address: string) => {
+    return navigate("Profile", {
+      address,
+    });
+  }, []);
+
   return (
-    <>
+    <VStack style={styles.textContainer}>
       {membersActions.map((a) => (
-        <Text key={a} style={styles.groupChange}>
-          {a}
-        </Text>
+        <PressableProfileWithText
+          key={a.address}
+          text={a.content}
+          profileDisplay={a.readableName}
+          profileAddress={a.address}
+          onPress={onPress}
+        />
       ))}
-    </>
+    </VStack>
   );
 }
 
 const useStyles = () => {
   const colorScheme = useColorScheme();
   return StyleSheet.create({
+    textContainer: {
+      justifyContent: "center",
+      alignItems: "center",
+      width: "100%",
+    },
     groupChange: {
       color: textSecondaryColor(colorScheme),
       fontSize: 11,
@@ -92,5 +147,8 @@ const useStyles = () => {
       marginBottom: 9,
       paddingHorizontal: 24,
     },
+    profileStyle: {
+      fontWeight: "bold",
+    },
   });
 };

components/Chat/Message/Message.tsx

@@ -63,7 +63,7 @@ import Avatar from "../../Avatar";
 import ClickableText from "../../ClickableText";
 import ActionButton from "../ActionButton";
 import AttachmentMessagePreview from "../Attachment/AttachmentMessagePreview";
-import ChatGroupUpdatedMessage from "../ChatGroupUpdatedMessage";
+import { ChatGroupUpdatedMessage } from "../ChatGroupUpdatedMessage";
 import FramesPreviews from "../Frame/FramesPreviews";
 import ChatInputReplyBubble from "../Input/InputReplyBubble";
 import TransactionPreview from "../Transaction/TransactionPreview";

components/ParsedText/ParsedText.props.ts

@@ -0,0 +1,8 @@
+import { ITextProps } from "@design-system/Text";
+import { ITextStyleProps } from "@design-system/Text/Text.props";
+import { ParseShape } from "react-native-parsed-text";
+
+export interface IParsedTextProps extends ITextProps {
+  parse: ParseShape[];
+  pressableStyle?: ITextStyleProps;
+}

components/ParsedText/ParsedText.tsx

@@ -0,0 +1,24 @@
+import React, { forwardRef, memo } from "react";
+import { TextProps as RNTextProps, StyleSheet } from "react-native";
+import RNParsedText, { ParsedTextProps } from "react-native-parsed-text";
+
+type IParsedTextProps = ParsedTextProps & {
+  parse: NonNullable<ParsedTextProps["parse"]>;
+  pressableStyle?: RNTextProps["style"];
+};
+
+export const ParsedText = memo(
+  forwardRef<RNParsedText, IParsedTextProps>((props, ref) => {
+    const { parse, style, pressableStyle, ...rest } = props;
+
+    const parseOptions = parse.map(({ onPress, ...rest }) => ({
+      ...rest,
+      onPress,
+      style: StyleSheet.flatten([style, pressableStyle]),
+    }));
+
+    return (
+      <RNParsedText style={style} parse={parseOptions} ref={ref} {...rest} />
+    );
+  })
+);

components/PressableProfileWithText.tsx

@@ -0,0 +1,61 @@
+import { memo, useCallback, useMemo } from "react";
+
+import { textFontWeightStyles } from "../design-system/Text/Text.styles";
+import { getTextStyle } from "../design-system/Text/Text.utils";
+import { useAppTheme } from "../theme/useAppTheme";
+import { ParsedText } from "./ParsedText/ParsedText";
+
+const PressableProfileWithTextInner = ({
+  profileAddress,
+  profileDisplay,
+  text,
+  onPress,
+}: {
+  onPress: (address: string) => void;
+  text: string;
+  profileDisplay: string;
+  profileAddress: string;
+}) => {
+  const handlePress = useCallback(() => {
+    return onPress(profileAddress);
+  }, [profileAddress, onPress]);
+
+  const pattern = useMemo(
+    () => new RegExp(profileDisplay, "g"),
+    [profileDisplay]
+  );
+  const parseOptions = useMemo(
+    () => [
+      {
+        onPress: handlePress,
+        pattern,
+      },
+    ],
+    [handlePress, pattern]
+  );
+
+  const { themed } = useAppTheme();
+
+  const pressableStyle = {
+    ...textFontWeightStyles.bold,
+  };
+
+  const textStyle = getTextStyle(themed, {
+    ...pressableStyle,
+    weight: "bold",
+    preset: "subheading",
+    size: "xxs",
+  });
+
+  return (
+    <ParsedText
+      parse={parseOptions}
+      pressableStyle={pressableStyle}
+      style={textStyle}
+    >
+      {text}
+    </ParsedText>
+  );
+};
+
+export const PressableProfileWithText = memo(PressableProfileWithTextInner);

components/__tests__/PressableProfileWithText.test.tsx

@@ -0,0 +1,104 @@
+import { PressableProfileWithText } from "@components/PressableProfileWithText";
+import { render, fireEvent } from "@testing-library/react-native";
+import { navigate } from "@utils/navigation";
+
+// Mock the navigate function from @utils/navigation
+jest.mock("@utils/navigation", () => ({
+  navigate: jest.fn(),
+}));
+
+describe("PressableProfileWithTextInner", () => {
+  const profileAddress = "0x123";
+  const profileDisplay = "User123";
+  const text = "Hello User123, welcome!";
+  const textStyle = { fontSize: 18 };
+  const pressableTextStyle = { fontSize: 18, color: "blue" };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders ParsedText with the correct text and style", () => {
+    const { getByText } = render(
+      <PressableProfileWithText
+        profileAddress={profileAddress}
+        profileDisplay={profileDisplay}
+        text={text}
+        textStyle={textStyle}
+      />
+    );
+
+    const renderedText = getByText(text);
+    expect(renderedText).toBeTruthy();
+    expect(renderedText.props.style).toEqual(textStyle);
+  });
+
+  it("calls navigate to profile on profileDisplay press", () => {
+    const { getByText } = render(
+      <PressableProfileWithText
+        profileAddress={profileAddress}
+        profileDisplay={profileDisplay}
+        text={text}
+        textStyle={textStyle}
+      />
+    );
+
+    const parsedText = getByText(profileDisplay);
+
+    // Simulate the press on the profileDisplay text
+    fireEvent.press(parsedText);
+
+    expect(navigate).toHaveBeenCalledWith("Profile", {
+      address: profileAddress,
+    });
+  });
+
+  it("does not call navigate when profileAddress is undefined", () => {
+    const { getByText } = render(
+      <PressableProfileWithText
+        profileAddress={undefined as any}
+        profileDisplay={profileDisplay}
+        text={text}
+        textStyle={textStyle}
+      />
+    );
+
+    const parsedText = getByText(profileDisplay);
+
+    // Simulate the press on the profileDisplay text
+    fireEvent.press(parsedText);
+
+    expect(navigate).not.toHaveBeenCalled();
+  });
+
+  it("renders with the provided style", () => {
+    const { getByText } = render(
+      <PressableProfileWithText
+        profileAddress={profileAddress}
+        profileDisplay={profileDisplay}
+        text={text}
+        textStyle={textStyle}
+      />
+    );
+
+    const parsedText = getByText(profileDisplay);
+
+    expect(parsedText.props.style).toEqual([textStyle, undefined]);
+  });
+
+  it("renders with the provided style for pressable text", () => {
+    const { getByText } = render(
+      <PressableProfileWithText
+        profileAddress={profileAddress}
+        profileDisplay={profileDisplay}
+        text={text}
+        textStyle={textStyle}
+        pressableTextStyle={pressableTextStyle}
+      />
+    );
+
+    const parsedText = getByText(profileDisplay);
+
+    expect(parsedText.props.style).toEqual([textStyle, pressableTextStyle]);
+  });
+});