From 18c6684fb25fc0c9caac4d631a6f05e96edab054 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CHenry-Hiles=E2=80=9D?= <“henry@henryhiles.com”> Date: Mon, 31 Oct 2022 10:56:38 -0400 Subject: [PATCH] Latest changes --- src/App.jsx | 2 + src/components/CardList.jsx | 18 +++--- src/pages/Actor.jsx | 125 ++++++++++++++++++++++++++++++++++++ src/pages/Home.jsx | 8 ++- src/pages/Movie.jsx | 31 +++++++-- src/styles/Actor.module.css | 64 ++++++++++++++++++ src/styles/Card.module.css | 2 + src/styles/Home.module.css | 10 +++ src/styles/Movie.module.css | 8 ++- vite.config.js | 26 ++++---- 10 files changed, 265 insertions(+), 29 deletions(-) create mode 100644 src/pages/Actor.jsx create mode 100644 src/styles/Actor.module.css diff --git a/src/App.jsx b/src/App.jsx index cd1aa42..eeec100 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -2,12 +2,14 @@ import { Routes, Route } from "react-router-dom" import "./App.css" import Home from "pages/Home" import Movie from "pages/Movie" +import Actor from "pages/Actor" const App = () => (
} /> } /> + } /> 404 - Not Found} />
diff --git a/src/components/CardList.jsx b/src/components/CardList.jsx index c9129c9..25c7847 100644 --- a/src/components/CardList.jsx +++ b/src/components/CardList.jsx @@ -1,12 +1,12 @@ -import Card from "components/Card" -import styles from "styles/CardList.module.css" +import Card from "components/Card"; +import styles from "styles/CardList.module.css"; const CardList = ({ movies }) => ( -
- {movies.map((movie) => ( - - ))} -
-) +
+ {movies?.map((movie) => ( + + ))} +
+); -export default CardList +export default CardList; diff --git a/src/pages/Actor.jsx b/src/pages/Actor.jsx new file mode 100644 index 0000000..b288fe6 --- /dev/null +++ b/src/pages/Actor.jsx @@ -0,0 +1,125 @@ +import { useEffect, useState } from "react" +import config from "config" +import styles from "styles/Actor.module.css" +import { Link, useParams } from "react-router-dom" +import { GENRES } from "../constants" +import Card from "components/Card" + +const Actor = () => { + const { actorId } = useParams() + const [actor, setActor] = useState() + const [images, setImages] = useState() + const [collapsed, setCollapsed] = useState(true) + const [credits, setCredits] = useState() + + useEffect(() => { + const run = async () => { + const response = await fetch( + `https://api.themoviedb.org/3/person/${actorId}?api_key=${config.apiKey}` + ) + const data = await response.json() + setActor(data) + } + run() + }, [actorId]) + + useEffect(() => { + const run = async () => { + const response = await fetch( + `https://api.themoviedb.org/3/person/${actorId}/images?api_key=${config.apiKey}` + ) + const data = await response.json() + setImages(data) + } + run() + }, [actorId]) + + useEffect(() => { + const run = async () => { + const response = await fetch( + `https://api.themoviedb.org/3/person/${actorId}/movie_credits?api_key=${config.apiKey}` + ) + 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, + })) + ) + } + run() + }, [actorId]) + + return ( +
+

{actor?.name}

+
+

Biography

+
+ {actor?.biography ? ( + + setCollapsed((collapsed) => !collapsed) + } + > +

+ {actor.biography} +

+ +

+ {collapsed ? "Read More" : "Read Less"} +

+ +

{collapsed}

+ + ) : ( +

No biography available.

+ )} +
+
+
+

Images

+
+ {images?.profiles.map((image) => ( + + ))} +
+
+
+

Movies

