view as team or user search now uses prefix search for better results

src/teams/TeamSearch.tsx

@@ -16,20 +16,32 @@ export default function TeamSearch(props: Props) {
   const teamAPI = useTeamAPI();
   const userAPI = useUserAPI();
   const [selectedTeam, setSelectedTeam] = useState<Option | null>(null);
+  const [handler, setHandler] = useState<NodeJS.Timeout | undefined>(undefined);
   const [teams, setTeams] = useState<Option[]>([]);
+  const [searchText, setSearchText] = useState("");
   const [search, setSearch] = useState("");
   const [loading, setLoading] = useState(false);
   const [{ user }] = useGlobalState();
 
+  useEffect(() => {
+    if (!setSearch) return;
+    if (searchText === undefined) return;
+    setHandler(setTimeout(() => {
+      setSearchText(searchText);
+    }, 750)); // Delay of 750ms
+
+    return () => clearTimeout(handler); // Cleanup on change
+  }, [searchText]);
+
   const onChange = (e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
-    setSearch(e.target.value);
+    setSearchText(e.target.value);
   };
 
   const loadTeams = useCallback(() => {
     let options: Option[] = [];
     setLoading(true);
     teamAPI
-      .listTeams(10, 0, "desc", undefined, search)
+      .listTeams(10, 0, "desc", undefined, undefined, undefined, undefined, search)
       .then(resp => {
         if (loadUsers)
           options.push({
@@ -51,7 +63,7 @@ export default function TeamSearch(props: Props) {
       .finally(() => {
         if (loadUsers) {
           userAPI
-            .listUsers(10, 0, "desc", undefined, search)
+            .listUsers(10, 0, "desc", undefined, undefined, search)
             .then(resp => {
               resp.users.forEach(user => {
                 options.push({