🎞️ `WatchHistoryPage`

The WatchHistoryPage is a protected page that displays a user’s watch history using the WatchHistory component from @zezosoft/react-ui-kit.

Watch data is fetched on the server using lib/zezoClient, and the UI is rendered client-side with interactivity using the WatchListUI component.

🛠️ Server Component – `page.tsx`

This file handles authentication, session validation, and server-side data fetching using zezoClient. Unauthenticated users are redirected to /email-login.


import { zezoClient } from "@/lib/zezoClient";
import { WatchListUI } from "../_components/watch-list-ui";
import { redirect } from "next/navigation";
 
export default async function WatchHistoryPage() {
  const client = zezoClient();
  const session = await client.auth.whoamI().catch(() => null);
 
  if (!session) {
    redirect("/email-login");
  }
 
  const res = await client.history
    .get({ pageParam: 1 })
    .catch(() => ({ data: [] }));
 
  return <WatchListUI history={res.data || []} />;
}

🧩 Client Component – WatchListUI

This component receives a history array and renders it using the WatchHistory component from the Zezo UI Kit.


"use client";
 
import React from "react";
import { useRouter } from "next/navigation";
import { WatchHistory as ZezoWatchHistory } from "@zezosoft/react-ui-kit";
 
interface WatchItem {
  _id: string;
  content?: {
    title?: string;
    thumbnail?: string;
    slug?: string;
  };
}
 
interface WatchListUIProps {
  history: WatchItem[];
  onItemClick?: (item: WatchItem) => void;
}
 
export const WatchListUI: React.FC<WatchListUIProps> = ({
  history,
  onItemClick,
}) => {
  const router = useRouter();
 
  const handleClick = (item: WatchItem) => {
    if (onItemClick) {
      onItemClick(item);
    } else {
      const slug = item.content?.slug || item._id;
      router.push(`/details/${slug}`);
    }
  };
 
  return (
    <ZezoWatchHistory
      items={history.map((item, index) => ({
        id: item._id,
        title: item.content?.title || "Untitled",
        thumbnail: item.content?.thumbnail || "",
        onClick: () => handleClick(item),
        index,
      }))}
    />
  );
};

🧾 Props Reference

Prop	Type	Required	Description
`history`	`WatchItem[]`	✅ Yes	Array of watch history items to display.
`onItemClick`	`(item: WatchItem) => void`	❌ No	Optional custom handler when a history item is clicked.

📦 WatchHistory Component Props

Prop	Type	Default	Description
`items`	`WatchThumbnailItem[]`	✅	List of history thumbnails to show.
`sectionTitle`	`string`	None	Optional section title.
`showPlayIcon`	`boolean`	`false`	Whether to overlay a play icon on each thumbnail.
`showTitleBelow`	`boolean`	`false`	Whether to display the title below thumbnails.
`className`	`string`	—	Optional Tailwind utility classes to apply styling.
`fallbackImage`	`string`	—	Optional fallback image if the thumbnail is missing.

🧪 Behavior

✅ Authenticated users see their watch history.
🔁 Unauthenticated users are redirected to /email-login.
🖱️ Clicking an item navigates to the corresponding /details/[slug] page.
🧩 You can override the click behavior using onItemClick.

🖼️ Preview

📁 Notes

You must wrap this page in a route that is protected (i.e., server-side session check).
Data is fetched using zezoClient().history.get({ pageParam: 1 }).
You can integrate your own backend instead of using the Zezo API — just pass an array of WatchItem objects.

🎞️ WatchHistoryPage

🛠️ Server Component – page.tsx