From 4cb78176c10a5be5324f7f9e02a4a09c303748fe Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Fri, 25 Apr 2025 12:15:55 -0700
Subject: [PATCH] fix(filter_logic.tsx): fix filter update logic

---
 .../key_team_helpers/filter_logic.tsx         | 85 ++++++++++---------
 1 file changed, 47 insertions(+), 38 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/key_team_helpers/filter_logic.tsx b/ui/litellm-dashboard/src/components/key_team_helpers/filter_logic.tsx
index fe58a3bd5bf..8bbcad3a153 100644
--- a/ui/litellm-dashboard/src/components/key_team_helpers/filter_logic.tsx
+++ b/ui/litellm-dashboard/src/components/key_team_helpers/filter_logic.tsx
@@ -1,11 +1,12 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState, useRef } from "react";
 import { KeyResponse } from "../key_team_helpers/key_list";
-import { Organization } from "../networking";
+import { keyListCall, Organization } from "../networking";
 import { Team } from "../key_team_helpers/key_list";
 import { useQuery } from "@tanstack/react-query";
 import { fetchAllKeyAliases, fetchAllOrganizations, fetchAllTeams } from "./filter_helpers";
 import { Setter } from "@/types";
-
+import { debounce } from "lodash";
+import { defaultPageSize } from "../constants";
 
 export interface FilterState {
   'Team ID': string;
@@ -14,41 +15,7 @@ export interface FilterState {
   [key: string]: string;
 }
 
-  // const debouncedSearch = useCallback(
-  //   debounce(async (filters: FilterState) => {
-  //     if (!accessToken || !userRole || !userID) {
-  //       return;
-  //     }
 
-  //     const currentTimestamp = Date.now();
-  //     lastSearchTimestamp.current = currentTimestamp;
-
-  //     try {
-  //       // Make the API call using userListCall with all filter parameters
-  //       const data = await keyListCall(
-  //         accessToken,
-  //         filters["Organization ID"] || null,
-  //         filters["Team ID"] || null,
-  //         filters["Key Alias"] || null,
-  //         filters["User ID"] || null,
-  //         1, // Reset to first page when searching
-  //         defaultPageSize
-  //       );
-        
-  //       // Only update state if this is the most recent search
-  //       if (currentTimestamp === lastSearchTimestamp.current) {
-  //         if (data) {
-  //           setFilteredKeys(data.keys);
-  //           console.log("called from debouncedSearch filters:", JSON.stringify(filters));
-  //           console.log("called from debouncedSearch data:", JSON.stringify(data));
-  //         }
-  //       }
-  //     } catch (error) {
-  //       console.error("Error searching users:", error);
-  //     }
-  //   }, 300),
-  //   [accessToken, userRole, userID]
-  // );
 
 export function useFilterLogic({
   keys,
@@ -75,7 +42,42 @@ export function useFilterLogic({
   const [allTeams, setAllTeams] = useState<Team[]>(teams || []);
   const [allOrganizations, setAllOrganizations] = useState<Organization[]>(organizations || []);
   const [filteredKeys, setFilteredKeys] = useState<KeyResponse[]>(keys);
-
+  const lastSearchTimestamp = useRef(0);
+  const debouncedSearch = useCallback(
+    debounce(async (filters: FilterState) => {
+      if (!accessToken) {
+        return;
+      }
+  
+      const currentTimestamp = Date.now();
+      lastSearchTimestamp.current = currentTimestamp;
+  
+      try {
+        // Make the API call using userListCall with all filter parameters
+        const data = await keyListCall(
+          accessToken,
+          filters["Organization ID"] || null,
+          filters["Team ID"] || null,
+          filters["Key Alias"] || null,
+          filters["User ID"] || null,
+          1, // Reset to first page when searching
+          defaultPageSize
+        );
+        
+        // Only update state if this is the most recent search
+        if (currentTimestamp === lastSearchTimestamp.current) {
+          if (data) {
+            setFilteredKeys(data.keys);
+            console.log("called from debouncedSearch filters:", JSON.stringify(filters));
+            console.log("called from debouncedSearch data:", JSON.stringify(data));
+          }
+        }
+      } catch (error) {
+        console.error("Error searching users:", error);
+      }
+    }, 300),
+    [accessToken]
+  );
   // Apply filters to keys whenever keys or filters change
   useEffect(() => {
     if (!keys) {
@@ -180,6 +182,13 @@ export function useFilterLogic({
       ? allKeyAliases.find((k) => k === keyAlias) || null
       : null;
     setSelectedKeyAlias(selectedKeyAlias)
+
+    // Fetch keys based on new filters
+    const updatedFilters = {
+      ...filters,
+      ...newFilters
+    }
+    debouncedSearch(updatedFilters);
   };
 
   const handleFilterReset = () => {