From 6e35f9023c7835ff1524834e5c5f2cab475b715b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CHenry-Hiles=E2=80=9D?= <“henry@henryhiles.com”>
Date: Wed, 9 Nov 2022 11:23:32 -0500
Subject: [PATCH] Some more improvements

---
 src/pages/Actor.jsx         | 104 ++++++++++++++++++++----------------
 src/pages/Movie.jsx         |   3 +-
 src/styles/Actor.module.css |  16 +++++-
 3 files changed, 74 insertions(+), 49 deletions(-)

diff --git a/src/pages/Actor.jsx b/src/pages/Actor.jsx
index 1bcb104..c4be82f 100644
--- a/src/pages/Actor.jsx
+++ b/src/pages/Actor.jsx
@@ -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
diff --git a/src/pages/Movie.jsx b/src/pages/Movie.jsx
index 4ddc5fc..c4be4eb 100644
--- a/src/pages/Movie.jsx
+++ b/src/pages/Movie.jsx
@@ -79,11 +79,10 @@ const Movie = () => {
                                 width="30"
                                 height="30"
                                 fill="currentColor"
-                                class="bi bi-chevron-down"
                                 viewBox="0 0 16 16"
                             >
                                 <path
-                                    fill-rule="evenodd"
+                                    fillRule="evenodd"
                                     d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
                                 />
                             </svg>
diff --git a/src/styles/Actor.module.css b/src/styles/Actor.module.css
index 5e1e23c..82d21f5 100644
--- a/src/styles/Actor.module.css
+++ b/src/styles/Actor.module.css
@@ -5,8 +5,18 @@
     color: white;
 }
 
+.Top {
+    display: flex;
+    gap: 20px;
+}
+
+.Thumb {
+    height: 450px;
+}
+
 .Name {
     margin-top: 10px;
+    font-size: 3em;
 }
 
 .Biography {
@@ -29,8 +39,10 @@
     height: 100%;
 }
 
-.Section div {
-    margin-left: 10px;
+.Right {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
 }
 
 .Collapsed {