diff --git a/web/modals/search/message-search-modal.react.js b/web/modals/search/message-search-modal.react.js index ab382edef..c155c03c0 100644 --- a/web/modals/search/message-search-modal.react.js +++ b/web/modals/search/message-search-modal.react.js @@ -1,158 +1,158 @@ // @flow import * as React from 'react'; import { useModalContext } from 'lib/components/modal-provider.react.js'; import type { ThreadInfo } from 'lib/types/thread-types.js'; import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js'; import css from './message-search-modal.css'; import { useParseSearchResults } from './message-search-utils.react.js'; import { useTooltipContext } from '../../chat/tooltip-provider.js'; import Button from '../../components/button.react.js'; import MessageResult from '../../components/message-result.react.js'; import Search from '../../components/search.react.js'; import LoadingIndicator from '../../loading-indicator.react.js'; import { useMessageSearchContext } from '../../search/message-search-state-provider.react.js'; import Modal from '../modal.react.js'; type ContentProps = { +threadInfo: ThreadInfo, }; function MessageSearchModal(props: ContentProps): React.Node { const { threadInfo } = props; const { getQuery, setQuery, clearQuery, searchMessages, getSearchResults, getEndReached, } = useMessageSearchContext(); const [input, setInput] = React.useState(getQuery(threadInfo.id)); const onPressSearch = React.useCallback(() => { setQuery(input, threadInfo.id); searchMessages(threadInfo.id); }, [setQuery, input, searchMessages, threadInfo.id]); const onKeyDown = React.useCallback( event => { if (event.key === 'Enter') { onPressSearch(); } }, [onPressSearch], ); const modifiedItems = useParseSearchResults( threadInfo, getSearchResults(threadInfo.id), ); const { clearTooltip } = useTooltipContext(); const messageContainer = React.useRef(null); const possiblyLoadMoreMessages = React.useCallback(() => { if (!messageContainer.current) { return; } const loaderTopOffset = 32; const { scrollTop, scrollHeight, clientHeight } = messageContainer.current; if (Math.abs(scrollTop) + clientHeight + loaderTopOffset < scrollHeight) { return; } searchMessages(threadInfo.id); }, [searchMessages, threadInfo.id]); const onScroll = React.useCallback(() => { clearTooltip(); possiblyLoadMoreMessages(); }, [clearTooltip, possiblyLoadMoreMessages]); const renderItem = React.useCallback( item => ( ), [threadInfo], ); const messages = React.useMemo( () => modifiedItems.map(item => renderItem(item)), [modifiedItems, renderItem], ); const endReached = getEndReached(threadInfo.id); const query = getQuery(threadInfo.id); const footer = React.useMemo(() => { if (query === '') { return (
Your search results will appear here
); } if (!endReached) { return (
); } if (modifiedItems.length > 0) { return
End of results
; } return (
No results. Please try using different keywords to refine your search
); }, [query, endReached, modifiedItems.length]); const { uiName } = useResolvedThreadInfo(threadInfo); const searchPlaceholder = `Searching in ${uiName}`; const { popModal } = useModalContext(); const clearQueryWrapper = React.useCallback( () => clearQuery(threadInfo.id), [clearQuery, threadInfo.id], ); return ( - +
{messages} {footer}
); } export default MessageSearchModal;