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 @@ -3,9 +3,6 @@ import * as React from 'react'; import { useModalContext } from 'lib/components/modal-provider.react.js'; -import { type ChatMessageItem } from 'lib/selectors/chat-selectors.js'; -import { useSearchMessages } from 'lib/shared/search-utils.js'; -import type { RawMessageInfo } from 'lib/types/message-types.js'; import type { ThreadInfo } from 'lib/types/thread-types.js'; import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js'; @@ -26,66 +23,43 @@ 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 { + getQuery, + setQuery, + clearQuery, + searchMessages, + getSearchResults, + getEndReached, + } = useMessageSearchContext(); - const { getQuery, setQuery, clearQuery } = useMessageSearchContext(); + const [input, setInput] = React.useState(getQuery(threadInfo.id)); - const query = React.useMemo( - () => getQuery(threadInfo.id), - [getQuery, threadInfo.id], - ); + const onPressSearch = React.useCallback(() => { + setQuery(input, threadInfo.id); + searchMessages(threadInfo.id); + }, [setQuery, input, searchMessages, threadInfo.id]); - const appendSearchResults = React.useCallback( - (newMessages: $ReadOnlyArray, end: boolean) => { - setSearchResults(oldMessages => [...oldMessages, ...newMessages]); - setEndReached(end); + const onKeyDown = React.useCallback( + event => { + if (event.key === 'Enter') { + onPressSearch(); + } }, - [], - ); - - 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], + [onPressSearch], ); - const modifiedItems = useParseSearchResults(threadInfo, searchResults); - - const renderItem = React.useCallback( - item => ( - - ), - [threadInfo], + const modifiedItems = useParseSearchResults( + threadInfo, + getSearchResults(threadInfo.id), ); - const messages = React.useMemo( - () => modifiedItems.map(item => renderItem(item)), - [modifiedItems, renderItem], - ); + 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; @@ -94,22 +68,39 @@ const loaderTopOffset = 32; const { scrollTop, scrollHeight, clientHeight } = messageContainer.current; if ( - endReached || + getEndReached(threadInfo.id) || Math.abs(scrollTop) + clientHeight + loaderTopOffset < scrollHeight ) { return; } - setLastID(modifiedItems ? oldestMessageID(modifiedItems) : undefined); - }, [endReached, modifiedItems]); + searchMessages(threadInfo.id); + }, [getEndReached, 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 endReached = getEndReached(threadInfo.id); + const query = getQuery(threadInfo.id); + const footer = React.useMemo(() => { if (query === '') { return ( @@ -133,31 +124,15 @@ ); }, [query, endReached, modifiedItems.length]); - const [input, setInput] = React.useState(query); - - const onPressSearch = React.useCallback( - () => setQuery(input, threadInfo.id), - [setQuery, input, threadInfo.id], - ); + const { uiName } = useResolvedThreadInfo(threadInfo); + const searchPlaceholder = `Searching in ${uiName}`; + const { popModal } = useModalContext(); const clearQueryWrapper = React.useCallback( () => clearQuery(threadInfo.id), [clearQuery, threadInfo.id], ); - const onKeyDown = React.useCallback( - event => { - if (event.key === 'Enter') { - onPressSearch(); - } - }, - [onPressSearch], - ); - - const { uiName } = useResolvedThreadInfo(threadInfo); - const searchPlaceholder = `Searching in ${uiName}`; - const { popModal } = useModalContext(); - return (
@@ -177,7 +152,11 @@ Search
-
+
{messages} {footer}
@@ -186,13 +165,4 @@ ); } -function oldestMessageID(data: $ReadOnlyArray) { - for (let i = data.length - 1; i >= 0; i--) { - if (data[i].itemType === 'message' && data[i].messageInfo.id) { - return data[i].messageInfo.id; - } - } - return undefined; -} - export default MessageSearchModal;