Merge pull request #49 from nnivxix/fix/image-card

fix/backdrop image card
nnivxix · Oct 31, 2024 · eb27583 · eb27583
2 parents 97bc3ed + 0ef51f4
commit eb27583
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 29 deletions.
diff --git a/app/show/movie/[id]/page.tsx b/app/show/movie/[id]/page.tsx
@@ -33,6 +33,7 @@ import { Suspense } from "react";
 interface Params {
   params: { id: string };
 }
+
 interface Authentication {
   success: boolean;
   status_code: number;
@@ -72,9 +73,12 @@ export async function generateMetadata({ params }: Params): Promise<Metadata> {
 }
 
 export default async function Page({ params }: Params) {
-  const { movie, status } = await getMovie(params.id);
-  const states = await getStates(params.id);
-  const isAuthenticated = await authenticateUser();
+  const [movieData, states, isAuthenticated] = await Promise.all([
+    getMovie(params.id),
+    getStates(params.id),
+    authenticateUser(),
+  ]);
+  const { movie, status } = movieData;
 
   if (status === "error") {
     return notFound();
@@ -205,9 +209,7 @@ export default async function Page({ params }: Params) {
   );
 }
 
-async function getMovie(
-  movieId: string
-): Promise<{
+async function getMovie(movieId: string): Promise<{
   movie: MovieResponse | null;
   status: Status;
   error: string | null;

diff --git a/app/show/tv/[id]/page.tsx b/app/show/tv/[id]/page.tsx
@@ -67,13 +67,16 @@ export async function generateMetadata({ params }: Params): Promise<Metadata> {
 }
 
 export default async function Page({ params }: Params) {
-  const { tv, status } = await getTvShow(params.id);
-  const states = await getStates(params.id);
-  const isAuthenticated = await authenticateUser();
+  const [tvData, states, isAuthenticated] = await Promise.all([
+    getTvShow(params.id),
+    getStates(params.id),
+    authenticateUser(),
+  ]);
+  const { tv, status } = tvData;
 
-  if (status === "pending") {
-    return <pre className="text-white">loading...</pre>;
-  }
+  // if (status === "pending") {
+  //   return <pre className="text-white">loading...</pre>;
+  // }
   if (status === "error") {
     return notFound();
   }

diff --git a/app/watchlist/movie/page.tsx b/app/watchlist/movie/page.tsx
@@ -55,15 +55,14 @@ export default async function Page({
   return (
     <div>
       <div className="grid grid-cols-6 gap-4 mt-6">
-        {movies?.results.length &&
-          movies.results.map((movie, index) => (
-            <BackdropCard<SimpleMovie>
-              media={movie}
-              title={movie.title}
-              key={index}
-              className="lg:col-span-1 md:col-span-2 col-span-3"
-            />
-          ))}
+        {movies.results.map((movie, index) => (
+          <BackdropCard<SimpleMovie>
+            media={movie}
+            title={movie.title}
+            key={index}
+            className="lg:col-span-1 md:col-span-2 col-span-3"
+          />
+        ))}
       </div>
       <Suspense>
         <div className="flex w-full">

diff --git a/app/watchlist/tv/page.tsx b/app/watchlist/tv/page.tsx
@@ -34,9 +34,6 @@ export default async function Page({
   const account = await getAccount();
   const tv = await getWatchlistTv(account.id, currentPage as string);
 
-  // const { isAuthenticated } = useAccountStore()
-  // const { data: tv } = useFetch<Response<SimpleTv[]>>(`/account/9578292/watchlist/tv`)
-
   if (!isAuthenticated) {
     return (
       <div className="text-center">

diff --git a/next.config.mjs b/next.config.mjs
@@ -1,6 +1,15 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: "standalone",
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "image.tmdb.org",
+        port: "",
+      },
+    ],
+  },
 };
 
 export default nextConfig;
diff --git a/src/components/BackdropCard.tsx b/src/components/BackdropCard.tsx
@@ -1,8 +1,8 @@
 "use client";
 import Link from "next/link";
 import type { ComponentPropsWithRef } from "react";
-import RImage from "./RImage";
 import imageUrl from "@/utils/image-url";
+import Image from "next/image";
 
 export interface SimpleBaseMedia {
   adult: boolean;
@@ -36,13 +36,14 @@ export default function BackdropCard<T extends SimpleBaseMedia>({
       className={`${props.className} rounded-md group overflow-clip`}
     >
       <Link href={`/show/${isMovieType ? "movie" : "tv"}/${media.id}`}>
-        <RImage
+        <Image
           src={imageUrl({
             path: media.backdrop_path,
             size: "w300",
             type: "backdrop",
           })}
-          type="backdrop"
+          width={300}
+          height={200}
           alt={media.overview}
         />
         <div className="lg:opacity-0 group-hover:opacity-100 line-clamp-2">

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,4 +1,5 @@
 import Link from "next/link";
+import Image from "next/image";
 
 export default function Footer() {
   return (
@@ -11,10 +12,10 @@ export default function Footer() {
             design. Users can browse various movie titles and access detailed
             information, including the synopsis and trailers.
           </p>
-          <div className="flex items-center mb-4">
+          <div className="flex items-center mb-4 gap-3">
             <h3 className="text-gray-400">Data provided by </h3>
             <Link href="https://www.themoviedb.org" target="_blank">
-              <img src="tmdb.png" alt="" width={"80px"} className="ml-2" />
+              <Image src="/tmdb.png" alt="Tmbdb Logo" width={80} height={10} />
             </Link>
           </div>
           <p className="text-gray-400">© 2024</p>