diff --git a/web/modals/search/message-search-modal.react.js b/web/modals/search/message-search-modal.react.js --- a/web/modals/search/message-search-modal.react.js +++ b/web/modals/search/message-search-modal.react.js @@ -26,61 +26,65 @@ function MessageSearchModal(props: ContentProps): React.Node { const { threadInfo } = props; - const [lastID, setLastID] = React.useState(); - const [searchResults, setSearchResults] = React.useState([]); - const [endReached, setEndReached] = React.useState(false); - - const { query, setQuery, clearQuery } = useMessageSearchContext(); - - const appendSearchResults = React.useCallback( + const { + getQuery, + setQuery, + clearQuery, + searchResults, + appendSearchResult, + endReached, + setEndReached, + } = useMessageSearchContext(); + + const loading = React.useRef(false); + + const appendResults = React.useCallback( (newMessages: $ReadOnlyArray, end: boolean) => { - setSearchResults(oldMessages => [...oldMessages, ...newMessages]); - setEndReached(end); + appendSearchResult(newMessages); + if (end) { + setEndReached(); + } + loading.current = false; }, - [], + [appendSearchResult, setEndReached], ); - React.useEffect(() => { - setSearchResults([]); - setLastID(undefined); - setEndReached(false); - }, [query]); - const searchMessages = useSearchMessages(); - React.useEffect( - () => searchMessages(query, threadInfo.id, appendSearchResults, lastID), - [appendSearchResults, lastID, query, searchMessages, threadInfo.id], - ); + const [input, setInput] = React.useState(getQuery()); - const modifiedItems = useParseSearchResults(threadInfo, searchResults); + const onPressSearch = React.useCallback(() => { + setQuery(input); + loading.current = true; + searchMessages(getQuery(), threadInfo.id, appendResults, undefined); + }, [setQuery, input, searchMessages, getQuery, threadInfo.id, appendResults]); - const renderItem = React.useCallback( - item => ( - - ), - [threadInfo], - ); + const button = React.useMemo(() => { + return ( + + ); + }, [onPressSearch]); - const messages = React.useMemo( - () => modifiedItems.map(item => renderItem(item)), - [modifiedItems, renderItem], + const onKeyDown = React.useCallback( + event => { + if (event.key === 'Enter') { + onPressSearch(); + } + }, + [onPressSearch], ); - const messageContainer = React.useRef(null); + const modifiedItems = useParseSearchResults(threadInfo, searchResults); + const { clearTooltip } = useTooltipContext(); + + const messageContainer = React.useRef(null); const messageContainerRef = (msgContainer: ?HTMLDivElement) => { messageContainer.current = msgContainer; - messageContainer.current?.addEventListener('scroll', onScroll); }; - const { clearTooltip } = useTooltipContext(); - const possiblyLoadMoreMessages = React.useCallback(() => { if (!messageContainer.current) { return; @@ -90,23 +94,47 @@ const { scrollTop, scrollHeight, clientHeight } = messageContainer.current; if ( endReached || + loading.current || Math.abs(scrollTop) + clientHeight + loaderTopOffset < scrollHeight ) { return; } - setLastID(modifiedItems ? oldestMessageID(modifiedItems) : undefined); - }, [endReached, modifiedItems]); + loading.current = true; + const lastID = modifiedItems ? oldestMessageID(modifiedItems) : undefined; + searchMessages(getQuery(), threadInfo.id, appendResults, lastID); + }, [ + appendResults, + endReached, + getQuery, + modifiedItems, + searchMessages, + threadInfo.id, + ]); const onScroll = React.useCallback(() => { - if (!messageContainer.current) { - return; - } clearTooltip(); possiblyLoadMoreMessages(); }, [clearTooltip, possiblyLoadMoreMessages]); + const renderItem = React.useCallback( + item => ( + + ), + [threadInfo], + ); + + const messages = React.useMemo( + () => modifiedItems.map(item => renderItem(item)), + [modifiedItems, renderItem], + ); + const footer = React.useMemo(() => { - if (query === '') { + if (getQuery() === '') { return (
Your search results will appear here
); @@ -126,31 +154,7 @@ No results. Please try using different keywords to refine your search ); - }, [query, endReached, modifiedItems.length]); - - const [input, setInput] = React.useState(query); - - const onPressSearch = React.useCallback( - () => setQuery(input), - [setQuery, input], - ); - - const button = React.useMemo(() => { - return ( - - ); - }, [onPressSearch]); - - const onKeyDown = React.useCallback( - event => { - if (event.key === 'Enter') { - onPressSearch(); - } - }, - [onPressSearch], - ); + }, [getQuery, endReached, modifiedItems.length]); const { uiName } = useResolvedThreadInfo(threadInfo); const searchPlaceholder = `Searching in ${uiName}`; @@ -169,7 +173,11 @@ /> {button} -
+
{messages} {footer}
{' '}