refactor: extract OptionRowDraftIcon and OptionRowPinIcon leaves

src/components/LHNOptionsList/OptionRowLHN/OptionRowDraftIcon.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import {View} from 'react-native';
+import Icon from '@components/Icon';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
+import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
+
+type OptionRowDraftIconProps = {
+    hasDraftComment: boolean;
+    isAllowedToComment: boolean | null | undefined;
+};
+
+function OptionRowDraftIcon({hasDraftComment, isAllowedToComment}: OptionRowDraftIconProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const {Pencil} = useMemoizedLazyExpensifyIcons(['Pencil']);
+
+    if (!hasDraftComment || !isAllowedToComment) {
+        return null;
+    }
+
+    return (
+        <View
+            style={styles.ml2}
+            accessibilityLabel={translate('sidebarScreen.draftedMessage')}
+        >
+            <Icon
+                testID="Pencil Icon"
+                fill={theme.icon}
+                src={Pencil}
+                width={variables.iconSizeSmall}
+                height={variables.iconSizeSmall}
+            />
+        </View>
+    );
+}
+
+OptionRowDraftIcon.displayName = 'OptionRowDraftIcon';
+
+export default OptionRowDraftIcon;

src/components/LHNOptionsList/OptionRowLHN/OptionRowLHNCore.tsx

@@ -2,7 +2,6 @@ import React, {useRef} from 'react';
 import type {ViewStyle} from 'react-native';
 import {StyleSheet, View} from 'react-native';
 import DisplayNames from '@components/DisplayNames';
-import Icon from '@components/Icon';
 import {useLHNTooltipContext} from '@components/LHNOptionsList/LHNTooltipContext';
 import type {OptionRowLHNProps} from '@components/LHNOptionsList/types';
 import Text from '@components/Text';
@@ -11,7 +10,6 @@ import getContextMenuAccessibilityHint from '@components/utils/getContextMenuAcc
 import getContextMenuAccessibilityProps from '@components/utils/getContextMenuAccessibilityProps';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useEnvironment from '@hooks/useEnvironment';
-import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -22,14 +20,15 @@ import FS from '@libs/Fullstory';
 import {shouldUseBoldText} from '@libs/OptionsListUtils';
 import {isChatUsedForOnboarding as isChatUsedForOnboardingReportUtils, isGroupChat, isOneOnOneChat, isSystemChat} from '@libs/ReportUtils';
 import FreeTrial from '@pages/settings/Subscription/FreeTrial';
-import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import OptionRowAlternateText from './OptionRowAlternateText';
 import OptionRowAvatar from './OptionRowAvatar';
+import OptionRowDraftIcon from './OptionRowDraftIcon';
 import OptionRowErrorBadge from './OptionRowErrorBadge';
 import OptionRowInfoBadge from './OptionRowInfoBadge';
+import OptionRowPinIcon from './OptionRowPinIcon';
 import OptionRowPressable from './OptionRowPressable';
 import OptionRowTooltipLayer from './OptionRowTooltipLayer';
 
@@ -50,7 +49,6 @@ function OptionRowLHN({
     const styles = useThemeStyles();
     const popoverAnchor = useRef<View>(null);
     const StyleUtils = useStyleUtils();
-    const expensifyIcons = useMemoizedLazyExpensifyIcons(['Pencil', 'Pin']);
 
     const {onboardingPurpose, onboarding, isScreenFocused} = useLHNTooltipContext();
     const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID);
@@ -204,34 +202,14 @@ function OptionRowLHN({
                                 brickRoadIndicator={brickRoadIndicator}
                                 actionBadgeText={actionBadgeText}
                             />
-                            {hasDraftComment && !!optionItem.isAllowedToComment && (
-                                <View
-                                    style={styles.ml2}
-                                    accessibilityLabel={translate('sidebarScreen.draftedMessage')}
-                                >
-                                    <Icon
-                                        testID="Pencil Icon"
-                                        fill={theme.icon}
-                                        src={expensifyIcons.Pencil}
-                                        width={variables.iconSizeSmall}
-                                        height={variables.iconSizeSmall}
-                                    />
-                                </View>
-                            )}
-                            {!brickRoadIndicator && !!optionItem.isPinned && (
-                                <View
-                                    style={styles.ml2}
-                                    accessibilityLabel={translate('sidebarScreen.chatPinned')}
-                                >
-                                    <Icon
-                                        testID="Pin Icon"
-                                        fill={theme.icon}
-                                        src={expensifyIcons.Pin}
-                                        width={variables.iconSizeSmall}
-                                        height={variables.iconSizeSmall}
-                                    />
-                                </View>
-                            )}
+                            <OptionRowDraftIcon
+                                hasDraftComment={hasDraftComment}
+                                isAllowedToComment={optionItem.isAllowedToComment}
+                            />
+                            <OptionRowPinIcon
+                                isPinned={optionItem.isPinned}
+                                brickRoadIndicator={brickRoadIndicator}
+                            />
                         </View>
                     </>
                 );

src/components/LHNOptionsList/OptionRowLHN/OptionRowPinIcon.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import {View} from 'react-native';
+import Icon from '@components/Icon';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
+import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import type {OptionData} from '@libs/ReportUtils';
+import variables from '@styles/variables';
+
+type OptionRowPinIconProps = {
+    isPinned: boolean | undefined;
+    brickRoadIndicator: OptionData['brickRoadIndicator'];
+};
+
+function OptionRowPinIcon({isPinned, brickRoadIndicator}: OptionRowPinIconProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const {Pin} = useMemoizedLazyExpensifyIcons(['Pin']);
+
+    if (!isPinned || brickRoadIndicator) {
+        return null;
+    }
+
+    return (
+        <View
+            style={styles.ml2}
+            accessibilityLabel={translate('sidebarScreen.chatPinned')}
+        >
+            <Icon
+                testID="Pin Icon"
+                fill={theme.icon}
+                src={Pin}
+                width={variables.iconSizeSmall}
+                height={variables.iconSizeSmall}
+            />
+        </View>
+    );
+}
+
+OptionRowPinIcon.displayName = 'OptionRowPinIcon';
+
+export default OptionRowPinIcon;