Page MenuHomePhabricator
Files F3367893

D8301.diff
No OneTemporary
Actions

D8301.diff
View Options

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,39 +23,57 @@
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<RawMessageInfo>, end: boolean) => {
- setSearchResults(oldMessages => [...oldMessages, ...newMessages]);
- setEndReached(end);
+ const onKeyDown = React.useCallback(
+ event => {
+ if (event.key === 'Enter') {
+ onPressSearch();
+ }
},
- [],
+ [onPressSearch],
);
- React.useEffect(() => {
- setSearchResults([]);
- setLastID(undefined);
- setEndReached(false);
- }, [query]);
+ const modifiedItems = useParseSearchResults(
+ threadInfo,
+ getSearchResults(threadInfo.id),
+ );
- const searchMessages = useSearchMessages();
+ const { clearTooltip } = useTooltipContext();
- React.useEffect(
- () => searchMessages(query, threadInfo.id, appendSearchResults, lastID),
- [appendSearchResults, lastID, query, searchMessages, threadInfo.id],
- );
+ 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 modifiedItems = useParseSearchResults(threadInfo, searchResults);
+ const onScroll = React.useCallback(() => {
+ clearTooltip();
+ possiblyLoadMoreMessages();
+ }, [clearTooltip, possiblyLoadMoreMessages]);
const renderItem = React.useCallback(
item => (
@@ -77,38 +92,8 @@
[modifiedItems, renderItem],
);
- 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;
- }
-
- const loaderTopOffset = 32;
- const { scrollTop, scrollHeight, clientHeight } = messageContainer.current;
- if (
- endReached ||
- Math.abs(scrollTop) + clientHeight + loaderTopOffset < scrollHeight
- ) {
- return;
- }
- setLastID(modifiedItems ? oldestMessageID(modifiedItems) : undefined);
- }, [endReached, modifiedItems]);
-
- const onScroll = React.useCallback(() => {
- if (!messageContainer.current) {
- return;
- }
- clearTooltip();
- possiblyLoadMoreMessages();
- }, [clearTooltip, possiblyLoadMoreMessages]);
+ const endReached = getEndReached(threadInfo.id);
+ const query = getQuery(threadInfo.id);
const footer = React.useMemo(() => {
if (query === '') {
@@ -133,31 +118,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 (
<Modal name="Search Message" onClose={popModal} size="large">
<div className={css.container}>
@@ -177,7 +146,7 @@
Search
</Button>
</div>
- <div className={css.content} ref={messageContainerRef}>
+ <div className={css.content} ref={messageContainer} onScroll={onScroll}>
{messages}
{footer}
</div>
@@ -186,13 +155,4 @@
);
}
-function oldestMessageID(data: $ReadOnlyArray<ChatMessageItem>) {
- 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;

File Metadata

Mime Type
text/plain
Expires
Tue, Nov 26, 5:00 PM (20 h, 24 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2585543
Default Alt Text
D8301.diff (5 KB)

Event Timeline