feat: improved welcome page

This commit is contained in:
etiennecollin
2025-09-07 15:10:32 -04:00
parent fbff084818
commit 404d35b437

View File

@@ -2,16 +2,23 @@
import { api } from "@/utils/api";
import { getRuntimeConfig } from "@/utils/runtimeConfig";
import { useCallback, useEffect, useState } from "react";
import { useCallback, useEffect, useMemo, useState } from "react";
export default function WelcomePage() {
const [visited, setVisited] = useState(false);
const [ssid, setSsid] = useState<string | undefined>(undefined);
const [hasMounted, setHasMounted] = useState(false);
const ssid = useMemo(() => {
if (!hasMounted) return null;
const { WIFI_SSID: ssid } = getRuntimeConfig();
return ssid;
}, [hasMounted, getRuntimeConfig]);
const rotateVoucher = useCallback(async () => {
try {
await api.createRollingVoucher();
} catch (error: any) {
// Error 403 is expected if the user already created a rolling voucher
if (error?.status !== 403) {
console.error("Failed to create rolling voucher", error);
}
@@ -19,22 +26,23 @@ export default function WelcomePage() {
}, []);
useEffect(() => {
const { WIFI_SSID: ssid } = getRuntimeConfig();
setSsid(ssid);
}, []);
setHasMounted(true);
useEffect(() => {
if (visited) {
return;
}
if (visited) return;
rotateVoucher();
setVisited(true);
}, [visited, rotateVoucher]);
}, [rotateVoucher]);
return (
<main className="flex-center h-screen w-full px-4">
<div className="w-full text-center font-bold text-4xl sm:text-5xl md:text-7xl lg:text-9xl leading-snug">
{ssid ? `Welcome to ${ssid}!` : "Welcome!"}
{ssid ? (
<>
Welcome to <span className="text-brand font-mono">{ssid}</span>!
</>
) : (
"Welcome!"
)}
</div>
</main>
);