[Search v2] [App] Use new query syntax #45617
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -23,35 +23,35 @@ import CONST from '@src/CONST'; | |
| import ONYXKEYS from '@src/ONYXKEYS'; | ||
| import ROUTES from '@src/ROUTES'; | ||
| import type SearchResults from '@src/types/onyx/SearchResults'; | ||
| import type {SearchDataTypes} from '@src/types/onyx/SearchResults'; | ||
| import {useSearchContext} from './SearchContext'; | ||
| import SearchListWithHeader from './SearchListWithHeader'; | ||
| import SearchPageHeader from './SearchPageHeader'; | ||
| import type {SearchColumnType, SearchQueryJSON, SearchStatus, SortOrder} from './types'; | ||
|
|
||
| type SearchProps = { | ||
| queryJSON: SearchQueryJSON; | ||
| policyIDs?: string; | ||
| isMobileSelectionModeActive?: boolean; | ||
| setIsMobileSelectionModeActive?: (isMobileSelectionModeActive: boolean) => void; | ||
| }; | ||
|
|
||
| const sortableSearchTabs: SearchStatus[] = [CONST.SEARCH.STATUS.ALL]; | ||
| const transactionItemMobileHeight = 100; | ||
| const reportItemTransactionHeight = 52; | ||
| const listItemPadding = 12; // this is equivalent to 'mb3' on every transaction/report list item | ||
| const searchHeaderHeight = 54; | ||
| function Search({queryJSON, policyIDs, isMobileSelectionModeActive, setIsMobileSelectionModeActive}: SearchProps) { | ||
| const {isOffline} = useNetwork(); | ||
| const styles = useThemeStyles(); | ||
| const {isLargeScreenWidth, isSmallScreenWidth} = useWindowDimensions(); | ||
| const navigation = useNavigation<StackNavigationProp<AuthScreensParamList>>(); | ||
| const lastSearchResultsRef = useRef<OnyxEntry<SearchResults>>(); | ||
| const {setCurrentSearchHash} = useSearchContext(); | ||
| const [offset, setOffset] = React.useState(0); | ||
|
|
||
| const {status, sortBy, sortOrder, hash} = queryJSON; | ||
|
|
||
| const [currentSearchResults] = useOnyx(`${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`); | ||
|
|
||
| const getItemHeight = useCallback( | ||
|
|
@@ -96,9 +96,10 @@ function Search({query, policyIDs, sortBy, sortOrder, isMobileSelectionModeActiv | |
| } | ||
|
|
||
| setCurrentSearchHash(hash); | ||
|
|
||
| SearchActions.search({hash, query: status, policyIDs, offset, sortBy, sortOrder}); | ||
| // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps | ||
| }, [hash, isOffline, offset]); | ||
|
|
||
| const isDataLoaded = searchResults?.data !== undefined; | ||
| const shouldShowLoadingState = !isOffline && !isDataLoaded; | ||
|
|
@@ -108,7 +109,7 @@ function Search({query, policyIDs, sortBy, sortOrder, isMobileSelectionModeActiv | |
| return ( | ||
| <> | ||
| <SearchPageHeader | ||
| status={status} | ||
| hash={hash} | ||
| /> | ||
| <SearchRowSkeleton shouldAnimate /> | ||
|
|
@@ -122,7 +123,7 @@ function Search({query, policyIDs, sortBy, sortOrder, isMobileSelectionModeActiv | |
| return ( | ||
| <> | ||
| <SearchPageHeader | ||
| status={status} | ||
| hash={hash} | ||
| /> | ||
| <EmptySearchView /> | ||
|
|
@@ -143,15 +144,14 @@ function Search({query, policyIDs, sortBy, sortOrder, isMobileSelectionModeActiv | |
| SearchActions.createTransactionThread(hash, item.transactionID, reportID, item.moneyRequestReportActionID); | ||
| } | ||
|
|
||
| Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute(reportID)); | ||
| }; | ||
|
|
||
| const fetchMoreResults = () => { | ||
| if (!searchResults?.search?.hasMoreResults || shouldShowLoadingState || shouldShowLoadingMoreItems) { | ||
| return; | ||
| } | ||
| setOffset(offset + CONST.SEARCH.RESULTS_PAGE_SIZE); | ||
|
Contributor
There was a problem hiding this comment. We increased the offset here but we forgot to reset it when we changed the tab, once offset was increased here and we changed the tab, it kept the old offset which led to the wrong data arriving. |
||
| }; | ||
|
|
||
| const type = SearchUtils.getSearchType(searchResults?.search); | ||
|
|
@@ -167,21 +167,22 @@ function Search({query, policyIDs, sortBy, sortOrder, isMobileSelectionModeActiv | |
| const sortedData = SearchUtils.getSortedSections(type, data, sortBy, sortOrder); | ||
|
|
||
| const onSortPress = (column: SearchColumnType, order: SortOrder) => { | ||
| const currentSearchParams = SearchUtils.getCurrentSearchParams(); | ||
| const currentQueryJSON = SearchUtils.buildSearchQueryJSON(currentSearchParams.q, policyIDs); | ||
|
|
||
| const newQuery = SearchUtils.buildSearchQueryString({...currentQueryJSON, sortBy: column, sortOrder: order}); | ||
| navigation.setParams({q: newQuery}); | ||
| }; | ||
|
|
||
| const isSortingAllowed = sortableSearchTabs.includes(status); | ||
|
|
||
| const shouldShowYear = SearchUtils.shouldShowYear(searchResults?.data); | ||
|
|
||
| const canSelectMultiple = isSmallScreenWidth ? isMobileSelectionModeActive : true; | ||
|
|
||
| return ( | ||
| <SearchListWithHeader | ||
| status={status} | ||
| hash={hash} | ||
| data={sortedData} | ||
| searchType={searchResults?.search?.type as SearchDataTypes} | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you please add a comment explaining why we are introducing the
isCustomQueryparam and what it is/will be doing?Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Adam is back on Tuesday next week, and I simply don't know why this is needed, so we need to wait for him to add the comment.
Perhaps we could merge without it, I will ask @luacmartins
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is needed for filters since selecting any filter will navigate the user to the Search Results page that's being implemented here. I know it's a bit out of place now, but we should just leave this in place.