Skip to content

Commit 1b9683b

Browse files
sumo-sloniksumo-slonik
committed
fix offline layout
1 parent fd22d6b commit 1b9683b

3 files changed

Lines changed: 57 additions & 86 deletions

File tree

‎src/pages/Search/SearchPage.tsx‎

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import DragAndDropProvider from '@components/DragAndDrop/Provider';
1111
import DropZoneUI from '@components/DropZone/DropZoneUI';
1212
import type {PaymentMethodType} from '@components/KYCWall/types';
1313
import type {PopoverMenuItem} from '@components/PopoverMenu';
14-
import ScreenWrapper from '@components/ScreenWrapper';
1514
import {ScrollOffsetContext} from '@components/ScrollOffsetContextProvider';
1615
import {useSearchContext} from '@components/Search/SearchContext';
1716
import type {SearchHeaderOptionValue} from '@components/Search/SearchPageHeader/SearchPageHeader';
@@ -775,17 +774,8 @@ function SearchPage({route}: SearchPageProps) {
775774
}
776775

777776
const metadata = searchResults?.search;
778-
const shouldShowOfflineIndicator = !!searchResults?.data;
779777
const shouldShowFooter = !!metadata?.count || selectedTransactionsKeys.length > 0;
780778

781-
const offlineIndicatorStyle = useMemo(() => {
782-
if (shouldShowFooter) {
783-
return [styles.mtAuto, styles.pAbsolute, styles.h10, styles.b0];
784-
}
785-
786-
return [styles.mtAuto];
787-
}, [shouldShowFooter, styles]);
788-
789779
// Handles video player cleanup:
790780
// 1. On mount: Resets player if navigating from report screen
791781
// 2. On unmount: Stops video when leaving this screen
@@ -885,12 +875,7 @@ function SearchPage({route}: SearchPageProps) {
885875
}, [setIsDownloadExportModalVisible]);
886876

887877
return (
888-
<ScreenWrapper
889-
testID={SearchPageNarrow.displayName}
890-
style={styles.pv0}
891-
offlineIndicatorStyle={styles.mtAuto}
892-
shouldShowOfflineIndicator={!!searchResults}
893-
>
878+
<>
894879
<Animated.View style={[styles.flex1]}>
895880
{shouldUseNarrowLayout ? (
896881
<DragAndDropProvider>
@@ -938,8 +923,6 @@ function SearchPage({route}: SearchPageProps) {
938923
initScanRequest={initScanRequest}
939924
PDFValidationComponent={PDFValidationComponent}
940925
ErrorModal={ErrorModal}
941-
shouldShowOfflineIndicator={shouldShowOfflineIndicator}
942-
offlineIndicatorStyle={offlineIndicatorStyle}
943926
shouldShowFooter={shouldShowFooter}
944927
/>
945928
)}
@@ -1005,7 +988,7 @@ function SearchPage({route}: SearchPageProps) {
1005988
)}
1006989
</View>
1007990
)}
1008-
</ScreenWrapper>
991+
</>
1009992
);
1010993
}
1011994

