header background

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 (
          <div>  
           <Navigation showMovies={this.onSearchHandler} />
-          {this.state.toggleMovieList ? <Layout /> : <div //onClick={this.onChangeHandler} 
+          {this.state.toggleMovieList ? <Layout /> : <div 
                                             className="search-container">{this.state.rows}</div>}
           <Modal show={this.state.toggleModal} modalClosed={this.closeModal} movie={this.state.movieDetails}>
             <MovieSummary movie={this.state.movieDetails}/>

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 (
       <BrowserRouter>
           <div className="container">
-            <Header />
+            <Header movie={this.state.selectedMovie}/>
             <MovieShowcase />
             <MovieOriginals />
            <Footer /> 

src/containers/Navigation/Navigation.js

@@ -46,7 +46,6 @@ class navigation extends Component {
             <input
               onChange={this.props.showMovies}
               className="navigation__container--left__input"
-              // onKeyPress={this.props.showMan}
               type="text"
               placeholder="Title, genres, people" />