From 30dd05ebf33b6be88dad12f8a18dfda7df49bb44 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Fri, 2 Jun 2017 19:37:08 +0200
Subject: [PATCH] Now the search request updates based on the input in the text
 field. Super simple, need better handling and styling.

---
 client/app/components/SearchRequest.jsx | 46 +++++++++++++++++++++----
 1 file changed, 39 insertions(+), 7 deletions(-)

diff --git a/client/app/components/SearchRequest.jsx b/client/app/components/SearchRequest.jsx
index acd680b..4f0ff6d 100644
--- a/client/app/components/SearchRequest.jsx
+++ b/client/app/components/SearchRequest.jsx
@@ -1,24 +1,51 @@
 import React from 'react';
 
+import MovieObject from './MovieObject.jsx';
+
 class SearchRequest extends React.Component {
 	constructor(props){
     super(props)
     this.state = {
-      searchQuery: ''
+      searchQuery: '',
+      items: []
     }
   }
 
+  componentDidMount(){
+  	var that = this;
+		fetch("https://apollo.kevinmidboe.com/api/v1/plex/request?query=interstellar")
+    .then(response => response.json())
+    .then(data => this.setState({
+        items: data
+      })
+    ).catch(err => console.error('Error load: ', err.toString()));
+  }
+
   _handleKeyPress(e) {
     if (e.key === 'Enter') {
-      console.log('do validate');
+      var query = 'https://apollo.kevinmidboe.com/api/v1/plex/request?query=' + this.state.searchQuery;
+
+      fetch(query)
+      .then(response => response.json())
+      .then(data => this.setState({
+          items: data
+        })
+      ).catch(err => console.error('Error submit: ', err.toString()));
     }
   }
 
+  printMovies(item) {
+    if (item != undefined) {
+      let a = new MovieObject(item);
+      return a.getElement();
+    }
+  }
+
+
   handleChange(event){
     this.setState({
       searchQuery: event.target.value
-    })
-    console.log(this.state.searchQuery);
+    });
   }
 
   render(){
@@ -26,11 +53,16 @@ class SearchRequest extends React.Component {
       <div>
         <input
           type="text"
-          onKeyPress={this._handleKeyPress}
-          onChange={this.handleChange.bind(this)}
-          defaultValue={this.state.searchItem}
+          onKeyPress={(event) => this._handleKeyPress(event)}
+          onChange={event => this.handleChange(event)}
+          value={this.state.searchQuery}
           />
+          <br></br>
 
+          {this.state.searchQuery}
+          <br></br>
+            
+          {this.state.items.map((item) => this.printMovies(item))}
       </div>
     )
   }