Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | 3x | import React, {useEffect} from 'react';
import {View} from 'react-native';
import PrevNextButtons from '@components/PrevNextButtons';
import Text from '@components/Text';
import useOnyx from '@hooks/useOnyx';
import useThemeStyles from '@hooks/useThemeStyles';
import Navigation from '@navigation/Navigation';
import {saveLastSearchParams} from '@userActions/ReportNavigation';
import {search} from '@userActions/Search';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
type MoneyRequestReportNavigationProps = {
reportID?: string;
shouldDisplayNarrowVersion: boolean;
backTo?: string;
};
function MoneyRequestReportNavigation({reportID, shouldDisplayNarrowVersion, backTo}: MoneyRequestReportNavigationProps) {
const [lastSearchQuery] = useOnyx(ONYXKEYS.REPORT_NAVIGATION_LAST_SEARCH_QUERY, {canBeMissing: true});
const [reportsObj] = useOnyx(ONYXKEYS.REPORT_NAVIGATION_REPORT_IDS, {canBeMissing: true});
const rawReports = Object.keys(reportsObj ?? {});
const allReports = rawReports ?? [];
const currentIndex = allReports.indexOf(reportID ?? CONST.REPORT.DEFAULT_REPORT_ID);
const allReportsCount = lastSearchQuery?.previousLengthOfResults ?? 0;
const hideNextButton = !lastSearchQuery?.hasMoreResults && currentIndex === allReports.length - 1;
const hidePrevButton = currentIndex === 0;
const styles = useThemeStyles();
const shouldDisplayNavigationArrows = rawReports && rawReports.length > 0;
useEffect(() => {
if (currentIndex < allReportsCount - 1 || !lastSearchQuery?.queryJSON) {
return;
}
saveLastSearchParams({
...lastSearchQuery,
previousLengthOfResults: allReports.length,
});
}, [currentIndex, allReportsCount, allReports.length, lastSearchQuery?.queryJSON, lastSearchQuery]);
const goToReportId = (reportId?: string) => {
if (!reportId) {
return;
}
Navigation.navigate(
ROUTES.SEARCH_MONEY_REQUEST_REPORT.getRoute({
reportID: reportId,
backTo: backTo ?? '',
}),
{forceReplace: true},
);
};
const goToNextReport = () => {
if (currentIndex === -1 || allReports.length === 0) {
return '';
}
if (currentIndex > allReportsCount * 0.75 && lastSearchQuery?.hasMoreResults) {
const newOffset = (lastSearchQuery.offset ?? 0) + CONST.SEARCH.RESULTS_PAGE_SIZE;
search({
queryJSON: lastSearchQuery.queryJSON,
offset: newOffset,
prevReports: allReports,
shouldCalculateTotals: false,
searchKey: lastSearchQuery.searchKey,
});
}
const nextIndex = (currentIndex + 1) % allReports.length;
goToReportId(allReports.at(nextIndex));
};
const goToPrevReport = () => {
if (currentIndex === -1 || allReports.length === 0) {
return '';
}
const prevIndex = (currentIndex - 1) % allReports.length;
goToReportId(allReports.at(prevIndex));
};
return (
shouldDisplayNavigationArrows && (
<View style={[styles.flexRow, styles.alignItemsCenter, styles.gap2]}>
{!shouldDisplayNarrowVersion && <Text style={styles.textSupporting}>{`${currentIndex + 1} of ${allReportsCount}`}</Text>}
<PrevNextButtons
isPrevButtonDisabled={hidePrevButton}
isNextButtonDisabled={hideNextButton}
onNext={goToNextReport}
onPrevious={goToPrevReport}
/>
</View>
)
);
}
MoneyRequestReportNavigation.displayName = 'MoneyRequestReportNavigation';
export default MoneyRequestReportNavigation;
|