aarbit/tmnt-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replaces most custom CSS with Bulma. Restyles app, and adds poster art.
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse Source
This commit is contained in:
aarbit 2025-10-03 00:01:51 -05:00
parent b6be2a8ecb
commit 12582c00a7
5 changed files with 60 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -3,6 +3,10 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css"
>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TMNT</title> <title>TMNT</title>
</head> </head>

21
src/App.css
View File

@ -2,23 +2,8 @@
max-width: 1280px; max-width: 1280px;
margin: 0 auto; margin: 0 auto;
padding: 2rem; padding: 2rem;
text-align: center;
} }
.card { .poster {
/*padding: 2em;*/ max-width: min(10vh,16vw);
} }
.movie-table {
display: grid;
column-gap: 2em;
grid-template-columns: 50% 50%;
}
.screened {
text-align: right;
}
.title {
text-align: left;
}

36
src/App.tsx
View File

@ -2,6 +2,7 @@ import {useEffect, useState} from 'react'
import './App.css' import './App.css'
import {Movie} from "./Models.ts"; import {Movie} from "./Models.ts";
import hostName from "./Config.ts"; import hostName from "./Config.ts";
import MoviePoster from "./MoviePoster.tsx";
function App() { function App() {
const [movies, setMovies] = useState<Movie[]>([]) const [movies, setMovies] = useState<Movie[]>([])
@ -26,16 +27,10 @@ function App() {
/*function sortByTitle(a: Movie, b: Movie): number { /*function sortByTitle(a: Movie, b: Movie): number {
return a.title < b.title ? -1 : 1 return a.title < b.title ? -1 : 1
}*/ }*/
function handleMovieSelectionClick() {
}
return ( return (
<> <>
<h1>Tuesday Movie Night Team</h1> <h1>Tuesday Movie Night Team</h1>
<div className="card">
<div className={"movie-table"}>
{movies.sort(sortByScreenedDate).map((movie) => { {movies.sort(sortByScreenedDate).map((movie) => {
const screenedFormatted = new Date(movie.screenedDate).toLocaleDateString( const screenedFormatted = new Date(movie.screenedDate).toLocaleDateString(
'en-gb', 'en-gb',
@ -45,14 +40,33 @@ function App() {
day: 'numeric' day: 'numeric'
} }
); );
const regex = /(tt\d+)/
const match = regex.exec(movie.imdbLink)
let imdbId = ""
if (match) {
imdbId = match[1]
}
return ( return (
<> <div className={'card'} key={movie.id}>
<div className={"screened"}>{screenedFormatted}</div><div onClick={handleMovieSelectionClick} className={"title"}>{movie.title} ({movie.releaseYear})</div> <header className={'card-header'}>
</> <p className={'card-header-title'}>
{movie.title} ({movie.releaseYear})
</p>
</header>
<div className={'card-content'}>
<div className={'media'}>
<div className={'media-right'}>
<a href={movie.imdbLink}><MoviePoster imdbId={imdbId} /></a>
</div>
<div className={'media-content'}>
<p className={'is-size-5'}>{screenedFormatted}</p>
<p className={''}>{movie.notes}</p>
</div>
</div>
</div>
</div>
) )
})} })}
</div>
</div>
</> </>
) )

15
src/MovieDetails.tsx
View File

@ -1,15 +0,0 @@
import {Movie} from "./Models.ts";
interface MovieDetailsProps {
movie: Movie
}
export default function MovieDetails(props: MovieDetailsProps) {
return (
<>
<div>{props.movie.title} ({props.movie.releaseYear})</div>
<div>{props.movie.screenedDate}</div>
</>
)
}

28
src/MoviePoster.tsx Normal file
View File

@ -0,0 +1,28 @@
import {useEffect, useState} from 'react'
interface MoviePosterProps {
imdbId: string
}
export default function MoviePoster(props: Readonly<MoviePosterProps>) {
const [posterLink, setPosterLink] = useState<string>("");
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 (
<img className={'poster'} src={'https://placehold.co/500x750'}/>
)
} else {
return (
<img className={'poster'} src={posterLink}/>
)
}
}