Henry-Hiles/movie-react-app
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Some more improvements

Browse source
This commit is contained in:
“Henry-Hiles” 2022-11-09 11:23:32 -05:00
parent ebf8b8419a
commit 6e35f9023c
3 changed files with 74 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

104
src/pages/Actor.jsx
View file

@ -41,22 +41,24 @@ const Actor = () => {
)
const data = await response.json()
setCredits(
data.cast.map((movie) => ({
id: movie.id,
overview: movie.overview,
adult: movie.adult,
posterUrl: `https://image.tmdb.org/t/p/w342${movie.poster_path}`,
backdropUrl: `https://image.tmdb.org/t/p/original${movie.backdrop_path}`,
genres: movie.genre_ids.map((genreId) =>
GENRES.find((genre) => genre.id == genreId)
),
title: movie.title,
releaseDate: movie.release_date,
year: movie.release_date.split("-")[0],
averageVote: movie.vote_average,
voteCount: movie.vote_count,
popularity: movie.popularity,
}))
data.cast
.filter((movie) => movie.poster_path)
.map((movie) => ({
id: movie.id,
overview: movie.overview,
adult: movie.adult,
posterUrl: `https://image.tmdb.org/t/p/w342${movie.poster_path}`,
backdropUrl: `https://image.tmdb.org/t/p/original${movie.backdrop_path}`,
genres: movie.genre_ids.map((genreId) =>
GENRES.find((genre) => genre.id == genreId)
),
title: movie.title,
releaseDate: movie.release_date,
year: movie.release_date.split("-")[0],
averageVote: movie.vote_average,
voteCount: movie.vote_count,
popularity: movie.popularity,
}))
)
}
run()
@ -67,39 +69,51 @@ const Actor = () => {
<TopBar />
<div className={styles.Container}>
<div className={styles.Top}>
<h1 className={styles.Name}>{actor?.name}</h1>
<div className={styles.Section}>
<h2>Biography</h2>
<div>
{actor?.biography ? (
<a
href="#"
className={styles.Collapse}
onClick={() =>
setCollapsed((collapsed) => !collapsed)
}
>
<p
className={`${
collapsed ? styles.Collapsed : ""
} ${styles.Biography}`}
<img
src={`https://image.tmdb.org/t/p/w300${images?.profiles[0]?.file_path}`}
alt={`Image of ${actor?.name}`}
className={styles.Thumb}
/>
<div className={styles.Right}>
<h1 className={styles.Name}>{actor?.name}</h1>
<div className={styles.Section}>
<h1>Biography</h1>
<div>
{actor?.biography ? (
<a
href="#"
className={styles.Collapse}
onClick={() =>
setCollapsed(
(collapsed) => !collapsed
)
}
>
{actor.biography}
</p>
<p
className={`${
collapsed
? styles.Collapsed
: ""
} ${styles.Biography}`}
>
{actor.biography}
</p>
<p className={styles.ReadMore}>
{collapsed ? "Read More" : "Read Less"}
</p>
</a>
) : (
<p>No biography available.</p>
)}
<p className={styles.ReadMore}>
{collapsed
? "Read More"
: "Read Less"}
</p>
</a>
) : (
<p>No biography available.</p>
)}
</div>
</div>
</div>
</div>
<div className={styles.Section}>
<h2>Movies</h2>
<h1>Movies</h1>
<div className={styles.Credits}>
{credits?.map((movie) => (
<Link
@ -108,13 +122,13 @@ const Actor = () => {
className={styles.Movie}
>
<img src={movie.posterUrl} />
<span>{movie.title}</span>
<h3>{movie.title}</h3>
</Link>
))}
</div>
</div>
<div className={styles.Section}>
<h2>Images</h2>
<h1>Images</h1>
<div className={styles.Images}>
{images?.profiles.map((image) => (
<img