diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index 1fb7ace..0ebadb0 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -1,9 +1,42 @@ -import React from 'react'; +import React, { Component } from 'react'; -const header = () => ( -
+ + + + + +class Header extends Component { + + render() { + + const backgroundStyle = { + transform: "scaleY(-45rem)", + backgroundPosition: "center", + backgroundSize: "cover", + backgroundImage: `url(https://image.tmdb.org/t/p/original/${this.props.movie.backdrop_path})` + } + + return ( +
+
+ {/*

{this.props.movie.name}

*/} +
-
-); +
+ ) -export default header; \ No newline at end of file + } +} + + +// const header = (props) => ( + +//
+//
+//

{props.movie.name}

+ +//
+//
+// ); + +export default Header; \ No newline at end of file diff --git a/src/components/MovieRow/MovieSummary/MovieSummary.js b/src/components/MovieRow/MovieSummary/MovieSummary.js index 11a4745..9668bbf 100644 --- a/src/components/MovieRow/MovieSummary/MovieSummary.js +++ b/src/components/MovieRow/MovieSummary/MovieSummary.js @@ -1,23 +1,20 @@ import React, { Component } from 'react'; import Aux from '../../../hoc/Aux/Aux'; -import MovieRow from '../MovieRow'; class MovieSummary extends Component { - render() { - return ( - -
+ +

{this.props.movie.title || this.props.movie.name}

Rating: {this.props.movie.vote_average * 10}% Release date: {this.props.movie.release_date || this.props.movie.first_air_date} Runtime: {this.props.movie.runtime || this.props.movie.episode_run_time}m -

+

{this.props.movie.number_of_episodes ? " Episodes: " + this.props.movie.number_of_episodes : ""} {this.props.movie.number_of_seasons ? " Seasons: " + this.props.movie.number_of_seasons : ""}

{this.props.movie.overview}

@@ -26,10 +23,7 @@ class MovieSummary extends Component {

staring: mdf gglo bool emmy djf

Genres: mdf gglo bool emmy djf

- - - - + ) } } diff --git a/src/components/UI/Modal/Modal.js b/src/components/UI/Modal/Modal.js index 44c4520..c640f10 100644 --- a/src/components/UI/Modal/Modal.js +++ b/src/components/UI/Modal/Modal.js @@ -2,21 +2,15 @@ import React, {Component} from 'react'; import Aux from '../../../hoc/Aux/Aux'; import Backdrop from '../Backdrop/Backdrop' + + + class Modal extends Component { - render() { -// `background: linear-gradient(90deg, #000000, #ffffff00), - const backgroundStyle = { - // overflow: 'hidden', - - // backgroundRepeat: "no-repeat", - // // backgroundPosition: 'center center' - // background: "red", backgroundSize: "cover", - // backgroundImage: 'linear-gradient(to right, #1c1b1b, rgb(237, 232, 232)' backgroundImage: `url(https://image.tmdb.org/t/p/original/${this.props.movie.backdrop_path || this.props.movie.poster_path})`, } return ( @@ -25,10 +19,8 @@ class Modal extends Component {
- {this.props.children} + {this.props.children}
- - ); } diff --git a/src/containers/App.js b/src/containers/App.js index c508124..c451789 100644 --- a/src/containers/App.js +++ b/src/containers/App.js @@ -5,6 +5,7 @@ import axios from 'axios'; import MovieRow from '../components/MovieRow/MovieRow' import Modal from '../components/UI/Modal/Modal'; import MovieSummary from '../components/MovieRow/MovieSummary/MovieSummary'; +import CancelIcon from '../static/images/cancel-music.svg' @@ -77,9 +78,9 @@ makeAipCall = (searchItem) => { } axios.get(url) .then(res => { - + console.log(res); const movieData = res.data; - console.log(movieData); + // console.log(movieData); this.setState({movieDetails: movieData}); }).catch(error => { @@ -97,7 +98,7 @@ makeAipCall = (searchItem) => { return (
- {this.state.toggleMovieList ? :
:
{this.state.rows}
} diff --git a/src/containers/Layout/Layout.js b/src/containers/Layout/Layout.js index 0f6c974..9b817d0 100644 --- a/src/containers/Layout/Layout.js +++ b/src/containers/Layout/Layout.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; - +import axios from 'axios'; import Header from '../../components/Header/Header'; import MovieShowcase from '../MovieShowcase/MovieShowcase'; import MovieOriginals from '../MovieOriginals/MovieOriginals'; @@ -9,6 +9,28 @@ import { BrowserRouter } from "react-router-dom"; class Layout extends Component { + state = { + selectedMovie: {} + } + + componentDidMount = () => { + this.getMovie(); + } + + 71411 + getMovie = () => { + // 1) make api call to retrieve movie + const url = "https://api.themoviedb.org/3/tv/71411?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0"; + axios.get(url) + .then(res => { + const movieData = res.data; + this.setState({ selectedMovie: movieData }) + + }).catch(error => { + console.log(error); + }) + + } render() { @@ -17,7 +39,7 @@ class Layout extends Component { return (
-
+