diff --git a/src/pages/Share/ShareTab.tsx b/src/pages/Share/ShareTab.tsx index 461a01943862..447500cfe797 100644 --- a/src/pages/Share/ShareTab.tsx +++ b/src/pages/Share/ShareTab.tsx @@ -1,9 +1,122 @@ -import React from 'react'; -import ShareTabParticipantsSelector from '@components/Share/ShareTabParticipantsSelector'; +import React, {useEffect, useMemo} from 'react'; +import {useOnyx} from 'react-native-onyx'; +import {useOptionsList} from '@components/OptionListContextProvider'; +import SelectionList from '@components/SelectionList'; +import InviteMemberListItem from '@components/SelectionList/InviteMemberListItem'; +import useDebouncedState from '@hooks/useDebouncedState'; +import useFastSearchFromOptions from '@hooks/useFastSearchFromOptions'; +import useLocalize from '@hooks/useLocalize'; +import useNetwork from '@hooks/useNetwork'; +import useScreenWrapperTranstionStatus from '@hooks/useScreenWrapperTransitionStatus'; +import useThemeStyles from '@hooks/useThemeStyles'; +import {getOptimisticChatReport, saveReportDraft, searchInServer} from '@libs/actions/Report'; +import {saveUnknownUserDetails} from '@libs/actions/Share'; +import Navigation from '@libs/Navigation/Navigation'; +import {combineOrderingOfReportsAndPersonalDetails, getHeaderMessage, getSearchOptions} from '@libs/OptionsListUtils'; +import type {OptionData} from '@libs/ReportUtils'; +import StringUtils from '@libs/StringUtils'; +import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; +const defaultListOptions = { + userToInvite: null, + recentReports: [], + personalDetails: [], + currentUserOption: null, + categoryOptions: [], +}; + function ShareTab() { - return ; + const styles = useThemeStyles(); + const {translate} = useLocalize(); + const {isOffline} = useNetwork(); + const [textInputValue, debouncedTextInputValue, setTextInputValue] = useDebouncedState(''); + const [betas] = useOnyx(ONYXKEYS.BETAS); + + const {options, areOptionsInitialized} = useOptionsList(); + const {didScreenTransitionEnd} = useScreenWrapperTranstionStatus(); + const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false}); + + const offlineMessage: string = isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : ''; + const showLoadingPlaceholder = useMemo(() => !areOptionsInitialized || !didScreenTransitionEnd, [areOptionsInitialized, didScreenTransitionEnd]); + + const searchOptions = useMemo(() => { + if (!areOptionsInitialized) { + return defaultListOptions; + } + return getSearchOptions(options, betas ?? [], false); + }, [areOptionsInitialized, betas, options]); + + const filterOptions = useFastSearchFromOptions(searchOptions, {includeUserToInvite: true}); + + const recentReportsOptions = useMemo(() => { + if (textInputValue.trim() === '') { + return searchOptions.recentReports.slice(0, 20); + } + const filteredOptions = filterOptions(textInputValue); + const orderedOptions = combineOrderingOfReportsAndPersonalDetails(filteredOptions, textInputValue, { + sortByReportTypeInSearch: true, + preferChatroomsOverThreads: true, + }); + + const reportOptions: OptionData[] = [...orderedOptions.recentReports, ...orderedOptions.personalDetails]; + if (filteredOptions.userToInvite) { + reportOptions.push(filteredOptions.userToInvite); + } + return reportOptions.slice(0, 20); + }, [filterOptions, searchOptions.recentReports, textInputValue]); + + useEffect(() => { + searchInServer(debouncedTextInputValue.trim()); + }, [debouncedTextInputValue]); + + const styledRecentReports = recentReportsOptions.map((item) => ({ + ...item, + pressableStyle: styles.br2, + text: StringUtils.lineBreaksToSpaces(item.text), + wrapperStyle: [styles.pr3, styles.pl3], + })); + + const [sections, header] = useMemo(() => { + const newSections = []; + newSections.push({title: textInputValue.trim() === '' ? translate('search.recentChats') : undefined, data: styledRecentReports}); + const headerMessage = getHeaderMessage(styledRecentReports.length !== 0, false, textInputValue.trim(), false); + return [newSections, headerMessage]; + }, [textInputValue, styledRecentReports, translate]); + + const onSelectRow = (item: OptionData) => { + let reportID = item?.reportID ?? CONST.DEFAULT_NUMBER_ID; + const accountID = item?.accountID; + if (accountID && !reportID) { + saveUnknownUserDetails(item); + const optimisticReport = getOptimisticChatReport(accountID); + reportID = optimisticReport.reportID; + + saveReportDraft(reportID, optimisticReport).then(() => { + Navigation.navigate(ROUTES.SHARE_DETAILS.getRoute(reportID.toString())); + }); + } else { + Navigation.navigate(ROUTES.SHARE_DETAILS.getRoute(reportID.toString())); + } + }; + + return ( + + ); } export default ShareTab;