From afd9170d6dec539dc85cb04775992e37f50ddd71 Mon Sep 17 00:00:00 2001
From: qpismont <pismont.quentin@protonmail.com>
Date: Mon, 1 Jul 2024 23:33:36 +0200
Subject: [PATCH] add tmdb search

---
 src/components/DebouceInput.tsx               | 53 +++++++++++++++++++
 src/components/TmdbSearch.tsx                 | 27 ++++++++++
 src/components/TmdbSearchInput.tsx            | 34 ++++++++++++
 .../lists/movies/GroupMoviesList.tsx          | 18 +++++++
 .../lists/movies/GroupMoviesListItem.tsx      | 43 +++++++++++++++
 src/pages/api/tmdb/movies/search.ts           | 20 +++++++
 src/pages/home/settings/index.astro           |  2 +-
 src/pages/home/settings/movies.astro          | 21 ++++++++
 src/types.ts                                  |  7 +++
 9 files changed, 224 insertions(+), 1 deletion(-)
 create mode 100644 src/components/DebouceInput.tsx
 create mode 100644 src/components/TmdbSearch.tsx
 create mode 100644 src/components/TmdbSearchInput.tsx
 create mode 100644 src/components/lists/movies/GroupMoviesList.tsx
 create mode 100644 src/components/lists/movies/GroupMoviesListItem.tsx
 create mode 100644 src/pages/api/tmdb/movies/search.ts
 create mode 100644 src/types.ts

