{"size": 2822, "ext": "js", "max_stars_repo_path": "pages/movie.js", "max_stars_repo_name": "thomas-yan/movie-info", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "pages/movie.js", "max_issues_repo_name": "thomas-yan/movie-info", "max_issues_repo_issues_event_min_datetime": "2021-03-08T23:06:05.000Z", "max_issues_repo_issues_event_max_datetime": "2021-12-09T01:25:50.000Z", "max_forks_repo_path": "pages/movie.js", "max_forks_repo_name": "thomas-yan/movie-info", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 5, "max_forks_count": null, "avg_line_length": 23.131147541, "max_line_length": 78, "alphanum_fraction": 0.4372785259}
import React from "react";
import Header from "../components/Header";
import Form from "../components/Form";
import Cast from "../components/Cast";
import { getData } from "../api";

const Movie = ({ movie }) => {
  return (
    <div className="container">
      <Header />
      <Form id="form" />

      <div className="moviePage">
        <div className="poster">
          <img
            src={
              movie.poster_path === null
                ? "http://via.placeholder.com/300x450"
                : `https://image.tmdb.org/t/p/w300${movie.poster_path}`
            }
            alt={`${movie.title} poster`}
            className="posterImg"
          />
        </div>

        <section className="movieDetails">
          <h2 className="sectionTitle">{movie.title}</h2>
          <ul className="detailsList">
            <li>
              <span className="bold">Release date:</span> {movie.release_date}
            </li>
            <li>
              <span className="bold">Rating:</span> {movie.vote_average}
            </li>
            <li>
              <span className="bold">Vote count:</span> {movie.vote_count}
            </li>
            <li>
              <span className="bold">Genres: </span>{" "}
              {movie.genres.map((element, index) => {
                if (index < movie.genres.length - 1) {
                  return movie.genres[index].name + ", ";
                } else {
                  return movie.genres[index].name;
                }
              })}
            </li>
          </ul>

          <p>{movie.overview}</p>
        </section>
      </div>
      {/* moviePage */}

      <Cast cast={movie.credits.cast} />
      <style jsx>{`
        .moviePage {
          display: flex;
          flex-direction: column;
          margin-top: 25px;
        }

        .movieDetails {
          order: 1;
        }

        .sectionTitle {
          margin: 0;
        }

        .detailsList {
          margin-top: 20px;
        }

        .detailsList li {
          margin-bottom: 10px;
        }

        .bold {
          font-weight: 600;
        }

        .poster {
          order: 2;
        }

        .posterImg {
          width: 100%;
          height: auto;
        }

        @media (min-width: 768px) {
          .moviePage {
            flex-direction: row;
          }
          .movieDetails {
            flex: 2;
            order: 2;
          }
          .poster {
            flex: 1;
            order: 1;
            padding-right: 20px;
          }
          .posterImg {
            width: 300px;
            height: auto;
          }
        }
      `}</style>
    </div>
  );
};

Movie.getInitialProps = async ctx => {
  const id = ctx.query.id;
  const data = await getData(id);
  return { movie: data };
};

export default Movie;
