add offline indicator for IOURequestStepCategory

Expensify · Sep 29, 2024 · e4a7807 · e4a7807
1 parent e262b38
commit e4a7807
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/src/components/CategoryPicker.tsx b/src/components/CategoryPicker.tsx
@@ -2,6 +2,7 @@ import React, {useMemo} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -20,9 +21,11 @@ function CategoryPicker({selectedCategory, policyID, onSubmit}: CategoryPickerPr
     const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`);
     const [policyCategoriesDraft] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES_DRAFT}${policyID}`);
     const [policyRecentlyUsedCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES}${policyID}`);
+    const {isOffline} = useNetwork();
 
     const {translate} = useLocalize();
     const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState('');
+    const offlineMessage = isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : '';
 
     const selectedOptions = useMemo(() => {
         if (!selectedCategory) {
@@ -73,6 +76,7 @@ function CategoryPicker({selectedCategory, policyID, onSubmit}: CategoryPickerPr
             headerMessage={headerMessage}
             textInputValue={searchValue}
             textInputLabel={shouldShowTextInput ? translate('common.search') : undefined}
+            textInputHint={offlineMessage}
             onChangeText={setSearchValue}
             onSelectRow={onSubmit}
             ListItem={RadioListItem}

diff --git a/src/pages/iou/request/step/IOURequestStepCategory.tsx b/src/pages/iou/request/step/IOURequestStepCategory.tsx
@@ -6,11 +6,13 @@ import Button from '@components/Button';
 import CategoryPicker from '@components/CategoryPicker';
 import FixedFooter from '@components/FixedFooter';
 import * as Illustrations from '@components/Icon/Illustrations';
+import OfflineIndicator from '@components/OfflineIndicator';
 import type {ListItem} from '@components/SelectionList/types';
 import Text from '@components/Text';
 import WorkspaceEmptyStateSection from '@components/WorkspaceEmptyStateSection';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
@@ -93,6 +95,7 @@ function IOURequestStepCategory({
     const {isOffline} = useNetwork({onReconnect: fetchData});
     const isLoading = !isOffline && policyCategories === undefined;
     const shouldShowEmptyState = !isLoading && !shouldShowCategory;
+    const {isSmallScreenWidth} = useResponsiveLayout();
 
     useEffect(() => {
         fetchData();
@@ -176,6 +179,7 @@ function IOURequestStepCategory({
                             />
                         </FixedFooter>
                     )}
+                    {!isSmallScreenWidth && <OfflineIndicator />}
                 </View>
             )}
             {!shouldShowEmptyState && !isLoading && (