Page MenuHomePhorge
Files F32212310

D8301.1765140742.diff
No OneTemporary
Actions

Size
6 KB
Referenced Files
None
Subscribers
None

D8301.1765140742.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,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<RawMessageInfo>, 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 => (
- <MessageResult
- key={item.messageInfo.id}
- item={item}
- threadInfo={threadInfo}
- scrollable={false}
- />
- ),
- [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 => (
+ <MessageResult
+ key={item.messageInfo.id}
+ item={item}
+ threadInfo={threadInfo}
+ scrollable={false}
+ />
+ ),
+ [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 (
<Modal name="Search Message" onClose={popModal} size="large">
<div className={css.container}>
@@ -177,7 +152,11 @@
Search
</Button>
</div>
- <div className={css.content} ref={messageContainerRef}>
+ <div
+ className={css.content}
+ ref={messageContainerRef}
+ onScroll={onScroll}
+ >
{messages}
{footer}
</div>
@@ -186,13 +165,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
Sun, Dec 7, 8:52 PM (20 h, 36 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5846012
Default Alt Text
D8301.1765140742.diff (6 KB)

Event Timeline