From e7c9502518225dba6dba19c5faa34ffddd4ed9ca Mon Sep 17 00:00:00 2001
From: Mary Lamkin <mmlamkin@gmail.com>
Date: Mon, 18 Jun 2018 13:23:14 -0700
Subject: [PATCH 01/50] cloned, ran tests etc

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 951a38e2f..120e3bd86 100644
--- a/package.json
+++ b/package.json
@@ -13,4 +13,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
\ No newline at end of file
+}

From f3026f7b72c8bec43216726dc4c9767a7f52cd0d Mon Sep 17 00:00:00 2001
From: Mary Lamkin <mmlamkin@gmail.com>
Date: Mon, 18 Jun 2018 15:04:17 -0700
Subject: [PATCH 02/50] adds internal api library to react app

---
 package-lock.json          |  9 ++++++
 package.json               |  1 +
 src/App.js                 |  9 ++----
 src/components/Library.css |  4 +++
 src/components/Library.js  | 66 ++++++++++++++++++++++++++++++++++++++
 5 files changed, 82 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Library.css
 create mode 100644 src/components/Library.js

diff --git a/package-lock.json b/package-lock.json
index 79f52b34f..2bdc7a2f0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -434,6 +434,15 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.7.0.tgz",
       "integrity": "sha512-32NDda82rhwD9/JBCCkB+MRYDp0oSvlo2IL6rQWA10PQi7tDUM3eqMSltXmY+Oyl/7N3P3qNtAlv7X0d9bI28w=="
     },
+    "axios": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
+      "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
+      "requires": {
+        "follow-redirects": "1.5.0",
+        "is-buffer": "1.1.6"
+      }
+    },
     "axobject-query": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-0.1.0.tgz",
diff --git a/package.json b/package.json
index 120e3bd86..b5d697449 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.18.0",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
     "react-scripts": "1.1.4"
