[web] Fix message search results for old query appearing

Summary:
If the user searched for "first query", and then before the results had the chance to appear, search for "second query", the results for "first query" would still be appended to the results array.
This diff fixes that by using an id for each server call, and after the results get fetched, the id of the server call is compared with the most recent id.

Test Plan: Checked that flow is not broken in web and native that both use `useSearchMessages`. checked that the above scenario doesn't happen anymore (I used network dev tools to ensure the messages didn't get fetched before the query was changed). Checked that it is still possible to fetch messages, and more messages for the same query.

Reviewers: kamil, kuba, michal

Reviewed By: michal

Subscribers: ashoat, tomek

Differential Revision: https://phab.comm.dev/D8327

lib/shared/search-utils.js

@@ -229,26 +229,28 @@ function useSearchMessages(): (
   onResultsReceived: (
     messages: $ReadOnlyArray<RawMessageInfo>,
     endReached: boolean,
+    queryID: number,
     threadID: string,
   ) => mixed,
+  queryID: number,
   cursor?: string,
 ) => void {
   const callSearchMessages = useServerCall(searchMessages);
   const dispatchActionPromise = useDispatchActionPromise();
 
   return React.useCallback(
-    (query, threadID, onResultsReceived, cursor) => {
+    (query, threadID, onResultsReceived, queryID, cursor) => {
       const searchMessagesPromise = (async () => {
         if (query === '') {
-          onResultsReceived([], true, threadID);
+          onResultsReceived([], true, queryID, threadID);
           return;
         }
         const { messages, endReached } = await callSearchMessages({
           query,
           threadID,
           cursor,
         });
-        onResultsReceived(messages, endReached, threadID);
+        onResultsReceived(messages, endReached, queryID, threadID);
       })();
 
       dispatchActionPromise(searchMessagesActionTypes, searchMessagesPromise);

native/search/message-search.react.js

@@ -47,7 +47,14 @@ function MessageSearch(props: MessageSearchProps): React.Node {
   const [endReached, setEndReached] = React.useState(false);
 
   const appendSearchResults = React.useCallback(
-    (newMessages: $ReadOnlyArray<RawMessageInfo>, end: boolean) => {
+    (
+      newMessages: $ReadOnlyArray<RawMessageInfo>,
+      end: boolean,
+      queryID: number,
+    ) => {
+      if (queryID !== queryIDRef.current) {
+        return;
+      }
       setSearchResults(oldMessages => [...oldMessages, ...newMessages]);
       setEndReached(end);
     },
@@ -56,16 +63,24 @@ function MessageSearch(props: MessageSearchProps): React.Node {
 
   const searchMessages = useSearchMessages();
 
+  const queryIDRef = React.useRef(0);
+
   React.useEffect(() => {
     setSearchResults([]);
     setLastID(undefined);
     setEndReached(false);
   }, [query, searchMessages]);
 
-  React.useEffect(
-    () => searchMessages(query, threadInfo.id, appendSearchResults, lastID),
-    [appendSearchResults, lastID, query, searchMessages, threadInfo.id],
-  );
+  React.useEffect(() => {
+    queryIDRef.current += 1;
+    searchMessages(
+      query,
+      threadInfo.id,
+      appendSearchResults,
+      queryIDRef.current,
+      lastID,
+    );
+  }, [appendSearchResults, lastID, query, searchMessages, threadInfo.id]);
 
   const userInfos = useSelector(state => state.userStore.userInfos);
 

web/search/message-search-state-provider.react.js

@@ -114,13 +114,19 @@ function MessageSearchStateProvider(props: Props): React.Node {
   const searchMessagesCall = useSearchMessages();
 
   const loading = React.useRef(false);
+  const queryIDRef = React.useRef(0);
 
   const appendResults = React.useCallback(
     (
       newMessages: $ReadOnlyArray<RawMessageInfo>,
       end: boolean,
+      queryID: number,
       threadID: string,
     ) => {
+      if (queryID !== queryIDRef.current) {
+        return;
+      }
+
       appendResult(newMessages, threadID);
       if (end) {
         setEndReached(threadID);
@@ -135,11 +141,13 @@ function MessageSearchStateProvider(props: Props): React.Node {
       if (loading.current || endsReached.current.has(threadID)) {
         return;
       }
+      queryIDRef.current += 1;
       loading.current = true;
       searchMessagesCall(
         queries.current[threadID],
         threadID,
         appendResults,
+        queryIDRef.current,
         lastIDs.current[threadID],
       );
     },