fix: failing search params

app/account/connect-telegram/page.tsx

@@ -1,19 +1,52 @@
 "use client";
-import TelegramLogin from "@/components/account/TelegramLogin";
+import TelegramLoginButton, {
+  TelegramUser,
+} from "@/components/account/TelegramLoginButton";
 import SignInButton from "@/components/common/SignInButton";
+import { accounts } from "@/lib/accounts";
 import { useMe } from "@/lib/auth/user";
-import { useRouter, useSearchParams } from "next/navigation";
-import { Suspense } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+import { useEffect, useMemo } from "react";
 import { useIsClient } from "usehooks-ts";
 
 export default function Page() {
-  const router = useRouter();
-  const searchParams = useSearchParams();
   const isClient = useIsClient();
+  const router = useRouter();
+  const queryClient = useQueryClient();
   const { me } = useMe();
 
+  const searchParams = useMemo(
+    () =>
+      isClient
+        ? new URLSearchParams(window.location.search)
+        : new URLSearchParams(),
+    [isClient],
+  );
   const bot = searchParams.get("bot");
 
+  const { mutate: connectTelegram } = accounts.useProvidersTelegramConnect({
+    mutation: {
+      onSuccess: () => {
+        return queryClient.invalidateQueries({
+          queryKey: ["accounts", ...accounts.getUsersGetMeQueryKey()],
+        });
+      },
+    },
+  });
+
+  useEffect(() => {
+    // Support LoginUrl
+    if (searchParams.has("id")) {
+      const telegramUser = TelegramUser.safeParse(
+        Object.fromEntries(searchParams.entries()),
+      );
+      if (telegramUser.success) {
+        connectTelegram({ data: telegramUser.data });
+      }
+    }
+  }, [searchParams, connectTelegram]);
+
   if (!isClient || !me) {
     return (
       <>
@@ -26,7 +59,13 @@ export default function Page() {
           to access InNoHassle services.
         </p>
         <div className="flex items-center justify-center">
-          <SignInButton signInRedirect="/account/connect-telegram" />
+          <SignInButton
+            signInRedirect={
+              typeof window !== "undefined"
+                ? window.location.href
+                : "/account/connect-telegram"
+            }
+          />
         </div>
       </>
     );
@@ -45,7 +84,11 @@ export default function Page() {
           </p>
         </div>
         <div className="flex items-center justify-center">
-          <TelegramLogin />
+          <TelegramLoginButton
+            botName={process.env.NEXT_PUBLIC_BOT_NAME!}
+            onAuth={(data) => connectTelegram({ data })}
+            className="flex h-10 w-full items-center justify-center"
+          />
         </div>
       </>
     );
@@ -76,11 +119,6 @@ export default function Page() {
         >
           Continue
         </button>
-
-        {/* Support LoginUrl */}
-        <Suspense>
-          <TelegramLogin showButton={false} />
-        </Suspense>
       </div>
     </>
   );