20354 task share destination selector refactor

src/components/SelectionList/BaseSelectionList.tsx

@@ -58,6 +58,7 @@ function BaseSelectionList<TItem extends User | RadioItem>(
  shouldShowTooltips = true,
  shouldUseDynamicMaxToRenderPerBatch = false,
  rightHandSideComponent,
+ isLoadingNewOptions = false,
  }: BaseSelectionListProps<TItem>,
  inputRef: ForwardedRef<RNTextInput>,
 ) {
@@ -417,6 +418,7 @@ function BaseSelectionList<TItem extends User | RadioItem>(
  spellCheck={false}
  onSubmitEditing={selectFocusedOption}
  blurOnSubmit={!!flattenedSections.allOptions.length}
+ isLoading={isLoadingNewOptions}
  />
  </View>
  )}

src/components/SelectionList/types.ts

@@ -230,6 +230,9 @@ type BaseSelectionListProps<TItem extends User | RadioItem> = Partial<ChildrenPr
 
  /** Component to display on the right side of each child */
  rightHandSideComponent?: ((item: TItem) => ReactElement<TItem>) | ReactElement | null;
+
+ /** Whether to show the loading indicator for new options */
+ isLoadingNewOptions?: boolean;
 };
 
 type ItemLayout = {

src/pages/tasks/TaskShareDestinationSelectorModal.js

@@ -1,154 +1,103 @@
-/* eslint-disable es/no-optional-chaining */
+import keys from 'lodash/keys';
+import reduce from 'lodash/reduce';
 import PropTypes from 'prop-types';
-import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import React, {useEffect, useMemo} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import OptionsSelector from '@components/OptionsSelector';
+import {usePersonalDetails} from '@components/OnyxProvider';
 import ScreenWrapper from '@components/ScreenWrapper';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useAutoFocusInput from '@hooks/useAutoFocusInput';
-import useNetwork from '@hooks/useNetwork';
+import SelectionList from '@components/SelectionList';
+import useDebouncedState from '@hooks/useDebouncedState';
+import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Report from '@libs/actions/Report';
-import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
-import personalDetailsPropType from '@pages/personalDetailsPropType';
 import reportPropTypes from '@pages/reportPropTypes';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
 const propTypes = {
- /* Onyx Props */
-
- /** Beta features list */
- betas: PropTypes.arrayOf(PropTypes.string),
-
- /** All of the personal details for everyone */
- personalDetails: PropTypes.objectOf(personalDetailsPropType),
-
  /** All reports shared with the user */
  reports: PropTypes.objectOf(reportPropTypes),
-
- /** Whether we are searching for reports in the server */
+ /** Whether or not we are searching for reports on the server */
  isSearchingForReports: PropTypes.bool,
-
- ...withLocalizePropTypes,
 };
 
 const defaultProps = {
- betas: [],
- personalDetails: {},
  reports: {},
  isSearchingForReports: false,
 };
 
-function TaskShareDestinationSelectorModal(props) {
- const styles = useThemeStyles();
- const [searchValue, setSearchValue] = useState('');
- const [headerMessage, setHeaderMessage] = useState('');
- const [filteredRecentReports, setFilteredRecentReports] = useState([]);
+const selectReportHandler = (option) => {
+ if (!option || !option.reportID) {
+ return;
+ }
 
- const {inputCallbackRef} = useAutoFocusInput();
- const {isSearchingForReports} = props;
- const {isOffline} = useNetwork();
+ Task.setShareDestinationValue(option.reportID);
+ Navigation.goBack(ROUTES.NEW_TASK);
+};
 
- const filteredReports = useMemo(() => {
- const reports = {};
- _.keys(props.reports).forEach((reportKey) => {
- if (
- !ReportUtils.canUserPerformWriteAction(props.reports[reportKey]) ||
- !ReportUtils.canCreateTaskInReport(props.reports[reportKey]) ||
- ReportUtils.isCanceledTaskReport(props.reports[reportKey])
- ) {
- return;
+const reportFilter = (reports) =>
+ reduce(
+ keys(reports),
+ (filtered, reportKey) => {
+ const report = reports[reportKey];
+ if (ReportUtils.canUserPerformWriteAction(report) && ReportUtils.canCreateTaskInReport(report) && !ReportUtils.isCanceledTaskReport(report)) {
+ return {...filtered, [reportKey]: report};
  }
- reports[reportKey] = props.reports[reportKey];
- });
- return reports;
- }, [props.reports]);
- const updateOptions = useCallback(() => {
- const {recentReports} = OptionsListUtils.getShareDestinationOptions(filteredReports, props.personalDetails, props.betas, searchValue.trim(), [], CONST.EXPENSIFY_EMAILS, true);
-
- setHeaderMessage(OptionsListUtils.getHeaderMessage(recentReports?.length !== 0, false, searchValue));
-
- setFilteredRecentReports(recentReports);
- }, [props, searchValue, filteredReports]);
-
- useEffect(() => {
- const debouncedSearch = _.debounce(updateOptions, 150);
- debouncedSearch();
- return () => {
- debouncedSearch.cancel();
- };
- }, [updateOptions]);
+ return filtered;
+ },
+ {},
+ );
 
- const getSections = () => {
- const sections = [];
- let indexOffset = 0;
+function TaskShareDestinationSelectorModal({reports, isSearchingForReports}) {
+ const styles = useThemeStyles();
+ const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState('');
+ const {translate} = useLocalize();
+ const personalDetails = usePersonalDetails();
 
- if (filteredRecentReports?.length > 0) {
- sections.push({
- data: filteredRecentReports,
- shouldShow: true,
- indexOffset,
- });
- indexOffset += filteredRecentReports?.length;
- }
+ const options = useMemo(() => {
+ const filteredReports = reportFilter(reports);
 
- return sections;
- };
+ const {recentReports} = OptionsListUtils.getShareDestinationOptions(filteredReports, personalDetails, [], debouncedSearchValue.trim(), [], CONST.EXPENSIFY_EMAILS, true);
 
- const selectReport = (option) => {
- if (!option) {
- return;
- }
+ const headerMessage = OptionsListUtils.getHeaderMessage(recentReports && recentReports.length !== 0, false, debouncedSearchValue);
 
- if (option.reportID) {
- Task.setShareDestinationValue(option.reportID);
- Navigation.goBack(ROUTES.NEW_TASK);
- }
- };
+ const sections = recentReports && recentReports.length > 0 ? [{data: recentReports, shouldShow: true}] : [];
 
- // When search term updates we will fetch any reports
- const setSearchTermAndSearchInServer = useCallback((text = '') => {
- Report.searchInServer(text);
- setSearchValue(text);
- }, []);
+ return {sections, headerMessage};
+ }, [personalDetails, reports, debouncedSearchValue]);
 
- const sections = getSections();
+ useEffect(() => {
+ Report.searchInServer(debouncedSearchValue);
+ }, [debouncedSearchValue]);
 
  return (
  <ScreenWrapper
  includeSafeAreaPaddingBottom={false}
- testID={TaskShareDestinationSelectorModal.displayName}
+ testID="TaskShareDestinationSelectorModal"
  >
  {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
  <>
  <HeaderWithBackButton
- title={props.translate('newTaskPage.shareSomewhere')}
+ title={translate('newTaskPage.shareSomewhere')}
  onBackButtonPress={() => Navigation.goBack(ROUTES.NEW_TASK)}
  />
  <View style={[styles.flex1, styles.w100, styles.pRelative]}>
- <OptionsSelector
- sections={sections}
- onSelectRow={selectReport}
- onChangeText={setSearchTermAndSearchInServer}
- headerMessage={headerMessage}
- hideSection
- Headers
- showTitleTooltip
- shouldShowOptions={didScreenTransitionEnd}
- textInputLabel={props.translate('optionsSelector.nameEmailOrPhoneNumber')}
- textInputAlert={isOffline ? `${props.translate('common.youAppearToBeOffline')} ${props.translate('search.resultsAreLimited')}` : ''}
+ <SelectionList
+ sections={didScreenTransitionEnd ? options.sections : CONST.EMPTY_ARRAY}
+ onSelectRow={selectReportHandler}
+ onChangeText={setSearchValue}
+ textInputValue={searchValue}
+ headerMessage={options.headerMessage}
+ textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
  safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
- autoFocus={false}
- ref={inputCallbackRef}
+ showLoadingPlaceholder={!didScreenTransitionEnd}
  isLoadingNewOptions={isSearchingForReports}
  />
  </View>
@@ -158,25 +107,15 @@ function TaskShareDestinationSelectorModal(props) {
  );
 }
 
-TaskShareDestinationSelectorModal.displayName = 'TaskShareDestinationSelectorModal';
 TaskShareDestinationSelectorModal.propTypes = propTypes;
 TaskShareDestinationSelectorModal.defaultProps = defaultProps;
 
-export default compose(
- withLocalize,
- withOnyx({
- reports: {
- key: ONYXKEYS.COLLECTION.REPORT,
- },
- personalDetails: {
- key: ONYXKEYS.PERSONAL_DETAILS_LIST,
- },
- betas: {
- key: ONYXKEYS.BETAS,
- },
- isSearchingForReports: {
- key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS,
- initWithStoredValues: false,
- },
- }),
-)(TaskShareDestinationSelectorModal);
+export default withOnyx({
+ reports: {
+ key: ONYXKEYS.COLLECTION.REPORT,
+ },
+ isSearchingForReports: {
+ key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS,
+ initWithStoredValues: false,
+ },
+})(TaskShareDestinationSelectorModal);