Optimize client page: combine fetch calls, extract ToolbarBtn component, reduce duplicated inline styles
This commit is contained in:
openhands committed
1 parent
deac10e00a
commit
da505ae643
1 file changed
+36
-61
+36
-61
@@ -1,10 +1,25 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
|
||||
import Link from "next/link";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { ContentCard, SkeletonCard } from "@/components/public/ui";
|
||||
|
||||
function ToolbarBtn({ onClick, title, children, href }: {
|
||||
onClick?: () => void; title: string; children: ReactNode; href?: string;
|
||||
}) {
|
||||
const cls = "w-10 h-10 rounded-lg border-2 cursor-pointer flex items-center justify-center shadow-lg transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl active:translate-y-0";
|
||||
const style = {
|
||||
borderColor: "color-mix(in srgb, var(--color-primary, #eeb425) 75%, black)",
|
||||
background: "linear-gradient(135deg, var(--color-primary, #eeb425) 0%, color-mix(in srgb, var(--color-primary, #eeb425) 80%, black) 100%)",
|
||||
color: "var(--button-text-color, #1a1a2e)",
|
||||
} as const;
|
||||
if (href) {
|
||||
return <Link href={href} className={cls} style={style} title={title}>{children}</Link>;
|
||||
}
|
||||
return <button onClick={onClick} className={cls} style={style} title={title} type="button">{children}</button>;
|
||||
}
|
||||
|
||||
export default function ClientPage() {
|
||||
const t = useTranslations("pages.client");
|
||||
const [ticket, setTicket] = useState<string | null>(null);
|
||||
@@ -21,16 +36,19 @@ export default function ClientPage() {
|
||||
if (fetchedRef.current) return;
|
||||
fetchedRef.current = true;
|
||||
|
||||
async function fetchTicket() {
|
||||
async function init() {
|
||||
try {
|
||||
const res = await fetch("/api/client/sso");
|
||||
if (res.status === 401) {
|
||||
const [ssoRes] = await Promise.all([
|
||||
fetch("/api/client/sso"),
|
||||
fetch("/api/online/count").then(r => r.ok ? r.json() : { count: 0 }).then(d => setOnlineCount(d.count)).catch(() => {}),
|
||||
]);
|
||||
if (ssoRes.status === 401) {
|
||||
setErrorType("auth");
|
||||
setError(t("errors.unauthorized"));
|
||||
return;
|
||||
}
|
||||
if (!res.ok) throw new Error("SSO fetch failed");
|
||||
const data = await res.json();
|
||||
if (!ssoRes.ok) throw new Error("SSO fetch failed");
|
||||
const data = await ssoRes.json();
|
||||
setTicket(data.ticket);
|
||||
setHotelName(data.hotelName);
|
||||
if (data.clientUrl) setClientUrl(data.clientUrl);
|
||||
@@ -41,25 +59,16 @@ export default function ClientPage() {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
fetchTicket();
|
||||
}, [t]);
|
||||
init();
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchOnline() {
|
||||
const interval = setInterval(async () => {
|
||||
try {
|
||||
const res = await fetch("/api/online/count");
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setOnlineCount(data.count ?? 0);
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
fetchOnline();
|
||||
const interval = setInterval(fetchOnline, 15000);
|
||||
if (res.ok) setOnlineCount((await res.json()).count ?? 0);
|
||||
} catch {}
|
||||
}, 15000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
}, [t]);
|
||||
|
||||
const toggleFullscreen = useCallback(() => {
|
||||
if (!document.fullscreenElement) {
|
||||
@@ -150,58 +159,24 @@ export default function ClientPage() {
|
||||
<div className="relative w-screen h-screen overflow-hidden" style={{ backgroundColor: "var(--color-background)" }}>
|
||||
{/* Floating Toolbar */}
|
||||
<div className="fixed top-4 left-4 z-50 flex items-center gap-2">
|
||||
{/* Home Button */}
|
||||
<Link
|
||||
href="/"
|
||||
className="w-10 h-10 rounded-lg border-2 cursor-pointer flex items-center justify-center shadow-lg transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl active:translate-y-0"
|
||||
style={{
|
||||
borderColor: "color-mix(in srgb, var(--color-primary, #eeb425) 75%, black)",
|
||||
background: "linear-gradient(135deg, var(--color-primary, #eeb425) 0%, color-mix(in srgb, var(--color-primary, #eeb425) 80%, black) 100%)",
|
||||
color: "var(--button-text-color, #1a1a2e)",
|
||||
}}
|
||||
title="Home"
|
||||
>
|
||||
<ToolbarBtn href="/" title="Home">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
||||
<polyline points="9 22 9 12 15 12 15 22" />
|
||||
</svg>
|
||||
</Link>
|
||||
|
||||
{/* Reload Button */}
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
className="w-10 h-10 rounded-lg border-2 cursor-pointer flex items-center justify-center shadow-lg transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl active:translate-y-0"
|
||||
style={{
|
||||
borderColor: "color-mix(in srgb, var(--color-primary, #eeb425) 75%, black)",
|
||||
background: "linear-gradient(135deg, var(--color-primary, #eeb425) 0%, color-mix(in srgb, var(--color-primary, #eeb425) 80%, black) 100%)",
|
||||
color: "var(--button-text-color, #1a1a2e)",
|
||||
}}
|
||||
title="Reload"
|
||||
>
|
||||
</ToolbarBtn>
|
||||
<ToolbarBtn onClick={() => window.location.reload()} title="Reload">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<polyline points="23 4 23 10 17 10" />
|
||||
<polyline points="1 20 1 14 7 14" />
|
||||
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* Fullscreen Button */}
|
||||
<button
|
||||
onClick={toggleFullscreen}
|
||||
className="w-10 h-10 rounded-lg border-2 cursor-pointer flex items-center justify-center shadow-lg transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl active:translate-y-0"
|
||||
style={{
|
||||
borderColor: "color-mix(in srgb, var(--color-primary, #eeb425) 75%, black)",
|
||||
background: "linear-gradient(135deg, var(--color-primary, #eeb425) 0%, color-mix(in srgb, var(--color-primary, #eeb425) 80%, black) 100%)",
|
||||
color: "var(--button-text-color, #1a1a2e)",
|
||||
}}
|
||||
title="Fullscreen"
|
||||
>
|
||||
</ToolbarBtn>
|
||||
<ToolbarBtn onClick={toggleFullscreen} title="Fullscreen">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* Online Count Button */}
|
||||
</ToolbarBtn>
|
||||
<div
|
||||
className="h-10 px-3 rounded-lg border-2 flex items-center justify-center gap-1.5 shadow-lg select-none"
|
||||
style={{
|
||||
|
||||
Reference in new issue
Block a user