changed component rendering to searchresult components and wrote func…

…tion to add a search result to the rental library

src/components/MovieSearchPage.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Route, Link } from "react-router-dom";
 import MovieSearchBar from './MovieSearchBar';
-import Movie from './Movie';
+import SearchResult from './SearchResult';
 import Axios from 'axios';
 
 const baseURL = `http://localhost:3001`;
@@ -28,21 +28,33 @@ class MovieSearchPage extends Component {
         });
   };
 
-  addRental = (props) => {
-    console.log(props);
-    // Axios.get(`${baseURL}/movies/${title}`)
-    //   .then((response) => {
-    //     console.log(response.data);
-    //   }) 
-    // Axios.post(`${baseURL}/movies`, )
+  addRental = (movieData) => {
+    console.log(movieData);
+    const rental = {
+      title: movieData.title,
+      overview: movieData.overview,
+      release_date: movieData.release_date,
+      image_url: movieData.image_url,
+      external_id: movieData.external_id
+    };
+
+    Axios.post(`${baseURL}/movies`, rental)
+    .then((response) => {
+      console.log(response);
+    })
   }
 
   render() {
     const {searchResults} = this.state;
-    const movieList = searchResults.map((result) => {
-      const {external_id, title, overview, release_date} = result;
-      return ( <Movie key={external_id} title={title}
-              overview={overview} release_date={release_date} 
+    const resultList = searchResults.map((result) => {
+      const {external_id, title, overview, release_date, image_url} = result;
+      return ( <SearchResult 
+              key={external_id} 
+              title={title}
+              overview={overview} 
+              release_date={release_date} 
+              image_url={image_url}
+              external_id={external_id}
               onSelectHandler={this.addRental} />)
     });
 
@@ -71,7 +83,7 @@ class MovieSearchPage extends Component {
           </tr>
           </thead>
           <tbody>
-            {movieList}
+            {resultList}
           </tbody>
         </table>
       </div>