+
+ {credits?.map((movie) => ( + + + {movie.title} + + ))} +
+
+
+ ) +} + +export default Actor diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index acf5f89..2551ab4 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -1,10 +1,10 @@ -import CardList from "components/CardList" import TopBar from "components/TopBar" import useDebounce from "hooks/useDebounce" import { useEffect, useState } from "react" import styles from "styles/Home.module.css" import config from "config" import { GENRES } from "../constants" +import Card from "components/Card" const Home = () => { const [movies, setMovies] = useState([]) @@ -48,7 +48,11 @@ const Home = () => { return (
- +
+ {movies?.map((movie) => ( + + ))} +
) } diff --git a/src/pages/Movie.jsx b/src/pages/Movie.jsx index ec3de73..0eb3068 100644 --- a/src/pages/Movie.jsx +++ b/src/pages/Movie.jsx @@ -1,5 +1,5 @@ import { useEffect, useState } from "react" -import { useParams } from "react-router-dom" +import { Link, useParams } from "react-router-dom" import styles from "styles/Movie.module.css" import config from "config" @@ -66,7 +66,9 @@ const Movie = () => {

{genre}

))}

- {movie.averageVote} + + Average Rating: {movie.averageVote.toFixed(1)} + {

+ {false ? ( +

+ Average Rating: {movie.averageVote} + + + + +

+ ) : ( +

Rate this movie

+ )}

Actors

{cast?.map((actor) => ( -
+ {actor.profile_path ? ( { )}

{actor.name}

-
+ ))}
diff --git a/src/styles/Actor.module.css b/src/styles/Actor.module.css new file mode 100644 index 0000000..21f2480 --- /dev/null +++ b/src/styles/Actor.module.css @@ -0,0 +1,64 @@ +.Container { + display: flex; + flex-direction: column; + padding: 15px; + color: white; +} + +.Images { + display: flex; + overflow: scroll; + align-items: start; + gap: 15px; + height: 200px; +} + +.Image { + height: 100%; +} + +.Section div { + margin-left: 10px; +} + +.Collapsed { + -webkit-line-clamp: 5; + -webkit-box-orient: vertical; + display: -webkit-box; + overflow: hidden; + text-overflow: ellipsis; + overflow-wrap: break-word; +} + +.Collapse { + color: white; +} + +.Credits { + display: flex; + width: 100%; + gap: 20px; + height: 500px; + overflow: scroll; +} + +.ReadMore { + text-decoration: underline; +} + +.Movie { + display: flex; + flex-direction: column; + text-decoration: none; + color: white; + align-items: center; + gap: 5px; +} + +.Movie:hover { + text-decoration: underline; +} + +.Movie img { + height: 300px; +} diff --git a/src/styles/Card.module.css b/src/styles/Card.module.css index 5175c7d..dd04490 100644 --- a/src/styles/Card.module.css +++ b/src/styles/Card.module.css @@ -18,6 +18,8 @@ border-radius: 7px; display: flex; gap: 5px; + width: 100%; + height: 100%; flex-direction: column; } diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css index 5c9bdc6..e70b607 100644 --- a/src/styles/Home.module.css +++ b/src/styles/Home.module.css @@ -4,3 +4,13 @@ flex-direction: column; gap: 1.5em; } + +.CardList { + display: grid; + justify-items: center; + width: 85%; + margin: 0 100px; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 20px; + text-align: center; +} diff --git a/src/styles/Movie.module.css b/src/styles/Movie.module.css index 32c3e37..7ab9f44 100644 --- a/src/styles/Movie.module.css +++ b/src/styles/Movie.module.css @@ -35,10 +35,16 @@ display: flex; overflow: scroll; align-items: start; + gap: 15px; } -.Actors > * { +.Actor { text-align: center; + color: white; +} + +.Actor:not(:hover) { + text-decoration: none; } .Tags { diff --git a/vite.config.js b/vite.config.js index a3b705d..7ee2d53 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,16 +1,16 @@ -import { defineConfig } from "vite" -import react from "@vitejs/plugin-react" -import path from "path" +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; +import path from "path"; export default defineConfig({ - plugins: [react()], - resolve: { - alias: { - config: path.resolve(__dirname, "/src/config.json"), - styles: path.resolve(__dirname, "/src/styles"), - components: path.resolve(__dirname, "/src/components"), - hooks: path.resolve(__dirname, "/src/hooks"), - pages: path.resolve(__dirname, "/src/pages"), - }, + plugins: [react()], + resolve: { + alias: { + config: path.resolve(__dirname, "/src/config.json"), + styles: path.resolve(__dirname, "/src/styles"), + components: path.resolve(__dirname, "/src/components"), + hooks: path.resolve(__dirname, "/src/hooks"), + pages: path.resolve(__dirname, "/src/pages"), }, -}) + }, +});