Function ThreadPickerModal

web/modals/threads/thread-picker-modal.react.js:54–126

(props: Props)

};

function ThreadPickerModal(props: Props): React.Node {
  const { createNewEntry, ...modalProps } = props;

  const onScreenThreadInfos = useOnScreenEntryEditableThreadInfos();
  const searchIndex = useGlobalThreadSearchIndex();

  invariant(
    onScreenThreadInfos.length > 0,
    "ThreadPicker can't be open when onScreenThreadInfos is empty",
  );

  const [searchText, setSearchText] = React.useState<string>('');
  const [searchResults, setSearchResults] = React.useState<
    $ReadOnlyArray<ThreadInfo>,
  >([]);

  const searchRef = React.useRef<?HTMLInputElement>();

  React.useEffect(() => {
    searchRef.current?.focus();
  }, []);

  const onChangeSearchText = React.useCallback(
    (text: string) => {
      const results = searchIndex.getSearchResults(text);
      setSearchText(text);
      const threadInfoResults = reorderThreadSearchResults(
        onScreenThreadInfos,
        results,
      );
      setSearchResults(threadInfoResults);
    },
    [searchIndex, onScreenThreadInfos],
  );

  const threads = React.useMemo(
    () => (searchText ? searchResults : onScreenThreadInfos),
    [searchText, onScreenThreadInfos, searchResults],
  );

  const threadPickerContent = React.useMemo(() => {
    const options = threads.map(threadInfo => (
      <ThreadPickerOption
        threadInfo={threadInfo}
        createNewEntry={createNewEntry}
        key={threadInfo.id}
        onCloseModal={modalProps.onClose}
      />
    ));

    if (options.length === 0 && searchText.length > 0) {
      return (
        <div className={css.noResultsText}>No results for {searchText}</div>
      );
    } else {
      return options;
    }
  }, [threads, createNewEntry, modalProps.onClose, searchText]);