{"size": 2633, "ext": "js", "max_stars_repo_path": "src/components/movie_details/index.js", "max_stars_repo_name": "roheat/indorse-movies", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/movie_details/index.js", "max_issues_repo_name": "roheat/indorse-movies", "max_issues_repo_issues_event_min_datetime": "2020-09-04T23:47:29.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T11:42:41.000Z", "max_forks_repo_path": "src/components/movie_details/index.js", "max_forks_repo_name": "roheat/indorse-movies", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 6, "max_forks_count": null, "avg_line_length": 22.6982758621, "max_line_length": 94, "alphanum_fraction": 0.5548803646}
import React from 'react';
import axios from 'axios';
import CircularProgress from '@material-ui/core/CircularProgress';
import { Link } from 'react-router-dom';

class MovieDetails extends React.Component {
	
	state = {
		poster: '',
		title: '',
		overview: '',
		releaseYear: '',
		runtime: '',
		budget: '',
		revenue: '',
		rating: '',
		credits: [],
		loading: true
	}
	async componentDidMount() {
		const id = this.props.match.params.id;
		const { data } = await axios.get(
			`https://api.themoviedb.org/3/movie/${id}?api_key=${process.env.REACT_APP_API_KEY}`
		);

		const { data: credits } = await axios.get(
			`https://api.themoviedb.org/3/movie/${id}/credits?api_key=${process.env.REACT_APP_API_KEY}`
		);

		const poster = `https://image.tmdb.org/t/p/w500${data.poster_path}`;
		this.setState({
			poster,
			title: data.title,
			overview: data.overview,
			releaseYear: data.release_date.slice(0, 4),
			runtime: data.runtime,
			budget: data.budget,
			revenue: data.revenue,
			rating: data.vote_average,
			credits: credits.cast.slice(0, 5),
			loading: false
		});
	}
	
	getCasts = credits => {
		return credits.map(credit => {
			return (
				<div key={credit.id}>
					<Link to={`/people/${credit.id}`}>
						<p className="credit_name">{credit.name}</p>
					</Link>
				</div>
			);
		})
	}

	render() {
		const {
			poster,
			title,
			overview,
			releaseYear,
			runtime,
			budget,
			revenue,
			rating,
			credits,
			loading
		} = this.state;

		return (
			<div className="container">
				<div className="back_btn" onClick={() => this.props.history.goBack()}>
					<i className="material-icons">keyboard_backspace</i>
					Back
				</div>
				{
					!loading ?
						<table className="movie_show">
							<tbody>
								<tr>
									<td>
										<img alt="poster" width="300" src={poster} />
									</td>
									<td>
										<h1>{title} ({releaseYear})</h1>
										<h3>Score : {rating}</h3>
										<p>{overview}</p>
										<div className="extra">
											<div className="facts">
												<h2>Facts</h2>
												<p><strong>Runtime:</strong> {runtime} min</p>
												<p><strong>Budget:</strong> ${budget}</p>
												<p><strong>Revenue:</strong> ${revenue}</p>
											</div>
											<div className="credits">
												<h2>Cast</h2>
												{this.getCasts(credits)}
											</div>
										</div>
											
									</td>
								</tr>
							</tbody>
						</table>
					: 
					<div className="progress">
						<CircularProgress thickness={7} style={{ color: '#01D277' }} />
					</div>
				}
			</div>
		);
	}
};

export default MovieDetails;