Page MenuHomePhorge
Files F32213008

D8301.1765145492.diff
No OneTemporary
Actions

Size
6 KB
Referenced Files
None
Subscribers
None

D8301.1765145492.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
@@ -26,66 +26,72 @@
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 } = useMessageSearchContext();
+ const {
+ getQuery,
+ setQuery,
+ clearQuery,
+ getSearchResults,
+ appendSearchResult,
+ getEndReached,
+ setEndReached,
+ } = useMessageSearchContext();
+
+ const loading = React.useRef(false);
+
+ const searchResults = React.useMemo(
+ () => getSearchResults(threadInfo.id),
+ [getSearchResults, threadInfo.id],
+ );
- const query = React.useMemo(
- () => getQuery(threadInfo.id),
- [getQuery, threadInfo.id],
+ const endReached = React.useMemo(
+ () => getEndReached(threadInfo.id),
+ [getEndReached, threadInfo.id],
);
- const appendSearchResults = React.useCallback(
+ const appendResults = React.useCallback(
(newMessages: $ReadOnlyArray<RawMessageInfo>, end: boolean) => {
- setSearchResults(oldMessages => [...oldMessages, ...newMessages]);
- setEndReached(end);
+ appendSearchResult(newMessages, threadInfo.id);
+ if (end) {
+ setEndReached(threadInfo.id);
+ }
+ loading.current = false;
},
- [],
+ [appendSearchResult, setEndReached, threadInfo.id],
);
- 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(threadInfo.id));
- const modifiedItems = useParseSearchResults(threadInfo, searchResults);
+ const onPressSearch = React.useCallback(() => {
+ setQuery(input, threadInfo.id);
+ loading.current = true;
+ searchMessages(
+ getQuery(threadInfo.id),
+ threadInfo.id,
+ appendResults,
+ undefined,
+ );
+ }, [setQuery, input, searchMessages, getQuery, threadInfo.id, appendResults]);
- const renderItem = React.useCallback(
- item => (
- <MessageResult
- key={item.messageInfo.id}
- item={item}
- threadInfo={threadInfo}
- scrollable={false}
- />
- ),
- [threadInfo],
+ const onKeyDown = React.useCallback(
+ event => {
+ if (event.key === 'Enter') {
+ onPressSearch();
+ }
+ },
+ [onPressSearch],
);
- const messages = React.useMemo(
- () => modifiedItems.map(item => renderItem(item)),
- [modifiedItems, renderItem],
- );
+ const modifiedItems = useParseSearchResults(threadInfo, searchResults);
- const messageContainer = React.useRef(null);
+ 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;
@@ -95,23 +101,52 @@
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),
+ 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 => (
+ <MessageResult
+ key={item.messageInfo.id}
+ item={item}
+ threadInfo={threadInfo}
+ scrollable={false}
+ />
+ ),
+ [threadInfo],
+ );
+
+ const messages = React.useMemo(
+ () => modifiedItems.map(item => renderItem(item)),
+ [modifiedItems, renderItem],
+ );
+
const footer = React.useMemo(() => {
- if (query === '') {
+ if (getQuery(threadInfo.id) === '') {
return (
<div className={css.footer}>Your search results will appear here</div>
);
@@ -131,33 +166,17 @@
No results. Please try using different keywords to refine your search
</div>
);
- }, [query, endReached, modifiedItems.length]);
+ }, [getQuery, threadInfo.id, 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 +196,11 @@
Search
</Button>
</div>
- <div className={css.content} ref={messageContainerRef}>
+ <div
+ className={css.content}
+ ref={messageContainerRef}
+ onScroll={onScroll}
+ >
{messages}
{footer}
</div>

File Metadata

Mime Type
text/plain
Expires
Sun, Dec 7, 10:11 PM (21 h, 56 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5846182
Default Alt Text
D8301.1765145492.diff (6 KB)

Event Timeline