refactor: extract OptionRow.DraftIndicator leaf

Author: BartekObudzinski

src/components/LHNOptionsList/OptionRowLHN/OptionRow/DraftIndicator.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 DraftIndicatorProps = {
+    hasDraftComment: boolean;
+    isAllowedToComment: boolean | null | undefined;
+};
+
+function DraftIndicator({hasDraftComment, isAllowedToComment}: DraftIndicatorProps) {
+    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>
+    );
+}
+
+DraftIndicator.displayName = 'OptionRow.DraftIndicator';
+
+export default DraftIndicator;

src/components/LHNOptionsList/OptionRowLHN/OptionRowLHNCore.tsx

@@ -26,6 +26,7 @@ import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import DraftIndicator from './OptionRow/DraftIndicator';
 import OptionRowAlternateText from './OptionRowAlternateText';
 import OptionRowAvatar from './OptionRowAvatar';
 import OptionRowErrorBadge from './OptionRowErrorBadge';
@@ -50,7 +51,7 @@ function OptionRowLHN({
     const styles = useThemeStyles();
     const popoverAnchor = useRef<View>(null);
     const StyleUtils = useStyleUtils();
-    const expensifyIcons = useMemoizedLazyExpensifyIcons(['Pencil', 'Pin']);
+    const expensifyIcons = useMemoizedLazyExpensifyIcons(['Pin']);
 
     const {onboardingPurpose, onboarding, isScreenFocused} = useLHNTooltipContext();
     const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID);
@@ -204,20 +205,10 @@ 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>
-                            )}
+                            <DraftIndicator
+                                hasDraftComment={hasDraftComment}
+                                isAllowedToComment={optionItem.isAllowedToComment}
+                            />
                             {!brickRoadIndicator && !!optionItem.isPinned && (
                                 <View
                                     style={styles.ml2}