Skip to content

Commit 89aebfc

Browse files
FrancoisCodingFrancoisCoding
authored
Merge pull request #2 from FrancoisCoding/polish
Polish
2 parents 5ac760c + bd82d87 commit 89aebfc

File tree

11 files changed

+53
-62
lines changed

11 files changed

+53
-62
lines changed

‎src/components/Home/Home.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ class Home extends Component {
8484
totalPages: result.total_pages
8585
},
8686
() => {
87-
if (this.state.searchTerm === "") {
87+
if (searchTerm === "") {
8888
localStorage.setItem("HomeState", JSON.stringify(this.state));
8989
}
9090
}

‎src/components/Movie/Movie.js‎

Lines changed: 14 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,15 @@ export default class Movie extends Component {
1717
};
1818

1919
componentDidMount() {
20-
if (localStorage.getItem(`${this.props.match.paramas.movieId}`)) {
21-
const state = JSON.parse(
22-
localStorage.getItem(`${this.props.match.paramas.movieId}`)
23-
);
20+
const { match } = this.props;
21+
if (localStorage.getItem(`${match.params.movieId}`)) {
22+
const state = JSON.parse(localStorage.getItem(`${match.params.movieId}`));
2423
this.setState({ ...state });
2524
} else {
2625
this.setState({ loading: true });
2726
// Movie Data
2827
const endpoint = `${API_URL}movie/${
29-
this.props.match.params.movieId
28+
match.params.movieId
3029
}?api_key=${API_KEY}&language=en-US`;
3130
this.fetchItems(endpoint);
3231
}
@@ -36,7 +35,6 @@ export default class Movie extends Component {
3635
fetch(endpoint)
3736
.then(res => res.json())
3837
.then(res => {
39-
console.log(res);
4038
if (res.status_code) {
4139
this.setState({ loading: false });
4240
} else {
@@ -68,35 +66,31 @@ export default class Movie extends Component {
6866
};
6967

7068
render() {
69+
const { movie, directors, actors, loading } = this.state;
7170
return (
7271
<div className="rmdb-movie">
73-
{this.state.movie ? (
72+
{movie ? (
7473
<div>
7574
<Navigation movie={this.props.location.movieName} />
76-
<MovieInfo
77-
movie={this.state.movie}
78-
directors={this.state.directors}
79-
/>
75+
<MovieInfo movie={movie} directors={directors} />
8076
<MovieInfoBar
81-
time={this.state.movie.runtime}
82-
budget={this.state.movie.budget}
83-
revenue={this.state.movie.revenue}
77+
time={movie.runtime}
78+
budget={movie.budget}
79+
revenue={movie.revenue}
8480
/>
8581
</div>
8682
) : null}
87-
{this.state.actors ? (
83+
{actors ? (
8884
<div className="rmdb-movie-grid">
8985
<FourColGrid header={"Actors"}>
90-
{this.state.actors.map((element, i) => {
86+
{actors.map((element, i) => {
9187
return <Actor key={i} actor={element} />;
9288
})}
9389
</FourColGrid>
9490
</div>
9591
) : null}
96-
{!this.state.actors && !this.state.loading ? (
97-
<h1>No Movie Found</h1>
98-
) : null}
99-
{this.state.loading ? <Spinner /> : null}}
92+
{!actors && !loading ? <h1>No Movie Found</h1> : null}
93+
{loading ? <Spinner /> : null}
10094
</div>
10195
);
10296
}

‎src/components/elements/Actor/Actor.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,20 @@ import React from "react";
22
import { IMAGE_BASE_URL } from "../../../config";
33
import "./Actor.css";
44

5-
export default function Actor(props) {
5+
export default function Actor({ actor }) {
66
const POSTER_SIZE = "w154";
77
return (
88
<div className="rmdb-actor">
99
<img
1010
src={
11-
props.actor.profile_path
12-
? `${IMAGE_BASE_URL}${POSTER_SIZE}${props.actor.profile_path}`
11+
actor.profile_path
12+
? `${IMAGE_BASE_URL}${POSTER_SIZE}${actor.profile_path}`
1313
: "./images/no_image.jpg}"
1414
}
1515
alt="Actor Thumbnail"
1616
/>
17-
<span className="rmdb-actor-name">{props.actor.name}</span>
18-
<span className="rmdb-actor-character">{props.actor.character}</span>
17+
<span className="rmdb-actor-name">{actor.name}</span>
18+
<span className="rmdb-actor-character">{actor.character}</span>
1919
</div>
2020
);
2121
}

‎src/components/elements/FourColGrid/FourColGrid.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import React from "react";
22
import PropTypes from "prop-types";
33
import "./FourColGrid.css";
44

5-
function FourColGrid(props) {
5+
function FourColGrid({ children, loading, header }) {
66
const renderElements = () => {
7-
const gridElements = props.children.map((element, i) => {
7+
const gridElements = children.map((element, i) => {
88
return (
99
<div key={i} className="rmdb-grid-element">
1010
{element}
@@ -15,7 +15,7 @@ function FourColGrid(props) {
1515
};
1616
return (
1717
<div className="rmdb-grid">
18-
{props.header && !props.loading ? <h1>{props.header}</h1> : null}
18+
{header && !loading ? <h1>{header}</h1> : null}
1919
<div className="rmdb-grid-content">{renderElements()}</div>
2020
</div>
2121
);

‎src/components/elements/HeroImage/HeroImage.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22
import "./HeroImage.css";
33

4-
export default function HeroImage(props) {
4+
export default function HeroImage({ image, title, text }) {
55
return (
66
<div
77
className="rmdb-heroimage"
@@ -10,13 +10,13 @@ export default function HeroImage(props) {
1010
39%, rgba(0,0,0,0)
1111
41%, rgba(0,0,0,0.65)
1212
100%),
13-
url('${props.image}'), #1c1c1c`
13+
url('${image}'), #1c1c1c`
1414
}}
1515
>
1616
<div className="rmdb-heroimage-content">
1717
<div className="rmdb-heroimage-text">
18-
<h1>{props.title}</h1>
19-
<p>{props.text}</p>
18+
<h1>{title}</h1>
19+
<p>{text}</p>
2020
</div>
2121
</div>
2222
</div>

‎src/components/elements/LoadMoreBtn/LoadMoreBtn.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from "react";
22
import "./LoadMoreBtn.css";
33

4-
export default function LoadMoreBtn(props) {
4+
export default function LoadMoreBtn({ onClick, text }) {
55
return (
6-
<div className="rmdb-loadmorebtn" onClick={props.onClick}>
7-
<p>{props.text}</p>
6+
<div className="rmdb-loadmorebtn" onClick={onClick}>
7+
<p>{text}</p>
88
</div>
99
);
1010
}

‎src/components/elements/MovieInfo/MovieInfo.js‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,33 +4,31 @@ import FontAwesome from "react-fontawesome";
44
import MovieThumb from "../MovieThumb/MovieThumb";
55
import "./MovieInfo.css";
66

7-
export default function MovieInfo(props) {
7+
export default function MovieInfo({ movie, directors }) {
88
return (
99
<div
1010
className="rmdb-movieinfo"
1111
style={{
12-
background: props.movie.backdrop_path
13-
? `url('${IMAGE_BASE_URL}${BACKDROP_SIZE}${
14-
props.movie.backdrop_path
15-
}')`
12+
background: movie.backdrop_path
13+
? `url('${IMAGE_BASE_URL}${BACKDROP_SIZE}${movie.backdrop_path}')`
1614
: "#000"
1715
}}
1816
>
1917
<div className="rmdb-movieinfo-content">
2018
<div className="rmdb-movieinfo-thumb">
2119
<MovieThumb
2220
image={
23-
props.movie.poster_path
24-
? `${IMAGE_BASE_URL}${POSTER_SIZE}${props.movie.poster_path}`
21+
movie.poster_path
22+
? `${IMAGE_BASE_URL}${POSTER_SIZE}${movie.poster_path}`
2523
: "./images/no_image.jpg"
2624
}
2725
clickable={false}
2826
/>
2927
</div>
3028
<div className="rmdb-movieinfo-text">
31-
<h1>{props.movie.title}</h1>
29+
<h1>{movie.title}</h1>
3230
<h3>PLOT</h3>
33-
<p>{props.movie.overview}</p>
31+
<p>{movie.overview}</p>
3432
<h3>IMDB RATING</h3>
3533
<div className="rmdb-rating">
3634
<meter
@@ -39,12 +37,12 @@ export default function MovieInfo(props) {
3937
optimum="100"
4038
low="40"
4139
high="70"
42-
value={props.movie.vote_average * 10}
40+
value={movie.vote_average * 10}
4341
/>
44-
<p className="rmdb-score">{props.movie.vote_average}</p>
42+
<p className="rmdb-score">{movie.vote_average}</p>
4543
</div>
46-
{props.directors.length > 1 ? <h3>DIRECTORS</h3> : <h3>DIRECTOR</h3>}
47-
{props.directors.map((element, i) => {
44+
{directors.length > 1 ? <h3>DIRECTORS</h3> : <h3>DIRECTOR</h3>}
45+
{directors.map((element, i) => {
4846
return (
4947
<p key={i} className="rmdb-director">
5048
{element.name}

‎src/components/elements/MovieInfoBar/MovieInfoBar.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,26 @@ import FontAwesome from "react-fontawesome";
33
import { calcTime, convertMoney } from "../../../helpers";
44
import "./MovieInfoBar.css";
55

6-
export default function MovieInfoBar(props) {
6+
export default function MovieInfoBar({ time, budget, revenue }) {
77
return (
88
<div className="rmdb-movieinfobar">
99
<div className="rmdb-movieinfobar-content">
1010
<div className="rmdb-movieinfobar-content-col">
1111
<FontAwesome className="fa-time" name="clock-o" size="2x" />
1212
<span className="rmdb-movieinfobar-info">
13-
Running time: {calcTime(props.time)}
13+
Running time: {calcTime(time)}
1414
</span>
1515
</div>
1616
<div className="rmdb-movieinfobar-content-col">
1717
<FontAwesome className="fa-budget" name="money" size="2x" />
1818
<span className="rmdb-movieinfobar-info">
19-
Budget : {convertMoney(props.budget)}
19+
Budget : {convertMoney(budget)}
2020
</span>
2121
</div>
2222
<div className="rmdb-movieinfobar-content-col">
2323
<FontAwesome className="fa-revenue" name="ticket" size="2x" />
2424
<span className="rmdb-movieinfobar-info">
25-
Revenue : {convertMoney(props.revenue)}
25+
Revenue : {convertMoney(revenue)}
2626
</span>
2727
</div>
2828
</div>

‎src/components/elements/MovieThumb/MovieThumb.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,20 @@ import { Link } from "react-router-dom";
33
import PropTypes from "prop-types";
44
import "./MovieThumb.css";
55

6-
function MovieThumb(props) {
6+
function MovieThumb({ movieId, movieName, image, clickable }) {
77
return (
88
<div className="rmdb-moviethumb">
9-
{props.clickable ? (
9+
{clickable ? (
1010
<Link
1111
to={{
12-
pathname: `/${props.movieId}`,
13-
movieName: `${props.movieName}`
12+
pathname: `/${movieId}`,
13+
movieName: `${movieName}`
1414
}}
1515
>
16-
<img src={props.image} alt="Movie Thumbnail" />
16+
<img src={image} alt="Movie Thumbnail" />
1717
</Link>
1818
) : (
19-
<img src={props.image} alt="Movie Thumbnail" />
19+
<img src={image} alt="Movie Thumbnail" />
2020
)}
2121
</div>
2222
);

‎src/components/elements/Navigation/Navigation.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@ import React from "react";
22
import { Link } from "react-router-dom";
33
import "./Navigation.css";
44

5-
export default function Navigation(props) {
5+
export default function Navigation({ movie }) {
66
return (
77
<div className="rmdb-navigation">
88
<div className="rmdb-navigation-content">
99
<Link to="/">
1010
<p>Home</p>
1111
<p>/</p>
12-
<p>{props.movie}</p>
12+
<p>{movie}</p>
1313
</Link>
1414
</div>
1515
</div>

0 commit comments

Comments
 (0)