diff --git a/src/App.js b/src/App.js
index 203067e4d..189b47113 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,18 +1,13 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import Library from './components/Library';
 
 class App extends Component {
   render() {
     return (
       <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
+        <Library url="http://localhost:3000/movies" />
       </div>
     );
   }
diff --git a/src/components/Library.css b/src/components/Library.css
new file mode 100644
index 000000000..078ceca6a
--- /dev/null
+++ b/src/components/Library.css
@@ -0,0 +1,4 @@
+.movie-library {
+  display: flex;
+  flex-direction: column;
+}
diff --git a/src/components/Library.js b/src/components/Library.js
new file mode 100644
index 000000000..a75608713
--- /dev/null
+++ b/src/components/Library.js
@@ -0,0 +1,66 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+import './Library.css';
+
+class Library extends Component {
+
+  constructor(props) {
+  super(props);
+
+  this.state = {
+    movies: [],
+  };
+}
+
+  componentDidMount = () => {
+    axios.get(`${this.props.url}`)
+    .then( (response) => {
+      console.log(response);
+      this.setState({
+        movies: response.data
+      });
+    })
+    .catch( (error) => {
+      this.setState({
+        error: error.message
+      });
+    });
+  }
+
+  renderMovies = () => {
+    const movieLibrary = this.state.movies.map((movie) => {
+
+      return (
+        <div>
+          <img src={movie.image_url} alt="movie thumbnail"/>
+          <p>{movie.title} {movie.release_date}</p>
+        </div>
+      );
+    });
+
+    return movieLibrary
+  }
+
+  render() {
+
+    const anyErrors = () => {
+    if (this.state.error) {
+      return <p>{this.state.error}</p>
+    }
+  }
+
+    return (
+      <section>
+      <span>{anyErrors()}</span>
+        <div className='movie-library'>
+          {this.renderMovies()}
+        </div>
+      </section>
+    )
+  }
+
+}
+
+
+export default Library;

From 13e5ed886c49310df4dbb86592d55fb386bf11db Mon Sep 17 00:00:00 2001
From: Mary Lamkin <mmlamkin@gmail.com>
Date: Mon, 18 Jun 2018 15:16:19 -0700
Subject: [PATCH 03/50] adds movie component

---
 src/components/Library.js | 10 ++++++----
 src/components/Movie.css  |  0
 src/components/Movie.js   | 22 ++++++++++++++++++++++
 3 files changed, 28 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Movie.css
 create mode 100644 src/components/Movie.js

diff --git a/src/components/Library.js b/src/components/Library.js
index a75608713..a096dda64 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import axios from 'axios';
 import './Library.css';
+import Movie from './Movie'
 
 class Library extends Component {
 
@@ -32,10 +33,11 @@ class Library extends Component {
     const movieLibrary = this.state.movies.map((movie) => {
 
       return (
-        <div>
-          <img src={movie.image_url} alt="movie thumbnail"/>
-          <p>{movie.title} {movie.release_date}</p>
-        </div>
+        <Movie
+          image_url={movie.image_url}
+          title={movie.title}
+          release_date={movie.release_date}
+        />
       );
     });
 
diff --git a/src/components/Movie.css b/src/components/Movie.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/Movie.js b/src/components/Movie.js
new file mode 100644
index 000000000..2cae4af14
--- /dev/null
+++ b/src/components/Movie.js
@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+import './Movie.css';
+
+class Movie extends Component {
+
+
+  render() {
+
+    return (
+      <section>
+        <img src={this.props.image_url} alt="movie thumbnail"/>
+        <p>{this.props.title} {this.props.release_date}</p>
+      </section>
+    )
+  }
+
+}
+
+
+export default Movie;

From 7569a613bef58d474e40a88686e96d17e8e71e1e Mon Sep 17 00:00:00 2001
From: Mary Lamkin <mmlamkin@gmail.com>
Date: Mon, 18 Jun 2018 15:35:15 -0700
Subject: [PATCH 04/50] adds state to app and renders library with button click

---
 src/App.js                     | 23 +++++++++++-
 src/components/CustomerList.js | 65 ++++++++++++++++++++++++++++++++++
 src/components/Library.js      |  2 +-
 3 files changed, 88 insertions(+), 2 deletions(-)
 create mode 100644 src/components/CustomerList.js

diff --git a/src/App.js b/src/App.js
index 189b47113..dbf9f7dca 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,12 +2,33 @@ import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
 import Library from './components/Library';
+import CustomerList from './components/CustomerList';
 
 class App extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      movies: [],
+    };
+  }
+
+  showLibrary = (event) => {
+    this.setState({
+      movies: <Library url="http://localhost:3000/movies" />
+    });
+  }
+
   render() {
     return (
       <div className="App">
-        <Library url="http://localhost:3000/movies" />
+        <button className="see-library" onClick={this.showLibrary}>
+          Poseiden Faves
+        </button>
+        <section>
+          {this.state.movies}
+        </section>
+        <CustomerList url="http://localhost:3000/customers"/>
       </div>
     );
   }
diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js
new file mode 100644
index 000000000..021e233e9
--- /dev/null
+++ b/src/components/CustomerList.js
@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+
+
+class CustomerList extends Component {
+
+  constructor(props) {
+  super(props);
+
+  this.state = {
+    customers: [],
+  };
+}
+
+  componentDidMount = () => {
+    axios.get(`${this.props.url}`)
+    .then( (response) => {
+      console.log(response);
+      this.setState({
+        customers: response.data
+      });
+    })
+    .catch( (error) => {
+      this.setState({
+        error: error.message
+      });
+    });
+  }
+
+  renderCustomers= () => {
+    const List = this.state.customers.map((customer) => {
+
+      return (
+        <p>
+          {customer.name}
+        </p>
+      );
+    });
+
+    return List
+  }
+
+  render() {
+
+    const anyErrors = () => {
+    if (this.state.error) {
+      return <p>{this.state.error}</p>
+    }
+  }
+
+    return (
+      <section>
+      <span>{anyErrors()}</span>
+        <div>
+          {this.renderCustomers()}
+        </div>
+      </section>
+    )
+  }
+
+}
+
+
+export default CustomerList;
diff --git a/src/components/Library.js b/src/components/Library.js
index a096dda64..77d691cc8 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -17,7 +17,7 @@ class Library extends Component {
   componentDidMount = () => {
     axios.get(`${this.props.url}`)
     .then( (response) => {
-      console.log(response);
+
       this.setState({
         movies: response.data
       });

From 8d453f50f805b9ad393b5d059def3d19ea2727b1 Mon Sep 17 00:00:00 2001
From: Mary Lamkin <mmlamkin@gmail.com>
Date: Mon, 18 Jun 2018 15:37:52 -0700
Subject: [PATCH 05/50] adds custoemr button to react app

---
 src/App.js | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/App.js b/src/App.js
index dbf9f7dca..61e436cc0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,25 +10,41 @@ class App extends Component {
 
     this.state = {
       movies: [],
+      customers: [],
     };
   }
 
   showLibrary = (event) => {
     this.setState({
-      movies: <Library url="http://localhost:3000/movies" />
+      movies: <Library url="http://localhost:3000/movies" />,
+      customers: []
+    });
+  }
+
+  showCustomers = (event) => {
+    this.setState({
+      movies: [],
+      customers: <CustomerList url="http://localhost:3000/customers"/>
     });
   }
 
   render() {
     return (
       <div className="App">
-        <button className="see-library" onClick={this.showLibrary}>
-          Poseiden Faves
-        </button>
+        <header>
+          <button className="see-library" onClick={this.showLibrary}>
+            Poseiden Faves
+          </button>
+          <button className="see-customers" onClick={this.showCustomers}>
+            Poseiden Customers
+          </button>
+        </header>
+
         <section>
           {this.state.movies}
+          {this.state.customers}
         </section>
-        <CustomerList url="http://localhost:3000/customers"/>
+
       </div>
     );
   }

From 6516c627ba594f7071fe0a682b9e1ffaeeeede84 Mon Sep 17 00:00:00 2001
From: Abiaina <abinnet.a@gmail.com>
Date: Mon, 18 Jun 2018 16:11:58 -0700
Subject: [PATCH 06/50] added search movie component

---
 package.json                 |  2 +-
 src/App.js                   | 22 +++++++-----
 src/components/SearchForm.js | 69 ++++++++++++++++++++++++++++++++++++
 3 files changed, 83 insertions(+), 10 deletions(-)
 create mode 100644 src/components/SearchForm.js

diff --git a/package.json b/package.json
index 951a38e2f..120e3bd86 100644
--- a/package.json
+++ b/package.json
@@ -13,4 +13,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
\ No newline at end of file
+}
diff --git a/src/App.js b/src/App.js
index 203067e4d..ef4db9ffd 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,18 +1,22 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import SearchForm from './components/SearchForm.js';
+
 
 class App extends Component {
+
+  searchMovieAPICall(movieName) {
+    return (
+      <h3> `api makes a call for movie ${movieName} and calls function to show results`</h3>
+    )
+  }
+
   render() {
     return (
       <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
+        <SearchForm
+          searchMovie={this.searchMovieAPICall}
+         />
+
       </div>
     );
   }
diff --git a/src/components/SearchForm.js b/src/components/SearchForm.js
new file mode 100644
index 000000000..c35a01425
--- /dev/null
+++ b/src/components/SearchForm.js
@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+class SearchForm extends Component {
+    constructor(props) {
+      super(props);
+
+      this.state = {
+        movieName: '',
+      };
+    }
+
+    onFieldChange = (event) => {
+    const fieldName = event.target.name;
+    const fieldValue = event.target.value;
+    const updateState = {};
+
+    updateState[fieldName] = fieldValue;
+    this.setState(updateState);
+  }
+
+    clearForm = () => {
+      this.setState({
+        movieName: '',
+      });
+    }
+
+
+
+    //eventually will pull the searchapi call function from props
+    onFormSubmit = (event) => {
+      event.preventDefault();
+      console.log(this.state.movieName);
+      this.props.searchMovie(this.state.movieName);
+      this.clearForm();
+    }
+
+    //external api
+
+    //display api call response (not in state)
+
+
+    render() {
+      return (
+        <form onSubmit={this.onFormSubmit}>
+          <div key="movieName">
+            <label htmlFor="movieName">Movie Name: </label>
+            <input
+              id="movieName"
+              name="movieName"
+              value={this.state.movieName}
+              onChange={this.onFieldChange}
+              type="text"
+             />
+          </div>
+
+          <input
+            type="submit"
+            value="Search"
+          />
+        </form>
+      );
+    }
+  }
+
+  SearchForm.propTypes = {
+  }
+
+export default SearchForm;

From 27498e9c5eeae5179f50062348b799e43ab329b8 Mon Sep 17 00:00:00 2001
From: Abiaina <abinnet.a@gmail.com>
Date: Mon, 18 Jun 2018 16:12:24 -0700
Subject: [PATCH 07/50] added search movie component

---
 src/components/SearchForm.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SearchForm.js b/src/components/SearchForm.js
index c35a01425..e9f8372af 100644
--- a/src/components/SearchForm.js
+++ b/src/components/SearchForm.js
@@ -44,7 +44,7 @@ class SearchForm extends Component {
       return (
         <form onSubmit={this.onFormSubmit}>
           <div key="movieName">
-            <label htmlFor="movieName">Movie Name: </label>
+            <label htmlFor="movieName">Movie: </label>
             <input
               id="movieName"
               name="movieName"

From 5882afa7f240971b1f5ed6e789fc3fdc92966101 Mon Sep 17 00:00:00 2001
From: Abiaina <abinnet.a@gmail.com>
Date: Mon, 18 Jun 2018 16:32:55 -0700
Subject: [PATCH 08/50] api call search results show up on app and replace
 current customer and movie list

---
 src/App.js                   | 16 ++++++++--------
 src/components/SearchForm.js |  4 ----
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/App.js b/src/App.js
index df63c21f2..0e1fb4b5a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,6 +3,7 @@ import './App.css';
 import Library from './components/Library';
 import CustomerList from './components/CustomerList';
 import SearchForm from './components/SearchForm';
+import axios from 'axios';
 
 
 class App extends Component {
@@ -29,9 +30,10 @@ class App extends Component {
     });
   }
 
-  searchMovieAPICall(movieName) {
+  searchMovieAPICall = (movieName) => {
     this.setState({
-      searchResults: `api makes a call for movie ${movieName} and calls function to show results` ,
+      movies: `api makes a call for movie ${movieName} and calls function to show results`,
+      customers: [],
     });
   }
 
@@ -46,17 +48,15 @@ class App extends Component {
             Poseiden Customers
           </button>
         </header>
+        <SearchForm
+          searchMovie={this.searchMovieAPICall}
+         />
 
         <section>
           {this.state.movies}
           {this.state.customers}
         </section>
-        <SearchForm
-          searchMovie={this.searchMovieAPICall}
-         />
-         <ul>
-          <li>{this.state.searchResults}</li>
-         </ul>
+
       </div>
     );
   }
diff --git a/src/components/SearchForm.js b/src/components/SearchForm.js
index ea535cdf1..588945d02 100644
--- a/src/components/SearchForm.js
+++ b/src/components/SearchForm.js
@@ -36,10 +36,6 @@ class SearchForm extends Component {
       this.clearForm();
     }
 
-    //external api
-
-    //display api call response (not in state)
-
 
     render() {
       return (

From 842d84c6b83f0790dc80bb6938117f44e0051771 Mon Sep 17 00:00:00 2001
From: Mary Lamkin <mmlamkin@gmail.com>
Date: Mon, 18 Jun 2018 16:33:59 -0700
Subject: [PATCH 09/50] adds a non functional button for adding customer to
 rental

---
 src/App.js                     |  4 +++-
 src/components/CustomerList.js | 24 +++++++++++++++++-------
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/App.js b/src/App.js
index 61e436cc0..6cd7f1505 100644
--- a/src/App.js
+++ b/src/App.js
@@ -21,10 +21,12 @@ class App extends Component {
     });
   }
 
+
+
   showCustomers = (event) => {
     this.setState({
       movies: [],
-      customers: <CustomerList url="http://localhost:3000/customers"/>
+      customers: <CustomerList url="http://localhost:3000/customers" addCustomerCallback={this.updateRental}/>
     });
   }
 
diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js
index 021e233e9..286f6a48d 100644
--- a/src/components/CustomerList.js
+++ b/src/components/CustomerList.js
@@ -10,6 +10,7 @@ class CustomerList extends Component {
 
   this.state = {
     customers: [],
+    rentalCustomer: ''
   };
 }
 
@@ -28,19 +29,30 @@ class CustomerList extends Component {
     });
   }
 
+  addCustomer= () => {
+    this.props.addCustomerCallback()
+  }
+
   renderCustomers= () => {
     const List = this.state.customers.map((customer) => {
 
       return (
-        <p>
-          {customer.name}
-        </p>
+        <section>
+          <p>
+            {customer.name}
+          </p>
+          <button className="rental-customer" onClick={this.addCustomer}>
+            Add to Rental
+          </button>
+        </section>
       );
     });
 
     return List
   }
 
+
+
   render() {
 
     const anyErrors = () => {
@@ -51,10 +63,8 @@ class CustomerList extends Component {
 
     return (
       <section>
-      <span>{anyErrors()}</span>
-        <div>
-          {this.renderCustomers()}
-        </div>
+        {anyErrors()}
+        {this.renderCustomers()}
       </section>
     )
   }

From 89d55df51dee7b11055825c909f16484b43470a0 Mon Sep 17 00:00:00 2001
From: Mary Lamkin <mmlamkin@gmail.com>
Date: Tue, 19 Jun 2018 08:56:51 -0700
Subject: [PATCH 10/50] adds library and movie styling and customer component

---
 src/App.js                  |  4 ++--
 src/components/Customer.css |  0
 src/components/Customer.js  | 23 +++++++++++++++++++++++
 src/components/Library.css  |  4 +++-
 src/components/Movie.css    |  5 +++++
 src/components/Movie.js     |  5 +++--
 6 files changed, 36 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Customer.css
 create mode 100644 src/components/Customer.js

diff --git a/src/App.js b/src/App.js
index 37c14aaf2..3db4fdc04 100644
--- a/src/App.js
+++ b/src/App.js
@@ -13,6 +13,8 @@ class App extends Component {
     this.state = {
       movies: [],
       customers: [],
+      rentalMovie: '',
+      rentalCustomer: ''
     };
   }
 
@@ -23,8 +25,6 @@ class App extends Component {
     });
   }
 
-
-
   showCustomers = (event) => {
     this.setState({
       movies: [],
diff --git a/src/components/Customer.css b/src/components/Customer.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/Customer.js b/src/components/Customer.js
new file mode 100644
index 000000000..f29cdcd23
--- /dev/null
+++ b/src/components/Customer.js
@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+import './Customer.css';
+
+class Customer extends Component {
+
+
+  render() {
+
+    return (
+      <section className="movie">
+        <img src={this.props.image_url} alt="movie thumbnail"/>
+        <p>{this.props.title}</p>
+        <p>{this.props.release_date}</p>
+      </section>
+    )
+  }
+
+}
+
+
+export default Movie;
diff --git a/src/components/Library.css b/src/components/Library.css
index 078ceca6a..bc8a17cd1 100644
--- a/src/components/Library.css
+++ b/src/components/Library.css
@@ -1,4 +1,6 @@
 .movie-library {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  flex-wrap: wrap;
+  
 }
diff --git a/src/components/Movie.css b/src/components/Movie.css
index e69de29bb..219846312 100644
--- a/src/components/Movie.css
+++ b/src/components/Movie.css
@@ -0,0 +1,5 @@
+.movie {
+  display: flex;
+  flex-direction: column;
+  margin: .8%;
+}
diff --git a/src/components/Movie.js b/src/components/Movie.js
index 2cae4af14..204aa5d0f 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -9,9 +9,10 @@ class Movie extends Component {
   render() {
 
     return (
-      <section>
+      <section className="movie">
         <img src={this.props.image_url} alt="movie thumbnail"/>
-        <p>{this.props.title} {this.props.release_date}</p>
+        <p>{this.props.title}</p>
+        <p>{this.props.release_date}</p>
       </section>
     )
   }

From 5ef5adf7b9c65df2cee5b36befb76ad148aab9fe Mon Sep 17 00:00:00 2001
From: Mary Lamkin <mmlamkin@gmail.com>
Date: Tue, 19 Jun 2018 10:06:03 -0700
Subject: [PATCH 11/50] can add customer to rental

---
 src/App.js                     | 10 +++++++++-
 src/components/Customer.js     | 14 +++++++++-----
 src/components/CustomerList.js | 15 ++++-----------
 3 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/App.js b/src/App.js
index 3db4fdc04..f7a048935 100644
--- a/src/App.js
+++ b/src/App.js
@@ -28,10 +28,16 @@ class App extends Component {
   showCustomers = (event) => {
     this.setState({
       movies: [],
-      customers: <CustomerList url="http://localhost:3000/customers" addCustomerCallback={this.updateRental}/>
+      customers: <CustomerList url="http://localhost:3000/customers" updateRentalCallback={this.updateRentalCustomer}/>
     });
   }
 
+  updateRentalCustomer = (name) => {
+    this.setState({
+      rentalCustomer: name
+    })
+  }
+
   searchMovieAPICall = (movieName) => {
     this.setState({
       movies: `api makes a call for movie ${movieName} and calls function to show results`,
@@ -49,7 +55,9 @@ class App extends Component {
           <button className="see-customers" onClick={this.showCustomers}>
             Poseiden Customers
           </button>
+          <p>Selected Movie: {this.state.rentalMovie} Selected Customer: {this.state.rentalCustomer}</p>
         </header>
+        
         <SearchForm
           searchMovie={this.searchMovieAPICall}
          />
diff --git a/src/components/Customer.js b/src/components/Customer.js
index f29cdcd23..2d4a28755 100644
--- a/src/components/Customer.js
+++ b/src/components/Customer.js
@@ -5,14 +5,18 @@ import './Customer.css';
 
 class Customer extends Component {
 
+  addCustomerToRental= () => {
+    this.props.addCustomerToRentalCallback(this.props.name)
+  }
 
   render() {
 
     return (
-      <section className="movie">
-        <img src={this.props.image_url} alt="movie thumbnail"/>
-        <p>{this.props.title}</p>
-        <p>{this.props.release_date}</p>
+      <section>
+        <p>{this.props.name}</p>
+        <button className="rental-customer" onClick={this.addCustomerToRental}>
+          Add Customer to Rental
+        </button>
       </section>
     )
   }
@@ -20,4 +24,4 @@ class Customer extends Component {
 }
 
 
-export default Movie;
+export default Customer;
diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js
index 286f6a48d..b6d639528 100644
--- a/src/components/CustomerList.js
+++ b/src/components/CustomerList.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import axios from 'axios';
+import Customer from './Customer'
 
 
 class CustomerList extends Component {
@@ -17,7 +18,6 @@ class CustomerList extends Component {
   componentDidMount = () => {
     axios.get(`${this.props.url}`)
     .then( (response) => {
-      console.log(response);
       this.setState({
         customers: response.data
       });
@@ -29,22 +29,15 @@ class CustomerList extends Component {
     });
   }
 
-  addCustomer= () => {
-    this.props.addCustomerCallback()
+  updateRental = (name) => {
+    this.props.updateRentalCallback(name)
   }
 
   renderCustomers= () => {
     const List = this.state.customers.map((customer) => {
 
       return (
-        <section>
-          <p>
-            {customer.name}
-          </p>
-          <button className="rental-customer" onClick={this.addCustomer}>
-            Add to Rental
-          </button>
-        </section>
+          <Customer name={customer.name} addCustomerToRentalCallback={this.updateRental}/>
       );
     });
 

From 918d89d29fd2e0db074b650e13e38714427e4183 Mon Sep 17 00:00:00 2001
From: Mary Lamkin <mmlamkin@gmail.com>
Date: Tue, 19 Jun 2018 10:13:40 -0700
Subject: [PATCH 12/50] can add movie to rental

---
 src/App.js                | 10 ++++++++--
 src/components/Library.js |  5 +++++
 src/components/Movie.js   |  6 ++++++
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/App.js b/src/App.js
index f7a048935..845213d84 100644
--- a/src/App.js
+++ b/src/App.js
@@ -20,7 +20,7 @@ class App extends Component {
 
   showLibrary = (event) => {
     this.setState({
-      movies: <Library url="http://localhost:3000/movies" />,
+      movies: <Library url="http://localhost:3000/movies" updateRentalCallback={this.updateRentalMovie}/>,
       customers: []
     });
   }
@@ -38,6 +38,12 @@ class App extends Component {
     })
   }
 
+  updateRentalMovie = (title) => {
+    this.setState({
+      rentalMovie: title
+    })
+  }
+
   searchMovieAPICall = (movieName) => {
     this.setState({
       movies: `api makes a call for movie ${movieName} and calls function to show results`,
@@ -57,7 +63,7 @@ class App extends Component {
           </button>
           <p>Selected Movie: {this.state.rentalMovie} Selected Customer: {this.state.rentalCustomer}</p>
         </header>
-        
+
         <SearchForm
           searchMovie={this.searchMovieAPICall}
          />
diff --git a/src/components/Library.js b/src/components/Library.js
index 77d691cc8..c1de6f28c 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -29,6 +29,10 @@ class Library extends Component {
     });
   }
 
+  updateRental = (title) => {
+    this.props.updateRentalCallback(title)
+  }
+
   renderMovies = () => {
     const movieLibrary = this.state.movies.map((movie) => {
 
@@ -37,6 +41,7 @@ class Library extends Component {
           image_url={movie.image_url}
           title={movie.title}
           release_date={movie.release_date}
+          addMovieToRentalCallback={this.updateRental}
         />
       );
     });
diff --git a/src/components/Movie.js b/src/components/Movie.js
index 204aa5d0f..8d482f099 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -5,6 +5,9 @@ import './Movie.css';
 
 class Movie extends Component {
 
+  addMovieToRental= () => {
+    this.props.addMovieToRentalCallback(this.props.title)
+  }
 
   render() {
 
@@ -13,6 +16,9 @@ class Movie extends Component {
         <img src={this.props.image_url} alt="movie thumbnail"/>
         <p>{this.props.title}</p>
         <p>{this.props.release_date}</p>
+        <button className="rental-movie" onClick={this.addMovieToRental}>
+          Add Movie to Rental
+        </button>
       </section>
     )
   }

From cf54f00ac7239a48962895271d21cc702fb242c3 Mon Sep 17 00:00:00 2001
From: Abiaina <abinnet.a@gmail.com>
Date: Tue, 19 Jun 2018 12:17:59 -0700
Subject: [PATCH 13/50] created searchcontainer working on integrating changes
 for search and search results to app and other components added some
 validations and removed unused variables

---
 .env                              |  5 +++
 src/App.js                        | 38 ++++++----------
 src/components/Movie.js           |  6 ++-
 src/components/SearchContainer.js | 41 +++++++++++++++++
 src/components/SearchForm.js      | 11 ++---
 src/components/SearchResults.js   | 75 +++++++++++++++++++++++++++++++
 6 files changed, 144 insertions(+), 32 deletions(-)
 create mode 100644 .env
 create mode 100644 src/components/SearchContainer.js
 create mode 100644 src/components/SearchResults.js

diff --git a/.env b/.env
new file mode 100644
index 000000000..ffe983d5e
--- /dev/null
+++ b/.env
@@ -0,0 +1,5 @@
+MOVIEDB_KEY = "32d7cfaf6ce21cc76643993aa46a7590"
+
+REQUEST_LINK = "https://api.themoviedb.org/3/movie/550?api_key=32d7cfaf6ce21cc76643993aa46a7590"
+
+READ_ACCESS_TOKEN = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIzMmQ3Y2ZhZjZjZTIxY2M3NjY0Mzk5M2FhNDZhNzU5MCIsInN1YiI6IjViMjgxODQ1MGUwYTI2NzdhMjAwMWU4MiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.lFlCml9N36HVWMGJTZI1yuZVuUlcloTz_LOT1gfDl0Q"
diff --git a/src/App.js b/src/App.js
index 0e1fb4b5a..95c3058c4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import './App.css';
 import Library from './components/Library';
 import CustomerList from './components/CustomerList';
-import SearchForm from './components/SearchForm';
+import SearchContainer from './components/SearchContainer';
 import axios from 'axios';
 
 
@@ -30,32 +30,22 @@ class App extends Component {
     });
   }
 
-  searchMovieAPICall = (movieName) => {
-    this.setState({
-      movies: `api makes a call for movie ${movieName} and calls function to show results`,
-      customers: [],
-    });
-  }
-
   render() {
     return (
       <div className="App">
-        <header>
-          <button className="see-library" onClick={this.showLibrary}>
-            Poseiden Faves
-          </button>
-          <button className="see-customers" onClick={this.showCustomers}>
-            Poseiden Customers
-          </button>
-        </header>
-        <SearchForm
-          searchMovie={this.searchMovieAPICall}
-         />
-
-        <section>
-          {this.state.movies}
-          {this.state.customers}
-        </section>
+      <header>
+      <button className="see-library" onClick={this.showLibrary}>
+      Poseiden Faves
+      </button>
+      <button className="see-customers" onClick={this.showCustomers}>
+      Poseiden Customers
+      </button>
+      </header>
+      <SearchContainer />
+      <section>
+      {this.state.movies}
+      {this.state.customers}
+      </section>
 
       </div>
     );
diff --git a/src/components/Movie.js b/src/components/Movie.js
index 2cae4af14..ba1bf783b 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import axios from 'axios';
 import './Movie.css';
 
 class Movie extends Component {
@@ -18,5 +17,10 @@ class Movie extends Component {
 
 }
 
+Movie.propTypes = {
+  release_date: PropTypes.string,
+  title: PropTypes.string,
+  image_url: PropTypes.string,
+};
 
 export default Movie;
diff --git a/src/components/SearchContainer.js b/src/components/SearchContainer.js
new file mode 100644
index 000000000..f8dc18db6
--- /dev/null
+++ b/src/components/SearchContainer.js
@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+import './Library.css';
+import Movie from './Movie'
+import SearchForm from './SearchForm'
+import SearchResults from './SearchResults'
+
+
+
+class SearchContainer extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      movies: [],
+      movieName: 'King',
+    };
+  }
+
+
+  render() {
+
+    return (
+      <section>
+        <SearchForm
+          test="This is the SearchForm"
+        />
+        <SearchResults
+          test="This is the SerchResults"
+          movieName={this.state.movieName}
+        />
+      </section>
+    )
+  }
+
+}
+
+
+export default SearchContainer;
diff --git a/src/components/SearchForm.js b/src/components/SearchForm.js
index 588945d02..2ec45cfa7 100644
--- a/src/components/SearchForm.js
+++ b/src/components/SearchForm.js
@@ -26,17 +26,12 @@ class SearchForm extends Component {
       });
     }
 
-
-
-    //eventually will pull the searchapi call function from props
     onFormSubmit = (event) => {
       event.preventDefault();
-      console.log(this.state.movieName);
-      this.props.searchMovie(this.state.movieName);
+      // this.props.callbackName(this.state.movieName)
       this.clearForm();
     }
 
-
     render() {
       return (
         <form onSubmit={this.onFormSubmit}>
@@ -50,7 +45,9 @@ class SearchForm extends Component {
               type="text"
              />
           </div>
-
+          <div>
+            {this.props.test}
+          </div>
           <input
             type="submit"
             value="Search"
diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js
new file mode 100644
index 000000000..acfab5c62
--- /dev/null
+++ b/src/components/SearchResults.js
@@ -0,0 +1,75 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+import './Library.css';
+import Movie from './Movie'
+
+const MOVIEDB_KEY = '32d7cfaf6ce21cc76643993aa46a7590';
+
+class SearchResults extends Component {
+
+  constructor(props) {
+  super(props);
+
+  this.state = {
+    movies: [],
+    movieName: '',
+  };
+}
+
+  componentDidMount = () => {
+    axios.get(`http://api.themoviedb.org/3/search/movie?api_key=${MOVIEDB_KEY}&query=${this.props.movieName}`)
+
+    .then ((movieData) => {
+      console.log(movieData.results);
+      this.setState({
+        movies: movieData.results,
+      })
+    })
+    .catch(() => {
+      this.setState({
+        error: 'Sorry, no movies match your description'
+      })
+    });
+  }
+
+  showMovies = () => {
+    const movieLibrary = this.state.movies.map((movie, index) => {
+      return (
+        <Movie
+          key={index}
+          image_url={movie.poster_path}
+          title={movie.title}
+          release_date={movie.release_date}
+        />
+      );
+    });
+
+    return movieLibrary
+  }
+
+  render() {
+
+    return (
+      <section>
+      <span>{this.state.error}</span>
+        <div className='movie-library'>
+          {this.state.movies ? this.showMovies() : ''}
+        </div>
+
+        <div>
+          {this.props.test}
+        </div>
+      </section>
+    )
+  }
+
+}
+
+SearchResults.propTypes = {
+  test: PropTypes.string,
+  movies: PropTypes.array,
+  movieName: PropTypes.string,
+};
+
+export default SearchResults;

From d6520d1ecbecdd2f316138fc571842bac3e13c23 Mon Sep 17 00:00:00 2001
From: Mary Lamkin <mmlamkin@gmail.com>
Date: Tue, 19 Jun 2018 13:27:33 -0700
Subject: [PATCH 14/50] can post rental

---
 src/App.css                    | 31 +++++++---------------
 src/App.js                     | 48 +++++++++++++++++++++++++++-------
 src/components/Customer.js     |  2 +-
 src/components/CustomerList.js |  9 +++----
 src/components/SearchForm.js   |  2 +-
 5 files changed, 55 insertions(+), 37 deletions(-)

diff --git a/src/App.css b/src/App.css
index c5c6e8a68..95e1555e3 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,28 +1,17 @@
-.App {
-  text-align: center;
-}
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
+header {
+  background-image: url("https://ak2.picdn.net/shutterstock/videos/18609782/thumb/1.jpg");
+  background-color: blue;
+  height: 12rem;
   color: white;
-}
-
-.App-title {
-  font-size: 1.5em;
-}
+  text-align: center;
+  font-size:
 
-.App-intro {
-  font-size: large;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.display {
+  justify-content: center;
+  margin-left: 2%;
+  margin-right: 2%
 }
diff --git a/src/App.js b/src/App.js
index 845213d84..cfca71a31 100644
--- a/src/App.js
+++ b/src/App.js
@@ -14,7 +14,7 @@ class App extends Component {
       movies: [],
       customers: [],
       rentalMovie: '',
-      rentalCustomer: ''
+      rentalCustomer: {}
     };
   }
 
@@ -32,9 +32,10 @@ class App extends Component {
     });
   }
 
-  updateRentalCustomer = (name) => {
+  updateRentalCustomer = (name, id) => {
     this.setState({
-      rentalCustomer: name
+      rentalCustomer: {'name': name,
+                        'id': id}
     })
   }
 
@@ -51,24 +52,53 @@ class App extends Component {
     });
   }
 
+  createRental = () => {
+    if (this.state.rentalCustomer.id && this.state.rentalMovie) {
+    axios.post(`http://localhost:3000/rentals/${this.state.rentalMovie}/check-out?customer_id=${this.state.rentalCustomer.id}&due_date=2018-06-21`)
+    .then( (response) => {
+
+      this.setState({
+        message: `New Rental Added!`
+      })
+    })
+    .catch( (error) => {
+      this.setState({
+        error: error.message
+      });
+    });
+  }
+  else {
+    console.log('some errors');
+  }
+  }
+
   render() {
     return (
       <div className="App">
+        <p>{this.state.message}</p>
         <header>
+          <h1>Poseiden Rental</h1>
           <button className="see-library" onClick={this.showLibrary}>
             Poseiden Faves
           </button>
           <button className="see-customers" onClick={this.showCustomers}>
             Poseiden Customers
           </button>
-          <p>Selected Movie: {this.state.rentalMovie} Selected Customer: {this.state.rentalCustomer}</p>
+          <section className="rental">
+          <p>Selected Movie: {this.state.rentalMovie}</p>
+          <p>Selected Customer: {this.state.rentalCustomer.name}</p>
+          <button className="create-rental" onClick={this.createRental}>
+            Create Rental
+          </button>
+          </section>
+          <section className="search-form">
+          <SearchForm
+            searchMovie={this.searchMovieAPICall}
+           />
+          </section>
         </header>
 
-        <SearchForm
-          searchMovie={this.searchMovieAPICall}
-         />
-
-        <section>
+        <section className="display">
           {this.state.movies}
           {this.state.customers}
         </section>
diff --git a/src/components/Customer.js b/src/components/Customer.js
index 2d4a28755..78a4fcde3 100644
--- a/src/components/Customer.js
+++ b/src/components/Customer.js
@@ -6,7 +6,7 @@ import './Customer.css';
 class Customer extends Component {
 
   addCustomerToRental= () => {
-    this.props.addCustomerToRentalCallback(this.props.name)
+    this.props.addCustomerToRentalCallback(this.props.name, this.props.id)
   }
 
   render() {
diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js
index b6d639528..a5b63d9ed 100644
--- a/src/components/CustomerList.js
+++ b/src/components/CustomerList.js
@@ -29,23 +29,22 @@ class CustomerList extends Component {
     });
   }
 
-  updateRental = (name) => {
-    this.props.updateRentalCallback(name)
+  updateRental = (name, id) => {
+    this.props.updateRentalCallback(name, id)
   }
 
   renderCustomers= () => {
     const List = this.state.customers.map((customer) => {
 
       return (
-          <Customer name={customer.name} addCustomerToRentalCallback={this.updateRental}/>
+          <Customer name={customer.name}
+          id={customer.id} addCustomerToRentalCallback={this.updateRental}/>
       );
     });
 
     return List
   }
 
-
-
   render() {
 
     const anyErrors = () => {
diff --git a/src/components/SearchForm.js b/src/components/SearchForm.js
index 588945d02..50abdc995 100644
--- a/src/components/SearchForm.js
+++ b/src/components/SearchForm.js
@@ -41,7 +41,7 @@ class SearchForm extends Component {
       return (
         <form onSubmit={this.onFormSubmit}>
           <div key="movieName">
-            <label htmlFor="movieName">Movie: </label>
+            <label htmlFor="movieName">Find a Movie: </label>
             <input
               id="movieName"
               name="movieName"

From 9c31e3cf947469019135097bdedb27625fbf2be5 Mon Sep 17 00:00:00 2001
From: Abiaina <abinnet.a@gmail.com>
Date: Tue, 19 Jun 2018 13:33:30 -0700
Subject: [PATCH 15/50] search component sort of works, passes search terms and
 does query on local api unsuccessfully but without crashing the react page

---
 src/components/Library.js         |  3 +-
 src/components/SearchContainer.js | 23 ++++++--
 src/components/SearchForm.js      | 91 ++++++++++++++++---------------
 src/components/SearchResults.js   | 23 ++++----
 4 files changed, 79 insertions(+), 61 deletions(-)

diff --git a/src/components/Library.js b/src/components/Library.js
index 77d691cc8..4dc87c89c 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -30,10 +30,11 @@ class Library extends Component {
   }
 
   renderMovies = () => {
-    const movieLibrary = this.state.movies.map((movie) => {
+    const movieLibrary = this.state.movies.map((movie, index) => {
 
       return (
         <Movie
+          key={index}
           image_url={movie.image_url}
           title={movie.title}
           release_date={movie.release_date}
diff --git a/src/components/SearchContainer.js b/src/components/SearchContainer.js
index f8dc18db6..476f18a92 100644
--- a/src/components/SearchContainer.js
+++ b/src/components/SearchContainer.js
@@ -14,11 +14,23 @@ class SearchContainer extends Component {
     super(props);
 
     this.state = {
-      movies: [],
-      movieName: 'King',
     };
   }
 
+  defMovieName = (title) => {
+    this.setState({
+      movieName: title,
+    })
+  }
+
+  defSearchMovie = () => {
+    return (
+      <SearchResults
+        test="This is the SerchResults"
+        movieName={this.state.movieName}
+      />
+    )
+  }
 
   render() {
 
@@ -26,11 +38,10 @@ class SearchContainer extends Component {
       <section>
         <SearchForm
           test="This is the SearchForm"
+          searchTerm={this.defMovieName}
         />
-        <SearchResults
-          test="This is the SerchResults"
-          movieName={this.state.movieName}
-        />
+
+        {this.state.movieName ? this.defSearchMovie() : ''}
       </section>
     )
   }
diff --git a/src/components/SearchForm.js b/src/components/SearchForm.js
index 2ec45cfa7..c898e3141 100644
--- a/src/components/SearchForm.js
+++ b/src/components/SearchForm.js
@@ -1,17 +1,16 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import axios from 'axios';
 
 class SearchForm extends Component {
-    constructor(props) {
-      super(props);
+  constructor(props) {
+    super(props);
 
-      this.state = {
-        movieName: '',
-      };
-    }
+    this.state = {
+      movieName: '',
+    };
+  }
 
-    onFieldChange = (event) => {
+  onFieldChange = (event) => {
     const fieldName = event.target.name;
     const fieldValue = event.target.value;
     const updateState = {};
@@ -20,44 +19,48 @@ class SearchForm extends Component {
     this.setState(updateState);
   }
 
-    clearForm = () => {
-      this.setState({
-        movieName: '',
-      });
-    }
-
-    onFormSubmit = (event) => {
-      event.preventDefault();
-      // this.props.callbackName(this.state.movieName)
-      this.clearForm();
-    }
-
-    render() {
-      return (
-        <form onSubmit={this.onFormSubmit}>
-          <div key="movieName">
-            <label htmlFor="movieName">Movie: </label>
-            <input
-              id="movieName"
-              name="movieName"
-              value={this.state.movieName}
-              onChange={this.onFieldChange}
-              type="text"
-             />
-          </div>
-          <div>
-            {this.props.test}
-          </div>
-          <input
-            type="submit"
-            value="Search"
-          />
-        </form>
-      );
-    }
+  clearForm = () => {
+    this.setState({
+      movieName: '',
+    });
+  }
+
+  onFormSubmit = (event) => {
+    event.preventDefault();
+    this.props.searchTerm(this.state.movieName);
+    this.clearForm();
   }
 
-  SearchForm.propTypes = {
+  render() {
+    return (
+      <form onSubmit={this.onFormSubmit}>
+      <div key="movieName">
+        <label htmlFor="movieName">Movie: </label>
+        <input
+          id="movieName"
+          name="movieName"
+          value={this.state.movieName}
+          onChange={this.onFieldChange}
+          type="text"
+        />
+      </div>
+
+      <div>
+      {this.props.test}
+      </div>
+
+      <input
+      type="submit"
+      value="Search"
+      />
+      </form>
+    );
   }
+}
+
+SearchForm.propTypes = {
+  searchTerm: PropTypes.func,
+  test: PropTypes.string,
+}
 
 export default SearchForm;
diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js
index acfab5c62..8c2bc657a 100644
--- a/src/components/SearchResults.js
+++ b/src/components/SearchResults.js
@@ -4,7 +4,6 @@ import axios from 'axios';
 import './Library.css';
 import Movie from './Movie'
 
-const MOVIEDB_KEY = '32d7cfaf6ce21cc76643993aa46a7590';
 
 class SearchResults extends Component {
 
@@ -13,17 +12,19 @@ class SearchResults extends Component {
 
   this.state = {
     movies: [],
-    movieName: '',
   };
 }
-
+// this should only be run once search button is clicked
   componentDidMount = () => {
-    axios.get(`http://api.themoviedb.org/3/search/movie?api_key=${MOVIEDB_KEY}&query=${this.props.movieName}`)
+    axios.get(`http://localhost:3000/movies/${this.props.movieName}`)
+    .then ((response) => {
+      console.log(response);
+
+      let results = response.data;
+      results.isArray() === 'object' ? results = [results]: '';
 
-    .then ((movieData) => {
-      console.log(movieData.results);
       this.setState({
-        movies: movieData.results,
+        movies: results,
       })
     })
     .catch(() => {
@@ -34,11 +35,13 @@ class SearchResults extends Component {
   }
 
   showMovies = () => {
+
     const movieLibrary = this.state.movies.map((movie, index) => {
+
       return (
         <Movie
           key={index}
-          image_url={movie.poster_path}
+          image_url={movie.image_url}
           title={movie.title}
           release_date={movie.release_date}
         />
@@ -52,7 +55,7 @@ class SearchResults extends Component {
 
     return (
       <section>
-      <span>{this.state.error}</span>
+      <span>{this.state.error ? this.state.error : ''}</span>
         <div className='movie-library'>
           {this.state.movies ? this.showMovies() : ''}
         </div>
@@ -67,9 +70,9 @@ class SearchResults extends Component {
 }
 
 SearchResults.propTypes = {
+  movieName: PropTypes.string,
   test: PropTypes.string,
   movies: PropTypes.array,
-  movieName: PropTypes.string,
 };
 
 export default SearchResults;

From 2d9f7bdba48970f356b56121caad07d1977b17a1 Mon Sep 17 00:00:00 2001
From: Mary Lamkin <mmlamkin@gmail.com>
Date: Tue, 19 Jun 2018 13:36:15 -0700
Subject: [PATCH 16/50] adds some stuff

---
 src/App.css                   | 12 ++++++++++++
 src/App.js                    |  5 +++++
 src/components/SearchForm.css |  0
 src/components/SearchForm.js  |  1 +
 4 files changed, 18 insertions(+)
 create mode 100644 src/components/SearchForm.css

diff --git a/src/App.css b/src/App.css
index 95e1555e3..5d1940ae1 100644
--- a/src/App.css
+++ b/src/App.css
@@ -15,3 +15,15 @@ header {
   margin-left: 2%;
   margin-right: 2%
 }
+
+.rental {
+  float: left;
+  margin-left: 10%;
+  margin-top: 2%;
+}
+
+.search-form {
+  float: right;
+  margin-right: 10%;
+  margin-top: 2%;
+}
diff --git a/src/App.js b/src/App.js
index cfca71a31..672b66380 100644
--- a/src/App.js
+++ b/src/App.js
@@ -66,6 +66,11 @@ class App extends Component {
         error: error.message
       });
     });
+
+    this.setState({
+      rentalMovie: '',
+      rentalCustomer: {}
+    })
   }
   else {
     console.log('some errors');
diff --git a/src/components/SearchForm.css b/src/components/SearchForm.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/SearchForm.js b/src/components/SearchForm.js
index 50abdc995..20afed41e 100644
--- a/src/components/SearchForm.js
+++ b/src/components/SearchForm.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import axios from 'axios';
+import './SearchForm.css'
 
 class SearchForm extends Component {
     constructor(props) {

From 7c56fe07e949df4d82f224845a7a994c64c31e00 Mon Sep 17 00:00:00 2001
From: Mary Lamkin <mmlamkin@gmail.com>
Date: Tue, 19 Jun 2018 13:45:03 -0700
Subject: [PATCH 17/50] more merge conflicts

---
 src/App.js                   |  6 ++----
 src/components/SearchForm.js | 33 +++++++++------------------------
 2 files changed, 11 insertions(+), 28 deletions(-)

diff --git a/src/App.js b/src/App.js
index 37b88b49d..f25597cb0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,6 +6,7 @@ import SearchContainer from './components/SearchContainer';
 import axios from 'axios';
 
 
+
 class App extends Component {
   constructor(props) {
     super(props);
@@ -32,7 +33,6 @@ class App extends Component {
     });
   }
 
-<<<<<<< HEAD
   updateRentalCustomer = (name, id) => {
     this.setState({
       rentalCustomer: {'name': name,
@@ -98,9 +98,7 @@ class App extends Component {
           </button>
           </section>
           <section className="search-form">
-          <SearchForm
-            searchMovie={this.searchMovieAPICall}
-           />
+          <SearchContainer />
           </section>
         </header>
 
diff --git a/src/components/SearchForm.js b/src/components/SearchForm.js
index d3637c284..145678d8a 100644
--- a/src/components/SearchForm.js
+++ b/src/components/SearchForm.js
@@ -38,31 +38,16 @@ class SearchForm extends Component {
     return (
       <form onSubmit={this.onFormSubmit}>
       <div key="movieName">
-        <label htmlFor="movieName">Movie: </label>
-        <input
-          id="movieName"
-          name="movieName"
-          value={this.state.movieName}
-          onChange={this.onFieldChange}
-          type="text"
-        />
+      <label htmlFor="movieName">Find a Movie: </label>
+      <input
+      id="movieName"
+      name="movieName"
+      value={this.state.movieName}
+      onChange={this.onFieldChange}
+      type="text"
+      />
       </div>
 
-
-    render() {
-      return (
-        <form onSubmit={this.onFormSubmit}>
-          <div key="movieName">
-            <label htmlFor="movieName">Find a Movie: </label>
-            <input
-              id="movieName"
-              name="movieName"
-              value={this.state.movieName}
-              onChange={this.onFieldChange}
-              type="text"
-             />
-          </div>
-
       <input
       type="submit"
       value="Search"
@@ -70,8 +55,8 @@ class SearchForm extends Component {
       </form>
     );
   }
-}
 
+}
 SearchForm.propTypes = {
   searchTerm: PropTypes.func,
   test: PropTypes.string,

From c2d54b75ecc7203b517f6e4b253c4b5965093059 Mon Sep 17 00:00:00 2001
From: Abiaina <abinnet.a@gmail.com>
Date: Tue, 19 Jun 2018 13:45:18 -0700
Subject: [PATCH 18/50] trying to merge

---
 src/components/SearchResults.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js
index 8c2bc657a..c8a26489a 100644
--- a/src/components/SearchResults.js
+++ b/src/components/SearchResults.js
@@ -28,6 +28,7 @@ class SearchResults extends Component {
       })
     })
     .catch(() => {
+      console.log(this.state.movies);
       this.setState({
         error: 'Sorry, no movies match your description'
       })

From 380d6ac8a34e8070f0b4323d92619b913a634b7e Mon Sep 17 00:00:00 2001
From: Abiaina <abinnet.a@gmail.com>
Date: Tue, 19 Jun 2018 13:51:03 -0700
Subject: [PATCH 19/50] removed unused variables, searchResults component still
 unable to change its own state...unsure why

---
 src/App.js                      |  5 +----
 src/components/SearchForm.js    | 16 ----------------
 src/components/SearchResults.js |  3 ++-
 3 files changed, 3 insertions(+), 21 deletions(-)

diff --git a/src/App.js b/src/App.js
index 37b88b49d..56758d5c5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -32,7 +32,6 @@ class App extends Component {
     });
   }
 
-<<<<<<< HEAD
   updateRentalCustomer = (name, id) => {
     this.setState({
       rentalCustomer: {'name': name,
@@ -98,9 +97,7 @@ class App extends Component {
           </button>
           </section>
           <section className="search-form">
-          <SearchForm
-            searchMovie={this.searchMovieAPICall}
-           />
+          <SearchContainer/>
           </section>
         </header>
 
diff --git a/src/components/SearchForm.js b/src/components/SearchForm.js
index d3637c284..90c537404 100644
--- a/src/components/SearchForm.js
+++ b/src/components/SearchForm.js
@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import axios from 'axios';
 import './SearchForm.css'
 
 
@@ -34,21 +33,6 @@ class SearchForm extends Component {
     this.clearForm();
   }
 
-  render() {
-    return (
-      <form onSubmit={this.onFormSubmit}>
-      <div key="movieName">
-        <label htmlFor="movieName">Movie: </label>
-        <input
-          id="movieName"
-          name="movieName"
-          value={this.state.movieName}
-          onChange={this.onFieldChange}
-          type="text"
-        />
-      </div>
-
-
     render() {
       return (
         <form onSubmit={this.onFormSubmit}>
diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js
index c8a26489a..485c565a2 100644
--- a/src/components/SearchResults.js
+++ b/src/components/SearchResults.js
@@ -21,11 +21,12 @@ class SearchResults extends Component {
       console.log(response);
 
       let results = response.data;
+
       results.isArray() === 'object' ? results = [results]: '';
 
       this.setState({
         movies: results,
-      })
+      });
     })
     .catch(() => {
       console.log(this.state.movies);

From dae14cc175df283ce313fcf034727bccd375a983 Mon Sep 17 00:00:00 2001
From: Abiaina <abinnet.a@gmail.com>
Date: Tue, 19 Jun 2018 14:00:45 -0700
Subject: [PATCH 20/50] fixed search bug...ternary was wrong

---
 src/components/SearchResults.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js
index 485c565a2..b5280271f 100644
--- a/src/components/SearchResults.js
+++ b/src/components/SearchResults.js
@@ -22,7 +22,7 @@ class SearchResults extends Component {
 
       let results = response.data;
 
-      results.isArray() === 'object' ? results = [results]: '';
+      typeof(results) === 'object' ? results = [results]: '';
 
       this.setState({
         movies: results,
@@ -39,7 +39,6 @@ class SearchResults extends Component {
   showMovies = () => {
 
     const movieLibrary = this.state.movies.map((movie, index) => {
-
       return (
         <Movie
           key={index}

From 4e5ce23bb64fd56412a5e31c1fff6d19185bdadb Mon Sep 17 00:00:00 2001
From: Mary Lamkin <mmlamkin@gmail.com>
Date: Tue, 19 Jun 2018 14:14:37 -0700
Subject: [PATCH 21/50] adds set interval to app

---
 src/App.js | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/App.js b/src/App.js
index f25597cb0..b3faaaae5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -18,6 +18,18 @@ class App extends Component {
       rentalCustomer: {}
     };
   }
+  componentDidMount = () => {
+    let interval = setInterval(this.timer, 5000);
+
+  }
+
+
+  timer = () => {
+    this.setState({
+      message: '',
+      error: ''
+    })
+  }
 
   showLibrary = (event) => {
     this.setState({
@@ -54,7 +66,7 @@ class App extends Component {
   }
 
   createRental = () => {
-    if (this.state.rentalCustomer.id && this.state.rentalMovie) {
+
     axios.post(`http://localhost:3000/rentals/${this.state.rentalMovie}/check-out?customer_id=${this.state.rentalCustomer.id}&due_date=2018-06-21`)
     .then( (response) => {
 
@@ -73,15 +85,19 @@ class App extends Component {
       rentalCustomer: {}
     })
   }
-  else {
-    console.log('some errors');
-  }
-  }
+
 
   render() {
+
+    const anyErrors = () => {
+    if (this.state.error) {
+      return <p>{this.state.error}</p>
+    }
+  }
     return (
       <div className="App">
         <p>{this.state.message}</p>
+        <span>{anyErrors()}</span>
         <header>
           <h1>Poseiden Rental</h1>
           <button className="see-library" onClick={this.showLibrary}>

From edcd7860f3741407541eb480a77e1ac818237da3 Mon Sep 17 00:00:00 2001
From: Abiaina <abinnet.a@gmail.com>
Date: Tue, 19 Jun 2018 15:01:32 -0700
Subject: [PATCH 22/50] added the library to the app component for router

---
 .env              |  2 +-
 package-lock.json | 72 +++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |  1 +
 src/App.js        |  1 +
 4 files changed, 75 insertions(+), 1 deletion(-)

diff --git a/.env b/.env
index ffe983d5e..e580359cb 100644
--- a/.env
+++ b/.env
@@ -1,4 +1,4 @@
-MOVIEDB_KEY = "32d7cfaf6ce21cc76643993aa46a7590"
+MOVIEDB_KEY = "55c7599870e0d7e85e6d6126ae7f44b1"
 
 REQUEST_LINK = "https://api.themoviedb.org/3/movie/550?api_key=32d7cfaf6ce21cc76643993aa46a7590"
 
diff --git a/package-lock.json b/package-lock.json
index 2bdc7a2f0..cdd05bc6b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4666,6 +4666,28 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz",
       "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0="
     },
+    "history": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz",
+      "integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==",
+      "requires": {
+        "invariant": "2.2.4",
+        "loose-envify": "1.3.1",
+        "resolve-pathname": "2.2.0",
+        "value-equal": "0.4.0",
+        "warning": "3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "requires": {
+            "loose-envify": "1.3.1"
+          }
+        }
+      }
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -4676,6 +4698,11 @@
         "minimalistic-crypto-utils": "1.0.1"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+      "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
+    },
     "home-or-tmp": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
@@ -8818,6 +8845,33 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-4.0.0.tgz",
       "integrity": "sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw=="
     },
+    "react-router": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
+      "integrity": "sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==",
+      "requires": {
+        "history": "4.7.2",
+        "hoist-non-react-statics": "2.5.5",
+        "invariant": "2.2.4",
+        "loose-envify": "1.3.1",
+        "path-to-regexp": "1.7.0",
+        "prop-types": "15.6.1",
+        "warning": "4.0.1"
+      }
+    },
+    "react-router-dom": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.3.1.tgz",
+      "integrity": "sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==",
+      "requires": {
+        "history": "4.7.2",
+        "invariant": "2.2.4",
+        "loose-envify": "1.3.1",
+        "prop-types": "15.6.1",
+        "react-router": "4.3.1",
+        "warning": "4.0.1"
+      }
+    },
     "react-scripts": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-1.1.4.tgz",
@@ -9240,6 +9294,11 @@
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-1.0.1.tgz",
       "integrity": "sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY="
     },
+    "resolve-pathname": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
+      "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg=="
+    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -10573,6 +10632,11 @@
         "spdx-expression-parse": "3.0.0"
       }
     },
+    "value-equal": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz",
+      "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw=="
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -10609,6 +10673,14 @@
         "makeerror": "1.0.11"
       }
     },
+    "warning": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.1.tgz",
+      "integrity": "sha512-rAVtTNZw+cQPjvGp1ox0XC5Q2IBFyqoqh+QII4J/oguyu83Bax1apbo2eqB8bHRS+fqYUBagys6lqUoVwKSmXQ==",
+      "requires": {
+        "loose-envify": "1.3.1"
+      }
+    },
     "watch": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/watch/-/watch-0.10.0.tgz",
diff --git a/package.json b/package.json
index b5d697449..d170d92c8 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "axios": "^0.18.0",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
+    "react-router-dom": "^4.3.1",
     "react-scripts": "1.1.4"
   },
   "scripts": {
diff --git a/src/App.js b/src/App.js
index 56758d5c5..be84232a1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,6 +4,7 @@ import Library from './components/Library';
 import CustomerList from './components/CustomerList';
 import SearchContainer from './components/SearchContainer';
 import axios from 'axios';
+import { BrowserRouter as Router } from 'react router dom';
 
 
 class App extends Component {

From 55f38b2bfebe1ef4fba9f19f894d4858cfc85fb2 Mon Sep 17 00:00:00 2001
From: Abiaina <abinnet.a@gmail.com>
Date: Tue, 19 Jun 2018 15:11:34 -0700
Subject: [PATCH 23/50] updated router bug fixed

---
 src/App.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/App.js b/src/App.js
index be84232a1..4cfd66ffe 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,7 +4,7 @@ import Library from './components/Library';
 import CustomerList from './components/CustomerList';
 import SearchContainer from './components/SearchContainer';
 import axios from 'axios';
-import { BrowserRouter as Router } from 'react router dom';
+import { BrowserRouter as Router, Link } from 'react-router-dom';
 
 
 class App extends Component {
@@ -79,7 +79,9 @@ class App extends Component {
   }
 
   render() {
+
     return (
+      <Router>
       <div className="App">
         <p>{this.state.message}</p>
         <header>
@@ -106,9 +108,8 @@ class App extends Component {
           {this.state.movies}
           {this.state.customers}
         </section>
-
-
       </div>
+      </Router>
     );
   }
 }

From 47c257eb91dd94637067b23a5c86ce21bcbda7e1 Mon Sep 17 00:00:00 2001
From: Abiaina <abinnet.a@gmail.com>
Date: Tue, 19 Jun 2018 15:23:34 -0700
Subject: [PATCH 24/50] url updates to reflect customers and library displays

---
 src/App.css |  3 +--
 src/App.js  | 64 ++++++++++++++++++++++++++++++-----------------------
 2 files changed, 37 insertions(+), 30 deletions(-)

diff --git a/src/App.css b/src/App.css
index 5d1940ae1..7c6381e03 100644
--- a/src/App.css
+++ b/src/App.css
@@ -6,8 +6,7 @@ header {
   height: 12rem;
   color: white;
   text-align: center;
-  font-size:
-
+  text-shadow: 0 0 5px black;
 }
 
 .display {
diff --git a/src/App.js b/src/App.js
index 4cfd66ffe..a651ff0b6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,7 +15,8 @@ class App extends Component {
       movies: [],
       customers: [],
       rentalMovie: '',
-      rentalCustomer: {}
+      rentalCustomer: {},
+      gists: null,
     };
   }
 
@@ -79,36 +80,43 @@ class App extends Component {
   }
 
   render() {
-
+    const { gists } = this.state
     return (
       <Router>
-      <div className="App">
-        <p>{this.state.message}</p>
-        <header>
-          <h1>Poseiden Rental</h1>
-          <button className="see-library" onClick={this.showLibrary}>
-            Poseiden Faves
-          </button>
-          <button className="see-customers" onClick={this.showCustomers}>
-            Poseiden Customers
-          </button>
-          <section className="rental">
-          <p>Selected Movie: {this.state.rentalMovie}</p>
-          <p>Selected Customer: {this.state.rentalCustomer.name}</p>
-          <button className="create-rental" onClick={this.createRental}>
-            Create Rental
-          </button>
-          </section>
-          <section className="search-form">
-          <SearchContainer/>
-          </section>
-        </header>
+        <div className="App">
+          <p>{this.state.message}</p>
+          <header>
+            <h1>Poseiden Rental</h1>
 
-        <section className="display">
-          {this.state.movies}
-          {this.state.customers}
-        </section>
-      </div>
+            <Link to={'/library'}>
+              <button className="see-library" onClick={this.showLibrary}>
+                Poseiden Faves
+              </button>
+            </Link>
+
+            <Link to={'/customers'}>
+              <button className="see-customers" onClick={this.showCustomers}>
+                Poseiden Customers
+              </button>
+            </Link>
+
+            <section className="rental">
+            <p>Selected Movie: {this.state.rentalMovie}</p>
+            <p>Selected Customer: {this.state.rentalCustomer.name}</p>
+            <button className="create-rental" onClick={this.createRental}>
+              Create Rental
+            </button>
+            </section>
+            <section className="search-form">
+            <SearchContainer/>
+            </section>
+          </header>
+
+          <section className="display">
+            {this.state.movies}
+            {this.state.customers}
+          </section>
+        </div>
       </Router>
     );
   }

From 4c0c38e657c63b612deb5fd46c0f8e083be70ec4 Mon Sep 17 00:00:00 2001
From: Abiaina <abinnet.a@gmail.com>
Date: Tue, 19 Jun 2018 16:00:10 -0700
Subject: [PATCH 25/50] updated routes and organization of customer and libary

---
 src/App.js                        | 34 +++++++++++++-------------
 src/components/Library.js         | 40 ++++++++++++++++---------------
 src/components/SearchContainer.js | 20 +++++++++-------
 3 files changed, 49 insertions(+), 45 deletions(-)

diff --git a/src/App.js b/src/App.js
index a651ff0b6..7fe2768f2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,7 +4,7 @@ import Library from './components/Library';
 import CustomerList from './components/CustomerList';
 import SearchContainer from './components/SearchContainer';
 import axios from 'axios';
-import { BrowserRouter as Router, Link } from 'react-router-dom';
+import { BrowserRouter as Router, Link, Route } from 'react-router-dom';
 
 
 class App extends Component {
@@ -12,8 +12,7 @@ class App extends Component {
     super(props);
 
     this.state = {
-      movies: [],
-      customers: [],
+
       rentalMovie: '',
       rentalCustomer: {},
       gists: null,
@@ -21,10 +20,7 @@ class App extends Component {
   }
 
   showLibrary = (event) => {
-    this.setState({
-      movies: <Library url="http://localhost:3000/movies" updateRentalCallback={this.updateRentalMovie}/>,
-      customers: []
-    });
+    return <Library updateRentalCallback={this.updateRentalMovie}/>
   }
 
   showCustomers = (event) => {
@@ -80,19 +76,17 @@ class App extends Component {
   }
 
   render() {
-    const { gists } = this.state
     return (
       <Router>
         <div className="App">
           <p>{this.state.message}</p>
           <header>
             <h1>Poseiden Rental</h1>
-
-            <Link to={'/library'}>
-              <button className="see-library" onClick={this.showLibrary}>
-                Poseiden Faves
-              </button>
-            </Link>
+             <Link to={'/library'}>
+                <button className="see-library" onClick={this.showLibrary}>
+                  Poseiden Faves
+                </button>
+              </Link>
 
             <Link to={'/customers'}>
               <button className="see-customers" onClick={this.showCustomers}>
@@ -112,10 +106,14 @@ class App extends Component {
             </section>
           </header>
 
-          <section className="display">
-            {this.state.movies}
-            {this.state.customers}
-          </section>
+          <Route path="/library" render={() => (
+            <Library updateRentalCallback={this.updateRentalMovie}/>
+          )}/>
+
+          <Route path="/customers" render={() => (
+            <Library updateRentalCallback={this.updateRentalMovie}/>
+          )}/>
+
         </div>
       </Router>
     );
diff --git a/src/components/Library.js b/src/components/Library.js
index b45a09225..64abbd60a 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -7,19 +7,20 @@ import Movie from './Movie'
 class Library extends Component {
 
   constructor(props) {
-  super(props);
+    super(props);
 
-  this.state = {
-    movies: [],
-  };
-}
+    this.state = {
+      movies: [],
+      url: "http://localhost:3000/movies",
+    };
+  }
 
   componentDidMount = () => {
-    axios.get(`${this.props.url}`)
-    .then( (response) => {
+    axios.get(`${this.state.url}`)
 
+    .then( (response) => {
       this.setState({
-        movies: response.data
+        movies: response.data,
       });
     })
     .catch( (error) => {
@@ -34,15 +35,16 @@ class Library extends Component {
   }
 
   renderMovies = () => {
+    console.log(this.state.movies);
     const movieLibrary = this.state.movies.map((movie, index) => {
 
       return (
         <Movie
-          key={index}
-          image_url={movie.image_url}
-          title={movie.title}
-          release_date={movie.release_date}
-          addMovieToRentalCallback={this.updateRental}
+        key={index}
+        image_url={movie.image_url}
+        title={movie.title}
+        release_date={movie.release_date}
+        addMovieToRentalCallback={this.updateRental}
         />
       );
     });
@@ -53,17 +55,17 @@ class Library extends Component {
   render() {
 
     const anyErrors = () => {
-    if (this.state.error) {
-      return <p>{this.state.error}</p>
+      if (this.state.error) {
+        return <p>{this.state.error}</p>
+      }
     }
-  }
 
     return (
       <section>
       <span>{anyErrors()}</span>
-        <div className='movie-library'>
-          {this.renderMovies()}
-        </div>
+      <div className='movie-library'>
+      {this.renderMovies()}
+      </div>
       </section>
     )
   }
diff --git a/src/components/SearchContainer.js b/src/components/SearchContainer.js
index 476f18a92..cba685b76 100644
--- a/src/components/SearchContainer.js
+++ b/src/components/SearchContainer.js
@@ -5,6 +5,7 @@ import './Library.css';
 import Movie from './Movie'
 import SearchForm from './SearchForm'
 import SearchResults from './SearchResults'
+import { BrowserRouter as Router, Link } from 'react-router-dom';
 
 
 
@@ -35,14 +36,17 @@ class SearchContainer extends Component {
   render() {
 
     return (
-      <section>
-        <SearchForm
-          test="This is the SearchForm"
-          searchTerm={this.defMovieName}
-        />
-
-        {this.state.movieName ? this.defSearchMovie() : ''}
-      </section>
+      <Router>
+        <section>
+          <Link to={'/search'}>
+            <SearchForm
+              test="This is the SearchForm"
+              searchTerm={this.defMovieName}
+            />
+            {this.state.movieName ? this.defSearchMovie() : ''}
+          </Link>
+        </section>
+      </Router>
     )
   }
 

From 0ccc337434b44524fc30ddf3cbfd273b5c99b5b6 Mon Sep 17 00:00:00 2001
From: Mary Lamkin <mmlamkin@gmail.com>
Date: Tue, 19 Jun 2018 16:14:37 -0700
Subject: [PATCH 26/50] adds some router stuff

---
 src/App.js | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/App.js b/src/App.js
index 34b95a786..54023e084 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,7 +4,7 @@ import Library from './components/Library';
 import CustomerList from './components/CustomerList';
 import SearchContainer from './components/SearchContainer';
 import axios from 'axios';
-import { BrowserRouter as Router } from 'react router dom';
+import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
 
 
 
@@ -13,18 +13,15 @@ class App extends Component {
     super(props);
 
     this.state = {
-      movies: [],
-      customers: [],
       rentalMovie: '',
       rentalCustomer: {}
     };
   }
+
   componentDidMount = () => {
     let interval = setInterval(this.timer, 10000);
-
   }
 
-
   timer = () => {
     this.setState({
       message: '',
@@ -87,7 +84,6 @@ class App extends Component {
     })
   }
 
-
   render() {
 
     const anyErrors = () => {
@@ -96,14 +92,14 @@ class App extends Component {
     }
   }
     return (
+      <Router>
       <div className="App">
         <p>{this.state.message}</p>
         <span>{anyErrors()}</span>
         <header>
           <h1>Poseiden Rental</h1>
-          <button className="see-library" onClick={this.showLibrary}>
-            Poseiden Faves
-          </button>
+
+          <Link to="/library">Library</Link>
           <button className="see-customers" onClick={this.showCustomers}>
             Poseiden Customers
           </button>
@@ -120,14 +116,18 @@ class App extends Component {
         </header>
 
         <section className="display">
-          {this.state.movies}
-          {this.state.customers}
+        
         </section>
 
 
       </div>
+      </Router>
     );
   }
 }
 
+// <button className="see-library" onClick={this.showLibrary}>
+//   Poseiden Faves
+// </button>
+
 export default App;

From 4b54b8697f642a1aaf50ed4bbe26c025bab16b78 Mon Sep 17 00:00:00 2001
From: Abiaina <abinnet.a@gmail.com>
Date: Tue, 19 Jun 2018 16:14:41 -0700
Subject: [PATCH 27/50] updated routes for customer, home and library, search
 route is not working..

---
 src/App.js                        | 28 +++++++++++++++++++---------
 src/components/SearchContainer.js | 20 ++++++++------------
 2 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/App.js b/src/App.js
index 7fe2768f2..f420ef0fa 100644
--- a/src/App.js
+++ b/src/App.js
@@ -12,17 +12,11 @@ class App extends Component {
     super(props);
 
     this.state = {
-
       rentalMovie: '',
       rentalCustomer: {},
-      gists: null,
     };
   }
 
-  showLibrary = (event) => {
-    return <Library updateRentalCallback={this.updateRentalMovie}/>
-  }
-
   showCustomers = (event) => {
     this.setState({
       movies: [],
@@ -81,37 +75,53 @@ class App extends Component {
         <div className="App">
           <p>{this.state.message}</p>
           <header>
+
             <h1>Poseiden Rental</h1>
+
+            <Link to={'/'}>
+              <button className="see-customers">
+               Home
+              </button>
+            </Link>
+
              <Link to={'/library'}>
                 <button className="see-library" onClick={this.showLibrary}>
-                  Poseiden Faves
+                 Faves
                 </button>
               </Link>
 
             <Link to={'/customers'}>
               <button className="see-customers" onClick={this.showCustomers}>
-                Poseiden Customers
+               Customers
               </button>
             </Link>
 
             <section className="rental">
             <p>Selected Movie: {this.state.rentalMovie}</p>
             <p>Selected Customer: {this.state.rentalCustomer.name}</p>
+
             <button className="create-rental" onClick={this.createRental}>
               Create Rental
             </button>
+
             </section>
             <section className="search-form">
+
             <SearchContainer/>
+
             </section>
           </header>
 
+          <Route exact={true} path="/" render={() => (
+            <h1>Welcome</h1>
+          )}/>
+
           <Route path="/library" render={() => (
             <Library updateRentalCallback={this.updateRentalMovie}/>
           )}/>
 
           <Route path="/customers" render={() => (
-            <Library updateRentalCallback={this.updateRentalMovie}/>
+            <CustomerList url="http://localhost:3000/customers" updateRentalCallback={this.updateRentalCustomer}/>
           )}/>
 
         </div>
diff --git a/src/components/SearchContainer.js b/src/components/SearchContainer.js
index cba685b76..476f18a92 100644
--- a/src/components/SearchContainer.js
+++ b/src/components/SearchContainer.js
@@ -5,7 +5,6 @@ import './Library.css';
 import Movie from './Movie'
 import SearchForm from './SearchForm'
 import SearchResults from './SearchResults'
-import { BrowserRouter as Router, Link } from 'react-router-dom';
 
 
 
@@ -36,17 +35,14 @@ class SearchContainer extends Component {
   render() {
 
     return (
-      <Router>
-        <section>
-          <Link to={'/search'}>
-            <SearchForm
-              test="This is the SearchForm"
-              searchTerm={this.defMovieName}
-            />
-            {this.state.movieName ? this.defSearchMovie() : ''}
-          </Link>
-        </section>
-      </Router>
+      <section>
+        <SearchForm
+          test="This is the SearchForm"
+          searchTerm={this.defMovieName}
+        />
+
+        {this.state.movieName ? this.defSearchMovie() : ''}
+      </section>
     )
   }
 

From 1d1b522d0f7fc68113f3a363d4e97aadf1c667e7 Mon Sep 17 00:00:00 2001
From: Abiaina <abinnet.a@gmail.com>
Date: Tue, 19 Jun 2018 16:47:20 -0700
Subject: [PATCH 28/50] re integrated the search components into a container
 and set up route and button for search page

---
 src/App.js                      | 25 +++++++++++++----------
 src/components/SearchForm.js    | 35 +++++++++++++++++----------------
 src/components/SearchResults.js |  2 +-
 3 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/src/App.js b/src/App.js
index f420ef0fa..2eba92e86 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,9 +2,10 @@ import React, { Component } from 'react';
 import './App.css';
 import Library from './components/Library';
 import CustomerList from './components/CustomerList';
-import SearchContainer from './components/SearchContainer';
 import axios from 'axios';
 import { BrowserRouter as Router, Link, Route } from 'react-router-dom';
+import SearchContainer from './components/SearchForm'
+
 
 
 class App extends Component {
@@ -37,11 +38,10 @@ class App extends Component {
     })
   }
 
-  searchMovieAPICall = (movieName) => {
+  defMovieName = (title) => {
     this.setState({
-      movies: `api makes a call for movie ${movieName} and calls function to show results`,
-      customers: [],
-    });
+      movieName: title,
+    })
   }
 
   createRental = () => {
@@ -96,6 +96,12 @@ class App extends Component {
               </button>
             </Link>
 
+            <Link to={'/search'}>
+              <button className="see-customers" onClick={this.toSearch}>
+               Search the Sea
+              </button>
+            </Link>
+
             <section className="rental">
             <p>Selected Movie: {this.state.rentalMovie}</p>
             <p>Selected Customer: {this.state.rentalCustomer.name}</p>
@@ -103,13 +109,8 @@ class App extends Component {
             <button className="create-rental" onClick={this.createRental}>
               Create Rental
             </button>
-
             </section>
-            <section className="search-form">
-
-            <SearchContainer/>
 
-            </section>
           </header>
 
           <Route exact={true} path="/" render={() => (
@@ -120,6 +121,10 @@ class App extends Component {
             <Library updateRentalCallback={this.updateRentalMovie}/>
           )}/>
 
+          <Route path="/search" render={() => (
+              <SearchContainer />
+          )}/>
+
           <Route path="/customers" render={() => (
             <CustomerList url="http://localhost:3000/customers" updateRentalCallback={this.updateRentalCustomer}/>
           )}/>
diff --git a/src/components/SearchForm.js b/src/components/SearchForm.js
index 90c537404..8fe1a1656 100644
--- a/src/components/SearchForm.js
+++ b/src/components/SearchForm.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import './SearchForm.css'
-
+import axios from 'axios';
 
 class SearchForm extends Component {
   constructor(props) {
@@ -29,24 +28,26 @@ class SearchForm extends Component {
 
   onFormSubmit = (event) => {
     event.preventDefault();
-    this.props.searchTerm(this.state.movieName);
     this.clearForm();
   }
 
-    render() {
-      return (
-        <form onSubmit={this.onFormSubmit}>
-          <div key="movieName">
-            <label htmlFor="movieName">Find a Movie: </label>
-            <input
-              id="movieName"
-              name="movieName"
-              value={this.state.movieName}
-              onChange={this.onFieldChange}
-              type="text"
-             />
-          </div>
+  render() {
+    return (
+      <form onSubmit={this.onFormSubmit}>
+      <div key="movieName">
+      <label htmlFor="movieName">Movie: </label>
+      <input
+      id="movieName"
+      name="movieName"
+      value={this.state.movieName}
+      onChange={this.onFieldChange}
+      type="text"
+      />
+      </div>
 
+      <div>
+      {this.props.test}
+      </div>
       <input
       type="submit"
       value="Search"
@@ -57,7 +58,7 @@ class SearchForm extends Component {
 }
 
 SearchForm.propTypes = {
-  searchTerm: PropTypes.func,
+  defMovieName: PropTypes.func,
   test: PropTypes.string,
 }
 
diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js
index b5280271f..b6aee68ba 100644
--- a/src/components/SearchResults.js
+++ b/src/components/SearchResults.js
@@ -22,7 +22,7 @@ class SearchResults extends Component {
 
       let results = response.data;
 
-      typeof(results) === 'object' ? results = [results]: '';
+      typeOFresults === 'object' ? results = [results]: '';
 
       this.setState({
         movies: results,

From 84cc683d87cf98eb8686015fdd4f4feb5d839f15 Mon Sep 17 00:00:00 2001
From: Abiaina <abinnet.a@gmail.com>
Date: Tue, 19 Jun 2018 16:52:24 -0700
Subject: [PATCH 29/50] small changes in search passing props/callbacks

---
 src/components/SearchForm.js | 33 +++++++++++++++------------------
 1 file changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/components/SearchForm.js b/src/components/SearchForm.js
index 8fe1a1656..1f06f2791 100644
--- a/src/components/SearchForm.js
+++ b/src/components/SearchForm.js
@@ -34,24 +34,21 @@ class SearchForm extends Component {
   render() {
     return (
       <form onSubmit={this.onFormSubmit}>
-      <div key="movieName">
-      <label htmlFor="movieName">Movie: </label>
-      <input
-      id="movieName"
-      name="movieName"
-      value={this.state.movieName}
-      onChange={this.onFieldChange}
-      type="text"
-      />
-      </div>
-
-      <div>
-      {this.props.test}
-      </div>
-      <input
-      type="submit"
-      value="Search"
-      />
+        <div key="movieName">
+          <label htmlFor="movieName">Movie: </label>
+          <input
+            id="movieName"
+            name="movieName"
+            value={this.state.movieName}
+            onChange={this.onFieldChange}
+            type="text"
+          />
+        </div>
+
+        <input
+        type="submit"
+        value="Search"
+        />
       </form>
     );
   }

From 23bbe9ba2eec5a1ad337acf74cfdf2722584ea61 Mon Sep 17 00:00:00 2001
From: Abiaina <abinnet.a@gmail.com>
Date: Tue, 19 Jun 2018 21:29:39 -0700
Subject: [PATCH 30/50] refactored search box to be in app, search bar now
 shows up on search page

---
 src/App.js                        | 67 ++++++++++++++++++-------------
 src/components/SearchContainer.js | 20 +++------
 src/components/SearchForm.js      |  6 ++-
 src/components/SearchResults.js   |  2 +-
 4 files changed, 51 insertions(+), 44 deletions(-)

diff --git a/src/App.js b/src/App.js
index 4bc5c9220..68b8a5bbc 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,9 +3,10 @@ import './App.css';
 import Library from './components/Library';
 import CustomerList from './components/CustomerList';
 import axios from 'axios';
-
 import { BrowserRouter as Router, Link, Route } from 'react-router-dom';
 import SearchContainer from './components/SearchForm'
+import SearchForm from './components/SearchForm'
+
 
 
 
@@ -16,6 +17,7 @@ class App extends Component {
     this.state = {
       rentalMovie: '',
       rentalCustomer: {},
+
     };
   }
 
@@ -32,8 +34,10 @@ class App extends Component {
 
   updateRentalCustomer = (name, id) => {
     this.setState({
-      rentalCustomer: {'name': name,
-                        'id': id}
+      rentalCustomer: {
+        'name': name,
+        'id': id
+      }
     })
   }
 
@@ -70,8 +74,29 @@ class App extends Component {
     })
   }
 
-  render() {
+defSearchMovie = () => {
+  return(
+    <SearchContainer
+      searchTitle={this.state.movieName}
+    />
+  )
+}
+
+setMovieName= (title) => {
+  this.setState({
+    movieName: title,
+  })
+}
 
+showSearchPage = () => {
+   return (
+     <SearchForm
+      setMovieName={this.setMovieName}
+     />
+   )
+}
+
+  render() {
     const anyErrors = () => {
     if (this.state.error) {
       return <p>{this.state.error}</p>
@@ -79,53 +104,37 @@ class App extends Component {
   }
     return (
       <Router>
-
         <div className="App">
-
           <header>
-
             <h1>Poseiden Rental</h1>
-
             <Link to={'/'}>
               <button className="see-customers">
                Home
               </button>
             </Link>
-
-             <Link to={'/library'}>
-                <button className="see-library" onClick={this.showLibrary}>
-                 Faves
-                </button>
-              </Link>
-
+            <Link to={'/library'}>
+              <button className="see-library" onClick={this.showLibrary}>
+               Faves
+              </button>
+            </Link>
             <Link to={'/customers'}>
               <button className="see-customers" onClick={this.showCustomers}>
                Customers
               </button>
             </Link>
-
             <Link to={'/search'}>
-              <button className="see-customers" onClick={this.toSearch}>
+              <button className="see-customers" onClick={this.showSearchPage}>
                Search the Sea
               </button>
             </Link>
 
             <section className="rental">
-
               <p>Selected Movie: {this.state.rentalMovie}</p>
               <p>Selected Customer: {this.state.rentalCustomer.name}</p>
-
               <button className="create-rental" onClick={this.createRental}>
                 Create Rental
               </button>
             </section>
-
-            <section className="search-form">
-              <SearchContainer/>
-            </section>
-
-
-
           </header>
 
           <p>{this.state.message}</p>
@@ -140,7 +149,11 @@ class App extends Component {
             )}/>
 
           <Route path="/search" render={() => (
-              <SearchContainer />
+            <div>
+              {this.showSearchPage()}
+              {this.state.movieName ? this.defSearchMovie() : ''}
+            </div>
+
           )}/>
 
             <Route path="/customers" render={() => (
diff --git a/src/components/SearchContainer.js b/src/components/SearchContainer.js
index 476f18a92..87d2e614f 100644
--- a/src/components/SearchContainer.js
+++ b/src/components/SearchContainer.js
@@ -17,31 +17,21 @@ class SearchContainer extends Component {
     };
   }
 
-  defMovieName = (title) => {
+  defMovieName = () => {
     this.setState({
-      movieName: title,
+      movieName: this.props.movieName,
     })
   }
 
-  defSearchMovie = () => {
-    return (
-      <SearchResults
-        test="This is the SerchResults"
-        movieName={this.state.movieName}
-      />
-    )
-  }
 
   render() {
 
     return (
       <section>
-        <SearchForm
-          test="This is the SearchForm"
-          searchTerm={this.defMovieName}
+        <SearchForm/>
+        <SearchResults
+          searchTitle={this.props.movieName}
         />
-
-        {this.state.movieName ? this.defSearchMovie() : ''}
       </section>
     )
   }
diff --git a/src/components/SearchForm.js b/src/components/SearchForm.js
index 40f0f5c8d..2935ce36b 100644
--- a/src/components/SearchForm.js
+++ b/src/components/SearchForm.js
@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import axios from 'axios';
 
 class SearchForm extends Component {
   constructor(props) {
@@ -26,8 +25,13 @@ class SearchForm extends Component {
     });
   }
 
+  defMovieName = () => {
+    this.props.setMovieName(this.state.movieName);
+  }
+
   onFormSubmit = (event) => {
     event.preventDefault();
+    this.defMovieName();
     this.clearForm();
   }
 
diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js
index b6aee68ba..b8070578f 100644
--- a/src/components/SearchResults.js
+++ b/src/components/SearchResults.js
@@ -14,7 +14,7 @@ class SearchResults extends Component {
     movies: [],
   };
 }
-// this should only be run once search button is clicked
+
   componentDidMount = () => {
     axios.get(`http://localhost:3000/movies/${this.props.movieName}`)
     .then ((response) => {

From 40fbe56deba702750e81565d2fe2020dff265d1b Mon Sep 17 00:00:00 2001
From: Abiaina <abinnet.a@gmail.com>
Date: Tue, 19 Jun 2018 21:36:46 -0700
Subject: [PATCH 31/50] Search page works returns matching result...still needs
 to be broken up and placed in a container

---
 src/App.js                      | 7 +++++--
 src/components/SearchResults.js | 4 ++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/App.js b/src/App.js
index 68b8a5bbc..7394e62c5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,8 +4,10 @@ import Library from './components/Library';
 import CustomerList from './components/CustomerList';
 import axios from 'axios';
 import { BrowserRouter as Router, Link, Route } from 'react-router-dom';
-import SearchContainer from './components/SearchForm'
+// import SearchContainer from './components/SearchForm'
 import SearchForm from './components/SearchForm'
+import SearchResults from './components/SearchResults'
+
 
 
 
@@ -76,7 +78,7 @@ class App extends Component {
 
 defSearchMovie = () => {
   return(
-    <SearchContainer
+    <SearchResults
       searchTitle={this.state.movieName}
     />
   )
@@ -151,6 +153,7 @@ showSearchPage = () => {
           <Route path="/search" render={() => (
             <div>
               {this.showSearchPage()}
+              <h1>{this.state.movieName}</h1>
               {this.state.movieName ? this.defSearchMovie() : ''}
             </div>
 
diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js
index b8070578f..8a8a7a828 100644
--- a/src/components/SearchResults.js
+++ b/src/components/SearchResults.js
@@ -16,13 +16,13 @@ class SearchResults extends Component {
 }
 
   componentDidMount = () => {
-    axios.get(`http://localhost:3000/movies/${this.props.movieName}`)
+    axios.get(`http://localhost:3000/movies/${this.props.searchTitle}`)
     .then ((response) => {
       console.log(response);
 
       let results = response.data;
 
-      typeOFresults === 'object' ? results = [results]: '';
+      typeof(results) === 'object' ? results = [results]: '';
 
       this.setState({
         movies: results,

From 35f0781d0cfd6a7e599bdf2f640dc96609fabd2a Mon Sep 17 00:00:00 2001
From: Abiaina <abinnet.a@gmail.com>
Date: Tue, 19 Jun 2018 21:48:59 -0700
Subject: [PATCH 32/50] found a bug in the search results page: results show
 previous search values until page is rendered again. Copied app search
 components into search container..future place to refactor

---
 src/App.js                        |  3 +-
 src/components/SearchContainer.js | 47 +++++++++++++++++++++++++------
 src/components/SearchResults.js   |  9 ++----
 3 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/src/App.js b/src/App.js
index 7394e62c5..e85a94842 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,7 +4,7 @@ import Library from './components/Library';
 import CustomerList from './components/CustomerList';
 import axios from 'axios';
 import { BrowserRouter as Router, Link, Route } from 'react-router-dom';
-// import SearchContainer from './components/SearchForm'
+import SearchContainer from './components/SearchForm'
 import SearchForm from './components/SearchForm'
 import SearchResults from './components/SearchResults'
 
@@ -159,6 +159,7 @@ showSearchPage = () => {
 
           )}/>
 
+
             <Route path="/customers" render={() => (
               <CustomerList url="http://localhost:3000/customers" updateRentalCallback={this.updateRentalCustomer}/>
             )}/>
diff --git a/src/components/SearchContainer.js b/src/components/SearchContainer.js
index 87d2e614f..f053926ca 100644
--- a/src/components/SearchContainer.js
+++ b/src/components/SearchContainer.js
@@ -5,6 +5,7 @@ import './Library.css';
 import Movie from './Movie'
 import SearchForm from './SearchForm'
 import SearchResults from './SearchResults'
+import { BrowserRouter as Router, Link, Route } from 'react-router-dom';
 
 
 
@@ -17,22 +18,50 @@ class SearchContainer extends Component {
     };
   }
 
-  defMovieName = () => {
+  updateRentalMovie = (title) => {
     this.setState({
-      movieName: this.props.movieName,
+      rentalMovie: title
     })
   }
 
+  defMovieName = (title) => {
+    this.setState({
+      movieName: title,
+    })
+  }
+
+  defSearchMovie = () => {
+    return(
+      <SearchResults
+        searchTitle={this.state.movieName}
+      />
+    )
+  }
+
+  setMovieName= (title) => {
+    this.setState({
+      movieName: title,
+    })
+  }
+
+  showSearchPage = () => {
+     return (
+       <SearchForm
+        setMovieName={this.setMovieName}
+       />
+     )
+  }
 
   render() {
+    return(
+      <Route path="/search" render={() => (
+        <div>
+          {this.showSearchPage()}
+          <h1>{this.state.movieName}</h1>
+          {this.state.movieName ? this.defSearchMovie() : ''}
+        </div>
 
-    return (
-      <section>
-        <SearchForm/>
-        <SearchResults
-          searchTitle={this.props.movieName}
-        />
-      </section>
+      )}/>
     )
   }
 
diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js
index 8a8a7a828..29dc435a9 100644
--- a/src/components/SearchResults.js
+++ b/src/components/SearchResults.js
@@ -56,14 +56,10 @@ class SearchResults extends Component {
 
     return (
       <section>
-      <span>{this.state.error ? this.state.error : ''}</span>
+        <span>{this.state.error ? this.state.error : ''}</span>
         <div className='movie-library'>
           {this.state.movies ? this.showMovies() : ''}
         </div>
-
-        <div>
-          {this.props.test}
-        </div>
       </section>
     )
   }
@@ -71,8 +67,7 @@ class SearchResults extends Component {
 }
 
 SearchResults.propTypes = {
-  movieName: PropTypes.string,
-  test: PropTypes.string,
+  searchTitle: PropTypes.string,
   movies: PropTypes.array,
 };
 

From 3efb4a7f1244be7002edc08ef4052bed9ee8a6ef Mon Sep 17 00:00:00 2001
From: Abiaina <abinnet.a@gmail.com>
Date: Wed, 20 Jun 2018 12:07:19 -0700
Subject: [PATCH 33/50] updated search to querry external api

---
 src/components/SearchResults.js | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js
index 29dc435a9..153ee3b20 100644
--- a/src/components/SearchResults.js
+++ b/src/components/SearchResults.js
@@ -16,16 +16,11 @@ class SearchResults extends Component {
 }
 
   componentDidMount = () => {
-    axios.get(`http://localhost:3000/movies/${this.props.searchTitle}`)
+    axios.get(`http://localhost:3000/movies?query=${this.props.searchTitle}`)
     .then ((response) => {
-      console.log(response);
-
-      let results = response.data;
-
-      typeof(results) === 'object' ? results = [results]: '';
 
       this.setState({
-        movies: results,
+        movies: response.data,
       });
     })
     .catch(() => {

From a56f31490ec2937d439d80140bbed3d714d9a810 Mon Sep 17 00:00:00 2001
From: Mary Lamkin <mmlamkin@gmail.com>
Date: Wed, 20 Jun 2018 12:59:49 -0700
Subject: [PATCH 34/50] adds some styling

---
 src/App.css               | 5 +++++
 src/App.js                | 8 +-------
 src/components/Library.js | 8 ++++----
 src/components/Movie.css  | 6 +++++-
 4 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/App.css b/src/App.css
index 7c6381e03..7c8b9840e 100644
--- a/src/App.css
+++ b/src/App.css
@@ -26,3 +26,8 @@ header {
   margin-right: 10%;
   margin-top: 2%;
 }
+
+h1 {
+  font-size: 2em;
+  padding-top: .8em;
+}
diff --git a/src/App.js b/src/App.js
index 4bc5c9220..a2502459a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -84,7 +84,7 @@ class App extends Component {
 
           <header>
 
-            <h1>Poseiden Rental</h1>
+            <h1>Poseiden Rentals</h1>
 
             <Link to={'/'}>
               <button className="see-customers">
@@ -124,8 +124,6 @@ class App extends Component {
               <SearchContainer/>
             </section>
 
-
-
           </header>
 
           <p>{this.state.message}</p>
@@ -154,8 +152,4 @@ class App extends Component {
   }
 }
 
-// <button className="see-library" onClick={this.showLibrary}>
-//   Poseiden Faves
-// </button>
-
 export default App;
diff --git a/src/components/Library.js b/src/components/Library.js
index 64abbd60a..3b808a6fc 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -62,10 +62,10 @@ class Library extends Component {
 
     return (
       <section>
-      <span>{anyErrors()}</span>
-      <div className='movie-library'>
-      {this.renderMovies()}
-      </div>
+        <span>{anyErrors()}</span>
+        <div className='movie-library'>
+          {this.renderMovies()}
+        </div>
       </section>
     )
   }
diff --git a/src/components/Movie.css b/src/components/Movie.css
index 219846312..02a97c1c4 100644
--- a/src/components/Movie.css
+++ b/src/components/Movie.css
@@ -1,5 +1,9 @@
 .movie {
   display: flex;
   flex-direction: column;
-  margin: .8%;
+  padding: 1em;
+}
+
+.movie, p {
+  margin: .2em;
 }

From 7a1aab413af9026179a35ba964bf0b0fa115f5ca Mon Sep 17 00:00:00 2001
From: Abiaina <abinnet.a@gmail.com>
Date: Wed, 20 Jun 2018 14:39:55 -0700
Subject: [PATCH 35/50] trying to keep the changes only in search
 results..library and movie button now has no functionality

---
 src/components/SearchResults.js | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js
index 153ee3b20..a2e5b9e9c 100644
--- a/src/components/SearchResults.js
+++ b/src/components/SearchResults.js
@@ -31,16 +31,28 @@ class SearchResults extends Component {
     });
   }
 
+  addToLib = () =>{
+    this.setState({
+      message: "added movie to library"
+    })
+  }
+
   showMovies = () => {
 
     const movieLibrary = this.state.movies.map((movie, index) => {
       return (
-        <Movie
-          key={index}
-          image_url={movie.image_url}
-          title={movie.title}
-          release_date={movie.release_date}
-        />
+        <div>
+          <Movie
+            key={index}
+            image_url={movie.image_url}
+            title={movie.title}
+            release_date={movie.release_date}
+          />
+
+          <button className="rental-movie" onClick={this.addToLib}>
+            Add Movie to Library
+          </button>
+        </div>
       );
     });
 
@@ -51,6 +63,7 @@ class SearchResults extends Component {
 
     return (
       <section>
+        <span>{this.state.message}</span>
         <span>{this.state.error ? this.state.error : ''}</span>
         <div className='movie-library'>
           {this.state.movies ? this.showMovies() : ''}

From c9fed7a3c034466cb2f720792c3993e812d82f61 Mon Sep 17 00:00:00 2001
From: Abiaina <abinnet.a@gmail.com>
Date: Wed, 20 Jun 2018 15:29:33 -0700
Subject: [PATCH 36/50] tracks current movie library in app

---
 src/App.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index 42f177686..0e24397c7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -19,7 +19,7 @@ class App extends Component {
     this.state = {
       rentalMovie: '',
       rentalCustomer: {},
-
+      movieLib: [],
     };
   }
 
@@ -49,6 +49,12 @@ class App extends Component {
     })
   }
 
+  updateMovieLib = (title) => {
+    this.setState({
+      rentalMovie: title
+    })
+  }
+
   defMovieName = (title) => {
     this.setState({
       movieName: title,

From a74e807cf8a7e9a0da55d4a753e49a79dad9cc21 Mon Sep 17 00:00:00 2001
From: Abiaina <abinnet.a@gmail.com>
Date: Wed, 20 Jun 2018 15:38:05 -0700
Subject: [PATCH 37/50] search results give title specific message when movie
 is added to library...still missing full functionality

---
 src/components/SearchResults.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js
index a2e5b9e9c..04cbca728 100644
--- a/src/components/SearchResults.js
+++ b/src/components/SearchResults.js
@@ -31,9 +31,10 @@ class SearchResults extends Component {
     });
   }
 
-  addToLib = () =>{
+  addToLib = (movie) =>{
+    //api post request with movie
     this.setState({
-      message: "added movie to library"
+      message: `added  ${movie.title} to library`
     })
   }
 
@@ -49,7 +50,7 @@ class SearchResults extends Component {
             release_date={movie.release_date}
           />
 
-          <button className="rental-movie" onClick={this.addToLib}>
+          <button className="rental-movie" onClick={ () => {this.addToLib(movie)}}>
             Add Movie to Library
           </button>
         </div>

From 201b3a9149540e00db1ee95e6c7a462549859de2 Mon Sep 17 00:00:00 2001
From: Mary Lamkin <mmlamkin@gmail.com>
Date: Wed, 20 Jun 2018 15:59:13 -0700
Subject: [PATCH 38/50] clears search results with new search

---
 src/App.js                      | 123 ++++++++++++--------------------
 src/components/SearchForm.js    |   3 +-
 src/components/SearchResults.js |  78 +++++++++++---------
 3 files changed, 93 insertions(+), 111 deletions(-)

diff --git a/src/App.js b/src/App.js
index 42f177686..8668cbf8e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,10 +8,6 @@ import SearchContainer from './components/SearchForm'
 import SearchForm from './components/SearchForm'
 import SearchResults from './components/SearchResults'
 
-
-
-
-
 class App extends Component {
   constructor(props) {
     super(props);
@@ -49,12 +45,6 @@ class App extends Component {
     })
   }
 
-  defMovieName = (title) => {
-    this.setState({
-      movieName: title,
-    })
-  }
-
   createRental = () => {
 
     axios.post(`http://localhost:3000/rentals/${this.state.rentalMovie}/check-out?customer_id=${this.state.rentalCustomer.id}&due_date=2018-06-21`)
@@ -76,60 +66,44 @@ class App extends Component {
     })
   }
 
-defSearchMovie = () => {
-  return(
-    <SearchResults
-      searchTitle={this.state.movieName}
-    />
-  )
-}
-
-setMovieName= (title) => {
-  this.setState({
-    movieName: title,
-  })
-}
-
-showSearchPage = () => {
-   return (
-     <SearchForm
-      setMovieName={this.setMovieName}
-     />
-   )
-}
+  defMovieName = (title) => {
+    this.setState({
+      movieName: title,
+    })
+  }
 
   render() {
     const anyErrors = () => {
-    if (this.state.error) {
-      return <p>{this.state.error}</p>
+      if (this.state.error) {
+        return <p>{this.state.error}</p>
+      }
     }
-  }
     return (
       <Router>
         <div className="App">
           <header>
             <h1>Poseiden Rentals</h1>
             <section className="buttons">
-            <Link to={'/'}>
-              <button className="see-customers">
-               Home
-              </button>
-            </Link>
-            <Link to={'/library'}>
-              <button className="see-library" onClick={this.showLibrary}>
-               Faves
-              </button>
-            </Link>
-            <Link to={'/customers'}>
-              <button className="see-customers" onClick={this.showCustomers}>
-               Customers
-              </button>
-            </Link>
-            <Link to={'/search'}>
-              <button className="see-customers" onClick={this.showSearchPage}>
-               Search the Sea
-              </button>
-            </Link>
+              <Link to={'/'}>
+                <button className="see-customers">
+                  Home
+                </button>
+              </Link>
+              <Link to={'/library'}>
+                <button className="see-library" onClick={this.showLibrary}>
+                  Faves
+                </button>
+              </Link>
+              <Link to={'/customers'}>
+                <button className="see-customers" onClick={this.showCustomers}>
+                  Customers
+                </button>
+              </Link>
+              <Link to={'/search'}>
+                <button className="see-customers" onClick={this.showSearchPage}>
+                  Search the Sea
+                </button>
+              </Link>
             </section>
             <section className="rental">
               <p>Selected Movie: {this.state.rentalMovie}</p>
@@ -143,29 +117,24 @@ showSearchPage = () => {
 
           <p>{this.state.message}</p>
 
-          <section className="display">
-            <Route exact={true} path="/" render={() => (
-              <h1>Welcome</h1>
-            )}/>
-
-            <Route path="/library" render={() => (
-              <Library updateRentalCallback={this.updateRentalMovie}/>
-            )}/>
-
-          <Route path="/search" render={() => (
-            <div>
-              {this.showSearchPage()}
-              <h1>{this.state.movieName}</h1>
-              {this.state.movieName ? this.defSearchMovie() : ''}
-            </div>
-
-          )}/>
-
-            <Route path="/customers" render={() => (
-              <CustomerList url="http://localhost:3000/customers" updateRentalCallback={this.updateRentalCustomer}/>
-            )}/>
-          </section>
-        </div>
+      <section className="display">
+      <Route exact={true} path="/" render={() => (
+        <h1>Welcome</h1>
+      )}/>
+
+      <Route path="/library" render={() => (
+        <Library updateRentalCallback={this.updateRentalMovie}/>
+      )}/>
+
+      <Route path="/search" render={() => (
+        <SearchResults />
+      )}/>
+
+      <Route path="/customers" render={() => (
+        <CustomerList url="http://localhost:3000/customers" updateRentalCallback={this.updateRentalCustomer}/>
+      )}/>
+      </section>
+      </div>
 
       </Router>
     );
diff --git a/src/components/SearchForm.js b/src/components/SearchForm.js
index 2935ce36b..3ca818917 100644
--- a/src/components/SearchForm.js
+++ b/src/components/SearchForm.js
@@ -31,7 +31,8 @@ class SearchForm extends Component {
 
   onFormSubmit = (event) => {
     event.preventDefault();
-    this.defMovieName();
+    this.props.clearSearchCallback();
+    this.props.movieSearchCallback(this.state.movieName);
     this.clearForm();
   }
 
diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js
index 153ee3b20..de6189102 100644
--- a/src/components/SearchResults.js
+++ b/src/components/SearchResults.js
@@ -3,61 +3,73 @@ import PropTypes from 'prop-types';
 import axios from 'axios';
 import './Library.css';
 import Movie from './Movie'
+import SearchForm from './SearchForm'
 
 
 class SearchResults extends Component {
 
   constructor(props) {
-  super(props);
+    super(props);
 
-  this.state = {
-    movies: [],
-  };
-}
+    this.state = {
+      movies: [],
+    };
+  }
 
-  componentDidMount = () => {
-    axios.get(`http://localhost:3000/movies?query=${this.props.searchTitle}`)
-    .then ((response) => {
+  movieSearch = (title) => {
+
+    axios.get(`http://localhost:3000/movies?query=${title}`)
 
+    .then ((response) => {
       this.setState({
-        movies: response.data,
+      movies: response.data,
       });
+        console.log(this.state.movies)
     })
-    .catch(() => {
+    .catch((error) => {
       console.log(this.state.movies);
       this.setState({
-        error: 'Sorry, no movies match your description'
+        error: error.message
       })
     });
   }
 
-  showMovies = () => {
+  clearSearch = () => {
+    this.setState({
+      movies: []
+    })
+  }
 
+  showMovies = () => {
     const movieLibrary = this.state.movies.map((movie, index) => {
-      return (
-        <Movie
-          key={index}
-          image_url={movie.image_url}
-          title={movie.title}
-          release_date={movie.release_date}
-        />
-      );
-    });
+    return (
+      <Movie
+      key={index}
+      image_url={movie.image_url}
+      title={movie.title}
+      release_date={movie.release_date}
+      />
+    );
+  });
+  return movieLibrary
+}
 
-    return movieLibrary
-  }
 
-  render() {
+render() {
 
-    return (
-      <section>
-        <span>{this.state.error ? this.state.error : ''}</span>
-        <div className='movie-library'>
-          {this.state.movies ? this.showMovies() : ''}
-        </div>
-      </section>
-    )
-  }
+  return (
+    <section>
+      <SearchForm
+      clearSearchCallback={this.clearSearch}
+      movieSearchCallback={this.movieSearch}
+      />
+      <span>{this.state.error ? this.state.error : ''}</span>
+      <div className='movie-library'>
+        {this.showMovies()}
+      </div>
+    </section>
+  )
+}
 
 }
 

From b05ce686d8bca6f5c7956db292d05c72abaa7e66 Mon Sep 17 00:00:00 2001
From: Abiaina <abinnet.a@gmail.com>
Date: Wed, 20 Jun 2018 17:01:31 -0700
Subject: [PATCH 39/50] pushing up any uncommitted changes

---
 src/components/SearchResults.js | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js
index 04cbca728..9bc98d042 100644
--- a/src/components/SearchResults.js
+++ b/src/components/SearchResults.js
@@ -32,10 +32,19 @@ class SearchResults extends Component {
   }
 
   addToLib = (movie) =>{
-    //api post request with movie
-    this.setState({
-      message: `added  ${movie.title} to library`
+    
+    axios.post(`http://localhost:3000/movies/addLib`, movie)
+    .then( () => {
+      //api post request with movie
+      this.setState({
+        message: `added ${movie.title} to library`
+      })
     })
+    .catch( (error) => {
+      this.setState({
+        error: error.message
+      });
+    });
   }
 
   showMovies = () => {

From 8032178fb3d555a5e49727fd65843444fd82bc7d Mon Sep 17 00:00:00 2001
From: Abiaina <abinnet.a@gmail.com>
Date: Wed, 20 Jun 2018 22:37:06 -0700
Subject: [PATCH 40/50] updated the add lib search post request in
 searchResults

---
 src/App.js                      | 3 ---
 src/components/SearchResults.js | 4 ++--
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/App.js b/src/App.js
index 0e24397c7..09c3ec63d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,9 +9,6 @@ import SearchForm from './components/SearchForm'
 import SearchResults from './components/SearchResults'
 
 
-
-
-
 class App extends Component {
   constructor(props) {
     super(props);
diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js
index 9bc98d042..adae7a626 100644
--- a/src/components/SearchResults.js
+++ b/src/components/SearchResults.js
@@ -32,8 +32,8 @@ class SearchResults extends Component {
   }
 
   addToLib = (movie) =>{
-    
-    axios.post(`http://localhost:3000/movies/addLib`, movie)
+
+    axios.post(`http://localhost:3000/movies/addLibrary`, movie)
     .then( () => {
       //api post request with movie
       this.setState({

From 166c95150b530d243420a35ae8251f78c384bbad Mon Sep 17 00:00:00 2001
From: Abiaina <abinnet.a@gmail.com>
Date: Wed, 20 Jun 2018 22:53:50 -0700
Subject: [PATCH 41/50] updated post for addLib in searchResults

---
 src/components/SearchResults.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js
index adae7a626..445d438e4 100644
--- a/src/components/SearchResults.js
+++ b/src/components/SearchResults.js
@@ -33,7 +33,7 @@ class SearchResults extends Component {
 
   addToLib = (movie) =>{
 
-    axios.post(`http://localhost:3000/movies/addLibrary`, movie)
+    axios.post(`http://localhost:3000/addLibrary`, movie)
     .then( () => {
       //api post request with movie
       this.setState({

From 023b02316226b95fe2682416e88c0e3337ae0668 Mon Sep 17 00:00:00 2001
From: Abiaina <abinnet.a@gmail.com>
Date: Wed, 20 Jun 2018 23:35:53 -0700
Subject: [PATCH 42/50] cannot access post request server...only works in
 postman

---
 src/components/SearchResults.js | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js
index 445d438e4..1327da348 100644
--- a/src/components/SearchResults.js
+++ b/src/components/SearchResults.js
@@ -31,9 +31,18 @@ class SearchResults extends Component {
     });
   }
 
-  addToLib = (movie) =>{
-
-    axios.post(`http://localhost:3000/addLibrary`, movie)
+  addToLib = (movie) => {
+    axios.post('http://localhost:3000/add_movie',
+  //   {
+  //     title:'Cruel Jaws',
+  //     overview: 'A tiger shark bred by the Navy\
+  //      as a killing machine is wrecking havoc\
+  //       in the sleepy tourist town of Hampton Bay.',
+  //     release_date:'1995-05-05',
+  //     image_url:'https://image.tmdb.org/t/p/w185/tq9swm2dKN0bNb48HArwSDGuF12.jpg',
+  //     external_id: '84060',
+  // }
+  movie)
     .then( () => {
       //api post request with movie
       this.setState({

From 87836cee61a1c782ede4fcd5bea160daa1923a5f Mon Sep 17 00:00:00 2001
From: Abiaina <abinnet.a@gmail.com>
Date: Wed, 20 Jun 2018 23:45:08 -0700
Subject: [PATCH 43/50] updated library to hold the rent movie button,
 functionality not affected. still unable to have post request to addmovie to
 lib

---
 src/components/Library.js | 20 +++++++++++++-------
 src/components/Movie.js   |  9 +++------
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/components/Library.js b/src/components/Library.js
index 3b808a6fc..b70e75200 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -39,13 +39,19 @@ class Library extends Component {
     const movieLibrary = this.state.movies.map((movie, index) => {
 
       return (
-        <Movie
-        key={index}
-        image_url={movie.image_url}
-        title={movie.title}
-        release_date={movie.release_date}
-        addMovieToRentalCallback={this.updateRental}
-        />
+        <div>
+          <Movie
+          key={index}
+          image_url={movie.image_url}
+          title={movie.title}
+          release_date={movie.release_date}
+          addMovieToRentalCallback={this.updateRental}
+          />
+
+          <button className="rental-movie" onClick={() => {this.updateRental(movie.title)}}>
+            Add Movie to Rental
+          </button>
+        </div>
       );
     });
 
diff --git a/src/components/Movie.js b/src/components/Movie.js
index 7c080ac24..5f3b577f6 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -4,9 +4,9 @@ import './Movie.css';
 
 class Movie extends Component {
 
-  addMovieToRental= () => {
-    this.props.addMovieToRentalCallback(this.props.title)
-  }
+  // addMovieToRental= () => {
+  //   this.props.addMovieToRentalCallback(this.props.title)
+  // }
 
   render() {
 
@@ -15,9 +15,6 @@ class Movie extends Component {
         <img src={this.props.image_url} alt="movie thumbnail"/>
         <p>{this.props.title}</p>
         <p>{this.props.release_date}</p>
-        <button className="rental-movie" onClick={this.addMovieToRental}>
-          Add Movie to Rental
-        </button>
       </section>
     )
   }

From d62e6b15c684d747a7b094c4760be670c481b0a8 Mon Sep 17 00:00:00 2001
From: Abiaina <abinnet.a@gmail.com>
Date: Thu, 21 Jun 2018 09:29:24 -0700
Subject: [PATCH 44/50] added addLib button to search results

---
 src/components/SearchResults.js | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js
index 44d610168..155751b37 100644
--- a/src/components/SearchResults.js
+++ b/src/components/SearchResults.js
@@ -61,12 +61,19 @@ class SearchResults extends Component {
   showMovies = () => {
     const movieLibrary = this.state.movies.map((movie, index) => {
       return (
-        <Movie
-        key={index}
-        image_url={movie.image_url}
-        title={movie.title}
-        release_date={movie.release_date}
-        />
+        <div>
+          <Movie
+          key={index}
+          image_url={movie.image_url}
+          title={movie.title}
+          release_date={movie.release_date}
+          />
+
+          <button className="see-customers" onClick={() => {this.addToLib(movie)}}>
+            Add to library
+          </button>
+
+        </div>
       );
     });
     return movieLibrary

From f8508c8398385c51fce9155cbdc10fbd6dff49f0 Mon Sep 17 00:00:00 2001
From: Mary Lamkin <mmlamkin@gmail.com>
Date: Thu, 21 Jun 2018 10:29:50 -0700
Subject: [PATCH 45/50] adds some error messaging stuff and movies post to api

---
 src/components/SearchResults.js | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js
index 155751b37..175547ad7 100644
--- a/src/components/SearchResults.js
+++ b/src/components/SearchResults.js
@@ -16,6 +16,17 @@ class SearchResults extends Component {
     };
   }
 
+  componentDidMount = () => {
+    let interval = setInterval(this.timer, 10000);
+  }
+
+  timer = () => {
+    this.setState({
+      message: '',
+      error: ''
+    })
+  }
+
   movieSearch = (title) => {
 
     axios.get(`http://localhost:3000/movies?query=${title}`)
@@ -42,16 +53,19 @@ class SearchResults extends Component {
 
   addToLib = (movie) =>{
 
-    axios.post(`http://localhost:3000/movies/addLib`, movie)
+    axios.post(`http://localhost:3000/add_movie/`, movie)
 
     .then( () => {
       //api post request with movie
       this.setState({
-        message: `added ${movie.title} to library`
+        message: `Added ${movie.title} to library`
       })
     })
     .catch( (error) => {
+
+    console.log(error);
       this.setState({
+
         error: error.message
       });
     });
@@ -84,11 +98,13 @@ class SearchResults extends Component {
 
     return (
       <section>
+
       <SearchForm
       clearSearchCallback={this.clearSearch}
       movieSearchCallback={this.movieSearch}
       />
       <span>{this.state.error ? this.state.error : ''}</span>
+      <span>{this.state.message ? this.state.message : ''}</span>
       <div className='movie-library'>
       {this.showMovies()}
       </div>

From 9d1c7115a8932a15bc26dfc89865cab8047808cd Mon Sep 17 00:00:00 2001
From: Mary Lamkin <mmlamkin@gmail.com>
Date: Thu, 21 Jun 2018 13:52:02 -0700
Subject: [PATCH 46/50] adds all proptypes

---
 package-lock.json                 | 10 +++++
 package.json                      |  2 +
 src/App.css                       |  8 +++-
 src/App.js                        |  7 ++-
 src/components/Customer.js        |  4 ++
 src/components/CustomerList.js    |  5 +++
 src/components/Library.js         |  8 +++-
 src/components/SearchContainer.js | 71 -------------------------------
 src/components/SearchResults.js   | 26 +++++------
 9 files changed, 53 insertions(+), 88 deletions(-)
 delete mode 100644 src/components/SearchContainer.js

diff --git a/package-lock.json b/package-lock.json
index cdd05bc6b..de5a469f2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8804,6 +8804,16 @@
         "prop-types": "15.6.1"
       }
     },
+    "react-alert": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/react-alert/-/react-alert-4.0.4.tgz",
+      "integrity": "sha512-PYy+FXrgp+WziSVO8t4DRpDVRP4g5jLBHrSpEYMGKmosEG2+Tjcevwwzic3znOwVLpBVlbDH9w2L2yyQOGJuIA=="
+    },
+    "react-alert-template-basic": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-alert-template-basic/-/react-alert-template-basic-1.0.0.tgz",
+      "integrity": "sha512-6x5Us0oc+jj8BDNkvSWfQMESk5SdyGKitXdLb7CwIlIlecyATjCTKSWpLABg8tpKAPOSJu4Dv/fYUqxXEio/XA=="
+    },
     "react-dev-utils": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-5.0.1.tgz",
diff --git a/package.json b/package.json
index d170d92c8..24571021e 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,8 @@
   "dependencies": {
     "axios": "^0.18.0",
     "react": "^16.4.1",
+    "react-alert": "^4.0.4",
+    "react-alert-template-basic": "^1.0.0",
     "react-dom": "^16.4.1",
     "react-router-dom": "^4.3.1",
     "react-scripts": "1.1.4"
diff --git a/src/App.css b/src/App.css
index 194a0e712..1292d121f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -36,6 +36,12 @@ nav {
   background-color: black;
 }
 
-button {
+.error {
+  font-weight: bold;
+  color: red;
+}
 
+.message {
+  font-weight: bold;
+  color: green;
 }
diff --git a/src/App.js b/src/App.js
index 60cbc356e..8a92ca55f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,6 +8,7 @@ import SearchContainer from './components/SearchForm'
 import SearchForm from './components/SearchForm'
 import SearchResults from './components/SearchResults'
 
+
 class App extends Component {
   constructor(props) {
     super(props);
@@ -81,10 +82,11 @@ class App extends Component {
   render() {
     const anyErrors = () => {
       if (this.state.error) {
-        return <p>{this.state.error}</p>
+        return <p className="error">{this.state.error}</p>
       }
     }
     return (
+
       <Router>
         <div className="App">
           <header>
@@ -123,7 +125,7 @@ class App extends Component {
             </Link>
           </nav>
 
-          <p>{this.state.message}</p>
+          <p className="message">{this.state.message}</p>
 
       <section className="display">
       <Route exact={true} path="/" render={() => (
@@ -145,6 +147,7 @@ class App extends Component {
       </div>
 
       </Router>
+
     );
   }
 }
diff --git a/src/components/Customer.js b/src/components/Customer.js
index dd2483049..601367ca6 100644
--- a/src/components/Customer.js
+++ b/src/components/Customer.js
@@ -23,5 +23,9 @@ class Customer extends Component {
 
 }
 
+CustomerList.PropTypes = {
+  updateRentalCallback: PropTypes.func.required,
+  url: PropTypes.string
+};
 
 export default Customer;
diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js
index b7ab62f81..2e64de7ab 100644
--- a/src/components/CustomerList.js
+++ b/src/components/CustomerList.js
@@ -64,5 +64,10 @@ class CustomerList extends Component {
 
 }
 
+CustomerList.PropTypes = {
+  updateRentalCallback: PropTypes.func.required,
+  url: PropTypes.string
+};
+
 
 export default CustomerList;
diff --git a/src/components/Library.js b/src/components/Library.js
index b70e75200..51034275e 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -35,7 +35,7 @@ class Library extends Component {
   }
 
   renderMovies = () => {
-    console.log(this.state.movies);
+
     const movieLibrary = this.state.movies.map((movie, index) => {
 
       return (
@@ -67,16 +67,22 @@ class Library extends Component {
     }
 
     return (
+
       <section>
         <span>{anyErrors()}</span>
         <div className='movie-library'>
           {this.renderMovies()}
         </div>
       </section>
+
     )
   }
 
 }
 
+Library.PropTypes = {
+  updateRentalCallback: PropTypes.func.required,
+};
+
 
 export default Library;
diff --git a/src/components/SearchContainer.js b/src/components/SearchContainer.js
deleted file mode 100644
index f053926ca..000000000
--- a/src/components/SearchContainer.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import axios from 'axios';
-import './Library.css';
-import Movie from './Movie'
-import SearchForm from './SearchForm'
-import SearchResults from './SearchResults'
-import { BrowserRouter as Router, Link, Route } from 'react-router-dom';
-
-
-
-class SearchContainer extends Component {
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-    };
-  }
-
-  updateRentalMovie = (title) => {
-    this.setState({
-      rentalMovie: title
-    })
-  }
-
-  defMovieName = (title) => {
-    this.setState({
-      movieName: title,
-    })
-  }
-
-  defSearchMovie = () => {
-    return(
-      <SearchResults
-        searchTitle={this.state.movieName}
-      />
-    )
-  }
-
-  setMovieName= (title) => {
-    this.setState({
-      movieName: title,
-    })
-  }
-
-  showSearchPage = () => {
-     return (
-       <SearchForm
-        setMovieName={this.setMovieName}
-       />
-     )
-  }
-
-  render() {
-    return(
-      <Route path="/search" render={() => (
-        <div>
-          {this.showSearchPage()}
-          <h1>{this.state.movieName}</h1>
-          {this.state.movieName ? this.defSearchMovie() : ''}
-        </div>
-
-      )}/>
-    )
-  }
-
-}
-
-
-export default SearchContainer;
diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js
index 175547ad7..ce00d754c 100644
--- a/src/components/SearchResults.js
+++ b/src/components/SearchResults.js
@@ -6,6 +6,7 @@ import Movie from './Movie'
 import SearchForm from './SearchForm'
 
 
+
 class SearchResults extends Component {
 
   constructor(props) {
@@ -56,16 +57,13 @@ class SearchResults extends Component {
     axios.post(`http://localhost:3000/add_movie/`, movie)
 
     .then( () => {
-      //api post request with movie
       this.setState({
         message: `Added ${movie.title} to library`
       })
     })
     .catch( (error) => {
-
-    console.log(error);
       this.setState({
-
+        message: 'Movie is already available for rent',
         error: error.message
       });
     });
@@ -97,18 +95,20 @@ class SearchResults extends Component {
   render() {
 
     return (
+
       <section>
 
-      <SearchForm
-      clearSearchCallback={this.clearSearch}
-      movieSearchCallback={this.movieSearch}
-      />
-      <span>{this.state.error ? this.state.error : ''}</span>
-      <span>{this.state.message ? this.state.message : ''}</span>
-      <div className='movie-library'>
-      {this.showMovies()}
-      </div>
+        <SearchForm
+          clearSearchCallback={this.clearSearch}
+          movieSearchCallback={this.movieSearch}
+        />
+        <p className="error">{this.state.error ? this.state.error : ''}</p>
+        <p className="message">{this.state.message ? this.state.message : ''}</p>
+        <div className='movie-library'>
+          {this.showMovies()}
+        </div>
       </section>
+
     )
   }
 }

From 60368d9a0612f99f67fe552ddae2a5a3e08f2100 Mon Sep 17 00:00:00 2001
From: Mary Lamkin <mmlamkin@gmail.com>
Date: Thu, 21 Jun 2018 13:52:36 -0700
Subject: [PATCH 47/50] fixes customer proptypes

---
 src/components/Customer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Customer.js b/src/components/Customer.js
index 601367ca6..577fdf44d 100644
--- a/src/components/Customer.js
+++ b/src/components/Customer.js
@@ -23,7 +23,7 @@ class Customer extends Component {
 
 }
 
-CustomerList.PropTypes = {
+Customer.PropTypes = {
   updateRentalCallback: PropTypes.func.required,
   url: PropTypes.string
 };

From 6813e52f7e782a8ab123378351454c46f48e0da1 Mon Sep 17 00:00:00 2001
From: Mary Lamkin <mmlamkin@gmail.com>
Date: Thu, 21 Jun 2018 14:38:24 -0700
Subject: [PATCH 48/50] images of movies added to library are displayed--still
 a bug where the disappear from external api search page after hitting add to
 library

---
 src/App.js                      | 2 --
 src/components/Customer.js      | 3 +--
 src/components/SearchResults.js | 8 ++++++--
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/App.js b/src/App.js
index 8a92ca55f..d03686e5e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,8 +4,6 @@ import Library from './components/Library';
 import CustomerList from './components/CustomerList';
 import axios from 'axios';
 import { BrowserRouter as Router, Link, Route } from 'react-router-dom';
-import SearchContainer from './components/SearchForm'
-import SearchForm from './components/SearchForm'
 import SearchResults from './components/SearchResults'
 
 
diff --git a/src/components/Customer.js b/src/components/Customer.js
index 577fdf44d..db2b1881c 100644
--- a/src/components/Customer.js
+++ b/src/components/Customer.js
@@ -24,8 +24,7 @@ class Customer extends Component {
 }
 
 Customer.PropTypes = {
-  updateRentalCallback: PropTypes.func.required,
-  url: PropTypes.string
+  addCustomerToRentalCallback: PropTypes.func.required,
 };
 
 export default Customer;
diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js
index ce00d754c..737993d55 100644
--- a/src/components/SearchResults.js
+++ b/src/components/SearchResults.js
@@ -53,7 +53,9 @@ class SearchResults extends Component {
   }
 
   addToLib = (movie) =>{
-
+    let picture = movie.image_url.split('/w185')
+    movie.image_url = picture[1]
+    
     axios.post(`http://localhost:3000/add_movie/`, movie)
 
     .then( () => {
@@ -63,15 +65,17 @@ class SearchResults extends Component {
     })
     .catch( (error) => {
       this.setState({
-        message: 'Movie is already available for rent',
+        message: 'Movie is already available in library',
         error: error.message
       });
     });
   }
 
 
+
   showMovies = () => {
     const movieLibrary = this.state.movies.map((movie, index) => {
+
       return (
         <div>
           <Movie

From b133a15cc4c933a0fcdeb262eb70407c3fab50b4 Mon Sep 17 00:00:00 2001
From: Mary Lamkin <mmlamkin@gmail.com>
Date: Fri, 22 Jun 2018 14:37:06 -0700
Subject: [PATCH 49/50] adds some styling

---
 public/index.html               |   1 +
 src/App.css                     | 162 +++++++++++++++++++++++++++++++-
 src/App.js                      | 145 +++++++++++++++++-----------
 src/components/Customer.js      |  11 ++-
 src/components/CustomerList.css |   6 +-
 src/components/Library.css      |   9 +-
 src/components/Library.js       |   4 +-
 src/components/Movie.js         |   6 +-
 src/components/SearchForm.js    |   7 +-
 src/components/SearchResults.js |   6 +-
 10 files changed, 280 insertions(+), 77 deletions(-)

diff --git a/public/index.html b/public/index.html
index ed0ebafa1..65f0dc87b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,6 +10,7 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link href="https://fonts.googleapis.com/css?family=Seaweed+Script" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/src/App.css b/src/App.css
index 1292d121f..699966a68 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3,7 +3,7 @@
   height: 100%;
 } */
 
-header {
+/* header {
   background-image: url("https://ak2.picdn.net/shutterstock/videos/18609782/thumb/1.jpg");
   background-color: blue;
   height: 12rem;
@@ -44,4 +44,164 @@ nav {
 .message {
   font-weight: bold;
   color: green;
+} */
+.title {
+  display:flex;
+}
+
+.homepage  {
+  display: grid;
+  grid-template:
+    "title"
+    "pic";
+  padding: 1rem;
+  font-family: 'Seaweed Script', cursive;
+}
+
+.storeName {
+  grid-area: "title";
+  font-size: 2rem;
+}
+
+
+.homepage img {
+  grid-area: pic;
+  width: 99% ;
+}
+
+.heading {
+        display: flex;
+        flex-direction: column;
+        grid-area: header;
+        flex-wrap: wrap;
+        font-size: 2.5rem;
+}
+
+#mainHeader {
+  font-family: 'Seaweed Script', cursive;
+  margin-left: 38%;
+  margin-bottom: 0;
+  color: #006A6A;
+}
+
+.header ul {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  width: 100%;
+  margin-top: 0;
+}
+
+#wavey {
+  max-height: 5rem;
+  width: 250%;
+  padding-right: 2rem;
+}
+
+div .header {
+    display: flex;
+    align-items: stretch;
+}
+
+
+.heading ul li {
+      list-style-type: none;
+      display: flex;
+      margin-right: 2%
+}
+
+.rentalClass {
+        grid-area: menu;
+        display: flex;
+        flex-wrap: wrap;
+        font-family: 'Seaweed Script', cursive;
+        font-size: 1.3em;
+        color: #324F17;
+        align-items: top;
+        }
+
+.rentalClass ul { list-style: none;
+            align-content: center;
+            padding-left: 1em;
+            flex-wrap: wrap;
+
+          }
+
+.showContent ul {
+       list-style: none;
+      flex-wrap: wrap;
+
+}
+.showContent { grid-area: main;
+        padding-right: 1rem;
+        display: flex;
+         }
+
+.customer {
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  grid-template-areas:
+    "name"
+    "become-renter"
+}
+
+.customers {
+  display: grid;
+  grid-template: auto/1fr 1fr;
+  margin-left: 5%;
+  width: 80%
+}
+
+.customer-name {
+  grid-area: name;
+  font-size: 1.1em
+}
+
+.button {
+  grid-area: become-renter;
+  background-color: #93b8c0;
+  color: white;
+}
+
+.library-movies {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  justify-content: center;
+}
+
+
+.grid-container {
+  display: grid;
+  grid-gap: 10px;
+  padding: 10px;
+  grid-template-columns: 1fr 3fr;
+  grid-template-areas:
+    "header header header header"
+    "menu main main main"
+    "menu main main main"
+
+}
+.grid-container > div {
+  padding: 20px;
+}
+
+h4 {
+  font-size: 2em;
+  margin-top: 0;
+  margin-bottom: 0
+}
+
+.movie-search {
+  font-size: 2em;
+  font-family: 'Seaweed Script', cursive;
+}
+
+form {
+  align-items: left;
+}
+
+.search-form {
+  text-align: center;
+  padding-right: 4rem;
 }
diff --git a/src/App.js b/src/App.js
index d03686e5e..bc16c030e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -77,6 +77,15 @@ class App extends Component {
     })
   }
 
+  defHomePage = () => {
+    return(
+      <div className="homepage">
+        <header className="storeName">Welcome to WaterFlix -- a sea of movies to enjoy</header>
+        <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSdUvCvTeimO9N_PLhmkwUySrOBjvE53CbIWuH2wzityRfDusc' height='500' width='500'/>
+      </div>
+    )
+  }
+
   render() {
     const anyErrors = () => {
       if (this.state.error) {
@@ -86,64 +95,88 @@ class App extends Component {
     return (
 
       <Router>
-        <div className="App">
-          <header>
-            <h1>Poseidon Rentals</h1>
-
-            <section className="rental">
-              <h4>Your Rental</h4>
-              <p>Selected Movie: {this.state.rentalMovie}</p>
-              <p>Selected Customer: {this.state.rentalCustomer.name}</p>
-              <button className="create-rental" onClick={this.createRental}>
-                Create Rental
-              </button>
-            </section>
-          </header>
-
-          <nav className="navbar">
-            <Link to={'/'}>
-              <button className="see-customers">
-                Home
-              </button>
-            </Link>
-            <Link to={'/library'}>
-              <button className="see-library" onClick={this.showLibrary}>
-                Faves
-              </button>
-            </Link>
-            <Link to={'/customers'}>
-              <button className="see-customers" onClick={this.showCustomers}>
-                Customers
-              </button>
-            </Link>
-            <Link to={'/search'}>
-              <button className="see-customers" onClick={this.showSearchPage}>
-                Search the Sea
-              </button>
-            </Link>
-          </nav>
-
-          <p className="message">{this.state.message}</p>
-
-      <section className="display">
-      <Route exact={true} path="/" render={() => (
-        <h1>Welcome</h1>
-      )}/>
-
-      <Route path="/library" render={() => (
-        <Library updateRentalCallback={this.updateRentalMovie}/>
-      )}/>
-
-      <Route path="/search" render={() => (
-        <SearchResults />
-      )}/>
-
-      <Route path="/customers" render={() => (
-        <CustomerList url="http://localhost:3000/customers" updateRentalCallback={this.updateRentalCustomer}/>
-      )}/>
-      </section>
+      <div className="grid-container">
+      <div className="heading">
+      <h1 id="mainHeader">Waterflix</h1>
+      <div className="header">
+      <ul>
+      <li>
+      <Link to={'/'}>
+      <button className="button">
+      Home
+      </button>
+      </Link>
+      </li>
+      <li>
+      <Link to={'/library'}>
+      <button className="see-library button" onClick={this.showLibrary}>
+      Faves
+      </button>
+      </Link>
+      </li>
+      <li>
+      <Link to={'/customers'}>
+      <button className="button" onClick={this.showCustomers}>
+      Customers
+      </button>
+      </Link>
+      </li>
+      <li>
+      <Link to={'/search'}>
+      <button className="button" onClick={this.showSearchPage}>
+      Search the Sea
+      </button>
+      </Link>
+      </li>
+      </ul>
+      <img id="wavey"
+      src='https://blog.csiro.au/wp-content/uploads/2014/07/waves-1024x682.jpg' alt='waves'/>
+      </div>
+      </div>
+
+      <div className="rentalClass">
+      <p  className="message"> {this.state.message}</p>
+      {anyErrors()}
+      <ul>
+      <li>
+      <h4>Your Rental</h4>
+      </li>
+      <li>
+      <p>Selected Movie: {this.state.rentalMovie}</p></li>
+      <li>
+      <p>Selected Customer: {this.state.rentalCustomer.name}</p></li>
+      <li>
+      <button className="button" onClick={this.createRental}>
+      Create Rental
+      </button>
+      </li>
+      </ul>
+      </div>
+
+      <div className="showContent">
+        <Route exact={true} path="/" render={() => (
+          this.defHomePage()
+        )}/>
+      </div>
+
+      <div className="showContent">
+        <Route path="/library" render={() => (
+          <Library updateRentalCallback={this.updateRentalMovie}/>
+        )}/>
       </div>
 
+      <div className="showContent">
+        <Route path="/search" render={() => (
+          <SearchResults />
+        )}/>
+      </div>
+
+      <div className="showContent">
+        <Route path="/customers" render={() => (
+          <CustomerList url="http://localhost:3000/customers" updateRentalCallback={this.updateRentalCustomer}/>
+        )}/>
+      </div>
+      </div>
       </Router>
 
     );
diff --git a/src/components/Customer.js b/src/components/Customer.js
index db2b1881c..537116769 100644
--- a/src/components/Customer.js
+++ b/src/components/Customer.js
@@ -12,12 +12,15 @@ class Customer extends Component {
   render() {
 
     return (
-      <section className="customer">
-        <span>{this.props.name}</span>
-        <button className="rental-customer" onClick={this.addCustomerToRental}>
+      <div className="customer">
+        <div className="customer-name">
+
+        <div className="customer-name">{this.props.name}</div>
+        <button className="customer-button button" onClick={this.addCustomerToRental}>
           Add Customer to Rental
         </button>
-      </section>
+        </div>
+      </div>
     )
   }
 
diff --git a/src/components/CustomerList.css b/src/components/CustomerList.css
index 28e2e84de..8b1378917 100644
--- a/src/components/CustomerList.css
+++ b/src/components/CustomerList.css
@@ -1,5 +1 @@
-.customers {
-  display: grid;
-  grid-template: auto/1fr 1fr;
-  margin-left: 5%
-}
+
diff --git a/src/components/Library.css b/src/components/Library.css
index bc8a17cd1..8c248f978 100644
--- a/src/components/Library.css
+++ b/src/components/Library.css
@@ -2,5 +2,12 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  
+  align-items: center;
+}
+
+.rental-movie-button {
+  max-width: 60%;
+  margin-left: 4em;
+  background-color: #93b8c0;
+  color: white;
 }
diff --git a/src/components/Library.js b/src/components/Library.js
index 51034275e..7829c3093 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -39,7 +39,7 @@ class Library extends Component {
     const movieLibrary = this.state.movies.map((movie, index) => {
 
       return (
-        <div>
+        <div className="library-movies">
           <Movie
           key={index}
           image_url={movie.image_url}
@@ -48,7 +48,7 @@ class Library extends Component {
           addMovieToRentalCallback={this.updateRental}
           />
 
-          <button className="rental-movie" onClick={() => {this.updateRental(movie.title)}}>
+          <button className="rental-movie-button" onClick={() => {this.updateRental(movie.title)}}>
             Add Movie to Rental
           </button>
         </div>
diff --git a/src/components/Movie.js b/src/components/Movie.js
index 5f3b577f6..7629a695f 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -12,9 +12,9 @@ class Movie extends Component {
 
     return (
       <section className="movie">
-        <img src={this.props.image_url} alt="movie thumbnail"/>
-        <p>{this.props.title}</p>
-        <p>{this.props.release_date}</p>
+      <img src={this.props.image_url} alt="movie thumbnail"/>
+      <p>{this.props.title}</p>
+      <p>{this.props.release_date}</p>
       </section>
     )
   }
diff --git a/src/components/SearchForm.js b/src/components/SearchForm.js
index 3ca818917..5dd30716a 100644
--- a/src/components/SearchForm.js
+++ b/src/components/SearchForm.js
@@ -38,9 +38,10 @@ class SearchForm extends Component {
 
   render() {
     return (
+      <div className="search-form">
       <form onSubmit={this.onFormSubmit}>
-        <div key="movieName">
-          <label htmlFor="movieName">Movie: </label>
+        <div class="search-form" key="movieName">
+          <label className="movie-search" htmlFor="movieName">Search Movies: </label>
           <input
             id="movieName"
             name="movieName"
@@ -53,8 +54,10 @@ class SearchForm extends Component {
         <input
         type="submit"
         value="Search"
+        className="button"
         />
       </form>
+      </div>
 
     );
   }
diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js
index 737993d55..0d477f1b0 100644
--- a/src/components/SearchResults.js
+++ b/src/components/SearchResults.js
@@ -55,7 +55,7 @@ class SearchResults extends Component {
   addToLib = (movie) =>{
     let picture = movie.image_url.split('/w185')
     movie.image_url = picture[1]
-    
+
     axios.post(`http://localhost:3000/add_movie/`, movie)
 
     .then( () => {
@@ -85,7 +85,7 @@ class SearchResults extends Component {
           release_date={movie.release_date}
           />
 
-          <button className="see-customers" onClick={() => {this.addToLib(movie)}}>
+          <button className="rental-movie-button" onClick={() => {this.addToLib(movie)}}>
             Add to library
           </button>
 
@@ -100,7 +100,7 @@ class SearchResults extends Component {
 
     return (
 
-      <section>
+      <section className='library-movies'>
 
         <SearchForm
           clearSearchCallback={this.clearSearch}

From 64a846dc6270a99632b4b38b613a17272d26326b Mon Sep 17 00:00:00 2001
From: Mary Lamkin <mmlamkin@gmail.com>
Date: Sun, 2 Dec 2018 16:17:50 -0800
Subject: [PATCH 50/50] fixed terrible indentation

---
 src/App.js              | 165 ++++++++++++++++++++--------------------
 src/components/Movie.js |   3 -
 2 files changed, 83 insertions(+), 85 deletions(-)

diff --git a/src/App.js b/src/App.js
index bc16c030e..81a3e4445 100644
--- a/src/App.js
+++ b/src/App.js
@@ -95,88 +95,89 @@ class App extends Component {
     return (
 
       <Router>
-      <div className="grid-container">
-      <div className="heading">
-      <h1 id="mainHeader">Waterflix</h1>
-      <div className="header">
-      <ul>
-      <li>
-      <Link to={'/'}>
-      <button className="button">
-      Home
-      </button>
-      </Link>
-      </li>
-      <li>
-      <Link to={'/library'}>
-      <button className="see-library button" onClick={this.showLibrary}>
-      Faves
-      </button>
-      </Link>
-      </li>
-      <li>
-      <Link to={'/customers'}>
-      <button className="button" onClick={this.showCustomers}>
-      Customers
-      </button>
-      </Link>
-      </li>
-      <li>
-      <Link to={'/search'}>
-      <button className="button" onClick={this.showSearchPage}>
-      Search the Sea
-      </button>
-      </Link>
-      </li>
-      </ul>
-      <img id="wavey"
-      src='https://blog.csiro.au/wp-content/uploads/2014/07/waves-1024x682.jpg' alt='waves'/>
-      </div>
-      </div>
-
-      <div className="rentalClass">
-      <p  className="message"> {this.state.message}</p>
-      {anyErrors()}
-      <ul>
-      <li>
-      <h4>Your Rental</h4>
-      </li>
-      <li>
-      <p>Selected Movie: {this.state.rentalMovie}</p></li>
-      <li>
-      <p>Selected Customer: {this.state.rentalCustomer.name}</p></li>
-      <li>
-      <button className="button" onClick={this.createRental}>
-      Create Rental
-      </button>
-      </li>
-      </ul>
-      </div>
-
-      <div className="showContent">
-        <Route exact={true} path="/" render={() => (
-          this.defHomePage()
-        )}/>
-      </div>
-
-      <div className="showContent">
-        <Route path="/library" render={() => (
-          <Library updateRentalCallback={this.updateRentalMovie}/>
-        )}/>
-      </div>
-
-      <div className="showContent">
-        <Route path="/search" render={() => (
-          <SearchResults />
-        )}/>
-      </div>
-
-      <div className="showContent">
-        <Route path="/customers" render={() => (
-          <CustomerList url="http://localhost:3000/customers" updateRentalCallback={this.updateRentalCustomer}/>
-        )}/>
-      </div>
-      </div>
+        <div className="grid-container">
+          <div className="heading">
+            <h1 id="mainHeader">Waterflix</h1>
+              <div className="header">
+                <ul>
+                  <li>
+                    <Link to={'/'}>
+                      <button className="button">
+                        Home
+                      </button>
+                    </Link>
+                  </li>
+                  <li>
+                    <Link to={'/library'}>
+                      <button className="see-library button" onClick={this.showLibrary}>
+                      Faves
+                      </button>
+                    </Link>
+                  </li>
+                  <li>
+                    <Link to={'/customers'}>
+                      <button className="button" onClick={this.showCustomers}>
+                      Customers
+                      </button>
+                    </Link>
+                  </li>
+                  <li>
+                    <Link to={'/search'}>
+                      <button className="button" onClick={this.showSearchPage}>
+                      Search the Sea
+                      </button>
+                    </Link>
+                  </li>
+                </ul>
+                <img id="wavey"
+                src='https://blog.csiro.au/wp-content/uploads/2014/07/waves-1024x682.jpg' alt='waves'/>
+              </div>
+            </div>
+
+            <div className="rentalClass">
+              <p  className="message"> {this.state.message}</p>
+              {anyErrors()}
+              <ul>
+                <li>
+                  <h4>Your Rental</h4>
+                </li>
+                <li>
+                  <p>Selected Movie: {this.state.rentalMovie}</p>
+                </li>
+                <li>
+                  <p>Selected Customer: {this.state.rentalCustomer.name}</p></li>
+                <li>
+                  <button className="button" onClick={this.createRental}>
+                  Create Rental
+                  </button>
+                </li>
+              </ul>
+            ]</div>
+
+            <div className="showContent">
+              <Route exact={true} path="/" render={() => (
+                this.defHomePage()
+              )}/>
+            </div>
+
+            <div className="showContent">
+              <Route path="/library" render={() => (
+                <Library updateRentalCallback={this.updateRentalMovie}/>
+              )}/>
+            </div>
+
+            <div className="showContent">
+              <Route path="/search" render={() => (
+                <SearchResults />
+              )}/>
+            </div>
+
+            <div className="showContent">
+              <Route path="/customers" render={() => (
+                <CustomerList url="http://localhost:3000/customers" updateRentalCallback={this.updateRentalCustomer}/>
+              )}/>
+            </div>
+          </div>
       </Router>
 
     );
diff --git a/src/components/Movie.js b/src/components/Movie.js
index 7629a695f..c240eb795 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -4,9 +4,6 @@ import './Movie.css';
 
 class Movie extends Component {
 
-  // addMovieToRental= () => {
-  //   this.props.addMovieToRentalCallback(this.props.title)
-  // }
 
   render() {