fp/services/next/app/vt/[slug]/vods/[page]/page.tsx

import VodsList, { VodsListHeading } from '@/app/components/vods-list';
import { getVtuberBySlug, getUrl } from '@/app/lib/vtubers';
import { IVodsResponse, getVodsForVtuber } from '@/app/lib/vods';
import Pager from '@/app/components/pager';
import { notFound } from 'next/navigation';


interface IPageParams {
  params: {
    slug: string;
    page: string; 
  };
}

export default async function Page({ params }: IPageParams) {
  const pageNumber = parseInt(params.page);
  const pageSize = 24
  
  console.log(`lets get us some vtuber and vods`);
  const vtuber = await getVtuberBySlug(params.slug);
  if (!vtuber) {
    console.error('getVtuberBySlug failed to get us a vtuber object.')
    return <p>failed to get vtuber</p>
    // return notFound();
  }
  

  const {vods, count} = await getVodsForVtuber(vtuber.id, pageNumber, 24, true);
  if (!vods) {
    return <p>failed to get vods</p>
    console.error('getVodsForVtuber failed to get us a vods object.')
    // return notFound();
  }

  return (
    <>
      <VodsListHeading slug={vtuber.slug} displayName={vtuber.display_name} />
      <VodsList vtuber={vtuber} vods={vods} page={pageNumber} pageSize={pageSize} />
      <Pager
        baseUrl={`/vt/${params.slug}/vods`}
        page={parseInt(params.page)}
        pageCount={vods.length/pageSize}
      />
    </>
  );
}