package.json

@@ -9,17 +9,17 @@
 		"astro": "astro"
 	},
 	"dependencies": {
-    "@astrojs/check": "^0.8.1",
+		"@astrojs/check": "^0.8.2",
 		"@astrojs/node": "^8.3.2",
 		"@astrojs/react": "^3.6.0",
 		"@types/react": "^18.3.3",
 		"@types/react-dom": "^18.3.0",
-    "astro": "^4.11.5",
+		"astro": "^4.12.2",
 		"bootstrap": "^5.3.3",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-icons": "^5.2.1",
-    "typescript": "^5.5.3"
+		"typescript": "^5.5.4"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.8.3"

src/components/lists/movies/CardMoviesList.tsx

@@ -1,14 +1,14 @@
-import type { Movie } from "../../../types";
+import type { MovieDetail } from "../../../types";
 import CardMoviesListItem from "./CardMoviesListItem";
 
 interface CardMoviesListProps {
-	movies: Movie[];
+	movies: MovieDetail[];
 }
 
 export default function CardMoviesList({ movies }: CardMoviesListProps) {
 	const items = movies.map((elt) => {
 		return (
-			<div key={elt.id} className="col-2 mb-4">
+			<div key={elt.movie.id} className="col-2 mb-4">
 				<CardMoviesListItem movie={elt} />
 			</div>
 		);

src/components/lists/movies/CardMoviesListItem.tsx

@@ -1,8 +1,8 @@
 import { FaEye } from "react-icons/fa";
-import type { Movie } from "../../../types";
+import type { Movie, MovieDetail } from "../../../types";
 
 interface CardMoviesListItemProps {
-	movie: Movie;
+	movie: MovieDetail;
 }
 
 export default function CardMoviesListItem({ movie }: CardMoviesListItemProps) {
@@ -10,7 +10,7 @@ export default function CardMoviesListItem({ movie }: CardMoviesListItemProps) {
 		<div
 			className="cardshadow"
 			style={{
-				backgroundImage: `url(${movie.poster_path})`,
+				backgroundImage: `url(${movie.movie.poster_path})`,
 				backgroundPosition: "center",
 				backgroundSize: "cover",
 				height: "320px",
@@ -23,7 +23,7 @@ export default function CardMoviesListItem({ movie }: CardMoviesListItemProps) {
 						<div style={{ height: "50%" }} className="row">
 							<div className="col align-self-end">
 								<h5 style={{ textAlign: "center", verticalAlign: "center" }}>
-									{movie.title}
+									{movie.movie.title}
 								</h5>
 							</div>
 						</div>
@@ -33,8 +33,19 @@ export default function CardMoviesListItem({ movie }: CardMoviesListItemProps) {
 						>
 							<div className="col-8 align-self-center">
 								<div className="d-grid">
+									{movie.stats ? (
+										<span className="badge text-bg-success mb-2">
+											Disponible
+										</span>
+									) : (
+										<span className="badge text-bg-secondary mb-2">
+											Bientot dispo.
+										</span>
+									)}
+
+									<br />
 									<a
-										href={`/home/movies/${movie.id}`}
+										href={`/home/movies/${movie.movie.id}`}
 										className="btn btn-primary"
 									>
 										<FaEye />

src/pages/home/index.astro

@@ -2,7 +2,7 @@
 import MoviesSearchInput from "../../components/MoviesSearchInput";
 import CardMoviesList from "../../components/lists/movies/CardMoviesList";
 import HomeLayout from "../../layouts/HomeLayout.astro";
-import type { Movie } from "../../types";
+import type { Movie, MovieDetail } from "../../types";
 
 const jwt = Astro.cookies.get("jwt")?.value as string;
 const url = new URL(Astro.request.url);
@@ -11,7 +11,7 @@ const queryParams = new URLSearchParams();
 const query = url.searchParams.get("q");
 
 if (query) {
-    queryParams.append("q", query);
+    queryParams.append("query", query);
 }
 
 const res = await fetch(
@@ -25,7 +25,7 @@ const res = await fetch(
     },
 );
 
-const resBody = (await res.json()) as { movies: Movie[] };
+const resBody = (await res.json()) as { movies: MovieDetail[] };
 const account = Astro.locals.account;
 ---
 

src/types.ts

@@ -1,3 +1,7 @@
+export interface ObjectStats {
+	size: number;
+}
+
 export interface Movie {
 	id: number;
 	title: string;
@@ -7,6 +11,15 @@ export interface Movie {
 	release_date: string;
 }
 
+export interface MovieDetail {
+	movie: Movie;
+	stats?: ObjectStats;
+}
+
+export type SearchMovie = {
+	ready: boolean;
+} & Movie;
+
 export interface CreateMovie {
 	title: string;
 	overview: string;