Page MenuHomePhorge
Files F32210954

D8301.1765133380.diff
No OneTemporary
Actions

Size
6 KB
Referenced Files
None
Subscribers
None

D8301.1765133380.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,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<RawMessageInfo>, 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 => (
- <MessageResult
- key={item.messageInfo.id}
- item={item}
- threadInfo={threadInfo}
- scrollable={false}
- />
- ),
- [threadInfo],
- );
+ const button = React.useMemo(() => {
+ return (
+ <Button onClick={onPressSearch} variant="filled" className={css.button}>
+ Search
+ </Button>
+ );
+ }, [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 => (
+ <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() === '') {
return (
<div className={css.footer}>Your search results will appear here</div>
);
@@ -126,33 +154,7 @@
No results. Please try using different keywords to refine your search
</div>
);
- }, [query, endReached, modifiedItems.length]);
-
- const [input, setInput] = React.useState(query);
-
- const onClearText = React.useCallback(() => clearQuery(), [clearQuery]);
-
- const onPressSearch = React.useCallback(
- () => setQuery(input),
- [setQuery, input],
- );
-
- const button = React.useMemo(() => {
- return (
- <Button onClick={onPressSearch} variant="filled" className={css.button}>
- Search
- </Button>
- );
- }, [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}`;
@@ -166,12 +168,16 @@
onChangeText={setInput}
searchText={input}
placeholder={searchPlaceholder}
- onClearText={onClearText}
+ onClearText={clearQuery}
onKeyDown={onKeyDown}
/>
{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, 6:49 PM (19 h, 38 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5845553
Default Alt Text
D8301.1765133380.diff (6 KB)

Event Timeline