refactor front end hooks

src/components/ValidateSessionTransferToken.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { AxiosResponse } from "axios";
+import { redirect, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { AlertCircle } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { TransferSessionResponse } from "@server/routers/auth/types";
+
+type ValidateSessionTransferTokenParams = {
+    token: string;
+    redirect?: string;
+};
+
+export default function ValidateSessionTransferToken(
+    props: ValidateSessionTransferTokenParams
+) {
+    const { env } = useEnvContext();
+    const api = createApiClient({ env });
+    const router = useRouter();
+
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    const t = useTranslations();
+
+    useEffect(() => {
+        async function validate() {
+            setLoading(true);
+
+            let doRedirect = false;
+            try {
+                const res = await api.post<
+                    AxiosResponse<TransferSessionResponse>
+                >(`/auth/transfer-session-token`, {
+                    token: props.token
+                });
+
+                if (res && res.status === 200) {
+                    doRedirect = true;
+                }
+            } catch (e) {
+                console.error(e);
+                setError(formatAxiosError(e, "Failed to validate token"));
+            } finally {
+                setLoading(false);
+            }
+
+            if (doRedirect) {
+                if (props.redirect && props.redirect.startsWith("http")) {
+                    router.push(props.redirect);
+                } else {
+                    // add redirect param to dashboardUrl if provided
+                    const fullUrl = `${env.app.dashboardUrl}${props.redirect || ""}`;
+                    router.push(fullUrl);
+                }
+            }
+        }
+
+        validate();
+    }, []);
+
+    return (
+        <div className="flex items-center justify-center min-h-screen">
+            {error && (
+                <Alert variant="destructive" className="w-full">
+                    <AlertCircle className="h-5 w-5" />
+                    <AlertDescription className="flex flex-col space-y-2">
+                        <span className="text-xs">{error}</span>
+                    </AlertDescription>
+                </Alert>
+            )}
+        </div>
+    );
+}