implement objectstats in movie detail page

package.json

@@ -1,27 +1,27 @@
 {
-  "name": "trepa-web",
-  "type": "module",
-  "version": "0.0.1",
-  "scripts": {
-    "dev": "bunx --bun astro dev",
-    "build": "rm -rf dist && bunx --bun astro check && bunx --bun astro build",
-    "preview": "bunx --bun astro preview",
-    "astro": "astro"
-  },
-  "dependencies": {
-    "@astrojs/check": "^0.8.1",
-    "@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",
-    "bootstrap": "^5.3.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-icons": "^5.2.1",
-    "typescript": "^5.5.3"
-  },
-  "devDependencies": {
-    "@biomejs/biome": "1.8.3"
-  }
+	"name": "trepa-web",
+	"type": "module",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "bunx --bun astro dev",
+		"build": "rm -rf dist && bunx --bun astro check && bunx --bun astro build",
+		"preview": "bunx --bun astro preview",
+		"astro": "astro"
+	},
+	"dependencies": {
+		"@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.12.2",
+		"bootstrap": "^5.3.3",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"react-icons": "^5.2.1",
+		"typescript": "^5.5.4"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "1.8.3"
+	}
 }

src/components/MoviesSearchInput.tsx

@@ -16,7 +16,7 @@ export default function MoviesSearchInput({ searchUrl }: MoviesSearchInput) {
 
 	function handleOnKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
 		if (e.key === "Enter") {
-			window.location.href = `${searchUrl}?q=${value}`;
+			window.location.href = `${searchUrl}?query=${value}`;
 		}
 	}
 

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-warning 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,16 +2,20 @@
 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 { MovieDetail } from "../../types";
 
 const jwt = Astro.cookies.get("jwt")?.value as string;
-const url = new URL(Astro.request.url);
 
-const queryParams = new URLSearchParams();
-const query = url.searchParams.get("q");
+const url = new URL(Astro.request.url);
+const query = url.searchParams.get("query");
+const limit = url.searchParams.get("limit") ?? "18";
+
+const queryParams = new URLSearchParams({
+    limit: limit,
+});
 
 if (query) {
-    queryParams.append("q", query);
+    queryParams.append("query", query);
 }
 
 const res = await fetch(
@@ -25,8 +29,7 @@ const res = await fetch(
     },
 );
 
-const resBody = (await res.json()) as { movies: Movie[] };
-const account = Astro.locals.account;
+const resBody = (await res.json()) as { movies: MovieDetail[] };
 ---
 
 <HomeLayout title="Movies">

src/pages/home/movies/[id].astro

@@ -1,7 +1,6 @@
 ---
-import { FaEye } from "react-icons/fa";
 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 { id } = Astro.params;
@@ -14,17 +13,17 @@ const res = await fetch(`${import.meta.env.API_URL}/movies/${id}`, {
 	},
 });
 
-const movie = (await res.json()).movie as Movie;
+const item = (await res.json()).movie as MovieDetail;
 ---
 
-<HomeLayout title={movie.title}>
+<HomeLayout title={item.movie.title}>
 	<>
-		<h1>{movie.title}</h1>
+		<h1>{item.movie.title}</h1>
 		<div class="card">
 			<div
 				class="card-body"
 				style={{
-					background: `linear-gradient(to left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)), url(${movie.backdrop_path})`,
+					background: `linear-gradient(to left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)), url(${item.movie.backdrop_path})`,
 					backgroundPosition: "center",
 					backgroundSize: "cover",
 					minHeight: "512px",
@@ -32,22 +31,30 @@ const movie = (await res.json()).movie as Movie;
 			>
 				<div class="row" style={{ height: "512px" }}>
 					<div class="col align-self-center">
-						<p>{movie.overview}</p>
+						<p>{item.movie.overview}</p>
 					</div>
 					<div class="col align-self-center">
 						<div class="d-grid">
-							<a
-								href={`/home/movies/${movie.id}`}
-								class="btn btn-primary"
-							>
-								Watch
-							</a>
+							{
+								item.stats ? (
+									<a
+										href={`/home/movies/${item.movie.id}`}
+										class="btn btn-primary"
+									>
+										Watch
+									</a>
+								) : (
+									<span class="badge text-bg-warning">
+										Bientot disponible
+									</span>
+								)
+							}
 						</div>
 						<hr />
 
 						<div class="d-grid">
 							<a
-								href={`/home/movies/${movie.id}`}
+								href={`/home/movies/${item.movie.id}`}
 								class="btn btn-secondary"
 							>
 								Share

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;