mirror of
https://github.com/jakejarvis/sofa.git
synced 2026-08-29 05:05:38 -04:00
Convert dashboard and title pages to server components with granular Suspense
Replace fully client-side dashboard and title detail pages with server component orchestrators that fetch data directly via service functions, eliminating extra network round-trips through API routes. Each section streams independently through its own Suspense boundary. - Extract getUserStats(), getTitleWithChildren(), getRecommendationsForTitle() into service layer; update getNewAvailableFeed() to include tmdbId/voteAverage - Split dashboard into server sections (stats, continue watching, library, recommendations) with client children for animations - Split title page into server hero + client interaction provider with shared context for optimistic mutations across actions and seasons - Add generateMetadata with OG tags, server-side TMDB ID resolution via redirect(), loading.tsx and not-found.tsx for both pages - Add per-section skeleton components, fix ContinueWatchingSkeleton dimensions - Remove 6 unused API routes (feed/*, titles/[id] GET, titles/[id]/recommendations) - Remove components/stats-summary.tsx, add lib/types/title.ts for shared types Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.6
+30
-324
@@ -1,334 +1,40 @@
|
||||
"use client";
|
||||
|
||||
import { headers } from "next/headers";
|
||||
import { Suspense } from "react";
|
||||
import {
|
||||
IconDeviceTv,
|
||||
IconPlayerPlay,
|
||||
IconSparkles,
|
||||
} from "@tabler/icons-react";
|
||||
import { motion } from "motion/react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { DashboardSkeleton } from "@/components/skeletons";
|
||||
import { StatsSummary } from "@/components/stats-summary";
|
||||
import { TitleCard } from "@/components/title-card";
|
||||
import { useSession } from "@/lib/auth/client";
|
||||
ContinueWatchingSectionSkeleton,
|
||||
StatsSectionSkeleton,
|
||||
TitleGridSectionSkeleton,
|
||||
} from "@/components/skeletons";
|
||||
import { auth } from "@/lib/auth/server";
|
||||
import { ContinueWatchingSection } from "./_components/continue-watching-section";
|
||||
import { LibrarySection } from "./_components/library-section";
|
||||
import { RecommendationsSection } from "./_components/recommendations-section";
|
||||
import { StatsSection } from "./_components/stats-section";
|
||||
import { WelcomeHeader } from "./_components/welcome-header";
|
||||
|
||||
interface ContinueWatchingItem {
|
||||
title: {
|
||||
id: string;
|
||||
title: string;
|
||||
posterPath: string | null;
|
||||
backdropPath: string | null;
|
||||
type: string;
|
||||
};
|
||||
nextEpisode: {
|
||||
id: string;
|
||||
seasonNumber: number;
|
||||
episodeNumber: number;
|
||||
name: string | null;
|
||||
stillPath: string | null;
|
||||
overview: string | null;
|
||||
} | null;
|
||||
totalEpisodes: number;
|
||||
watchedEpisodes: number;
|
||||
}
|
||||
|
||||
interface FeedTitle {
|
||||
id?: string;
|
||||
titleId?: string;
|
||||
title: string;
|
||||
type: string;
|
||||
tmdbId?: number;
|
||||
posterPath: string | null;
|
||||
releaseDate?: string | null;
|
||||
firstAirDate?: string | null;
|
||||
voteAverage?: number | null;
|
||||
}
|
||||
|
||||
const staggerContainer = {
|
||||
hidden: {},
|
||||
visible: { transition: { staggerChildren: 0.05 } },
|
||||
};
|
||||
|
||||
const staggerItem = {
|
||||
hidden: { opacity: 0, y: 12, scale: 0.98 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
scale: 1,
|
||||
transition: { type: "spring" as const, stiffness: 300, damping: 24 },
|
||||
},
|
||||
};
|
||||
|
||||
const sectionVariants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { type: "spring" as const, stiffness: 200, damping: 24 },
|
||||
},
|
||||
};
|
||||
|
||||
export default function DashboardPage() {
|
||||
const { data: session } = useSession();
|
||||
const [continueWatching, setContinueWatching] = useState<
|
||||
ContinueWatchingItem[]
|
||||
>([]);
|
||||
const [newAvailable, setNewAvailable] = useState<FeedTitle[]>([]);
|
||||
const [recommendations, setRecommendations] = useState<FeedTitle[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const fetchFeeds = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const [cwRes, naRes, recRes] = await Promise.all([
|
||||
fetch("/api/feed/continue-watching"),
|
||||
fetch("/api/feed/new-available"),
|
||||
fetch("/api/feed/recommendations"),
|
||||
]);
|
||||
if (cwRes.ok) setContinueWatching(await cwRes.json());
|
||||
if (naRes.ok) setNewAvailable(await naRes.json());
|
||||
if (recRes.ok) setRecommendations(await recRes.json());
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchFeeds();
|
||||
}, [fetchFeeds]);
|
||||
|
||||
if (loading) {
|
||||
return <DashboardSkeleton />;
|
||||
}
|
||||
|
||||
const isEmpty =
|
||||
continueWatching.length === 0 &&
|
||||
newAvailable.length === 0 &&
|
||||
recommendations.length === 0;
|
||||
export default async function DashboardPage() {
|
||||
const session = await auth.api.getSession({ headers: await headers() });
|
||||
if (!session) return null;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="space-y-10"
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={{
|
||||
hidden: {},
|
||||
visible: { transition: { staggerChildren: 0.15 } },
|
||||
}}
|
||||
>
|
||||
<motion.div variants={sectionVariants}>
|
||||
<h1 className="font-display text-3xl tracking-tight">
|
||||
Welcome back{session?.user?.name ? `, ${session.user.name}` : ""}
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
Here's what's happening with your library
|
||||
</p>
|
||||
</motion.div>
|
||||
<div className="space-y-10">
|
||||
<WelcomeHeader name={session.user.name} />
|
||||
|
||||
<motion.div variants={sectionVariants}>
|
||||
<StatsSummary />
|
||||
</motion.div>
|
||||
<Suspense fallback={<StatsSectionSkeleton />}>
|
||||
<StatsSection userId={session.user.id} />
|
||||
</Suspense>
|
||||
|
||||
{isEmpty && (
|
||||
<motion.div
|
||||
variants={sectionVariants}
|
||||
className="flex flex-col items-center gap-4 rounded-xl border border-dashed border-border/50 py-16 text-center"
|
||||
>
|
||||
<div className="animate-gentle-float rounded-full bg-primary/10 p-4">
|
||||
<IconDeviceTv size={32} className="text-primary" />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<p className="font-medium">Your library is empty</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Search for movies and TV shows to start tracking
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
href="/explore"
|
||||
className="inline-flex h-9 items-center rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground transition-all hover:shadow-md hover:shadow-primary/20"
|
||||
>
|
||||
Start exploring
|
||||
</Link>
|
||||
</motion.div>
|
||||
)}
|
||||
<Suspense fallback={<ContinueWatchingSectionSkeleton />}>
|
||||
<ContinueWatchingSection userId={session.user.id} />
|
||||
</Suspense>
|
||||
|
||||
{/* Continue Watching */}
|
||||
{continueWatching.length > 0 && (
|
||||
<motion.div variants={sectionVariants}>
|
||||
<FeedSection
|
||||
title="Continue Watching"
|
||||
icon={<IconPlayerPlay size={20} className="text-primary" />}
|
||||
>
|
||||
<motion.div
|
||||
className="feed-scroll -mx-4 flex gap-4 overflow-x-auto px-4 pb-2 sm:-mx-0 sm:px-0"
|
||||
variants={staggerContainer}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
{continueWatching.map((item) => (
|
||||
<motion.div key={item.title.id} variants={staggerItem}>
|
||||
<ContinueWatchingCard item={item} />
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</FeedSection>
|
||||
</motion.div>
|
||||
)}
|
||||
<Suspense fallback={<TitleGridSectionSkeleton />}>
|
||||
<LibrarySection userId={session.user.id} />
|
||||
</Suspense>
|
||||
|
||||
{/* In Your Library */}
|
||||
{newAvailable.length > 0 && (
|
||||
<motion.div variants={sectionVariants}>
|
||||
<FeedSection
|
||||
title="In Your Library"
|
||||
icon={<IconSparkles size={20} className="text-primary" />}
|
||||
>
|
||||
<motion.div
|
||||
className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5"
|
||||
variants={staggerContainer}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
{newAvailable.slice(0, 10).map((t) => (
|
||||
<motion.div key={t.titleId ?? t.id} variants={staggerItem}>
|
||||
<TitleCard
|
||||
id={t.titleId ?? t.id}
|
||||
tmdbId={t.tmdbId ?? 0}
|
||||
type={t.type}
|
||||
title={t.title}
|
||||
posterPath={t.posterPath}
|
||||
releaseDate={t.releaseDate ?? t.firstAirDate}
|
||||
voteAverage={t.voteAverage}
|
||||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</FeedSection>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Recommendations */}
|
||||
{recommendations.length > 0 && (
|
||||
<motion.div variants={sectionVariants}>
|
||||
<FeedSection
|
||||
title="Recommended for You"
|
||||
icon={<IconSparkles size={20} className="text-primary" />}
|
||||
>
|
||||
<motion.div
|
||||
className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5"
|
||||
variants={staggerContainer}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
{recommendations.slice(0, 10).map((t) => (
|
||||
<motion.div key={t.id} variants={staggerItem}>
|
||||
<TitleCard
|
||||
id={t.id}
|
||||
tmdbId={t.tmdbId ?? 0}
|
||||
type={t.type}
|
||||
title={t.title}
|
||||
posterPath={t.posterPath}
|
||||
releaseDate={t.releaseDate ?? t.firstAirDate}
|
||||
voteAverage={t.voteAverage}
|
||||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</FeedSection>
|
||||
</motion.div>
|
||||
)}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
function FeedSection({
|
||||
title,
|
||||
icon,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
icon: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
{icon}
|
||||
<h2 className="font-display text-xl tracking-tight">{title}</h2>
|
||||
</div>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ContinueWatchingCard({ item }: { item: ContinueWatchingItem }) {
|
||||
const stillUrl =
|
||||
item.nextEpisode?.stillPath ?? item.title.backdropPath ?? null;
|
||||
const progress =
|
||||
item.totalEpisodes > 0
|
||||
? (item.watchedEpisodes / item.totalEpisodes) * 100
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<Link
|
||||
href={`/titles/${item.title.id}`}
|
||||
className="group relative w-[calc(100vw-3rem)] shrink-0 overflow-hidden rounded-xl border border-border/30 bg-card/50 transition-all hover:border-primary/20 hover:shadow-lg hover:shadow-black/25 sm:w-72"
|
||||
>
|
||||
{/* Episode still / backdrop image */}
|
||||
<div className="relative aspect-video overflow-hidden bg-muted">
|
||||
{stillUrl ? (
|
||||
<Image
|
||||
src={stillUrl}
|
||||
alt={item.nextEpisode?.name ?? item.title.title}
|
||||
width={500}
|
||||
height={281}
|
||||
className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full items-center justify-center bg-gradient-to-br from-card via-secondary to-muted">
|
||||
<IconPlayerPlay size={32} className="text-muted-foreground/30" />
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
|
||||
{/* Episode label overlay */}
|
||||
{item.nextEpisode && (
|
||||
<div className="absolute bottom-2.5 left-3 right-3">
|
||||
<p className="flex items-center gap-1.5 text-[10px] font-medium uppercase tracking-wider text-primary">
|
||||
<span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-primary" />
|
||||
Up next
|
||||
</p>
|
||||
<p className="mt-0.5 truncate text-sm font-medium text-white">
|
||||
<span className="font-mono text-xs text-white/60">
|
||||
S{item.nextEpisode.seasonNumber} E
|
||||
{item.nextEpisode.episodeNumber}
|
||||
</span>{" "}
|
||||
{item.nextEpisode.name}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Bottom bar with title + progress */}
|
||||
<div className="flex items-center gap-3 p-3">
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-medium">{item.title.title}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{item.watchedEpisodes}/{item.totalEpisodes} episodes
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground">
|
||||
<IconPlayerPlay size={14} />
|
||||
</div>
|
||||
</div>
|
||||
{/* Progress bar */}
|
||||
{progress > 0 && (
|
||||
<div className="absolute bottom-0 left-0 right-0 h-0.5 bg-muted">
|
||||
<div
|
||||
className="h-full bg-primary transition-all"
|
||||
style={{ width: `${progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
<Suspense fallback={<TitleGridSectionSkeleton />}>
|
||||
<RecommendationsSection userId={session.user.id} />
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user