From 2ec2096f8f3f058fb9b662cf89eb2e9a3bef1c3d Mon Sep 17 00:00:00 2001 From: Isaiah Francois Date: Mon, 12 Aug 2019 18:35:27 -0400 Subject: [PATCH 1/2] Removed typos from Movie component --- src/components/Movie/Movie.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Movie/Movie.js b/src/components/Movie/Movie.js index 58edb3b..58d33b0 100644 --- a/src/components/Movie/Movie.js +++ b/src/components/Movie/Movie.js @@ -17,9 +17,9 @@ export default class Movie extends Component { }; componentDidMount() { - if (localStorage.getItem(`${this.props.match.paramas.movieId}`)) { + if (localStorage.getItem(`${this.props.match.params.movieId}`)) { const state = JSON.parse( - localStorage.getItem(`${this.props.match.paramas.movieId}`) + localStorage.getItem(`${this.props.match.params.movieId}`) ); this.setState({ ...state }); } else { From bd82d874c1568d7fd6c3ba10cf60541d08852d11 Mon Sep 17 00:00:00 2001 From: Isaiah Francois Date: Mon, 12 Aug 2019 18:48:30 -0400 Subject: [PATCH 2/2] Destructured all props and state in components --- src/components/Home/Home.js | 2 +- src/components/Movie/Movie.js | 34 ++++++++----------- src/components/elements/Actor/Actor.js | 10 +++--- .../elements/FourColGrid/FourColGrid.js | 6 ++-- .../elements/HeroImage/HeroImage.js | 8 ++--- .../elements/LoadMoreBtn/LoadMoreBtn.js | 6 ++-- .../elements/MovieInfo/MovieInfo.js | 24 ++++++------- .../elements/MovieInfoBar/MovieInfoBar.js | 8 ++--- .../elements/MovieThumb/MovieThumb.js | 12 +++---- .../elements/Navigation/Navigation.js | 4 +-- .../elements/SearchBar/SearchBar.js | 1 - 11 files changed, 53 insertions(+), 62 deletions(-) diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js index a181a58..8976120 100644 --- a/src/components/Home/Home.js +++ b/src/components/Home/Home.js @@ -84,7 +84,7 @@ class Home extends Component { totalPages: result.total_pages }, () => { - if (this.state.searchTerm === "") { + if (searchTerm === "") { localStorage.setItem("HomeState", JSON.stringify(this.state)); } } diff --git a/src/components/Movie/Movie.js b/src/components/Movie/Movie.js index 58d33b0..608f2d3 100644 --- a/src/components/Movie/Movie.js +++ b/src/components/Movie/Movie.js @@ -17,16 +17,15 @@ export default class Movie extends Component { }; componentDidMount() { - if (localStorage.getItem(`${this.props.match.params.movieId}`)) { - const state = JSON.parse( - localStorage.getItem(`${this.props.match.params.movieId}`) - ); + const { match } = this.props; + if (localStorage.getItem(`${match.params.movieId}`)) { + const state = JSON.parse(localStorage.getItem(`${match.params.movieId}`)); this.setState({ ...state }); } else { this.setState({ loading: true }); // Movie Data const endpoint = `${API_URL}movie/${ - this.props.match.params.movieId + match.params.movieId }?api_key=${API_KEY}&language=en-US`; this.fetchItems(endpoint); } @@ -36,7 +35,6 @@ export default class Movie extends Component { fetch(endpoint) .then(res => res.json()) .then(res => { - console.log(res); if (res.status_code) { this.setState({ loading: false }); } else { @@ -68,35 +66,31 @@ export default class Movie extends Component { }; render() { + const { movie, directors, actors, loading } = this.state; return (
- {this.state.movie ? ( + {movie ? (
- +
) : null} - {this.state.actors ? ( + {actors ? (
- {this.state.actors.map((element, i) => { + {actors.map((element, i) => { return ; })}
) : null} - {!this.state.actors && !this.state.loading ? ( -

No Movie Found

- ) : null} - {this.state.loading ? : null}} + {!actors && !loading ?

No Movie Found

: null} + {loading ? : null}
); } diff --git a/src/components/elements/Actor/Actor.js b/src/components/elements/Actor/Actor.js index 49bf34b..7771002 100644 --- a/src/components/elements/Actor/Actor.js +++ b/src/components/elements/Actor/Actor.js @@ -2,20 +2,20 @@ import React from "react"; import { IMAGE_BASE_URL } from "../../../config"; import "./Actor.css"; -export default function Actor(props) { +export default function Actor({ actor }) { const POSTER_SIZE = "w154"; return (
Actor Thumbnail - {props.actor.name} - {props.actor.character} + {actor.name} + {actor.character}
); } diff --git a/src/components/elements/FourColGrid/FourColGrid.js b/src/components/elements/FourColGrid/FourColGrid.js index fdf3da1..5d61241 100644 --- a/src/components/elements/FourColGrid/FourColGrid.js +++ b/src/components/elements/FourColGrid/FourColGrid.js @@ -2,9 +2,9 @@ import React from "react"; import PropTypes from "prop-types"; import "./FourColGrid.css"; -function FourColGrid(props) { +function FourColGrid({ children, loading, header }) { const renderElements = () => { - const gridElements = props.children.map((element, i) => { + const gridElements = children.map((element, i) => { return (
{element} @@ -15,7 +15,7 @@ function FourColGrid(props) { }; return (
- {props.header && !props.loading ?

{props.header}

: null} + {header && !loading ?

{header}

: null}
{renderElements()}
); diff --git a/src/components/elements/HeroImage/HeroImage.js b/src/components/elements/HeroImage/HeroImage.js index 3e57de3..4d72533 100644 --- a/src/components/elements/HeroImage/HeroImage.js +++ b/src/components/elements/HeroImage/HeroImage.js @@ -1,7 +1,7 @@ import React from "react"; import "./HeroImage.css"; -export default function HeroImage(props) { +export default function HeroImage({ image, title, text }) { return (
-

{props.title}

-

{props.text}

+

{title}

+

{text}

diff --git a/src/components/elements/LoadMoreBtn/LoadMoreBtn.js b/src/components/elements/LoadMoreBtn/LoadMoreBtn.js index 0464e08..35e72cb 100644 --- a/src/components/elements/LoadMoreBtn/LoadMoreBtn.js +++ b/src/components/elements/LoadMoreBtn/LoadMoreBtn.js @@ -1,10 +1,10 @@ import React from "react"; import "./LoadMoreBtn.css"; -export default function LoadMoreBtn(props) { +export default function LoadMoreBtn({ onClick, text }) { return ( -
-

{props.text}

+
+

{text}

); } diff --git a/src/components/elements/MovieInfo/MovieInfo.js b/src/components/elements/MovieInfo/MovieInfo.js index bfaa405..84f4c37 100644 --- a/src/components/elements/MovieInfo/MovieInfo.js +++ b/src/components/elements/MovieInfo/MovieInfo.js @@ -4,15 +4,13 @@ import FontAwesome from "react-fontawesome"; import MovieThumb from "../MovieThumb/MovieThumb"; import "./MovieInfo.css"; -export default function MovieInfo(props) { +export default function MovieInfo({ movie, directors }) { return (
@@ -20,17 +18,17 @@ export default function MovieInfo(props) {
-

{props.movie.title}

+

{movie.title}

PLOT

-

{props.movie.overview}

+

{movie.overview}

IMDB RATING

-

{props.movie.vote_average}

+

{movie.vote_average}

- {props.directors.length > 1 ?

DIRECTORS

:

DIRECTOR

} - {props.directors.map((element, i) => { + {directors.length > 1 ?

DIRECTORS

:

DIRECTOR

} + {directors.map((element, i) => { return (

{element.name} diff --git a/src/components/elements/MovieInfoBar/MovieInfoBar.js b/src/components/elements/MovieInfoBar/MovieInfoBar.js index 46a54d4..7a80642 100644 --- a/src/components/elements/MovieInfoBar/MovieInfoBar.js +++ b/src/components/elements/MovieInfoBar/MovieInfoBar.js @@ -3,26 +3,26 @@ import FontAwesome from "react-fontawesome"; import { calcTime, convertMoney } from "../../../helpers"; import "./MovieInfoBar.css"; -export default function MovieInfoBar(props) { +export default function MovieInfoBar({ time, budget, revenue }) { return (

- Running time: {calcTime(props.time)} + Running time: {calcTime(time)}
- Budget : {convertMoney(props.budget)} + Budget : {convertMoney(budget)}
- Revenue : {convertMoney(props.revenue)} + Revenue : {convertMoney(revenue)}
diff --git a/src/components/elements/MovieThumb/MovieThumb.js b/src/components/elements/MovieThumb/MovieThumb.js index bb37cc2..7684438 100644 --- a/src/components/elements/MovieThumb/MovieThumb.js +++ b/src/components/elements/MovieThumb/MovieThumb.js @@ -3,20 +3,20 @@ import { Link } from "react-router-dom"; import PropTypes from "prop-types"; import "./MovieThumb.css"; -function MovieThumb(props) { +function MovieThumb({ movieId, movieName, image, clickable }) { return (
- {props.clickable ? ( + {clickable ? ( - Movie Thumbnail + Movie Thumbnail ) : ( - Movie Thumbnail + Movie Thumbnail )}
); diff --git a/src/components/elements/Navigation/Navigation.js b/src/components/elements/Navigation/Navigation.js index 82c7e2b..ea615c8 100644 --- a/src/components/elements/Navigation/Navigation.js +++ b/src/components/elements/Navigation/Navigation.js @@ -2,14 +2,14 @@ import React from "react"; import { Link } from "react-router-dom"; import "./Navigation.css"; -export default function Navigation(props) { +export default function Navigation({ movie }) { return (

Home

/

-

{props.movie}

+

{movie}

diff --git a/src/components/elements/SearchBar/SearchBar.js b/src/components/elements/SearchBar/SearchBar.js index 2f36f1b..eaeefb0 100644 --- a/src/components/elements/SearchBar/SearchBar.js +++ b/src/components/elements/SearchBar/SearchBar.js @@ -1,5 +1,4 @@ import React, { Component } from "react"; -import PropTypes from "prop-types"; import FontAwesome from "react-fontawesome"; import "./SearchBar.css";