constructorlabs · jay9044 · Sep 28, 2018 · Sep 29, 2018 · Sep 29, 2018 · Sep 30, 2018
diff --git a/index.html b/index.html
@@ -2,11 +2,16 @@
 <html>
   <head>
     <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
     <link rel="stylesheet" href="style.css">
     <title>Hello World</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
     <div id="root"></div>
     <script src="dist/bundle.js"></script>
   </body>
 </html>
+
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,7 +18,8 @@
   },
   "dependencies": {
     "react": "^16.2.0",
-    "react-dom": "^16.2.0"
+    "react-dom": "^16.2.0",
+    "react-youtube": "^7.7.0"
   },
   "devDependencies": {
     "babel-loader": "^7.1.3",

diff --git a/src/components/App.js b/src/components/App.js
@@ -1,14 +1,81 @@
 import React from 'react';
+import Search from './Search';
+import Results from './Results';
+import Hero from './Hero';
 
 class App extends React.Component {
   constructor(){
     super();
+
+    this.handleClick = this.handleClick.bind(this)
+    this.handlePrevClick = this.handlePrevClick.bind(this)
+    this.receiveSearch = this.receiveSearch.bind(this)
+
+    this.fetchMovies = this.fetchMovies.bind(this)
+    this.state ={
+        userSearch: "",
+        moviesArray:[],
+        page: 1
+    }
+  }
+
+
+  fetchMovies(userSearch){
+    fetch(`http://www.omdbapi.com/?apikey=8d5ab09&s=${userSearch}&page=${this.state.page}`)
+    .then(response => response.json())
+    .then(body => {
+      // console.log(body)
+      this.setState({moviesArray: body.Search,
+
+      })
+    })
+  }
+
+
+// function receive user input
+  receiveSearch(text){
+    this.setState({
+      userSearch: text
+    })
+    this.fetchMovies(text)
   }
 
+
+  handleClick(event){
+
+    this.setState({
+      page: this.state.page + 1
+    }, () => this.fetchMovies(this.state.userSearch,this.setState.page))
+   window.scrollTo(0,1050)
+
+  }
+
+  handlePrevClick(){
+    this.setState({
+      page: this.state.page - 1
+    },() => this.fetchMovies(this.state.userSearch, this.setState.page))
+    window.scrollTo(0,1050)
+  }
+
+
+
+
   render(){
     return (
-      <div>
-        React cinema app
+      <div className="container">
+        <h1 className='welcome-heading'>The Internet's Biggest Collections Of Movies</h1>
+        <ul>
+            <li><a>Favourites</a><i class="fa fa-chevron-down"></i></li>
+        </ul>
+       <Search  receiver={this.receiveSearch}/>
+       {/* add a ternary to show hero if no movie search and if movie is search, no hero */}
+       <Hero />
+       <Results   moviesArray={this.state.moviesArray}/>
+
+       <div className='buttons'>
+       <button className='load-button__next' onClick={this.handleClick}>Next 10 Results</button>
+       <button className='load-button__prev' onClick={this.handlePrevClick}>Prev Results</button>
+       </div>
       </div>
     )
   }

diff --git a/src/components/Button.js b/src/components/Button.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+class Button extends React.Component {
+  render(){
+    return (
+      <div>
+          <button>Load</button>
+      </div>
+    );
+  }
+}
+
+export default Button;
diff --git a/src/components/Displayresults.js b/src/components/Displayresults.js
@@ -0,0 +1,62 @@
+import React from 'react';
+
+
+class Displayresults extends React.Component {
+  constructor(){
+    super()
+    this.fetchFilmInfo = this.fetchFilmInfo.bind(this)
+    this.handleClick = this.handleClick.bind(this)
+    this.state ={
+        info: {},
+        MovieInfoHeading: ''
+
+    }
+  }
+
+  handleClick(){
+
+  }
+
+  fetchFilmInfo(){
+    fetch(`http://www.omdbapi.com/?apikey=8d5ab09&i=${this.props.movie.imdbID}`)
+    .then(response => response.json())
+    .then(body => 
+      this.setState({
+      info: body,
+      MovieInfoHeading: 'Movie Information:',
+      Plot: `Plot: ${body.Plot}`,
+      imdbRating: `Rating: ${body.imdbRating}`,
+      Director: `Director: ${body.Director}`,
+      Genre: `Genre: ${body.Genre}`,
+      Runtime: `Runtime: ${body.Runtime}`,
+      star: <i className='star-icon' class="fas fa-star"></i>
+    }))
+  }
+
+  render(){
+
+
+    return (
+
+        <div className='results' >
+            <h1 className='scroll-heading'>{this.props.movie.Title} ({this.props.movie.Year})</h1>
+            <span>Click For Movie Info</span>
+         <img onClick={this.fetchFilmInfo} className='posters' src={this.props.movie.Poster} /> 
+            <p className='movie-info'>{this.state.Plot} </p>
+            <p className='movie-info'>{this.state.imdbRating}{this.state.star}</p>
+            <p className='movie-info'>{this.state.Director}</p>
+            <p className='movie-info'>{this.state.Genre}</p>
+            <p className='movie-info'>{this.state.Runtime}</p>
+
+
+            <a onClick={this.handleClick}><i class="fas fa-heart heart-icon"><span className='add-to'>Add To Favourites</span></i></a>
+
+        </div>
+    );
+  }
+}
+
+export default Displayresults;
+
+
+
diff --git a/src/components/Hero.js b/src/components/Hero.js
@@ -0,0 +1,49 @@
+import React from 'react';
+
+
+class Hero extends React.Component {
+    constructor(){
+        super();
+        this.fetchHero = this.fetchHero.bind(this)
+        this.state ={
+            movie: []
+        }
+    }
+
+    fetchHero(){
+    fetch("http://www.omdbapi.com/?apikey=8d5ab09&i=tt1270797")
+    .then(response => response.json())
+    .then(body => {(console.log(body))
+    this.setState({
+        movie: body
+        })
+    })
+    }
+
+     componentDidMount(){
+    this.fetchHero()
+    }
+
+
+
+  render(){
+    return (
+
+      <div>
+          <h2 className='hero-heading'>Today's Featured Film </h2>
+          <p className='scroll-heading'>VENOM</p>
+          <p className='scroll-heading'>In Theatres Soon!</p>
+          <h3 className='scroll-heading'>Scroll down to watch the trailer</h3>
+          <div className='hero-landing'>
+      <img  onClick={this.handleClick} className='hero-image' src={this.state.movie.Poster} />
+      </div>
+       <div className='hero-video'>
+            <iframe  width="560" height="315" src="https://www.youtube.com/embed/xLCn88bfW1o?autoplay=1&mute=1&enablejsapi=1"  frameBorder="0" allowFullScreen></iframe>
+       </div>
+      </div>
+    );
+  }
+}
+
+export default Hero;
+
diff --git a/src/components/Results.js b/src/components/Results.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import Displayresults from './Displayresults'
+
+class Results extends React.Component {
+  render(){
+    return (
+      <div>
+          {this.props.moviesArray.map(movie => {
+              return <Displayresults    key={movie.imdbID}  movie={movie}/>
+          })}
+      </div>
+    );
+  }
+}
+
+export default Results;
diff --git a/src/components/Search.js b/src/components/Search.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import Displayresults from './Displayresults'
+class Search extends React.Component {
+constructor(){
+    super()
+    this.state = {
+        text: ""
+    }
+    this.handleSubmit = this.handleSubmit.bind(this)
+    this.handleChange = this.handleChange.bind(this)
+}
+
+    handleChange(event){
+        this.setState({
+            text:event.target.value
+        })
+    }
+
+    handleSubmit(event){
+        //capture user input submit
+        event.preventDefault()
+        this.props.receiver(this.state.text)
+    }
+
+
+  render(){
+    return (
+
+          <form onSubmit={this.handleSubmit}>
+              <input type='text' placeholder='Search For A Movie..' onChange={this.handleChange}/>
+              <button  type='submit'>Search..</button>   
+          </form>
+
+    );
+  }
+}
+
+export default Search;
+