[No QA] refactor: extract OptionRow.Status leaf

src/components/LHNOptionsList/OptionRowLHN/OptionRow/Status.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import Text from '@components/Text';
+import Tooltip from '@components/Tooltip';
+import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import DateUtils from '@libs/DateUtils';
+import type {OptionData} from '@libs/ReportUtils';
+import CONST from '@src/CONST';
+
+type StatusProps = {
+    /** The option data for the report row. Status is only shown for 1:1 chats whose participant has set a status emoji. */
+    optionItem: OptionData;
+};
+
+function Status({optionItem}: StatusProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const currentUserPersonalDetails = useCurrentUserPersonalDetails();
+
+    const emojiCode = optionItem.status?.emojiCode ?? '';
+    if (!emojiCode || !optionItem.isOneOnOneChat) {
+        return null;
+    }
+
+    const statusText = optionItem.status?.text ?? '';
+    const statusClearAfterDate = optionItem.status?.clearAfter ?? '';
+    const currentSelectedTimezone = currentUserPersonalDetails?.timezone?.selected ?? CONST.DEFAULT_TIME_ZONE.selected;
+    const formattedDate = DateUtils.getStatusUntilDate(translate, statusClearAfterDate, optionItem?.timezone?.selected ?? CONST.DEFAULT_TIME_ZONE.selected, currentSelectedTimezone);
+    const statusContent = formattedDate ? `${statusText ? `${statusText} ` : ''}(${formattedDate})` : statusText;
+
+    return (
+        <Tooltip
+            text={statusContent}
+            shiftVertical={-4}
+        >
+            <Text style={styles.ml1}>{emojiCode}</Text>
+        </Tooltip>
+    );
+}
+
+Status.displayName = 'OptionRow.Status';
+
+export default Status;

src/components/LHNOptionsList/OptionRowLHN/OptionRowLHNCore.tsx

@@ -4,25 +4,22 @@ import {StyleSheet, View} from 'react-native';
 import Icon from '@components/Icon';
 import {useLHNTooltipContext} from '@components/LHNOptionsList/LHNTooltipContext';
 import type {OptionRowLHNProps} from '@components/LHNOptionsList/types';
-import Text from '@components/Text';
-import Tooltip from '@components/Tooltip';
 import getContextMenuAccessibilityHint from '@components/utils/getContextMenuAccessibilityHint';
 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 useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import DateUtils from '@libs/DateUtils';
 import {shouldUseBoldText} from '@libs/OptionsListUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import DescriptiveText from './OptionRow/DescriptiveText';
 import DraftIndicator from './OptionRow/DraftIndicator';
 import ErrorBadge from './OptionRow/ErrorBadge';
 import OnboardingBadge from './OptionRow/OnboardingBadge';
+import Status from './OptionRow/Status';
 import Subtitle from './OptionRow/Subtitle';
 import Title from './OptionRow/Title';
 import OptionRowAvatar from './OptionRowAvatar';
@@ -41,7 +38,6 @@ function OptionRowLHN({isOptionFocused = false, onSelectRow = () => {}, optionIt
     const {isScreenFocused} = useLHNTooltipContext();
 
     const {translate} = useLocalize();
-    const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const isInFocusMode = viewMode === CONST.OPTION_MODE.COMPACT;
     const sidebarInnerRowStyle = StyleSheet.flatten<ViewStyle>(
         isInFocusMode
@@ -67,14 +63,6 @@ function OptionRowLHN({isOptionFocused = false, onSelectRow = () => {}, optionIt
     const hoveredBackgroundColor = !!styles.sidebarLinkHover && 'backgroundColor' in styles.sidebarLinkHover ? styles.sidebarLinkHover.backgroundColor : theme.sidebar;
     const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
 
-    const emojiCode = optionItem.status?.emojiCode ?? '';
-    const statusText = optionItem.status?.text ?? '';
-    const statusClearAfterDate = optionItem.status?.clearAfter ?? '';
-    const currentSelectedTimezone = currentUserPersonalDetails?.timezone?.selected ?? CONST.DEFAULT_TIME_ZONE.selected;
-    const formattedDate = DateUtils.getStatusUntilDate(translate, statusClearAfterDate, optionItem?.timezone?.selected ?? CONST.DEFAULT_TIME_ZONE.selected, currentSelectedTimezone);
-    const statusContent = formattedDate ? `${statusText ? `${statusText} ` : ''}(${formattedDate})` : statusText;
-    const isStatusVisible = !!emojiCode && !!optionItem.isOneOnOneChat;
-
     const subscriptAvatarBorderColor = isOptionFocused ? focusedBackgroundColor : theme.sidebar;
 
     const accessibilityLabel = [
@@ -131,14 +119,7 @@ function OptionRowLHN({isOptionFocused = false, onSelectRow = () => {}, optionIt
                                             testID={testID}
                                         />
                                         <OnboardingBadge optionItem={optionItem} />
-                                        {isStatusVisible && (
-                                            <Tooltip
-                                                text={statusContent}
-                                                shiftVertical={-4}
-                                            >
-                                                <Text style={styles.ml1}>{emojiCode}</Text>
-                                            </Tooltip>
-                                        )}
+                                        <Status optionItem={optionItem} />
                                     </View>
                                     <Subtitle
                                         optionItem={optionItem}