Lina and Emilia Movie Site #317
Conversation
| export const API_KEY = 'c9a6004aae28b42f1163022266b85fb5'; | ||
| export const LIST_URL = `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}&language=en-US&page=1`; | ||
| export const DETAILS_URL = (movieId) => `https://api.themoviedb.org/3/movie/${movieId}?api_key=${API_KEY}&language=en-US`; | ||
| export const CREDITS_URL = (movieId) => `https://api.themoviedb.org/3/movie/${movieId}/credits?api_key=${API_KEY}&language=en-US`; |
There was a problem hiding this comment.
Really nice way of keeping the other components doing the fetch more "clean"!
| <meta property="og:title" content="Lina and Emilia movie site" > | ||
| <meta property="og:description" content="Top 20 popular movies right now"> | ||
| <meta propert="og:image" content="🎬"> |
There was a problem hiding this comment.
Nice that you added some og tags!
| <span className="tagline">{movie.tagline} | ||
| </span> | ||
| <span className="overview">{movie.overview} | ||
| </span> | ||
| <Credits /> | ||
| <span className="rating">⭐️ {Math.round(movie.vote_average * 10) / 10} | ||
| </span> | ||
| <span className="length">{movie.runtime} min | ||
| </span> |
There was a problem hiding this comment.
What is the reason behind using span here instead of paragraph?
(I'm thinking that it might effect screen readers in a negative way)
| import React, { useState, useEffect } from 'react'; | ||
| import { Link } from 'react-router-dom'; | ||
| import { LIST_URL } from '../data/Url'; | ||
| import '../css/MoviesList.css' | ||
|
|
||
| export const MoviesList = () => { | ||
| const [movies, setMovies] = useState([]) | ||
| const [loading, setLoading] = useState(false) | ||
|
|
||
| useEffect(() => { | ||
| setLoading(true) | ||
| fetch(LIST_URL) | ||
| .then((res) => res.json()) | ||
| .then((json) => { | ||
| setMovies(json.results) | ||
| setTimeout(() => setLoading(false), 200) | ||
| }) | ||
| }, []) | ||
| console.log(movies) | ||
|
|
||
| if (loading) { | ||
| return <p className="loader">Loading</p> | ||
| } | ||
|
|
||
| return ( | ||
| <section className="movies-container"> | ||
| {movies.map((movie) => ( | ||
| <Link key={movie.id} to={`/movies/${movie.id}`}> | ||
| <div className="movie-overlay"> | ||
| <img src={`https://image.tmdb.org/t/p/w342${movie.poster_path}`} alt={movie.title} className="movie-poster" /> | ||
| <h1 className="movie-text">{movie.title}</h1> | ||
| </div> | ||
| </Link> | ||
| ))} | ||
| </section> | ||
| ) | ||
| } |
There was a problem hiding this comment.
Clean code with really good structure!
| @@ -0,0 +1,6 @@ | |||
| This favicon was generated using the following font: | |||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| .back-button:hover { |
There was a problem hiding this comment.
Love the hover effect on the button!
| console.log(movies) | ||
|
|
||
| if (loading) { | ||
| return <p className="loader">Loading</p> |
There was a problem hiding this comment.
When the page is loading it also shows the footer high up on the page which, so maybe the footer needs to be in a fixed position at the bottom of the page?
| const Footer = () => { | ||
| return ( | ||
| <section className="footer-container"> | ||
| <span className="text">Made by Emilia Saberski and Lina Adamsson Technigo 2023</span> |
There was a problem hiding this comment.
Is there a reason this a span and not a paragraph?
| width: 20vw; | ||
| height: 4vh; |
There was a problem hiding this comment.
Interesting to see these units being used, and to see a button be responsive in size!
| @@ -1,9 +1,22 @@ | |||
| /* eslint-disable react/react-in-jsx-scope */ | |||
| /* eslint-disable */ | |||
| import React from 'react'; | |||
There was a problem hiding this comment.
Your app component is nice and clean!
No description provided.