/
search.js
111 lines (104 loc) · 2.94 KB
/
search.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import React from "react";
import { Redirect, Link } from "react-router-dom";
import Button from "react-bootstrap/Button";
import VideoPlayer from "../components/VideoPlayer";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Card from "react-bootstrap/Card";
import "./search.css";
export default class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
query: null,
response: null,
};
}
componentDidMount() {
let {
location: {
state: { query },
},
} = this.props;
let tmdbAPIKey = process.env.REACT_APP_TMDB_API_KEY;
console.log("Got to search with: ", query);
fetch(
`https://api.themoviedb.org/3/search/movie?api_key=${tmdbAPIKey}&query=${query}`
)
.then((res) => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
resp: result,
});
},
(error) => {
this.setState({
isLoaded: true,
error,
});
}
);
}
onMovieClick(movie) {
this.setState({redirect: {to: '/movie', state: {movie} }})
}
render() {
const { error, isLoaded, resp, redirect } = this.state;
if (error) {
return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
return <div>Loading...</div>;
}
if (redirect) {
return <Redirect
push
to={{
pathname: redirect.to,
state: redirect.state,
}}
/>
}
return (
<Container>
<br />
{resp.results.map((item) => (
<Row className="movie-row">
<Col>
<Card className="movie-card" onClick={() => this.onMovieClick(item)}>
<Row noGutters>
<Col xs={1} className="movie-card-poster-col">
<Link
to={{
pathname: "/movie",
state: { movie: item },
}}
>
<Card.Img
variant="top"
className="movie-card-img"
src={`https://image.tmdb.org/t/p/w500${item.poster_path}`}
/>
</Link>
</Col>
<Col xs={11} className="align-items-center" style={{ textAlign: "left" }}>
<Card.Body>
<Card.Title>
<b>{item.title}</b> {item.vote_average}
</Card.Title>
<Card.Subtitle className={"card-subtitle"}>
{item.overview}
</Card.Subtitle>
</Card.Body>
</Col>
</Row>
</Card>
</Col>
</Row>
))}
</Container>
);
}
}