diff --git a/src/components/DebouceInput.tsx b/src/components/DebouceInput.tsx
new file mode 100644
index 0000000..e691831
--- /dev/null
+++ b/src/components/DebouceInput.tsx
@@ -0,0 +1,53 @@
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
+
+interface DebounceProps {
+	debouceDelay: number;
+	onDebounce: (value: string) => void;
+}
+
+type DebouceInputProps = DebounceProps &
+	React.InputHTMLAttributes<HTMLInputElement>;
+
+export default function DebounceInput(props: DebouceInputProps) {
+	const [value, setValue] = useState<string>("");
+
+	const debounceTimeout = useRef<number | null>(null);
+
+	useEffect(() => {
+		if (typeof props.value === "string") {
+			setValue(props.value);
+		} else {
+			setValue("");
+		}
+	}, [props.value]);
+
+	function handleOnChange(e: React.ChangeEvent<HTMLInputElement>) {
+		if (debounceTimeout.current) {
+			clearTimeout(debounceTimeout.current);
+		}
+
+		setValue(e.target.value);
+
+		debounceTimeout.current = setTimeout(
+			() => props.onDebounce(e.target.value),
+			props.debouceDelay,
+		);
+	}
+
+	const inputAttr = {
+		...props,
+		debouceDelay: undefined,
+		onDebounce: undefined,
+	};
+
+	return (
+		<input
+			className={props.className}
+			placeholder={props.placeholder}
+			type="text"
+			value={value}
+			onChange={handleOnChange}
+		/>
+	);
+}
diff --git a/src/components/TmdbSearch.tsx b/src/components/TmdbSearch.tsx
new file mode 100644
index 0000000..b7f9b01
--- /dev/null
+++ b/src/components/TmdbSearch.tsx
@@ -0,0 +1,27 @@
+import { useState } from "react";
+import type { Movie } from "../types";
+import TmdbSearchInput from "./TmdbSearchInput";
+import GroupMoviesList from "./lists/movies/GroupMoviesList";
+
+export default function TmdbSearch() {
+	const [movies, setMovies] = useState<Movie[]>([]);
+
+	function handleOnSearch(movies: Movie[]) {
+		setMovies(movies);
+	}
+
+	return (
+		<>
+			<div className="row">
+				<div className="col">
+					<TmdbSearchInput onSearch={handleOnSearch} />
+				</div>
+			</div>
+			<div style={{ marginTop: "8px" }} className="row">
+				<div className="col">
+					<GroupMoviesList movies={movies} />
+				</div>
+			</div>
+		</>
+	);
+}
diff --git a/src/components/TmdbSearchInput.tsx b/src/components/TmdbSearchInput.tsx
new file mode 100644
index 0000000..d2c0191
--- /dev/null
+++ b/src/components/TmdbSearchInput.tsx
@@ -0,0 +1,34 @@
+import type { Movie } from "../types";
+import DebounceInput from "./DebouceInput";
+
+interface TmdbSearchInputProps {
+	onSearch: (movies: Movie[]) => void;
+}
+
+export default function TmdbSearchInput({ onSearch }: TmdbSearchInputProps) {
+	function handleOnSearchInputDebounce(value: string) {
+		fetch(`/api/tmdb/movies/search?query=${value}`, {
+			method: "GET",
+			credentials: "include",
+			headers: {
+				Accept: "application/json",
+				"Content-Type": "application/json",
+			},
+		})
+			.then((res) => res.json())
+			.then((json) => {
+				onSearch(json.movies);
+			})
+			.catch((err) => console.log(err));
+		onSearch([]);
+	}
+
+	return (
+		<DebounceInput
+			className="form-control"
+			placeholder="Search here"
+			onDebounce={handleOnSearchInputDebounce}
+			debouceDelay={1000}
+		/>
+	);
+}
diff --git a/src/components/lists/movies/GroupMoviesList.tsx b/src/components/lists/movies/GroupMoviesList.tsx
new file mode 100644
index 0000000..f4f2f25
--- /dev/null
+++ b/src/components/lists/movies/GroupMoviesList.tsx
@@ -0,0 +1,18 @@
+import type { Movie } from "../../../types";
+import GroupMoviesListItem from "./GroupMoviesListItem";
+
+interface GroupMoviesListProps {
+	movies: Movie[];
+	onClick?: (movie: Movie) => void;
+}
+
+export default function GroupMoviesList({
+	movies,
+	onClick,
+}: GroupMoviesListProps) {
+	const items = movies.map((elt) => (
+		<GroupMoviesListItem key={elt.id} item={elt} onClick={onClick} />
+	));
+
+	return <div className="list-group">{items}</div>;
+}
diff --git a/src/components/lists/movies/GroupMoviesListItem.tsx b/src/components/lists/movies/GroupMoviesListItem.tsx
new file mode 100644
index 0000000..8733fb4
--- /dev/null
+++ b/src/components/lists/movies/GroupMoviesListItem.tsx
@@ -0,0 +1,43 @@
+import type { Movie } from "../../../types";
+
+interface GroupMoviesListItemProps {
+	item: Movie;
+	onClick?: (movie: Movie) => void;
+}
+
+export default function GroupMoviesListItem({
+	item,
+	onClick,
+}: GroupMoviesListItemProps) {
+	function handleOnClick(e: React.MouseEvent<HTMLElement>) {
+		e.stopPropagation();
+		e.preventDefault();
+
+		if (onClick) onClick(item);
+	}
+
+	return (
+		<button
+			onClick={handleOnClick}
+			type="submit"
+			className="list-group-item list-group-item-action flex-column align-items-start"
+		>
+			<div className="d-flex w-100 justify-content-between">
+				<h5 className="mb-1">{item.title}</h5>
+				<small>{item.release_date}</small>
+			</div>
+			<div className="row">
+				<div className="col-2">
+					<img
+						className="img-thumbnail"
+						src={`https://image.tmdb.org/t/p/w500${item.poster_path}`}
+						alt="lol"
+					/>
+				</div>
+				<div className="col-10">
+					<p className="mb-1">{item.overview}</p>
+				</div>
+			</div>
+		</button>
+	);
+}
diff --git a/src/pages/api/tmdb/movies/search.ts b/src/pages/api/tmdb/movies/search.ts
new file mode 100644
index 0000000..73e270d
--- /dev/null
+++ b/src/pages/api/tmdb/movies/search.ts
@@ -0,0 +1,20 @@
+import type { APIRoute } from "astro";
+
+export const GET: APIRoute = async ({ request, cookies }) => {
+	const jwt = cookies.get("jwt")?.value as string;
+	const url = new URL(request.url);
+
+	const res = await fetch(
+		`${import.meta.env.API_URL}/tmdb/movies/search?query=${url.searchParams.get("query")}`,
+		{
+			method: "GET",
+			headers: {
+				"Content-Type": "application/json",
+				Authorization: `Bearer ${jwt}`,
+			},
+		},
+	);
+
+	const resBody = await res.text();
+	return new Response(resBody, { status: res.status });
+};
diff --git a/src/pages/home/settings/index.astro b/src/pages/home/settings/index.astro
index 2925f80..f792e19 100644
--- a/src/pages/home/settings/index.astro
+++ b/src/pages/home/settings/index.astro
@@ -26,7 +26,7 @@ import HomeLayout from "../../../layouts/HomeLayout.astro";
                 <a
                     href="/home/settings/movies"
                     class="list-group-item list-group-item-action"
-                    ><MdOutlineLocalMovies /> Movies</a
+                    ><MdOutlineLocalMovies /> Add movie</a
                 >
             </div>
         </div>
diff --git a/src/pages/home/settings/movies.astro b/src/pages/home/settings/movies.astro
index e69de29..8c66554 100644
--- a/src/pages/home/settings/movies.astro
+++ b/src/pages/home/settings/movies.astro
@@ -0,0 +1,21 @@
+---
+import TmdbSearch from "../../../components/TmdbSearch";
+import HomeLayout from "../../../layouts/HomeLayout.astro";
+---
+
+<HomeLayout title="Add movie">
+    <div class="row justify-content-center">
+        <div class="col">
+            <div class="row">
+                <div class="col"><h1>Add movie</h1></div>
+            </div>
+            <div class="row">
+                <div class="col">
+                    <h3>Search on TMDB Database</h3>
+                    <TmdbSearch client:load />
+                </div>
+                <div class="col"></div>
+            </div>
+        </div>
+    </div>
+</HomeLayout>
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..30676cd
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,7 @@
+export interface Movie {
+	id: number;
+	title: string;
+	overview: string;
+	poster_path: string;
+	release_date: string;
+}