Add performance optimizations and component refactors
- Cache read-heavy public API routes via redisCache (leaderboard, values, shop, articles, photos, guilds, teams, staff, users, home, radio, badges) - Add single-flight and bounded-memory cache layer with unit tests - Parallelize independent DB queries on search, rares, shop, staff, polls and profile pages - Push radio points leaderboard aggregation to SQL with a LIMIT - Split studio-client and import-furni-client into focused modules - Clean up next.config.ts
This commit is contained in:
openhands committed
1 parent
54f2bc5e0c
commit
f285a7cd98
42 files changed
+1616
-1205
No files matched your search
@@ -60,99 +60,21 @@ import {
|
||||
} from "@/lib/admin/recent-furni-resync";
|
||||
import { adminFetch } from "@/lib/admin-fetch";
|
||||
import type { FurniImportSource } from "@/lib/habbo-gamedata-hotel";
|
||||
import {
|
||||
getFurniIconUrl,
|
||||
getFurniImageUrl,
|
||||
handleImgError,
|
||||
STATUS_LABELS,
|
||||
} from "./import-furni-icons";
|
||||
import type {
|
||||
BatchItemStatus,
|
||||
BatchSummary,
|
||||
FurniItem,
|
||||
FurniStats,
|
||||
Meta,
|
||||
} from "./import-furni-types";
|
||||
import { NitroEditorDialog } from "./nitro-editor-dialog";
|
||||
|
||||
interface FurniItem {
|
||||
id: number;
|
||||
classname: string;
|
||||
type: string;
|
||||
name: string;
|
||||
description: string;
|
||||
revision: number;
|
||||
category: string;
|
||||
alreadyImported: boolean;
|
||||
nitroExists: boolean;
|
||||
}
|
||||
|
||||
interface Meta {
|
||||
currentPage: number;
|
||||
lastPage: number;
|
||||
total: number;
|
||||
perPage: number;
|
||||
}
|
||||
|
||||
interface BatchItemStatus {
|
||||
classname: string;
|
||||
status:
|
||||
| "pending"
|
||||
| "started"
|
||||
| "downloading"
|
||||
| "converting"
|
||||
| "writing_db"
|
||||
| "done"
|
||||
| "failed";
|
||||
message?: string;
|
||||
warnings?: string[];
|
||||
itemId?: number;
|
||||
}
|
||||
|
||||
interface BatchSummary {
|
||||
succeeded: number;
|
||||
failed: number;
|
||||
warnings: number;
|
||||
duration: number;
|
||||
}
|
||||
|
||||
interface FurniStats {
|
||||
totalInDb: number;
|
||||
inCatalog: number;
|
||||
missingNitro: number;
|
||||
notInCatalog: number;
|
||||
}
|
||||
|
||||
function getFurniImageUrl(classname: string, revision: number) {
|
||||
// Use official Habbo CDN for furniture icons
|
||||
const base = classname.includes("*")
|
||||
? classname.substring(0, classname.indexOf("*"))
|
||||
: classname;
|
||||
return `https://images.habbo.com/dcr/hof_furni/${revision}/${encodeURIComponent(base)}_icon.png`;
|
||||
}
|
||||
|
||||
function getFurniIconUrl(classname: string, revision: number) {
|
||||
const iconName = classname.replace(/\*/g, "_");
|
||||
return `https://images.habbo.com/dcr/hof_furni/${revision}/${encodeURIComponent(iconName)}_icon.png`;
|
||||
}
|
||||
|
||||
function handleImgError(
|
||||
e: React.SyntheticEvent<HTMLImageElement>,
|
||||
classname: string,
|
||||
revision: number,
|
||||
) {
|
||||
const img = e.target as HTMLImageElement;
|
||||
const iconName = classname.replace(/\*/g, "_");
|
||||
if (!img.dataset.fallback) {
|
||||
img.dataset.fallback = "1";
|
||||
img.src = getFurniIconUrl(classname, revision);
|
||||
} else if (img.dataset.fallback === "1") {
|
||||
img.dataset.fallback = "2";
|
||||
img.src = `/swf/dcr/hof_furni/icons/${encodeURIComponent(iconName)}_icon.png`;
|
||||
} else {
|
||||
// Show placeholder instead of invisible image
|
||||
img.style.opacity = "0.3";
|
||||
img.src =
|
||||
'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg>';
|
||||
}
|
||||
}
|
||||
|
||||
const STATUS_LABELS: Record<string, string> = {
|
||||
pending: "Pending",
|
||||
started: "Starting",
|
||||
downloading: "Downloading",
|
||||
converting: "Converting",
|
||||
writing_db: "Writing DB",
|
||||
done: "Done",
|
||||
failed: "Failed",
|
||||
};
|
||||
import { Pagination } from "./pagination";
|
||||
|
||||
export function ImportFurniClient({ source }: { source: FurniImportSource }) {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
@@ -884,84 +806,6 @@ export function ImportFurniClient({ source }: { source: FurniImportSource }) {
|
||||
return { completed, done, failed, total: arr.length, percent };
|
||||
}, [batchProgress]);
|
||||
|
||||
function renderPagination() {
|
||||
if (!meta || meta.lastPage <= 1) return null;
|
||||
const nodes: React.ReactNode[] = [];
|
||||
if (meta.currentPage > 1) {
|
||||
nodes.push(
|
||||
<Button
|
||||
key="prev"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => goPage(meta.currentPage - 1)}
|
||||
disabled={loading}
|
||||
className="text-xs"
|
||||
>
|
||||
← Prev
|
||||
</Button>,
|
||||
);
|
||||
}
|
||||
for (let p = 1; p <= meta.lastPage; p++) {
|
||||
if (p === meta.currentPage) {
|
||||
nodes.push(
|
||||
<Button
|
||||
key={p}
|
||||
variant="default"
|
||||
size="sm"
|
||||
className="text-xs min-w-[32px]"
|
||||
>
|
||||
{p}
|
||||
</Button>,
|
||||
);
|
||||
} else if (
|
||||
Math.abs(p - meta.currentPage) <= 2 ||
|
||||
p === 1 ||
|
||||
p === meta.lastPage
|
||||
) {
|
||||
nodes.push(
|
||||
<Button
|
||||
key={p}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => goPage(p)}
|
||||
disabled={loading}
|
||||
className="text-xs min-w-[32px]"
|
||||
>
|
||||
{p}
|
||||
</Button>,
|
||||
);
|
||||
} else if (Math.abs(p - meta.currentPage) === 3) {
|
||||
nodes.push(
|
||||
<span
|
||||
key={`dots-${p}`}
|
||||
className="text-muted-foreground text-xs px-1"
|
||||
>
|
||||
…
|
||||
</span>,
|
||||
);
|
||||
}
|
||||
}
|
||||
if (meta.currentPage < meta.lastPage) {
|
||||
nodes.push(
|
||||
<Button
|
||||
key="next"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => goPage(meta.currentPage + 1)}
|
||||
disabled={loading}
|
||||
className="text-xs"
|
||||
>
|
||||
Next →
|
||||
</Button>,
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="flex items-center justify-center gap-1 mt-4 flex-wrap">
|
||||
{nodes}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 rounded-lg border bg-card px-4 py-3">
|
||||
@@ -1987,7 +1831,7 @@ export function ImportFurniClient({ source }: { source: FurniImportSource }) {
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{renderPagination()}
|
||||
<Pagination meta={meta} loading={loading} onPageChange={goPage} />
|
||||
|
||||
{/* Nitro Editor Dialog */}
|
||||
<NitroEditorDialog
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
import type { SyntheticEvent } from "react";
|
||||
|
||||
export function getFurniImageUrl(classname: string, revision: number) {
|
||||
// Use official Habbo CDN for furniture icons
|
||||
const base = classname.includes("*")
|
||||
? classname.substring(0, classname.indexOf("*"))
|
||||
: classname;
|
||||
return `https://images.habbo.com/dcr/hof_furni/${revision}/${encodeURIComponent(base)}_icon.png`;
|
||||
}
|
||||
|
||||
export function getFurniIconUrl(classname: string, revision: number) {
|
||||
const iconName = classname.replace(/\*/g, "_");
|
||||
return `https://images.habbo.com/dcr/hof_furni/${revision}/${encodeURIComponent(iconName)}_icon.png`;
|
||||
}
|
||||
|
||||
export function handleImgError(
|
||||
e: SyntheticEvent<HTMLImageElement>,
|
||||
classname: string,
|
||||
revision: number,
|
||||
) {
|
||||
const img = e.target as HTMLImageElement;
|
||||
const iconName = classname.replace(/\*/g, "_");
|
||||
if (!img.dataset.fallback) {
|
||||
img.dataset.fallback = "1";
|
||||
img.src = getFurniIconUrl(classname, revision);
|
||||
} else if (img.dataset.fallback === "1") {
|
||||
img.dataset.fallback = "2";
|
||||
img.src = `/swf/dcr/hof_furni/icons/${encodeURIComponent(iconName)}_icon.png`;
|
||||
} else {
|
||||
// Show placeholder instead of invisible image
|
||||
img.style.opacity = "0.3";
|
||||
img.src =
|
||||
'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg>';
|
||||
}
|
||||
}
|
||||
|
||||
export const STATUS_LABELS: Record<string, string> = {
|
||||
pending: "Pending",
|
||||
started: "Starting",
|
||||
downloading: "Downloading",
|
||||
converting: "Converting",
|
||||
writing_db: "Writing DB",
|
||||
done: "Done",
|
||||
failed: "Failed",
|
||||
};
|
||||
@@ -0,0 +1,47 @@
|
||||
export interface FurniItem {
|
||||
id: number;
|
||||
classname: string;
|
||||
type: string;
|
||||
name: string;
|
||||
description: string;
|
||||
revision: number;
|
||||
category: string;
|
||||
alreadyImported: boolean;
|
||||
nitroExists: boolean;
|
||||
}
|
||||
|
||||
export interface Meta {
|
||||
currentPage: number;
|
||||
lastPage: number;
|
||||
total: number;
|
||||
perPage: number;
|
||||
}
|
||||
|
||||
export interface BatchItemStatus {
|
||||
classname: string;
|
||||
status:
|
||||
| "pending"
|
||||
| "started"
|
||||
| "downloading"
|
||||
| "converting"
|
||||
| "writing_db"
|
||||
| "done"
|
||||
| "failed";
|
||||
message?: string;
|
||||
warnings?: string[];
|
||||
itemId?: number;
|
||||
}
|
||||
|
||||
export interface BatchSummary {
|
||||
succeeded: number;
|
||||
failed: number;
|
||||
warnings: number;
|
||||
duration: number;
|
||||
}
|
||||
|
||||
export interface FurniStats {
|
||||
totalInDb: number;
|
||||
inCatalog: number;
|
||||
missingNitro: number;
|
||||
notInCatalog: number;
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
"use client";
|
||||
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import type { Meta } from "./import-furni-types";
|
||||
|
||||
export function Pagination({
|
||||
meta,
|
||||
loading,
|
||||
onPageChange,
|
||||
}: {
|
||||
meta: Meta | null;
|
||||
loading: boolean;
|
||||
onPageChange: (page: number) => void;
|
||||
}) {
|
||||
if (!meta || meta.lastPage <= 1) return null;
|
||||
const nodes: ReactNode[] = [];
|
||||
if (meta.currentPage > 1) {
|
||||
nodes.push(
|
||||
<Button
|
||||
key="prev"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onPageChange(meta.currentPage - 1)}
|
||||
disabled={loading}
|
||||
className="text-xs"
|
||||
>
|
||||
← Prev
|
||||
</Button>,
|
||||
);
|
||||
}
|
||||
for (let p = 1; p <= meta.lastPage; p++) {
|
||||
if (p === meta.currentPage) {
|
||||
nodes.push(
|
||||
<Button
|
||||
key={p}
|
||||
variant="default"
|
||||
size="sm"
|
||||
className="text-xs min-w-[32px]"
|
||||
>
|
||||
{p}
|
||||
</Button>,
|
||||
);
|
||||
} else if (
|
||||
Math.abs(p - meta.currentPage) <= 2 ||
|
||||
p === 1 ||
|
||||
p === meta.lastPage
|
||||
) {
|
||||
nodes.push(
|
||||
<Button
|
||||
key={p}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onPageChange(p)}
|
||||
disabled={loading}
|
||||
className="text-xs min-w-[32px]"
|
||||
>
|
||||
{p}
|
||||
</Button>,
|
||||
);
|
||||
} else if (Math.abs(p - meta.currentPage) === 3) {
|
||||
nodes.push(
|
||||
<span key={`dots-${p}`} className="text-muted-foreground text-xs px-1">
|
||||
…
|
||||
</span>,
|
||||
);
|
||||
}
|
||||
}
|
||||
if (meta.currentPage < meta.lastPage) {
|
||||
nodes.push(
|
||||
<Button
|
||||
key="next"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onPageChange(meta.currentPage + 1)}
|
||||
disabled={loading}
|
||||
className="text-xs"
|
||||
>
|
||||
Next →
|
||||
</Button>,
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="flex items-center justify-center gap-1 mt-4 flex-wrap">
|
||||
{nodes}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user