From 5941cad54430ba59b99ccdc455b3acacb71998aa Mon Sep 17 00:00:00 2001
From: Thierry Skoda <6875849+thierryskoda@users.noreply.github.com>
Date: Thu, 17 Oct 2024 09:58:24 -0400
Subject: [PATCH] recs for cleaner (#1012)

---
 components/ParsedText/ParsedText.tsx    | 47 ++++++++++---------------
 components/PressableProfileWithText.tsx | 33 +++++++++--------
 design-system/Text/Text.utils.ts        |  4 +--
 theme/useAppTheme.ts                    |  2 ++
 4 files changed, 38 insertions(+), 48 deletions(-)

diff --git a/components/ParsedText/ParsedText.tsx b/components/ParsedText/ParsedText.tsx
index 71450ffd1..e839e4500 100644
--- a/components/ParsedText/ParsedText.tsx
+++ b/components/ParsedText/ParsedText.tsx
@@ -1,35 +1,24 @@
-import { getTextStyle } from "@design-system/Text/Text.utils";
-import { useAppTheme } from "@theme/useAppTheme";
-import React, { forwardRef, memo, useMemo } from "react";
-import RNParsedText from "react-native-parsed-text";
+import React, { forwardRef, memo } from "react";
+import { TextProps as RNTextProps, StyleSheet } from "react-native";
+import RNParsedText, { ParsedTextProps } from "react-native-parsed-text";
 
-import { IParsedTextProps } from "./ParsedText.props";
+type IParsedTextProps = ParsedTextProps & {
+  parse: NonNullable<ParsedTextProps["parse"]>;
+  pressableStyle?: RNTextProps["style"];
+};
 
-const ParsedTextInner = forwardRef<RNParsedText, IParsedTextProps>(
-  (props, ref) => {
-    const { themed } = useAppTheme();
-    const styles = getTextStyle(themed, props);
-    const childThemedProps = useMemo(() => {
-      return {
-        ...props,
-        ...props.pressableStyle,
-      };
-    }, [props]);
-    const pressableStyles = getTextStyle(themed, childThemedProps);
-    const parseOptions = useMemo(
-      () =>
-        props.parse.map(({ onPress, ...rest }) => ({
-          ...rest,
-          onPress,
-          style: pressableStyles,
-        })),
-      [props.parse, pressableStyles]
-    );
+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 {...props} parse={parseOptions} ref={ref} style={styles} />
+      <RNParsedText style={style} parse={parseOptions} ref={ref} {...rest} />
     );
-  }
+  })
 );
-
-export const ParsedText = memo(ParsedTextInner);
diff --git a/components/PressableProfileWithText.tsx b/components/PressableProfileWithText.tsx
index 4f9741fa8..d3a5ac03e 100644
--- a/components/PressableProfileWithText.tsx
+++ b/components/PressableProfileWithText.tsx
@@ -1,18 +1,10 @@
-import { ITextStyleProps } from "@design-system/Text/Text.props";
-import { ThemedStyle, useAppTheme } from "@theme/useAppTheme";
 import { memo, useCallback, useMemo } from "react";
-import { TextStyle } from "react-native";
 
+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 $pressableStyle: ITextStyleProps = {
-  weight: "bold",
-};
-
-const $textStyle: ThemedStyle<TextStyle> = ({ colors }) => ({
-  color: colors.fill.secondary,
-});
-
 const PressableProfileWithTextInner = ({
   profileAddress,
   profileDisplay,
@@ -24,8 +16,6 @@ const PressableProfileWithTextInner = ({
   profileDisplay: string;
   profileAddress: string;
 }) => {
-  const { themed } = useAppTheme();
-
   const handlePress = useCallback(() => {
     return onPress(profileAddress);
   }, [profileAddress, onPress]);
@@ -44,13 +34,22 @@ const PressableProfileWithTextInner = ({
     [handlePress, pattern]
   );
 
+  const { themed } = useAppTheme();
+
+  const $pressableStyle = {
+    ...textFontWeightStyles.bold,
+  };
+
+  const $textStyle = getTextStyle(themed, {
+    preset: "smaller",
+    size: "xxs",
+  });
+
   return (
     <ParsedText
-      preset="smaller"
-      size="xxs"
-      style={themed($textStyle)}
-      pressableStyle={$pressableStyle}
       parse={parseOptions}
+      pressableStyle={$pressableStyle}
+      style={$textStyle}
     >
       {text}
     </ParsedText>
diff --git a/design-system/Text/Text.utils.ts b/design-system/Text/Text.utils.ts
index c381075b6..023c6f51b 100644
--- a/design-system/Text/Text.utils.ts
+++ b/design-system/Text/Text.utils.ts
@@ -1,4 +1,4 @@
-import { useAppTheme } from "@theme/useAppTheme";
+import { IThemed } from "@theme/useAppTheme";
 import { StyleProp, TextStyle } from "react-native";
 
 import { IPresets, textPresets } from "./Text.presets";
@@ -6,7 +6,7 @@ import { ITextStyleProps } from "./Text.props";
 import { textFontWeightStyles, textSizeStyles } from "./Text.styles";
 
 export const getTextStyle = (
-  themed: ReturnType<typeof useAppTheme>["themed"],
+  themed: IThemed,
   { weight, size, style: styleProp, ...props }: ITextStyleProps
 ): StyleProp<TextStyle> => {
   const preset: IPresets = props.preset ?? "body";
diff --git a/theme/useAppTheme.ts b/theme/useAppTheme.ts
index e7474ac37..369d61b6b 100644
--- a/theme/useAppTheme.ts
+++ b/theme/useAppTheme.ts
@@ -147,6 +147,8 @@ interface UseAppThemeValue {
   ) => T;
 }
 
+export type IThemed = ReturnType<typeof useAppTheme>["themed"];
+
 /**
  * Custom hook that provides the app theme and utility functions for theming.
  *