‎src/pages/Search/SearchPageNarrow.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,6 @@ function SearchPageNarrow({
176176
<ScreenWrapper
177177
testID={SearchPageNarrow.displayName}
178178
shouldEnableMaxHeight
179-
offlineIndicatorStyle={styles.mtAuto}
180179
bottomContent={<NavigationTabBar selectedTab={NAVIGATION_TABS.SEARCH} />}
181180
headerGapStyles={styles.searchHeaderGap}
182181
shouldShowOfflineIndicator={!!searchResults}

‎src/pages/Search/SearchPageWide.tsx‎

Lines changed: 55 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,6 @@ type SearchPageWideProps = {
4545
initScanRequest: (e: DragEvent) => void;
4646
PDFValidationComponent: React.ReactNode;
4747
ErrorModal: React.ReactNode;
48-
shouldShowOfflineIndicator: boolean;
49-
offlineIndicatorStyle: Array<Record<string, unknown>>;
5048
shouldShowFooter: boolean;
5149
};
5250

@@ -68,8 +66,6 @@ function SearchPageWide({
6866
initScanRequest,
6967
PDFValidationComponent,
7068
ErrorModal,
71-
shouldShowOfflineIndicator,
72-
offlineIndicatorStyle,
7369
shouldShowFooter,
7470
}: SearchPageWideProps) {
7571
const styles = useThemeStyles();
@@ -79,73 +75,66 @@ function SearchPageWide({
7975
const expensifyIcons = useMemoizedLazyExpensifyIcons(['SmartScan'] as const);
8076
const handleOnBackButtonPress = () => Navigation.goBack(ROUTES.SEARCH_ROOT.getRoute({query: buildCannedSearchQuery()}));
8177

82-
if (!queryJSON) {
83-
return (
84-
<View style={styles.searchSplitContainer}>
85-
<ScreenWrapper
86-
testID={Search.displayName}
87-
shouldShowOfflineIndicatorInWideScreen={shouldShowOfflineIndicator}
88-
offlineIndicatorStyle={offlineIndicatorStyle}
89-
>
90-
<FullPageNotFoundView
91-
shouldShow={!queryJSON}
92-
onBackButtonPress={handleOnBackButtonPress}
93-
shouldShowLink={false}
94-
/>
95-
</ScreenWrapper>
96-
</View>
97-
);
98-
}
99-
10078
return (
10179
<View style={styles.searchSplitContainer}>
10280
<ScreenWrapper
10381
testID={Search.displayName}
104-
shouldShowOfflineIndicatorInWideScreen={shouldShowOfflineIndicator}
105-
offlineIndicatorStyle={offlineIndicatorStyle}
82+
shouldEnableMaxHeight
83+
headerGapStyles={[styles.searchHeaderGap, styles.h0]}
10684
>
107-
{PDFValidationComponent}
108-
<SearchPageHeader
109-
queryJSON={queryJSON}
110-
headerButtonsOptions={headerButtonsOptions}
111-
handleSearch={handleSearchAction}
112-
isMobileSelectionModeEnabled={isMobileSelectionModeEnabled}
113-
/>
114-
<SearchFiltersBar
115-
queryJSON={queryJSON}
116-
headerButtonsOptions={headerButtonsOptions}
117-
isMobileSelectionModeEnabled={isMobileSelectionModeEnabled}
118-
currentSelectedPolicyID={selectedPolicyIDs?.at(0)}
119-
currentSelectedReportID={selectedTransactionReportIDs?.at(0) ?? selectedReportIDs?.at(0)}
120-
confirmPayment={onBulkPaySelected}
121-
latestBankItems={latestBankItems}
122-
/>
123-
<Search
124-
key={queryJSON.hash}
125-
queryJSON={queryJSON}
126-
searchResults={searchResults}
127-
handleSearch={handleSearchAction}
128-
isMobileSelectionModeEnabled={isMobileSelectionModeEnabled}
129-
onSearchListScroll={scrollHandler}
130-
onSortPressedCallback={onSortPressedCallback}
131-
searchRequestResponseStatusCode={searchRequestResponseStatusCode}
132-
/>
133-
{shouldShowFooter && (
134-
<SearchPageFooter
135-
count={footerData.count}
136-
total={footerData.total}
137-
currency={footerData.currency}
138-
/>
139-
)}
140-
<DragAndDropConsumer onDrop={initScanRequest}>
141-
<DropZoneUI
142-
icon={expensifyIcons.SmartScan}
143-
dropTitle={translate('dropzone.scanReceipts')}
144-
dropStyles={styles.receiptDropOverlay(true)}
145-
dropTextStyles={styles.receiptDropText}
146-
dashedBorderStyles={[styles.dropzoneArea, styles.easeInOpacityTransition, styles.activeDropzoneDashedBorder(theme.receiptDropBorderColorActive, true)]}
147-
/>
148-
</DragAndDropConsumer>
85+
<FullPageNotFoundView
86+
shouldForceFullScreen
87+
shouldShow={!queryJSON}
88+
onBackButtonPress={handleOnBackButtonPress}
89+
shouldShowLink={false}
90+
>
91+
{!!queryJSON && (
92+
<>
93+
{PDFValidationComponent}
94+
<SearchPageHeader
95+
queryJSON={queryJSON}
96+
headerButtonsOptions={headerButtonsOptions}
97+
handleSearch={handleSearchAction}
98+
isMobileSelectionModeEnabled={isMobileSelectionModeEnabled}
99+
/>
100+
<SearchFiltersBar
101+
queryJSON={queryJSON}
102+
headerButtonsOptions={headerButtonsOptions}
103+
isMobileSelectionModeEnabled={isMobileSelectionModeEnabled}
104+
currentSelectedPolicyID={selectedPolicyIDs?.at(0)}
105+
currentSelectedReportID={selectedTransactionReportIDs?.at(0) ?? selectedReportIDs?.at(0)}
106+
confirmPayment={onBulkPaySelected}
107+
latestBankItems={latestBankItems}
108+
/>
109+
<Search
110+
key={queryJSON.hash}
111+
queryJSON={queryJSON}
112+
searchResults={searchResults}
113+
handleSearch={handleSearchAction}
114+
isMobileSelectionModeEnabled={isMobileSelectionModeEnabled}
115+
onSearchListScroll={scrollHandler}
116+
onSortPressedCallback={onSortPressedCallback}
117+
searchRequestResponseStatusCode={searchRequestResponseStatusCode}
118+
/>
119+
{shouldShowFooter && (
120+
<SearchPageFooter
121+
count={footerData.count}
122+
total={footerData.total}
123+
currency={footerData.currency}
124+
/>
125+
)}
126+
<DragAndDropConsumer onDrop={initScanRequest}>
127+
<DropZoneUI
128+
icon={expensifyIcons.SmartScan}
129+
dropTitle={translate('dropzone.scanReceipts')}
130+
dropStyles={styles.receiptDropOverlay(true)}
131+
dropTextStyles={styles.receiptDropText}
132+
dashedBorderStyles={[styles.dropzoneArea, styles.easeInOpacityTransition, styles.activeDropzoneDashedBorder(theme.receiptDropBorderColorActive, true)]}
133+
/>
134+
</DragAndDropConsumer>
135+
</>
136+
)}
137+
</FullPageNotFoundView>
149138
</ScreenWrapper>
150139
{ErrorModal}
151140
</View>

0 commit comments

Comments
 (0)