122 lines
3.7 KiB
TypeScript
122 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
BestFriendsHomeSect,
|
|
FriendsHomeSect
|
|
} from "@/components/roblox/FriendsOnline";
|
|
import { GameCard } from "@/components/roblox/GameCard";
|
|
import { HomeLoggedInHeader } from "@/components/site/HomeUserHeader";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { getOmniRecommendationsHome } from "@/lib/omniRecommendation";
|
|
import { getThumbnails, ThumbnailRequest } from "@/lib/thumbnailLoader";
|
|
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
|
|
|
export default function Home() {
|
|
const SORTS_ALLOWED_IDS = [100000003, 100000001];
|
|
const queryClient = useQueryClient();
|
|
|
|
const { data: rec, isLoading } = useQuery({
|
|
queryKey: ["omni-recommendations"],
|
|
queryFn: async () => {
|
|
const r = await getOmniRecommendationsHome();
|
|
if (r) {
|
|
// Prefetch game thumbnails into React Query cache
|
|
const gameRequests: ThumbnailRequest[] = Object.entries(
|
|
r.contentMetadata.Game
|
|
).map(([_, g]) => ({
|
|
type: "GameThumbnail" as const,
|
|
targetId: Number(g.rootPlaceId),
|
|
format: "webp",
|
|
size: "384x216"
|
|
}));
|
|
|
|
await queryClient.prefetchQuery({
|
|
queryKey: [
|
|
"thumbnails",
|
|
gameRequests.map((r) => r.targetId)
|
|
],
|
|
queryFn: () => getThumbnails(gameRequests)
|
|
});
|
|
}
|
|
return r;
|
|
},
|
|
staleTime: 1000 * 60 * 5, // 5 minutes
|
|
refetchOnWindowFocus: false
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<HomeLoggedInHeader />
|
|
<div className="h-4" />
|
|
<div className="mx-auto w-full max-w-6xl px-4 sm:px-8">
|
|
<BestFriendsHomeSect className="pt-2" />
|
|
<FriendsHomeSect className="pt-2" />
|
|
</div>
|
|
{/* <div className="justify-center w-screen px-8 pt-6">
|
|
<Alert variant="default" className="bg-base/50 space-x-2">
|
|
<AlertTriangleIcon />
|
|
<AlertTitle>Warning</AlertTitle>
|
|
<AlertDescription>
|
|
This is work in progress, you can follow the development
|
|
process on GitHub.
|
|
</AlertDescription>
|
|
</Alert>
|
|
</div> */}
|
|
|
|
<div className="mx-auto w-full max-w-6xl px-4 sm:px-8 pb-16 space-y-10 no-scrollbar">
|
|
{isLoading ? (
|
|
<div className="space-y-6">
|
|
<div className="h-6 w-56 bg-surface0/60 rounded-lg animate-pulse" />
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{Array.from({ length: 4 }).map((_, index) => (
|
|
<Card key={`home-skeleton-${index}`}>
|
|
<CardContent className="p-4 space-y-3">
|
|
<div className="aspect-video rounded-xl bg-surface0/60 animate-pulse" />
|
|
<div className="h-4 w-2/3 rounded bg-surface0/60 animate-pulse" />
|
|
<div className="h-3 w-1/3 rounded bg-surface0/60 animate-pulse" />
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
) : !rec ? (
|
|
<Card>
|
|
<CardContent className="p-6 text-sm text-subtext1">
|
|
We could not load recommendations right now. Try
|
|
again in a moment.
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
rec.sorts
|
|
.filter((a) => SORTS_ALLOWED_IDS.includes(a.topicId))
|
|
.map((sort, idx) => (
|
|
<section key={idx} className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-xl sm:text-2xl font-semibold text-text">
|
|
{sort.topic}
|
|
</h2>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{(sort.recommendationList || []).map(
|
|
(recommendation, idxb) => {
|
|
const game =
|
|
rec.contentMetadata.Game[
|
|
recommendation.contentId.toString()
|
|
];
|
|
return (
|
|
<GameCard
|
|
key={idxb}
|
|
game={game}
|
|
/>
|
|
);
|
|
}
|
|
)}
|
|
</div>
|
|
</section>
|
|
))
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|