Skip to content

Commit d748dde

Browse files
khushi-purwarkhushi-purwar
authored
Update MovieInfoComponent.js
1 parent 519fec0 commit d748dde

File tree

1 file changed

+96
-58
lines changed

1 file changed

+96
-58
lines changed

‎react-movie-app/src/Components/MovieInfoComponent.js

Lines changed: 96 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
1-
import React ,{useState, useEffect} from 'react';
1+
import React, {
2+
useState,
3+
useEffect
4+
} from 'react';
25
import styled from "styled-components";
36
import Axios from 'axios';
47

5-
import { API_KEY } from "../App";
8+
import {
9+
API_KEY
10+
} from "../App";
611

712
const Container = styled.div`
813
display: flex;
@@ -65,64 +70,97 @@ const Close = styled.span`
6570

6671
const MovieInfoComponent = (props) => {
6772

68-
const [movieInfo, setMovieInfo] = useState();
73+
const [movieInfo, setMovieInfo] = useState();
6974

70-
const {selectedMovie} = props;
75+
const {
76+
selectedMovie
77+
} = props;
7178

72-
useEffect (()=> {
73-
Axios.get(
74-
`https://www.omdbapi.com/?i=${selectedMovie}&apikey=${API_KEY}`,
75-
).then((response) => setMovieInfo(response.data));
76-
},[selectedMovie]);
79+
useEffect(() => {
80+
Axios.get(
81+
`https://www.omdbapi.com/?i=${selectedMovie}&apikey=${API_KEY}`,
82+
).then((response) => setMovieInfo(response.data));
83+
}, [selectedMovie]);
7784

78-
return (
79-
<Container>
80-
{movieInfo ? (
81-
<>
82-
<CoverImage src={movieInfo?.Poster} alt="poster" />
83-
<InfoColumn>
84-
<MovieName>
85-
{movieInfo?.Type}: <span>{movieInfo?.Title}</span>
86-
</MovieName>
87-
<MovieInfo>
88-
IMDB Rating: <span>{movieInfo?.imdbRating}</span>
89-
</MovieInfo>
90-
<MovieInfo>
91-
Year: <span>{movieInfo?.Year}</span>
92-
</MovieInfo>
93-
<MovieInfo>
94-
Language: <span>{movieInfo?.Language}</span>
95-
</MovieInfo>
96-
<MovieInfo>
97-
Rated: <span>{movieInfo?.Rated}</span>
98-
</MovieInfo>
99-
<MovieInfo>
100-
Released: <span>{movieInfo?.Released}</span>
101-
</MovieInfo>
102-
<MovieInfo>
103-
Runtime: <span>{movieInfo?.Runtime}</span>
104-
</MovieInfo>
105-
<MovieInfo>
106-
Genre: <span>{movieInfo?.Genre}</span>
107-
</MovieInfo>
108-
<MovieInfo>
109-
Director: <span>{movieInfo?.Director}</span>
110-
</MovieInfo>
111-
<MovieInfo>
112-
Actors: <span>{movieInfo?.Actors}</span>
113-
</MovieInfo>
114-
<MovieInfo>
115-
Plot: <span>{movieInfo?.Plot}</span>
116-
</MovieInfo>
117-
</InfoColumn>
118-
<Close onClick={() => props.onMovieSelect()}>X</Close>
119-
</>
120-
) : (
121-
122-
<img src="http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif" atl="loading" height="200" />
123-
)}
124-
</Container>
125-
)
85+
return ( <Container > {
86+
movieInfo ? (
87+
<>
88+
<CoverImage src = {
89+
movieInfo?.Poster
90+
}
91+
alt = "poster" / >
92+
<InfoColumn >
93+
<MovieName > {
94+
movieInfo?.Type
95+
}: < span > {
96+
movieInfo?.Title
97+
} < /span>
98+
</MovieName> <
99+
MovieInfo >
100+
IMDB Rating: < span > {
101+
movieInfo?.imdbRating
102+
} < /span>
103+
</MovieInfo>
104+
<MovieInfo >
105+
Year: < span > {
106+
movieInfo?.Year
107+
} < /span>
108+
</MovieInfo>
109+
<MovieInfo >
110+
Language: < span > {
111+
movieInfo?.Language
112+
} < /span>
113+
</MovieInfo>
114+
<MovieInfo >
115+
Rated: < span > {
116+
movieInfo?.Rated
117+
} < /span> <
118+
/MovieInfo> <
119+
MovieInfo >
120+
Released: < span > {
121+
movieInfo?.Released
122+
} < /span> <
123+
/MovieInfo> <
124+
MovieInfo >
125+
Runtime: < span > {
126+
movieInfo?.Runtime
127+
} < /span> <
128+
/MovieInfo> <
129+
MovieInfo >
130+
Genre: < span > {
131+
movieInfo?.Genre
132+
} < /span> <
133+
/MovieInfo> <
134+
MovieInfo >
135+
Director: < span > {
136+
movieInfo?.Director
137+
} < /span> <
138+
/MovieInfo> <
139+
MovieInfo >
140+
Actors: < span > {
141+
movieInfo?.Actors
142+
} < /span> <
143+
/MovieInfo> <
144+
MovieInfo >
145+
Plot: < span > {
146+
movieInfo?.Plot
147+
} < /span> <
148+
/MovieInfo> <
149+
/InfoColumn> <
150+
Close onClick = {
151+
() => props.onMovieSelect()
152+
} > X < /Close> <
153+
/>
154+
) : (
155+
156+
<
157+
img src = "http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif"
158+
atl = "loading"
159+
height = "200" / >
160+
)
161+
} <
162+
/Container>
163+
)
126164
}
127165

128-
export default MovieInfoComponent
166+
export default MovieInfoComponent;

0 commit comments

Comments
 (0)