chore(ui): settings page to load relevant tab (#595)

Author: talboren

keep-ui/app/settings/api-key-settings.tsx

@@ -13,13 +13,15 @@ interface ApiKeyResponse {
 
 interface Props {
   accessToken: string;
+  selectedTab: string;
 }
 
-export default function ApiKeySettings({ accessToken }: Props) {
+export default function ApiKeySettings({ accessToken, selectedTab }: Props) {
   const apiUrl = getApiURL();
   const { data, error, isLoading } = useSWR<ApiKeyResponse>(
-    `${apiUrl}/settings/apikey`,
-    (url) => fetcher(url, accessToken)
+    selectedTab === "api-key" ? `${apiUrl}/settings/apikey` : null,
+    (url) => fetcher(url, accessToken),
+    { revalidateOnFocus: false }
   );
 
   if (isLoading) return <Loading />;
@@ -28,7 +30,7 @@ export default function ApiKeySettings({ accessToken }: Props) {
   const copyBlockApiKeyProps = {
     theme: { ...a11yLight },
     language: "text",
-    text: data?.apiKey || '',
+    text: data?.apiKey || "",
     codeBlock: true,
     showLineNumbers: false,
   };

keep-ui/app/settings/settings.client.tsx

@@ -4,19 +4,40 @@ import {
   GlobeAltIcon,
   UserGroupIcon,
   EnvelopeIcon,
-  KeyIcon
+  KeyIcon,
 } from "@heroicons/react/24/outline";
 import UsersSettings from "./users-settings";
 import WebhookSettings from "./webhook-settings";
 import APIKeySettings from "./api-key-settings";
-import { useSession } from "next-auth/react"
+import { useSession } from "next-auth/react";
 import Loading from "app/loading";
 import SmtpSettings from "./smtp-settings";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useState } from "react";
 
 export default function SettingsPage() {
   const { data: session, status } = useSession();
   const router = useRouter();
+  const searchParams = useSearchParams()!;
+  const pathname = usePathname();
+  const [selectedTab, setSelectedTab] = useState<string>(
+    searchParams?.get("selectedTab") || "users"
+  );
+
+  const handleTabChange = (tab: string) => {
+    setSelectedTab(tab);
+    router.push(`${pathname}?selectedTab=${tab}`);
+  };
+
+  // TODO: more robust way to handle this
+  const tabIndex =
+    selectedTab === "users"
+      ? 0
+      : selectedTab === "webhook"
+      ? 1
+      : selectedTab === "smtp"
+      ? 2
+      : 3;
 
   if (status === "loading") return <Loading />;
   if (status === "unauthenticated") router.push("/signin");
@@ -28,28 +49,46 @@ export default function SettingsPage() {
    * Think about a proper way to implement it.
    */
   return (
-    <TabGroup>
+    <TabGroup index={tabIndex}>
       <TabList color="orange">
-        <Tab icon={UserGroupIcon}>Users</Tab>
-        <Tab icon={GlobeAltIcon}>Webhook</Tab>
-        <Tab icon={EnvelopeIcon}>SMTP</Tab>
-        <Tab icon={KeyIcon}>Api Key</Tab>
+        <Tab icon={UserGroupIcon} onClick={() => handleTabChange("users")}>
+          Users
+        </Tab>
+        <Tab icon={GlobeAltIcon} onClick={() => handleTabChange("webhook")}>
+          Webhook
+        </Tab>
+        <Tab icon={EnvelopeIcon} onClick={() => handleTabChange("smtp")}>
+          SMTP
+        </Tab>
+        <Tab icon={KeyIcon} onClick={() => handleTabChange("api-key")}>
+          API Key
+        </Tab>
       </TabList>
       <TabPanels>
         <TabPanel>
           <UsersSettings
             accessToken={session?.accessToken!}
             currentUser={session?.user}
+            selectedTab={selectedTab}
           />
         </TabPanel>
         <TabPanel>
-          <WebhookSettings accessToken={session?.accessToken!} />
+          <WebhookSettings
+            accessToken={session?.accessToken!}
+            selectedTab={selectedTab}
+          />
         </TabPanel>
         <TabPanel>
-          <SmtpSettings accessToken={session?.accessToken!} />
+          <SmtpSettings
+            accessToken={session?.accessToken!}
+            selectedTab={selectedTab}
+          />
         </TabPanel>
         <TabPanel>
-          <APIKeySettings accessToken={session?.accessToken!} />
+          <APIKeySettings
+            accessToken={session?.accessToken!}
+            selectedTab={selectedTab}
+          />
         </TabPanel>
       </TabPanels>
     </TabGroup>