Revised debounce

Author: SinghaAnirban005

packages/react/src/views/MessageAggregators/SearchMessages.js

@@ -1,13 +1,6 @@
-import React, {
-  useState,
-  useContext,
-  useEffect,
-  useCallback,
-  useRef,
-} from 'react';
+import React, { useState, useContext, useEffect, useCallback } from 'react';
 import debounce from 'lodash/debounce';
-import { useComponentOverrides, useTheme } from '@embeddedchat/ui-elements';
-import { css } from '@emotion/react';
+import { useComponentOverrides } from '@embeddedchat/ui-elements';
 import RCContext from '../../context/RCInstance';
 import { MessageAggregator } from './common/MessageAggregator';
 
@@ -17,52 +10,18 @@ const SearchMessages = () => {
   const { RCInstance } = useContext(RCContext);
   const [text, setText] = useState('');
   const [messageList, setMessageList] = useState([]);
-  const [error, setError] = useState(null);
-
-  const { theme } = useTheme();
-
-  const requestCount = useRef(0);
-  const lastRequestTime = useRef(0);
-  const requestInterval = 1000;
 
   const handleInputChange = (e) => {
     setText(e.target.value);
-    setError(null);
   };
 
   const searchMessages = useCallback(async () => {
-    const presentTime = Date.now();
-    if (presentTime - lastRequestTime.current < requestInterval) {
-      return;
-    }
-
-    requestCount.current += 1;
-    lastRequestTime.current = presentTime;
-
-    try {
-      const { messages } = await RCInstance.getSearchMessages(text);
-      setMessageList(messages || []);
-      requestCount.current -= 1;
-    } catch (err) {
-      if (err?.status === 429) {
-        const retryAfter = parseInt(
-          err.headers?.get('Retry-After') || '30',
-          10
-        );
-        setError(`Please wait ${retryAfter} seconds`);
-        setMessageList([]);
-      } else {
-        setError('Failed to search messages');
-      }
-      requestCount.current -= 1;
-    }
+    const { messages } = await RCInstance.getSearchMessages(text);
+    setMessageList(messages);
   }, [text, RCInstance]);
 
   const debouncedSearch = useCallback(
     debounce(async () => {
-      if (requestCount.current > 0) {
-        return;
-      }
       await searchMessages();
     }, 500),
     [searchMessages]
@@ -73,43 +32,28 @@ const SearchMessages = () => {
       if (messageList.length > 0) {
         setMessageList([]);
       }
-      setError(null);
     } else {
       debouncedSearch();
     }
     return () => {
       debouncedSearch.cancel();
-      requestCount.current = 0;
-      lastRequestTime.current = 0;
     };
   }, [text, debouncedSearch, messageList.length]);
 
   return (
-    <>
-      <MessageAggregator
-        title="Search Messages"
-        iconName="magnifier"
-        noMessageInfo="No results found"
-        searchProps={{
-          isSearch: true,
-          handleInputChange,
-          placeholder: 'Search Messages',
-        }}
-        searchFiltered={messageList}
-        shouldRender={(msg) => !!msg}
-        viewType={viewType}
-      />
-      {error && (
-        <div
-          css={css`
-            color: ${theme.colors.destructive};
-            font-size: 13px;
-          `}
-        >
-          {error}
-        </div>
-      )}
-    </>
+    <MessageAggregator
+      title="Search Messages"
+      iconName="magnifier"
+      noMessageInfo="No results found"
+      searchProps={{
+        isSearch: true,
+        handleInputChange,
+        placeholder: 'Search Messages',
+      }}
+      searchFiltered={messageList}
+      shouldRender={(msg) => !!msg}
+      viewType={viewType}
+    />
   );
 };
 export default SearchMessages;