debounced member search

Author: Lamperoyge

wondrous-bot-admin/src/pages/quests/members/MemberSearchBar.tsx

@@ -1,28 +1,16 @@
 import { useLazyQuery } from "@apollo/client";
 import { useMediaQuery } from "@mui/material";
 import AutocompleteOptionsComponent from "components/AddFormEntity/components/AutocompleteComponent";
-import { GET_COMMUNITY_USERS_FOR_ORG, SEARCH_COMMUNITY_USERS_FOR_ORG } from "graphql/queries";
-import { useEffect, useState } from "react";
+import { SEARCH_COMMUNITY_USERS_FOR_ORG } from "graphql/queries";
+import { useCallback, useEffect, useState } from "react";
 import { useGlobalContext } from "utils/hooks";
+import { debounce } from "lodash";
 
 export const MemberPageSearchBar = ({ onChange, member, setMemberInfo }) => {
   const [searchCmtyUsersForOrg, { data, loading, error }] = useLazyQuery(SEARCH_COMMUNITY_USERS_FOR_ORG, {
     fetchPolicy: "cache-and-network",
   });
-  const [searchString, setSearchString] = useState("");
   const { activeOrg } = useGlobalContext();
-  useEffect(() => {
-    if (activeOrg?.id && searchString) {
-      searchCmtyUsersForOrg({
-        variables: {
-          input: {
-            orgId: activeOrg?.id,
-            searchString,
-          },
-        },
-      });
-    }
-  }, [activeOrg?.id, searchString]);
   const options = data?.searchCmtyUsersForOrg?.map((option) => {
     const username = option?.username || option?.discordUsername || option?.telegramUsername || "N/A";
     return {
@@ -37,6 +25,20 @@ export const MemberPageSearchBar = ({ onChange, member, setMemberInfo }) => {
     }
   }, [member, data?.searchCmtyUsersForOrg]);
 
+  const search = useCallback(debounce(searchCmtyUsersForOrg, 1000), []);
+
+  const handleOnChange = (e) => {
+    const value = e.target.value;
+    search({
+      variables: {
+        input: {
+          orgId: activeOrg?.id,
+          searchString: value,
+        },
+      },
+    });
+  };
+
   const isMobile = useMediaQuery((theme: any) => theme.breakpoints.down("md"));
 
   return (
@@ -45,15 +47,11 @@ export const MemberPageSearchBar = ({ onChange, member, setMemberInfo }) => {
       bgColor="white"
       fullWidth={isMobile}
       value={member}
-      onChange={(value) => {
-        onChange(value);
-      }}
+      onChange={onChange}
       disableClearable={false}
       onClear={() => setMemberInfo(null)}
       inputProps={{
-        onChange: (e) => {
-          setSearchString(e.target.value);
-        },
+        onChange: handleOnChange,
       }}
     />
   );