From adc3c0beb72321412ca1a7716523cd16a7703229 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Mon, 25 Nov 2024 22:30:35 -0800
Subject: [PATCH] store current page on url

---
 ui/litellm-dashboard/src/app/page.tsx | 30 ++++++++++++++++++---------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx
index 9448be82a..94af12574 100644
--- a/ui/litellm-dashboard/src/app/page.tsx
+++ b/ui/litellm-dashboard/src/app/page.tsx
@@ -82,16 +82,26 @@ const CreateKeyPage = () => {
   const invitation_id = searchParams.get("invitation_id");
   const token = getCookie('token');
 
+  // Get page from URL, default to 'api-keys' if not present
   const [page, setPage] = useState(() => {
-    if (typeof window !== 'undefined') {
-      return localStorage.getItem('selectedPage') || "api-keys";
-    }
-    return "api-keys";
+    return searchParams.get('page') || 'api-keys';
   });
 
-  useEffect(() => {
-    localStorage.setItem('selectedPage', page);
-  }, [page]);
+  // Custom setPage function that updates URL
+  const updatePage = (newPage: string) => {
+    // Update URL without full page reload
+    const newSearchParams = new URLSearchParams(searchParams);
+    newSearchParams.set('page', newPage);
+    
+    // Use Next.js router to update URL
+    window.history.pushState(
+      null, 
+      '', 
+      `?${newSearchParams.toString()}`
+    );
+    
+    setPage(newPage);
+  };
 
   const [accessToken, setAccessToken] = useState<string | null>(null);
 
@@ -172,8 +182,8 @@ const CreateKeyPage = () => {
         />
         <div className="flex flex-1 overflow-auto">
           <div className="mt-8">
-                <Sidebar
-                setPage={setPage}
+              <Sidebar
+                setPage={updatePage}
                 userRole={userRole}
                 defaultSelectedKey={page}
               />            
@@ -289,7 +299,7 @@ const CreateKeyPage = () => {
             />
           )}
         </div>
-      </div>         
+      </div>
         )
       }