[React Study] Link Page

import { BrowserRouter as Router , Switch , Route, Link } from "react-router-dom";
import Detail from "./routes/Detail";
import Home from "./routes/Home";

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/movie/:id">
          <Detail />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

import { useEffect, useState } from 'react';
import Movie from '../components/Movie'

function MovieList(props) {
    return (
      <div>
        {props.movies.map((movie) => (
          <Movie 
          key={movie.id} 
          id={movie.id}
          coverImage={movie.medium_cover_image} 
          title={movie.title} 
          summary={movie.summary} />
        ))}
      </div>
    );
}
  
function Home() {
    const [isLoading, setIsLoading] = useState(true);
    const [movies, setMovies] = useState([]);
  
    const getMovies = async () => {
      const response = await fetch(
        `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`,
      );
      const json = await response.json();
  
      setMovies(json.data.movies);
      setIsLoading(false);
    };
  
    useEffect(() => {
      getMovies();
    }, [movies]);
  
    return (
      <div>
        <h1>Movie List</h1>
        {isLoading ? <strong>Loading...</strong> : <MovieList movies={movies} />}
      </div>
    );
}

export default Home;

import Card from 'react-bootstrap/Card';
import PropTypes from 'prop-types';
import {Link} from 'react-router-dom';

function Movie({id, coverImage, title, summary}) {
  return (
    <div>
      <Card style={{ 
        width: '18rem',
        shadowColor: '#470000',
        shadowOffset: {width: 0, height: 1},
        shadowOpacity: 0.2,
        elevation: 1
        }}>
        <Card.Img variant="top" src={coverImage} />
        <Card.Body>
          <h2>
            <Link to={`/movie/${id}`}>{title}</Link>
          </h2>
          <Card.Text>{summary}</Card.Text>
        </Card.Body>
      </Card>
      <br />
    </div>
  );
}

Movie.prototype = {
    coverImage: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    summary : PropTypes.string.isRequired
  };
  
export default Movie;

import { useEffect, useState } from "react";
import {useParams} from "react-router-dom";

function Detail() {
    const {id} = useParams();
    const [title , setTitle] = useState("");
    const [description , setDescription] = useState("");
    const [coverImageUrl , setCoverImageUrl] = useState("");

    const getMovieDetail = async () => {
                const response = await fetch(
          `https://yts.mx/api/v2/movie_details.json?movie_id=${id}`,
        );
        const json = await response.json();
        setTitle(json.data.movie.title);
        setDescription(json.data.movie.description_full);
        setCoverImageUrl(json.data.movie.large_cover_image)
      };

      useEffect(() => {
        getMovieDetail();
      }, [id]);


    return (
        <div>
            <h1>Detail Page</h1>
            <h2>{title}</h2>
            <img src={coverImageUrl}/>
            <p>{description}</p>
        </div>
    );
}

export default Detail;