Last active
October 13, 2019 20:33
-
-
Save adityatandon007/87c19957f84ae783a139700989cd885f to your computer and use it in GitHub Desktop.
MovieInfo component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from 'react'; | |
import Typography from '@material-ui/core/Typography'; | |
import Container from '@material-ui/core/Container'; | |
import Card from '@material-ui/core/Card'; | |
import CardActions from '@material-ui/core/CardActions'; | |
import CardContent from '@material-ui/core/CardContent'; | |
import CardMedia from '@material-ui/core/CardMedia'; | |
export class MovieInfo extends Component { | |
constructor(props){ | |
super(props) | |
this.state = { | |
movieDetails: {}, | |
loading: true | |
} | |
} | |
componentDidMount(){ | |
/* This is wrong because you aren't passing any id prop so you can't get id from this.props.id | |
let id = this.props.id; | |
*/ | |
/* Now there are two ways to pass the id prop, first either you can pass the id via state in your Link in MovieHome.js | |
and then can fetch that prop like this | |
const {id} = props.location.state | |
or secondly, you could simply get that id from your location pathname, I have chosen the second option here, you | |
can try the first one too */ | |
let id = this.props.location.pathname.split('/')[2]; | |
/* Ex: '/movieinfo/4' to extract 4 I have used '/' as separator so my string would split into ['',movieinfo,4] | |
and 4 is at index 2 so, [2] */ | |
fetch(`http://api.tvmaze.com/shows/${id}?embed=cast`) | |
.then((response) => response.json()) | |
.then((details) => { | |
this.setState({ | |
movieDetails: details, | |
loading: false | |
}); | |
}) | |
} | |
render() { | |
return ( | |
<div> | |
<Container> | |
{this.state.loading ? ( | |
<div>Loading...</div> | |
) : ( | |
<div> | |
<div> | |
<Card> | |
<CardMedia | |
style={{height:400}} | |
component="img" | |
image={this.state.movieDetails.image} // This won't work because your image is inside the medium key, so change it to {this.state.movieDetails.image.medium} | |
/> | |
<CardContent> | |
<Typography component="h1"> | |
{this.state.movieDetails.name} | |
</Typography> | |
<Typography component="h3"> | |
Year: {this.state.movieDetails.premiered} | |
</Typography > | |
<Typography component="h3"> | |
Rating: {this.state.movieDetails.rating} // This won't work too, change it to {this.state.movieDetails.rating.average} | |
</Typography> | |
<Typography component="h3"> | |
Genre: {this.state.movieDetails.genres} | |
</Typography> | |
</CardContent> | |
<CardActions> | |
</CardActions> | |
</Card> | |
</div> | |
<br/> | |
<div> | |
<h2>Summary</h2> | |
{this.state.movieDetails.summary} | |
</div> | |
<div> | |
{this.state.movieDetails.episodes} | |
</div> | |
<div> | |
<h3>Cast</h3> | |
{this.state.movieDetails.cast} // This won't work, try to get that key from the response and replace it and it will be array so you have to loop through it to get all the elements. | |
</div> | |
</div>)} | |
</Container> | |
</div> | |
) | |
} | |
} | |
export default MovieInfo |
PJMantoss
commented
Oct 13, 2019
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment