Refactor TopFlix page and add MediaCard component

src/pages/TopFlix.tsx

@@ -1,14 +1,16 @@
 import classNames from "classnames";
-import { ReactNode, useEffect, useState } from "react";
-import { Link } from "react-router-dom"; // Import Link from react-router-dom
+import { useEffect, useState } from "react";
 
+import { getMediaDetails, getMediaPoster } from "@/backend/metadata/tmdb";
+import { TMDBContentTypes } from "@/backend/metadata/types/tmdb";
 import { ThiccContainer } from "@/components/layout/ThinContainer";
+import { MediaCard } from "@/components/media/MediaCard";
+import { MediaGrid } from "@/components/media/MediaGrid";
 import { Divider } from "@/components/utils/Divider";
 import { Heading1, Paragraph } from "@/components/utils/Text";
+import { MediaItem } from "@/utils/mediaTypes";
 
 import { SubPageLayout } from "./layouts/SubPageLayout";
-// import { MediaGrid } from "@/components/media/MediaGrid"
-// import { TopFlixCard } from "@/components/media/FlixCard";
 
 function Button(props: {
   className: string;
@@ -31,53 +33,25 @@ function Button(props: {
   );
 }
 
-function isShowOrMovie(tmdbFullId: string): "series" | "movie" | "unknown" {
+function isShowOrMovie(tmdbFullId: string): "show" | "movie" {
   if (tmdbFullId.includes("show-")) {
-    return "series";
+    return "show";
   }
   if (tmdbFullId.includes("movie-")) {
     return "movie";
   }
-  return "unknown";
+  throw new Error("Invalid tmdbFullId");
 }
 
-function directLinkToContent(tmdbFullId: string) {
-  if (isShowOrMovie(tmdbFullId) === "series") {
-    return `/media/tmdb-tv-${tmdbFullId.split("-")[1]}#/media/tmdb-tv-${
-      tmdbFullId.split("-")[1]
-    }`;
-  }
-  if (isShowOrMovie(tmdbFullId) === "movie") {
-    return `/media/tmdb-movie-${tmdbFullId.split("-")[1]}#/media/tmdb-movie-${
-      tmdbFullId.split("-")[1]
-    }`;
-  }
-  return null;
-}
+async function getPoster(
+  tmdbId: string,
+  type: TMDBContentTypes.MOVIE | TMDBContentTypes.TV,
+): Promise<string> {
+  const details = await getMediaDetails(tmdbId, type);
 
-function ConfigValue(props: {
-  name: string;
-  id: string;
-  children?: ReactNode;
-}) {
-  const link = directLinkToContent(props.id);
-  return (
-    <>
-      <div className="flex">
-        <p className="flex-1 font-bold text-white pr-5 pl-3">
-          {link ? (
-            <Link to={link} className="hover:underline">
-              {props.name}
-            </Link>
-          ) : (
-            <p>{props.name}</p>
-          )}
-        </p>
-        <p className="pr-3">{props.children}</p>
-      </div>
-      <Divider marginClass="my-3" />
-    </>
-  );
+  const posterPath = getMediaPoster(details.poster_path);
+
+  return posterPath || "";
 }
 
 async function getRecentPlayedItems() {
@@ -139,8 +113,8 @@ export function TopFlix() {
   const [totalViews, setTotalViews] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const [currentPage, setCurrentPage] = useState(1);
-  const itemsPerPage = 10;
-  const maxItemsToShow = 100; // Maximum items to show
+  const itemsPerPage = 12;
+  const maxItemsToShow = 120; // Maximum items to show
   const maxPageCount = Math.ceil(maxItemsToShow / itemsPerPage); // Calculate max page count based on maxItemsToShow
 
   useEffect(() => {
@@ -185,6 +159,8 @@ export function TopFlix() {
     );
   }
 
+  // make a object named media and it should be of type MediaItem
+
   return (
     <SubPageLayout>
       <ThiccContainer>
@@ -203,20 +179,23 @@ export function TopFlix() {
           </div>
 
           <Divider marginClass="my-3" />
-          {getItemsForCurrentPage().map((item) => {
-            return (
-              <ConfigValue
-                key={item.tmdbFullId}
-                id={item.tmdbFullId}
-                name={item.title}
-              >
-                {`${item.providerId}, ${isShowOrMovie(
-                  item.tmdbFullId,
-                )} - Views: `}
-                <strong>{item.count}</strong>
-              </ConfigValue>
-            );
-          })}
+          <MediaGrid>
+            {getItemsForCurrentPage().map((item) => {
+              const tmdbId = item.tmdbFullId.split("-")[1];
+              const type = isShowOrMovie(item.tmdbFullId);
+              // const poster = await getPoster(tmdbId, type === "movie" ? TMDBContentTypes.MOVIE : TMDBContentTypes.TV);
+              const poster = "";
+              const media: MediaItem = {
+                id: tmdbId,
+                title: item.title,
+                type,
+                poster,
+                year: 2009,
+              };
+
+              return <MediaCard linkable media={media} />;
+            })}
+          </MediaGrid>
         </div>
         <div
           style={{ display: "flex", justifyContent: "space-between" }}