refactor: extract LHNEmptyState, conditionally render from SidebarLinks

Author: BartekObudzinski

src/components/LHNOptionsList/LHNEmptyState.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import {View} from 'react-native';
+import type {BlockingViewProps} from '@components/BlockingViews/BlockingView';
+import BlockingView from '@components/BlockingViews/BlockingView';
+import Icon from '@components/Icon';
+import TextBlock from '@components/TextBlock';
+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';
+import useEmptyLHNIllustration from './useEmptyLHNIllustration';
+
+function LHNEmptyState() {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const expensifyIcons = useMemoizedLazyExpensifyIcons(['MagnifyingGlass', 'Plus']);
+    const emptyLHNIllustration = useEmptyLHNIllustration();
+
+    const subtitle = (
+        <View style={[styles.alignItemsCenter, styles.flexRow, styles.justifyContentCenter, styles.flexWrap, styles.textAlignCenter]}>
+            <TextBlock
+                color={theme.textSupporting}
+                textStyles={[styles.textAlignCenter, styles.textNormal]}
+                text={translate('common.emptyLHN.subtitleText1')}
+            />
+            <Icon
+                src={expensifyIcons.MagnifyingGlass}
+                width={variables.emptyLHNIconWidth}
+                height={variables.emptyLHNIconHeight}
+                fill={theme.icon}
+                small
+                additionalStyles={styles.mh1}
+            />
+            <TextBlock
+                color={theme.textSupporting}
+                textStyles={[styles.textAlignCenter, styles.textNormal]}
+                text={translate('common.emptyLHN.subtitleText2')}
+            />
+            <Icon
+                src={expensifyIcons.Plus}
+                width={variables.emptyLHNIconWidth}
+                height={variables.emptyLHNIconHeight}
+                fill={theme.icon}
+                small
+                additionalStyles={styles.mh1}
+            />
+            <TextBlock
+                color={theme.textSupporting}
+                textStyles={[styles.textAlignCenter, styles.textNormal]}
+                text={translate('common.emptyLHN.subtitleText3')}
+            />
+        </View>
+    );
+
+    return (
+        <BlockingView
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...(emptyLHNIllustration as BlockingViewProps)}
+            title={translate('common.emptyLHN.title')}
+            CustomSubtitle={subtitle}
+            accessibilityLabel={translate('common.emptyLHN.title')}
+        />
+    );
+}
+
+export default LHNEmptyState;

src/pages/inbox/sidebar/SidebarLinks.tsx

@@ -3,8 +3,10 @@ import {StyleSheet, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {EdgeInsets} from 'react-native-safe-area-context';
 import type {ValueOf} from 'type-fest';
+import LHNEmptyState from '@components/LHNOptionsList/LHNEmptyState';
 import LHNOptionsList from '@components/LHNOptionsList/LHNOptionsList';
 import OptionsListSkeletonView from '@components/OptionsListSkeletonView';
+import useConfirmReadyToOpenApp from '@hooks/useConfirmReadyToOpenApp';
 import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -40,6 +42,8 @@ function SidebarLinks({insets, optionListItems, priorityMode = CONST.PRIORITY_MO
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const [isLoadingReportData = true] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA);
 
+    useConfirmReadyToOpenApp();
+
     useEffect(() => {
         ReportActionContextMenu.hideContextMenu(false);
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -84,18 +88,26 @@ function SidebarLinks({insets, optionListItems, priorityMode = CONST.PRIORITY_MO
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const contentContainerStyles = useMemo(() => StyleSheet.flatten([styles.pt2, {paddingBottom: StyleUtils.getSafeAreaMargins(insets).marginBottom}]), [insets]);
 
+    const shouldShowEmptyLHN = optionListItems.length === 0 && !isLoadingReportData;
+
     return (
         <View style={[styles.flex1, styles.h100]}>
             <View style={[styles.pRelative, styles.flex1]}>
-                <LHNOptionsList
-                    style={styles.flex1}
-                    contentContainerStyles={contentContainerStyles}
-                    data={optionListItems}
-                    onSelectRow={showReportPage}
-                    shouldDisableFocusOptions={shouldUseNarrowLayout}
-                    optionMode={viewMode}
-                    onFirstItemRendered={setSidebarLoaded}
-                />
+                {shouldShowEmptyLHN ? (
+                    <View style={[styles.flex1, styles.emptyLHNWrapper]}>
+                        <LHNEmptyState />
+                    </View>
+                ) : (
+                    <LHNOptionsList
+                        style={styles.flex1}
+                        contentContainerStyles={contentContainerStyles}
+                        data={optionListItems}
+                        onSelectRow={showReportPage}
+                        shouldDisableFocusOptions={shouldUseNarrowLayout}
+                        optionMode={viewMode}
+                        onFirstItemRendered={setSidebarLoaded}
+                    />
+                )}
                 {isLoadingReportData && optionListItems?.length === 0 && (
                     <View style={[StyleSheet.absoluteFill, styles.appBG, styles.mt3]}>
                         <OptionsListSkeletonView