From 12582c00a737c52a271febdbaed2f5e24625a7b7 Mon Sep 17 00:00:00 2001 From: aarbit Date: Fri, 3 Oct 2025 00:01:51 -0500 Subject: [PATCH] Replaces most custom CSS with Bulma. Restyles app, and adds poster art. --- index.html | 4 ++++ src/App.css | 21 +++------------------ src/App.tsx | 36 +++++++++++++++++++++++++----------- src/MovieDetails.tsx | 15 --------------- src/MoviePoster.tsx | 28 ++++++++++++++++++++++++++++ 5 files changed, 60 insertions(+), 44 deletions(-) delete mode 100644 src/MovieDetails.tsx create mode 100644 src/MoviePoster.tsx diff --git a/index.html b/index.html index 7a5cacc..112a81e 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,10 @@ + TMNT diff --git a/src/App.css b/src/App.css index ba89c48..be12f83 100644 --- a/src/App.css +++ b/src/App.css @@ -2,23 +2,8 @@ max-width: 1280px; margin: 0 auto; padding: 2rem; - text-align: center; } -.card { - /*padding: 2em;*/ -} - -.movie-table { - display: grid; - column-gap: 2em; - grid-template-columns: 50% 50%; -} - -.screened { - text-align: right; -} - -.title { - text-align: left; -} +.poster { + max-width: min(10vh,16vw); +} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index cbf096e..f279099 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,6 +2,7 @@ import {useEffect, useState} from 'react' import './App.css' import {Movie} from "./Models.ts"; import hostName from "./Config.ts"; +import MoviePoster from "./MoviePoster.tsx"; function App() { const [movies, setMovies] = useState([]) @@ -26,16 +27,10 @@ function App() { /*function sortByTitle(a: Movie, b: Movie): number { return a.title < b.title ? -1 : 1 }*/ - - function handleMovieSelectionClick() { - - } return ( <>

Tuesday Movie Night Team

-
-
{movies.sort(sortByScreenedDate).map((movie) => { const screenedFormatted = new Date(movie.screenedDate).toLocaleDateString( 'en-gb', @@ -45,14 +40,33 @@ function App() { day: 'numeric' } ); + const regex = /(tt\d+)/ + const match = regex.exec(movie.imdbLink) + let imdbId = "" + if (match) { + imdbId = match[1] + } return ( - <> -
{screenedFormatted}
{movie.title} ({movie.releaseYear})
- +
+
+

+ {movie.title} ({movie.releaseYear}) +

+
+
+
+
+ +
+
+

{screenedFormatted}

+

{movie.notes}

+
+
+
+
) })} -
-
) diff --git a/src/MovieDetails.tsx b/src/MovieDetails.tsx deleted file mode 100644 index 2cfc36d..0000000 --- a/src/MovieDetails.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import {Movie} from "./Models.ts"; - -interface MovieDetailsProps { - movie: Movie -} - -export default function MovieDetails(props: MovieDetailsProps) { - return ( - <> -
{props.movie.title} ({props.movie.releaseYear})
-
{props.movie.screenedDate}
- - ) - -} \ No newline at end of file diff --git a/src/MoviePoster.tsx b/src/MoviePoster.tsx new file mode 100644 index 0000000..4c53d87 --- /dev/null +++ b/src/MoviePoster.tsx @@ -0,0 +1,28 @@ +import {useEffect, useState} from 'react' +interface MoviePosterProps { + imdbId: string +} +export default function MoviePoster(props: Readonly) { + const [posterLink, setPosterLink] = useState(""); + + useEffect(() => { + console.log(props.imdbId); + fetch("https://api.themoviedb.org/3/find/" + props.imdbId + "?external_source=imdb_id&api_key=15d2ea6d0dc1d476efbca3eba2b9bbfb", {}) + .then(response => response.json()) + .then((json) =>{ + console.log(json); + setPosterLink("http://image.tmdb.org/t/p/w500" + json.movie_results[0].poster_path) + }) + }, []); + + if(posterLink == "") { + return ( + + ) + } else { + return ( + + ) + } + +} \ No newline at end of file