From 7b7be754b2da096d086fe1ef55775be0e97c2805 Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Mon, 24 Jun 2019 14:45:49 -0700
Subject: [PATCH 01/66] setup

---
 package-lock.json | 102 ++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |  13 ++++++
 2 files changed, 115 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 2207e63b9..3e0662036 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5603,6 +5603,11 @@
       "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
       "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE="
     },
+    "gud": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
+    },
     "gzip-size": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.0.0.tgz",
@@ -5777,6 +5782,19 @@
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
     },
+    "history": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.9.0.tgz",
+      "integrity": "sha512-H2DkjCjXf0Op9OAr6nJ56fcRkTSNrUiv41vNJ6IswJjif6wlpZK0BTfFbi7qK9dXLSYZxkq5lBsj3vUjlYBYZA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^2.2.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0",
+        "value-equal": "^0.4.0"
+      }
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -5787,6 +5805,14 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz",
+      "integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "hosted-git-info": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz",
@@ -8134,6 +8160,16 @@
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
       "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ=="
     },
+    "mini-create-react-context": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz",
+      "integrity": "sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw==",
+      "requires": {
+        "@babel/runtime": "^7.4.0",
+        "gud": "^1.0.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
     "mini-css-extract-plugin": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz",
@@ -10194,6 +10230,52 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
       "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
     },
+    "react-router": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.0.1.tgz",
+      "integrity": "sha512-EM7suCPNKb1NxcTZ2LEOWFtQBQRQXecLxVpdsP4DW4PbbqYWeRiLyV/Tt1SdCrvT2jcyXAXmVTmzvSzrPR63Bg==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "hoist-non-react-statics": "^3.1.0",
+        "loose-envify": "^1.3.1",
+        "mini-create-react-context": "^0.3.0",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.6.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "path-to-regexp": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
+          "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        }
+      }
+    },
+    "react-router-dom": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.0.1.tgz",
+      "integrity": "sha512-zaVHSy7NN0G91/Bz9GD4owex5+eop+KvgbxXsP/O+iW1/Ln+BrJ8QiIR5a6xNPtrdTvLkxqlDClx13QO1uB8CA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.0.1",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      }
+    },
     "react-scripts": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.0.1.tgz",
@@ -10575,6 +10657,11 @@
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
       "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
     },
+    "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",
@@ -11685,6 +11772,16 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "tiny-invariant": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.4.tgz",
+      "integrity": "sha512-lMhRd/djQJ3MoaHEBrw8e2/uM4rs9YMNk0iOr8rHQ0QdbM7D4l0gFl3szKdeixrlyfm9Zqi4dxHCM2qVG8ND5g=="
+    },
+    "tiny-warning": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.2.tgz",
+      "integrity": "sha512-rru86D9CpQRLvsFG5XFdy0KdLAvjdQDyZCsRcuu60WtzFylDM3eAWSxEVz5kzL2Gp544XiUvPbVKtOA/txLi9Q=="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -12122,6 +12219,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",
diff --git a/package.json b/package.json
index e7e4a7c62..d63126caa 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.1"
   },
   "scripts": {
@@ -12,5 +13,17 @@
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

From b279d1afff6002d45a17d7166026f7ae7eea556a Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Mon, 24 Jun 2019 14:53:06 -0700
Subject: [PATCH 02/66] framework for react router added

---
 src/App.js | 56 ++++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 46 insertions(+), 10 deletions(-)

diff --git a/src/App.js b/src/App.js
index 203067e4d..ab0d0cda1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,21 +1,57 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 import './App.css';
 
 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>
-      </div>
+      <Router>
+        <div>
+          <Header />
+
+          <Route exact path="/" component={Home} />
+          <Route path="/search" component={Search} />
+          <Route path="/library" component={Library} />
+          <Route path="/customers" component={Customers} />
+        </div>
+      </Router>
     );
   }
 }
 
+function Home() {
+  return <h2>Home</h2>;
+}
+
+function Search() {
+  return <h2>Search</h2>;
+}
+
+function Library() {
+  return <h2>Library</h2>;
+}
+
+function Customers() {
+  return <h2>Customers</h2>;
+}
+
+function Header() {
+  return (
+    <ul>
+      <li>
+        <Link to="/">Home</Link>
+      </li>
+      <li>
+        <Link to="/search">Search</Link>
+      </li>
+      <li>
+        <Link to="/library">Library</Link>
+      </li>
+      <li>
+        <Link to="/customers">Customers</Link>
+      </li>
+    </ul>
+  );
+}
+
 export default App;

From 90b550725dd22273766ae692e11b991f13871834 Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Tue, 25 Jun 2019 12:47:19 -0700
Subject: [PATCH 03/66] added components folder

---
 package-lock.json        | 32 ++++++++++++++++++++++++++++++++
 package.json             |  1 +
 src/App.js               |  8 ++++++++
 src/components/Search.js |  0
 4 files changed, 41 insertions(+)
 create mode 100644 src/components/Search.js

diff --git a/package-lock.json b/package-lock.json
index 3e0662036..9bc9f54a4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1902,6 +1902,38 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz",
       "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ=="
     },
+    "axios": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
+      "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
+      "requires": {
+        "follow-redirects": "1.5.10",
+        "is-buffer": "^2.0.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "axobject-query": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz",
diff --git a/package.json b/package.json
index d63126caa..eeff31f0a 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.19.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-router-dom": "^5.0.1",
diff --git a/src/App.js b/src/App.js
index ab0d0cda1..8450cc1ef 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,8 +1,16 @@
 import React, { Component } from 'react';
 import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 import './App.css';
+import axios from 'axios';
 
 class App extends Component {
+
+  componentDidMount() {
+    axios.get('http://localhost:3001/')
+    .then((response) => {
+      console.log(response);
+    })
+  }
   render() {
     return (
       <Router>
diff --git a/src/components/Search.js b/src/components/Search.js
new file mode 100644
index 000000000..e69de29bb

From 902231752c17021b9126492b83681cbd54939824 Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Tue, 25 Jun 2019 13:01:05 -0700
Subject: [PATCH 04/66] able to import list of movies and customers from api to
 view

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

diff --git a/src/App.js b/src/App.js
index 8450cc1ef..ac6856b18 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,13 +4,35 @@ import './App.css';
 import axios from 'axios';
 
 class App extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      movies: [],
+      customers: [],
+    };
+  }
 
   componentDidMount() {
-    axios.get('http://localhost:3001/')
+    axios.get('http://localhost:3001/movies')
     .then((response) => {
       console.log(response);
+      this.setState({ movies: response.data });
     })
+    .catch((error) => {
+      this.setState({ error: error.message });
+    });
+
+    axios.get('http://localhost:3001/customers')
+    .then((response) => {
+      console.log(response);
+      this.setState({ customers: response.data });
+    })
+    .catch((error) => {
+      this.setState({ error: error.message });
+    });
   }
+
   render() {
     return (
       <Router>

From 61238225bffe5c1a8d7bcbae950548b07b0c7b7e Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Tue, 25 Jun 2019 13:01:51 -0700
Subject: [PATCH 05/66] added Search component

---
 src/App.js               | 15 +++++++++++----
 src/components/Search.js |  6 ++++++
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/App.js b/src/App.js
index 8450cc1ef..0f36e6b0e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,16 +2,25 @@ import React, { Component } from 'react';
 import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 import './App.css';
 import axios from 'axios';
+import Search from './components/Search';
 
 class App extends Component {
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      movies: [],
+    };
+  }
+
   componentDidMount() {
-    axios.get('http://localhost:3001/')
+    axios.get('http://localhost:3001/movies')
     .then((response) => {
       console.log(response);
     })
   }
   render() {
+
     return (
       <Router>
         <div>
@@ -31,9 +40,7 @@ function Home() {
   return <h2>Home</h2>;
 }
 
-function Search() {
-  return <h2>Search</h2>;
-}
+
 
 function Library() {
   return <h2>Library</h2>;
diff --git a/src/components/Search.js b/src/components/Search.js
index e69de29bb..68f2e5675 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -0,0 +1,6 @@
+import React from 'react';
+function Search() {
+    return <h2>Search</h2>;
+  }
+
+export default Search;
\ No newline at end of file

From 2f683b1303ef04cc258ce7e026e3213062415564 Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Tue, 25 Jun 2019 13:05:21 -0700
Subject: [PATCH 06/66] added error section

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

diff --git a/src/App.js b/src/App.js
index 174402969..7caadd90e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -11,13 +11,7 @@ class App extends Component {
     this.state = {
       movies: [],
       customers: [],
-    };
-  }
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      movies: [],
+      error: null
     };
   }
 
@@ -43,6 +37,9 @@ class App extends Component {
 
   render() {
 
+    const errorSection = (this.state.error) ?
+    (<section>Error: {this.state.error}</section>) : null;
+
     return (
       <Router>
         <div>
@@ -52,6 +49,7 @@ class App extends Component {
           <Route path="/search" component={Search} />
           <Route path="/library" component={Library} />
           <Route path="/customers" component={Customers} />
+          {errorSection}
         </div>
       </Router>
     );

From 95d4f780d9c83e682bca1bdf2016b674a2cc084d Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Tue, 25 Jun 2019 14:06:11 -0700
Subject: [PATCH 07/66] able to see all movies, and select movie

---
 src/App.js                | 20 +++++++++++++-------
 src/components/Library.js | 24 ++++++++++++++++++++++++
 src/components/Movie.js   | 22 ++++++++++++++++++++++
 3 files changed, 59 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Library.js
 create mode 100644 src/components/Movie.js

diff --git a/src/App.js b/src/App.js
index ac6856b18..9b2dcebb3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 import './App.css';
+import PropTypes from 'prop-types';
+import Library from './components/Library';
 import axios from 'axios';
 
 class App extends Component {
@@ -9,15 +11,22 @@ class App extends Component {
 
     this.state = {
       movies: [],
+      rentedMovie: undefined,
       customers: [],
     };
   }
 
+  onSelectCallback = (index) => {
+    const selectedMovie = this.state.movies[index]
+    this.setState({ rentedMovie: selectedMovie });
+  }
+
   componentDidMount() {
     axios.get('http://localhost:3001/movies')
     .then((response) => {
       console.log(response);
-      this.setState({ movies: response.data });
+
+      this.setState({ movies: response.data});
     })
     .catch((error) => {
       this.setState({ error: error.message });
@@ -37,12 +46,13 @@ class App extends Component {
     return (
       <Router>
         <div>
+          { this.state.rentedMovie && <p>Movie Selection: {this.state.rentedMovie.title}</p>}
           <Header />
 
           <Route exact path="/" component={Home} />
           <Route path="/search" component={Search} />
-          <Route path="/library" component={Library} />
-          <Route path="/customers" component={Customers} />
+          <Route path="/library" render={() => <Library library={this.state.movies} onSelectCallback={this.onSelectCallback} />} />
+          <Route path="/customers" render={() => <Customers customers={this.state.customers} />} />
         </div>
       </Router>
     );
@@ -57,10 +67,6 @@ function Search() {
   return <h2>Search</h2>;
 }
 
-function Library() {
-  return <h2>Library</h2>;
-}
-
 function Customers() {
   return <h2>Customers</h2>;
 }
diff --git a/src/components/Library.js b/src/components/Library.js
new file mode 100644
index 000000000..1af63798d
--- /dev/null
+++ b/src/components/Library.js
@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Movie from './Movie';
+// import axios from 'axios';
+// import './Library.css';
+
+const Library = (props) => {
+  const movieCollection = props.library.map((movie, i) => {
+    return <li key={i}><Movie id={movie.id} title={movie.title} onSelectCallback={props.onSelectCallback}/></li>
+   });
+
+  return (
+    <div>
+      <h2>Library</h2>
+      <ul>{movieCollection}</ul>
+    </div>
+  )
+}
+
+Library.propTypes = {
+  library: PropTypes.array.isRequired,
+};
+
+export default Library;
\ No newline at end of file
diff --git a/src/components/Movie.js b/src/components/Movie.js
new file mode 100644
index 000000000..8418ec438
--- /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';
+
+const Movie = (props) => {
+  const onClickButton = () => {
+    props.onSelectCallback(props.id)
+  }
+
+  return (
+    <div>{props.title}<button onClick={onClickButton}>Rent Movie</button></div>
+  )
+}
+
+Movie.propTypes = {
+  id: PropTypes.number.isRequired,
+  title: PropTypes.string.isRequired,
+  onSelectCallback: PropTypes.func.isRequired,
+};
+
+export default Movie;
\ No newline at end of file

From 4663000c9fc8abe7f35b5bc464a67cb2a2a91335 Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Tue, 25 Jun 2019 16:39:52 -0700
Subject: [PATCH 08/66] show search results

---
 src/App.js                  | 10 +++--
 src/components/Search.js    | 81 +++++++++++++++++++++++++++++++++++--
 src/components/SearchBar.js | 33 +++++++++++++++
 3 files changed, 116 insertions(+), 8 deletions(-)
 create mode 100644 src/components/SearchBar.js

diff --git a/src/App.js b/src/App.js
index 7caadd90e..db311db35 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,6 +10,7 @@ class App extends Component {
 
     this.state = {
       movies: [],
+      externalMovies: [],
       customers: [],
       error: null
     };
@@ -18,7 +19,7 @@ class App extends Component {
   componentDidMount() {
     axios.get('http://localhost:3001/movies')
     .then((response) => {
-      console.log(response);
+      // console.log(response);
       this.setState({ movies: response.data });
     })
     .catch((error) => {
@@ -27,14 +28,16 @@ class App extends Component {
 
     axios.get('http://localhost:3001/customers')
     .then((response) => {
-      console.log(response);
+      // console.log(response);
       this.setState({ customers: response.data });
     })
     .catch((error) => {
       this.setState({ error: error.message });
     });
+
   }
 
+
   render() {
 
     const errorSection = (this.state.error) ?
@@ -46,7 +49,7 @@ class App extends Component {
           <Header />
 
           <Route exact path="/" component={Home} />
-          <Route path="/search" component={Search} />
+          <Route path="/search" render={() => <Search />}/>
           <Route path="/library" component={Library} />
           <Route path="/customers" component={Customers} />
           {errorSection}
@@ -61,7 +64,6 @@ function Home() {
 }
 
 
-
 function Library() {
   return <h2>Library</h2>;
 }
diff --git a/src/components/Search.js b/src/components/Search.js
index 68f2e5675..ba03c6e4c 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -1,6 +1,79 @@
-import React from 'react';
-function Search() {
-    return <h2>Search</h2>;
-  }
+import React, {Component} from 'react';
+import SearchBar from './SearchBar';
+import axios from 'axios';
+class Search extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            searchResults: [],
+            queryString: "",
+            searched: false,
+            error: null
+        };
+    }
+
+    componentDidMount(){
+        axios.get('http://localhost:3001/movies?query=' + this.state.queryString)
+        .then((response) => {
+            this.setState({
+                searchResults: response.data
+            })
+        })
+        .catch((error) => {
+            this.setState({
+                error: error.message
+            });
+        });
+    }
+
+    searchCallback = (queryString) => {
+        this.componentDidMount()
+        this.setState({
+          queryString,
+          searched: true
+        });
+    };
+
+    render() {
+
+        let foundMovies;
+        let tableHeader;
+        if (this.state.searchResults !== null) {
+            tableHeader = (<thead>
+                            <tr>
+                                <th>Image</th>
+                                <th>Title</th>
+                                <th>Overview</th>
+                                <th>Release Date</th>
+                            </tr>
+                        </thead>)
+            foundMovies = this.state.searchResults.map((movie, i)=> {
+                return (<tr key={i}>
+                            <td><img src={movie.image_url} alt={movie.title}/></td>
+                            <td>{movie.title}</td>
+                            <td>{movie.overview}</td>
+                            <td>{movie.release_date}</td>
+                            <td><button>Add to Library</button></td>
+                        </tr>);
+            })
+        }else if (this.state.searched) {
+             foundMovies = (<tr><td>No matched Results!</td></tr>)
+        }else {
+            foundMovies = null
+        }
+
+        console.log(this.state.searchResults);
+
+        return (
+            <section>
+                <SearchBar searchCallback={this.searchCallback}/>
+                <table>
+                    {tableHeader}
+                    <tbody>{foundMovies}</tbody>
+                </table>
+            </section>
+        )
+    }
+};
 
 export default Search;
\ No newline at end of file
diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js
new file mode 100644
index 000000000..34c34890e
--- /dev/null
+++ b/src/components/SearchBar.js
@@ -0,0 +1,33 @@
+import React, {Component} from 'react';
+class SearchBar extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            queryString: ""
+        };
+    }
+
+    queryChanged = (event) => {
+        const queryString = event.target.value;
+        this.setState({
+            queryString
+        })
+
+        this.props.searchCallback(queryString);
+    }
+    render() {
+        return (
+            <section>
+                <label>
+                    Search <input name="search"
+                                type="text"
+                                value={this.state.queryString}
+                                onChange={this.queryChanged}/>
+
+                </label>
+            </section>
+        )
+    }
+};
+
+export default SearchBar;
\ No newline at end of file

From c351088c1ba08ac061b0335b74ec9c5f2c08fe40 Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Tue, 25 Jun 2019 19:09:32 -0700
Subject: [PATCH 09/66] able to chose a movie and customer for rental, and show
 details for each movie

---
 src/App.js                  | 59 +++++++++++++++++++++++++++----------
 src/components/Customer.js  | 22 ++++++++++++++
 src/components/Customers.js | 25 ++++++++++++++++
 src/components/Details.js   | 26 ++++++++++++++++
 src/components/Library.js   | 14 +++++++--
 src/components/Movie.js     | 19 ++++++++----
 6 files changed, 141 insertions(+), 24 deletions(-)
 create mode 100644 src/components/Customer.js
 create mode 100644 src/components/Customers.js
 create mode 100644 src/components/Details.js

diff --git a/src/App.js b/src/App.js
index 0a77326fa..edb360ff3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 import './App.css';
 import PropTypes from 'prop-types';
 import Library from './components/Library';
+import Customers from './components/Customers';
 import axios from 'axios';
 import Search from './components/Search';
 
@@ -12,22 +13,36 @@ class App extends Component {
 
     this.state = {
       movies: [],
-      rentedMovie: undefined,
       customers: [],
+      expandedMovies: {},
+      rentedMovie: undefined,
+      chosenCustomer: undefined,
       error: null
     };
   }
 
-  onSelectCallback = (index) => {
+  onClickDetailsCallback = (id) => {
+    this.setState((prevState) => ({ 
+      expandedMovies: {
+        ...prevState.expandedMovies, 
+        [id]: !prevState.expandedMovies[id],
+      }
+    }));
+  }
+
+  onSelectMovieCallback = (index) => {
     const selectedMovie = this.state.movies[index]
     this.setState({ rentedMovie: selectedMovie });
   }
 
+  onSelectCustomerCallback = (index) => {
+    const selectedCustomer = this.state.customers[index]
+    this.setState({ chosenCustomer: selectedCustomer });
+  }
+
   componentDidMount() {
     axios.get('http://localhost:3001/movies')
     .then((response) => {
-      console.log(response);
-
       this.setState({ movies: response.data});
     })
     .catch((error) => {
@@ -36,7 +51,6 @@ class App extends Component {
 
     axios.get('http://localhost:3001/customers')
     .then((response) => {
-      console.log(response);
       this.setState({ customers: response.data });
     })
     .catch((error) => {
@@ -45,20 +59,41 @@ class App extends Component {
   }
 
   render() {
-
     const errorSection = (this.state.error) ?
     (<section>Error: {this.state.error}</section>) : null;
 
     return (
       <Router>
         <div>
-          { this.state.rentedMovie && <p>Movie Selection: {this.state.rentedMovie.title}</p>}
+          { this.state.rentedMovie && <p>Movie Selection: {this.state.rentedMovie.title}</p> }
+
+          { this.state.chosenCustomer && <p>Customer Selection: {this.state.chosenCustomer.name}</p> }
+
           <Header />
 
           <Route exact path="/" component={Home} />
           <Route path="/search" component={Search} />
-          <Route path="/library" render={() => <Library library={this.state.movies} onSelectCallback={this.onSelectCallback} />} />
-          <Route path="/customers" render={() => <Customers customers={this.state.customers} />} />
+          <Route 
+            path="/library" 
+            render={() => (
+              <Library 
+                library={this.state.movies} 
+                expandedMovies={this.state.expandedMovies} 
+                onClickDetailsCallback={this.onClickDetailsCallback} 
+                onSelectMovieCallback={this.onSelectMovieCallback} 
+              />
+            )} 
+          />
+          <Route 
+            path="/customers" 
+            render={() => (
+              <Customers 
+                customers={this.state.customers} 
+                onSelectCustomerCallback={this.onSelectCustomerCallback}
+              />
+            )} 
+          />
+
           {errorSection}
         </div>
       </Router>
@@ -70,12 +105,6 @@ function Home() {
   return <h2>Home</h2>;
 }
 
-
-
-function Customers() {
-  return <h2>Customers</h2>;
-}
-
 function Header() {
   return (
     <ul>
diff --git a/src/components/Customer.js b/src/components/Customer.js
new file mode 100644
index 000000000..a931bd6d8
--- /dev/null
+++ b/src/components/Customer.js
@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+// import axios from 'axios';
+// import './Customer.css';
+
+const Customer = (props) => {
+  const onClickButton = () => {
+    props.onSelectCustomerCallback(props.id - 1)
+  }
+
+  return (
+    <div>{props.name}<button onClick={onClickButton}>Select Customer</button></div>
+  )
+}
+
+Customer.propTypes = {
+  id: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  onSelectCustomerCallback: PropTypes.func.isRequired,
+};
+
+export default Customer;
\ No newline at end of file
diff --git a/src/components/Customers.js b/src/components/Customers.js
new file mode 100644
index 000000000..389c10bfc
--- /dev/null
+++ b/src/components/Customers.js
@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Customer from './Customer';
+// import axios from 'axios';
+// import './Customers.css';
+
+const Customers = (props) => {
+  const customerCollection = props.customers.map((customer, i) => {
+    return <li key={i}><Customer id={customer.id} name={customer.name} onSelectCustomerCallback={props.onSelectCustomerCallback}/></li>
+   });
+
+  return (
+    <div>
+      <h2>Customers</h2>
+      <ul>{customerCollection}</ul>
+    </div>
+  )
+}
+
+Customers.propTypes = {
+  customers: PropTypes.array.isRequired,
+  onSelectCustomerCallback: PropTypes.func.isRequired,
+};
+
+export default Customers;
\ No newline at end of file
diff --git a/src/components/Details.js b/src/components/Details.js
new file mode 100644
index 000000000..4633024c3
--- /dev/null
+++ b/src/components/Details.js
@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+// import './Library.css';
+
+const Details = (props) => {
+  const movieDetails = () => {
+    return (
+      <ul>
+        <li>Id: {props.id}</li>
+        <li>Title: {props.title}</li>
+        <li>Overview: {props.overview} </li>
+        <li>Release Date: {props.release_date}</li>
+        <li><img src={props.image_url} alt={`${props.title}`}/></li>
+        <li>External Id: {props.external_id}</li>
+      </ul>
+    )
+  };
+
+  return movieDetails();
+}
+
+Details.propTypes = {
+  // showMovie: PropTypes.array.isRequired,
+};
+
+export default Details;
\ No newline at end of file
diff --git a/src/components/Library.js b/src/components/Library.js
index 1af63798d..56dc5609e 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -1,14 +1,20 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Movie from './Movie';
-// import axios from 'axios';
 // import './Library.css';
 
 const Library = (props) => {
   const movieCollection = props.library.map((movie, i) => {
-    return <li key={i}><Movie id={movie.id} title={movie.title} onSelectCallback={props.onSelectCallback}/></li>
+    return <li key={i}>
+      <Movie 
+        movie={movie} 
+        viewMovieDetails={props.expandedMovies[movie.id]} 
+        onClickDetailsCallback={props.onClickDetailsCallback} 
+        onSelectMovieCallback={props.onSelectMovieCallback}
+      />
+    </li>
    });
-
+   
   return (
     <div>
       <h2>Library</h2>
@@ -19,6 +25,8 @@ const Library = (props) => {
 
 Library.propTypes = {
   library: PropTypes.array.isRequired,
+  onClickDetailsCallback: PropTypes.func.isRequired,
+  onSelectMovieCallback: PropTypes.func.isRequired,
 };
 
 export default Library;
\ No newline at end of file
diff --git a/src/components/Movie.js b/src/components/Movie.js
index 8418ec438..60b481bac 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -1,22 +1,29 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-// import axios from 'axios';
+import Details from './Details';
 // import './Movie.css';
 
 const Movie = (props) => {
   const onClickButton = () => {
-    props.onSelectCallback(props.id)
+    props.onSelectMovieCallback(props.movie.id)
   }
 
+  const onClickDetailsButton = () => {
+    props.onClickDetailsCallback(props.movie.id)
+  }
+  
   return (
-    <div>{props.title}<button onClick={onClickButton}>Rent Movie</button></div>
+    <div>{props.movie.title}
+      <button onClick={onClickDetailsButton}>View Details</button>
+      <button onClick={onClickButton}>Select Movie</button>
+      {props.viewMovieDetails && <Details {...props.movie} />}
+    </div>
   )
 }
 
 Movie.propTypes = {
-  id: PropTypes.number.isRequired,
-  title: PropTypes.string.isRequired,
-  onSelectCallback: PropTypes.func.isRequired,
+  movie: PropTypes.object.isRequired,
+  onSelectMovieCallback: PropTypes.func.isRequired,
 };
 
 export default Movie;
\ No newline at end of file

From c73f9e999b03e8b60891834686700a0ff2b0d77c Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Tue, 25 Jun 2019 23:35:39 -0700
Subject: [PATCH 10/66] fixing error in search bar

---
 src/components/Search.js    | 29 ++++++++++++++++-------------
 src/components/SearchBar.js |  1 +
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/Search.js b/src/components/Search.js
index ba03c6e4c..d8dc163f6 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -35,18 +35,11 @@ class Search extends Component {
     };
 
     render() {
-
         let foundMovies;
         let tableHeader;
-        if (this.state.searchResults !== null) {
-            tableHeader = (<thead>
-                            <tr>
-                                <th>Image</th>
-                                <th>Title</th>
-                                <th>Overview</th>
-                                <th>Release Date</th>
-                            </tr>
-                        </thead>)
+        tableHeader = null;
+        // if (!this.state.searched) {
+            if (this.state.searchResults !== null) {
             foundMovies = this.state.searchResults.map((movie, i)=> {
                 return (<tr key={i}>
                             <td><img src={movie.image_url} alt={movie.title}/></td>
@@ -55,14 +48,24 @@ class Search extends Component {
                             <td>{movie.release_date}</td>
                             <td><button>Add to Library</button></td>
                         </tr>);
-            })
+            });
+            if (foundMovies && foundMovies.length > 0){
+            tableHeader = (<thead>
+                <tr>
+                    <th>Image</th>
+                    <th>Title</th>
+                    <th>Overview</th>
+                    <th>Release Date</th>
+                </tr>
+            </thead>);
+            }
         }else if (this.state.searched) {
-             foundMovies = (<tr><td>No matched Results!</td></tr>)
+             foundMovies = (<tr><td>No matched Results!</td></tr>);
         }else {
             foundMovies = null
         }
 
-        console.log(this.state.searchResults);
+        // console.log(this.state.searchResults);
 
         return (
             <section>
diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js
index 34c34890e..326e570a3 100644
--- a/src/components/SearchBar.js
+++ b/src/components/SearchBar.js
@@ -8,6 +8,7 @@ class SearchBar extends Component {
     }
 
     queryChanged = (event) => {
+        // event.preventDefault();
         const queryString = event.target.value;
         this.setState({
             queryString

From 9be0edb840f6084bf30096e8d069125acd6f2c2a Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Wed, 26 Jun 2019 00:40:33 -0700
Subject: [PATCH 11/66] refactored search page

---
 src/components/MovieCard.js | 16 ++++++++++
 src/components/Search.js    | 62 +++++++++++++++++++------------------
 2 files changed, 48 insertions(+), 30 deletions(-)
 create mode 100644 src/components/MovieCard.js

diff --git a/src/components/MovieCard.js b/src/components/MovieCard.js
new file mode 100644
index 000000000..72705fd60
--- /dev/null
+++ b/src/components/MovieCard.js
@@ -0,0 +1,16 @@
+import React, {Component} from 'react';
+
+const MovieCard = (props) => {
+    const {image_url, title, overview, release_date} = props;
+    return (
+        <tr>
+            <td><img src={image_url} alt={title}/></td>
+            <td>{title}</td>
+            <td>{overview}</td>
+            <td>{release_date}</td>
+            <td><button>Add to Library</button></td>
+        </tr>
+    )
+}
+
+export default MovieCard;
\ No newline at end of file
diff --git a/src/components/Search.js b/src/components/Search.js
index d8dc163f6..63921c490 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -1,12 +1,12 @@
 import React, {Component} from 'react';
 import SearchBar from './SearchBar';
+import MovieCard from './MovieCard';
 import axios from 'axios';
 class Search extends Component {
     constructor(props) {
         super(props);
         this.state = {
             searchResults: [],
-            queryString: "",
             searched: false,
             error: null
         };
@@ -35,45 +35,47 @@ class Search extends Component {
     };
 
     render() {
-        let foundMovies;
+    
+        let movieCards;
         let tableHeader;
-        tableHeader = null;
-        // if (!this.state.searched) {
-            if (this.state.searchResults !== null) {
-            foundMovies = this.state.searchResults.map((movie, i)=> {
-                return (<tr key={i}>
-                            <td><img src={movie.image_url} alt={movie.title}/></td>
-                            <td>{movie.title}</td>
-                            <td>{movie.overview}</td>
-                            <td>{movie.release_date}</td>
-                            <td><button>Add to Library</button></td>
-                        </tr>);
+
+        if (this.state.searchResults !== null) {
+            movieCards = this.state.searchResults.map((movie,i) => {
+                return [<MovieCard 
+                            key={i}
+                            image_url={movie.image_url}
+                            title={movie.title}
+                            overview={movie.overview}
+                            release_date={movie.release_date}/>]
             });
-            if (foundMovies && foundMovies.length > 0){
-            tableHeader = (<thead>
-                <tr>
-                    <th>Image</th>
-                    <th>Title</th>
-                    <th>Overview</th>
-                    <th>Release Date</th>
-                </tr>
-            </thead>);
+
+            if (movieCards && movieCards.length > 0){
+                tableHeader = (<thead>
+                    <tr>
+                        <th>Image</th>
+                        <th>Title</th>
+                        <th>Overview</th>
+                        <th>Release Date</th>
+                    </tr>
+                </thead>);
             }
-        }else if (this.state.searched) {
-             foundMovies = (<tr><td>No matched Results!</td></tr>);
-        }else {
-            foundMovies = null
+        } else if (this.state.searched) {
+            movieCards = (<tr><td>No matched Results!</td></tr>);
+        } else {
+            movieCards = null;
         }
 
-        // console.log(this.state.searchResults);
-
         return (
             <section>
                 <SearchBar searchCallback={this.searchCallback}/>
                 <table>
-                    {tableHeader}
-                    <tbody>{foundMovies}</tbody>
+                        {tableHeader}
+                    <tbody>
+                        {movieCards}
+                    </tbody>
+                
                 </table>
+
             </section>
         )
     }

From 52e9dd00d456ae99cd02c1462080821acca4f352 Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Wed, 26 Jun 2019 10:00:39 -0700
Subject: [PATCH 12/66] feature to add movie to the rental library

---
 src/components/MovieCard.js |  9 ++++++---
 src/components/Search.js    | 38 +++++++++++++++++++++++++++++++++++--
 2 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/src/components/MovieCard.js b/src/components/MovieCard.js
index 72705fd60..df196e91d 100644
--- a/src/components/MovieCard.js
+++ b/src/components/MovieCard.js
@@ -1,14 +1,17 @@
-import React, {Component} from 'react';
+import React from 'react';
 
 const MovieCard = (props) => {
-    const {image_url, title, overview, release_date} = props;
+    const {image_url, title, overview, release_date,addMovieCallback } = props;
+    const addMovie = () => {
+        addMovieCallback(props);
+    }
     return (
         <tr>
             <td><img src={image_url} alt={title}/></td>
             <td>{title}</td>
             <td>{overview}</td>
             <td>{release_date}</td>
-            <td><button>Add to Library</button></td>
+            <td><button onClick={addMovie}>Add to Library</button></td>
         </tr>
     )
 }
diff --git a/src/components/Search.js b/src/components/Search.js
index 63921c490..7ea834a6f 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -8,7 +8,8 @@ class Search extends Component {
         this.state = {
             searchResults: [],
             searched: false,
-            error: null
+            error: null,
+            success: null
         };
     }
 
@@ -34,7 +35,36 @@ class Search extends Component {
         });
     };
 
+    addMovieCallback = (movie) => {
+        const movieToApi = {
+            external_id: movie.external_id,
+            image_url: movie.image_url,
+            title: movie.title,
+            overview: movie.overview,
+            release_date: movie.release_date
+        }
+        axios.post('http://localhost:3001/movies', movieToApi)
+        .then((response)=> {
+            if (response.status === 200) {
+                this.setState({
+                    success: "Movie has been added to the rental library!"
+                })
+            }
+        })
+        .catch((error) => {
+            this.setState({
+                error: error.message
+            })
+        });
+    }
+
     render() {
+
+        const errorSection = (this.state.error) ?
+            (<section>Error: {this.state.error}</section>) : null;
+        
+        const successSection = (this.state.success) ?
+        (<section>{this.state.success}</section>) : null;
     
         let movieCards;
         let tableHeader;
@@ -43,10 +73,12 @@ class Search extends Component {
             movieCards = this.state.searchResults.map((movie,i) => {
                 return [<MovieCard 
                             key={i}
+                            external_id={movie.external_id}
                             image_url={movie.image_url}
                             title={movie.title}
                             overview={movie.overview}
-                            release_date={movie.release_date}/>]
+                            release_date={movie.release_date}
+                            addMovieCallback={this.addMovieCallback}/>]
             });
 
             if (movieCards && movieCards.length > 0){
@@ -68,6 +100,8 @@ class Search extends Component {
         return (
             <section>
                 <SearchBar searchCallback={this.searchCallback}/>
+                {errorSection}
+                {successSection}
                 <table>
                         {tableHeader}
                     <tbody>

From 48c4913936fee67551feeb738c214011aa572875 Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Wed, 26 Jun 2019 10:58:37 -0700
Subject: [PATCH 13/66] fixed the search results

---
 src/components/Search.js    | 8 +++++---
 src/components/SearchBar.js | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/Search.js b/src/components/Search.js
index 7ea834a6f..9aff27a87 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -13,8 +13,8 @@ class Search extends Component {
         };
     }
 
-    componentDidMount(){
-        axios.get('http://localhost:3001/movies?query=' + this.state.queryString)
+    getSearchResults = (queryString) => {
+        axios.get('http://localhost:3001/movies?query=' + queryString)
         .then((response) => {
             this.setState({
                 searchResults: response.data
@@ -28,11 +28,13 @@ class Search extends Component {
     }
 
     searchCallback = (queryString) => {
-        this.componentDidMount()
         this.setState({
           queryString,
           searched: true
         });
+
+        this.getSearchResults(queryString);
+
     };
 
     addMovieCallback = (movie) => {
diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js
index 326e570a3..7efd14a59 100644
--- a/src/components/SearchBar.js
+++ b/src/components/SearchBar.js
@@ -14,7 +14,7 @@ class SearchBar extends Component {
             queryString
         })
 
-        this.props.searchCallback(queryString);
+        this.props.searchCallback(event.target.value);
     }
     render() {
         return (

From a7cf987cac106754891c23fa52c8ff40ddcee11b Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Wed, 26 Jun 2019 11:23:28 -0700
Subject: [PATCH 14/66] doesn't allow existing movies to be added to the rental
 library

---
 src/App.js               |  2 +-
 src/components/Search.js | 43 +++++++++++++++++++++++-----------------
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/App.js b/src/App.js
index 942f36e9e..abdd991d6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -74,7 +74,7 @@ class App extends Component {
           <Header />
 
           <Route exact path="/" component={Home} />
-          <Route path="/search" render={() => <Search />}/>
+          <Route path="/search" render={() => <Search moviesInLibrary={this.state.movies}/>}/>
           <Route 
             path="/library" 
             render={() => (
diff --git a/src/components/Search.js b/src/components/Search.js
index 9aff27a87..7da4f4c7b 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -38,26 +38,33 @@ class Search extends Component {
     };
 
     addMovieCallback = (movie) => {
-        const movieToApi = {
-            external_id: movie.external_id,
-            image_url: movie.image_url,
-            title: movie.title,
-            overview: movie.overview,
-            release_date: movie.release_date
-        }
-        axios.post('http://localhost:3001/movies', movieToApi)
-        .then((response)=> {
-            if (response.status === 200) {
-                this.setState({
-                    success: "Movie has been added to the rental library!"
-                })
-            }
-        })
-        .catch((error) => {
+
+        if (this.props.moviesInLibrary.find(currentMovie => currentMovie.external_id === movie.external_id)) {
             this.setState({
-                error: error.message
+                error: "Movie already exists!"
             })
-        });
+        } else {
+            const movieToApi = {
+                external_id: movie.external_id,
+                image_url: movie.image_url,
+                title: movie.title,
+                overview: movie.overview,
+                release_date: movie.release_date
+            }
+            axios.post('http://localhost:3001/movies', movieToApi)
+            .then((response)=> {
+                if (response.status === 200) {
+                    this.setState({
+                        success: "Movie has been added to the rental library!"
+                    })
+                }
+            })
+            .catch((error) => {
+                this.setState({
+                    error: error.message
+                })
+            });
+        }
     }
 
     render() {

From 77747a3275b72b551d1389086e8e2dd006da10f0 Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Wed, 26 Jun 2019 11:51:32 -0700
Subject: [PATCH 15/66] working on rental feature

---
 src/App.js               | 59 ++++++++++++++++++++++++++++++++++++++++
 src/components/Rental.js | 40 +++++++++++++++++++++++++++
 2 files changed, 99 insertions(+)
 create mode 100644 src/components/Rental.js

diff --git a/src/App.js b/src/App.js
index 942f36e9e..5f57046a9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,6 +4,7 @@ import './App.css';
 import PropTypes from 'prop-types';
 import Library from './components/Library';
 import Customers from './components/Customers';
+import Rental from './components/Rental';
 import axios from 'axios';
 import Search from './components/Search';
 
@@ -59,6 +60,61 @@ class App extends Component {
 
   }
 
+  formatDate = (time) => {
+    let d = new Date(),
+    month = d.getMonth() + 1,
+    day = d.getDate(),
+    year = d.getFullYear();
+
+    if (time === "now") {
+      day = d.getDate()
+    } else if (time === "future") {
+      day = d.getDate() + 5
+    }
+
+    if (month < 10) month = '0' + month;
+    if (day < 10) day = '0' + day;
+
+    return [year, month, day].join('/');
+  }
+  // Referred to this post for formatting date: https://stackoverflow.com/questions/23593052/format-javascript-date-to-yyyy-mm-dd
+
+
+  rentMovie = () => {
+    const movie = this.state.rentedMovie
+    const customer = this.state.chosenCustomer
+
+    const dueDate = this.formatDate("future")
+    const checkoutDate = this.formatDate("now")
+
+    const url = `http://localhost:3001/rentals/${movie.title}/check-out`
+
+    axios.post(url, {
+      customer_id: customer.id,
+      due_date: dueDate
+    })
+    .then((response)=> {
+      console.log(response)
+        // if (response.status === 200) {
+          console.log('success')
+            this.setState({
+                success: `Rented! "${movie.title}" checked out by ${customer.name}`,
+                rentedMovie: undefined,
+                chosenCustomer: undefined,
+            })
+            return (
+              <Rental movie={movie} customer={customer} checkoutDate={checkoutDate} dueDate={dueDate} />
+            )
+        // }
+    })
+    .catch((error) => {
+      console.log(error)
+      console.log('err')
+        this.setState({
+            error: error.message
+        })
+    });
+  }
 
   render() {
     const errorSection = (this.state.error) ?
@@ -71,6 +127,9 @@ class App extends Component {
 
           { this.state.chosenCustomer && <p>Customer Selection: {this.state.chosenCustomer.name}</p> }
 
+          { this.state.rentedMovie && this.state.chosenCustomer && <button onClick={this.rentMovie}>Rent Movie</button>}
+          {/* <Rental movie={this.state.rentedMovie} customer={this.state.chosenCustomer} dueDate="" /> } */}
+
           <Header />
 
           <Route exact path="/" component={Home} />
diff --git a/src/components/Rental.js b/src/components/Rental.js
new file mode 100644
index 000000000..54b7f4ad1
--- /dev/null
+++ b/src/components/Rental.js
@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+// import axios from 'axios';
+// import './Rental.css';
+
+const Rental = (props) => {
+  // const rentMovie = () => {
+  //   const title = props.movie.title
+  //   axios.post(`http://localhost:3001/rentals/${title}/check-out`)
+  //   .then((response)=> {
+  //       if (response.status === 200) {
+  //           this.setState({
+  //               success: `Rented! "${props.movie.title}" checked out by ${props.chosenCustomer.name} `
+  //           })
+  //       }
+  //   })
+  //   .catch((error) => {
+  //       this.setState({
+  //           error: error.message
+  //       })
+  //   });
+  // }
+  return (
+    <div>
+      {/* <button onClick={rentMovie}>Rent Movie</button> */}
+      {props.customer}
+      {props.movie}
+      {props.dueDate}
+    </div>
+  )
+}
+
+Rental.propTypes = {
+  movie: PropTypes.object.isRequired,
+  customer: PropTypes.object.isRequired,
+  checkoutDate: PropTypes.string.isRequired,
+  dueDate: PropTypes.string.isRequired,
+};
+
+export default Rental;
\ No newline at end of file

From 55cfc47c34c1cc91125bba68079ffa2b84b38958 Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Wed, 26 Jun 2019 13:09:55 -0700
Subject: [PATCH 16/66] able to rent a movie

---
 package-lock.json        | 273 +++++++++++++++++++++++++++++++++++++++
 package.json             |   2 +
 src/App.js               |  67 ++++------
 src/components/Rental.js |  21 +--
 4 files changed, 304 insertions(+), 59 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9bc9f54a4..db958783b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1162,6 +1162,39 @@
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
     },
+    "@react-bootstrap/react-popper": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@react-bootstrap/react-popper/-/react-popper-1.2.1.tgz",
+      "integrity": "sha512-4l3q7LcZEhrSkI4d3Ie3g4CdrXqqTexXX4PFT45CB0z5z2JUbaxgRwKNq7r5j2bLdVpZm+uvUGqxJw8d9vgbJQ==",
+      "requires": {
+        "babel-runtime": "6.x.x",
+        "create-react-context": "^0.2.1",
+        "popper.js": "^1.14.4",
+        "prop-types": "^15.6.1",
+        "typed-styles": "^0.0.5",
+        "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.0.0"
+          }
+        }
+      }
+    },
+    "@restart/context": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
+      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
+    },
+    "@restart/hooks": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.1.tgz",
+      "integrity": "sha512-kjGGlli8iTe5TFDw6qHZJ5QK1naITMveIO+o8yQJJqwX8VIkiQzLddK98Lduga2krJMzWlNqDR/4isGLiyBlUA=="
+    },
     "@svgr/babel-plugin-add-jsx-attribute": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz",
@@ -2428,6 +2461,11 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "bootstrap": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz",
+      "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -3359,6 +3397,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-css": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
@@ -3709,6 +3752,15 @@
         "sha.js": "^2.4.8"
       }
     },
+    "create-react-context": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.3.tgz",
+      "integrity": "sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==",
+      "requires": {
+        "fbjs": "^0.8.0",
+        "gud": "^1.0.0"
+      }
+    },
     "cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -4266,6 +4318,14 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+      "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "dom-serializer": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
@@ -4392,6 +4452,14 @@
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
     },
+    "encoding": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
+      "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
+      "requires": {
+        "iconv-lite": "~0.4.13"
+      }
+    },
     "end-of-stream": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
@@ -5232,6 +5300,35 @@
         "bser": "^2.0.0"
       }
     },
+    "fbjs": {
+      "version": "0.8.17",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
+      "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
+      "requires": {
+        "core-js": "^1.0.0",
+        "isomorphic-fetch": "^2.1.1",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.18"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "1.2.7",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+        },
+        "promise": {
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+          "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+          "requires": {
+            "asap": "~2.0.3"
+          }
+        }
+      }
+    },
     "figgy-pudding": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz",
@@ -6436,6 +6533,15 @@
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
       "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
     },
+    "isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
+      "requires": {
+        "node-fetch": "^1.0.1",
+        "whatwg-fetch": ">=0.10.0"
+      }
+    },
     "isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -7759,6 +7865,11 @@
         "array-includes": "^3.0.3"
       }
     },
+    "keycode": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
+      "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ="
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -8398,6 +8509,15 @@
         "lower-case": "^1.1.1"
       }
     },
+    "node-fetch": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+      "requires": {
+        "encoding": "^0.1.11",
+        "is-stream": "^1.0.1"
+      }
+    },
     "node-forge": {
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz",
@@ -9051,6 +9171,11 @@
         "ts-pnp": "^1.0.0"
       }
     },
+    "popper.js": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz",
+      "integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA=="
+    },
     "portfinder": {
       "version": "1.0.20",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz",
@@ -9992,6 +10117,25 @@
         "react-is": "^16.8.1"
       }
     },
+    "prop-types-extra": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.0.tgz",
+      "integrity": "sha512-QFyuDxvMipmIVKD2TwxLVPzMnO4e5oOf1vr3tJIomL8E7d0lr6phTHd5nkPhFIzTD1idBLLEPeylL9g+rrTzRg==",
+      "requires": {
+        "react-is": "^16.3.2",
+        "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.0.0"
+          }
+        }
+      }
+    },
     "property-information": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.1.0.tgz",
@@ -10164,6 +10308,33 @@
         "whatwg-fetch": "3.0.0"
       }
     },
+    "react-bootstrap": {
+      "version": "1.0.0-beta.9",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.0.0-beta.9.tgz",
+      "integrity": "sha512-M0BYLuuUdMITJ16+DDDb1p4vWV87csEBi/uOxZYODuDZh7hvbrJVahfvPXcqeqq4eEpNL+PKSlqb9fNaY0HZyA==",
+      "requires": {
+        "@babel/runtime": "^7.4.2",
+        "@react-bootstrap/react-popper": "1.2.1",
+        "@restart/context": "^2.1.4",
+        "@restart/hooks": "^0.3.0",
+        "classnames": "^2.2.6",
+        "dom-helpers": "^3.4.0",
+        "invariant": "^2.2.4",
+        "keycode": "^2.2.0",
+        "popper.js": "^1.14.7",
+        "prop-types": "^15.7.2",
+        "prop-types-extra": "^1.1.0",
+        "react-overlays": "^1.2.0",
+        "react-transition-group": "^4.0.0",
+        "uncontrollable": "^6.1.0",
+        "warning": "^4.0.3"
+      }
+    },
+    "react-context-toolbox": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/react-context-toolbox/-/react-context-toolbox-2.0.2.tgz",
+      "integrity": "sha512-tY4j0imkYC3n5ZlYSgFkaw7fmlCp3IoQQ6DxpqeNHzcD0hf+6V+/HeJxviLUZ1Rv1Yn3N3xyO2EhkkZwHn0m1A=="
+    },
     "react-dev-utils": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-9.0.1.tgz",
@@ -10262,6 +10433,50 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
       "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
     },
+    "react-overlays": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-1.2.0.tgz",
+      "integrity": "sha512-i/FCV8wR6aRaI+Kz/dpJhOdyx+ah2tN1RhT9InPrexyC4uzf3N4bNayFTGtUeQVacj57j1Mqh1CwV60/5153Iw==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "dom-helpers": "^3.4.0",
+        "prop-types": "^15.6.2",
+        "prop-types-extra": "^1.1.0",
+        "react-context-toolbox": "^2.0.2",
+        "react-popper": "^1.3.2",
+        "uncontrollable": "^6.0.0",
+        "warning": "^4.0.2"
+      }
+    },
+    "react-popper": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.3.tgz",
+      "integrity": "sha512-ynMZBPkXONPc5K4P5yFWgZx5JGAUIP3pGGLNs58cfAPgK67olx7fmLp+AdpZ0+GoQ+ieFDa/z4cdV6u7sioH6w==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "create-react-context": "<=0.2.2",
+        "popper.js": "^1.14.4",
+        "prop-types": "^15.6.1",
+        "typed-styles": "^0.0.7",
+        "warning": "^4.0.2"
+      },
+      "dependencies": {
+        "create-react-context": {
+          "version": "0.2.2",
+          "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.2.tgz",
+          "integrity": "sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==",
+          "requires": {
+            "fbjs": "^0.8.0",
+            "gud": "^1.0.0"
+          }
+        },
+        "typed-styles": {
+          "version": "0.0.7",
+          "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
+          "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q=="
+        }
+      }
+    },
     "react-router": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.0.1.tgz",
@@ -10368,6 +10583,27 @@
         "workbox-webpack-plugin": "4.2.0"
       }
     },
+    "react-transition-group": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.1.1.tgz",
+      "integrity": "sha512-K/N1wqJ2GRP2yj3WBqEUYa0KV5fiaAWpUfU9SpHOHefeKvyrO+VrnMBML21M19QZoVbDZKmuQFHZYoMMi1xuJA==",
+      "requires": {
+        "@babel/runtime": "^7.4.5",
+        "dom-helpers": "^3.4.0",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.4.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.5.tgz",
+          "integrity": "sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        }
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -11950,11 +12186,21 @@
         "mime-types": "~2.1.24"
       }
     },
+    "typed-styles": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.5.tgz",
+      "integrity": "sha512-ht+rEe5UsdEBAa3gr64+QjUOqjOLJfWLvl5HZR5Ev9uo/OnD3p43wPeFSB1hNFc13GXQF/JU1Bn0YHLUqBRIlw=="
+    },
     "typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
+    "ua-parser-js": {
+      "version": "0.7.20",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.20.tgz",
+      "integrity": "sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw=="
+    },
     "uglify-js": {
       "version": "3.4.10",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
@@ -11976,6 +12222,25 @@
         }
       }
     },
+    "uncontrollable": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-6.2.3.tgz",
+      "integrity": "sha512-VgOAoBU2ptCL2bfTG2Mra0I8i1u6Aq84AFonD5tmCAYSfs3hWvr2Rlw0q2ntoxXTHjcQOmZOh3FKaN+UZVyREQ==",
+      "requires": {
+        "@babel/runtime": "^7.4.5",
+        "invariant": "^2.2.4"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.4.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.5.tgz",
+          "integrity": "sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        }
+      }
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@@ -12346,6 +12611,14 @@
         "makeerror": "1.0.x"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
diff --git a/package.json b/package.json
index eeff31f0a..e092f2f8c 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,9 @@
   "private": true,
   "dependencies": {
     "axios": "^0.19.0",
+    "bootstrap": "^4.3.1",
     "react": "^16.8.6",
+    "react-bootstrap": "^1.0.0-beta.9",
     "react-dom": "^16.8.6",
     "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.1"
diff --git a/src/App.js b/src/App.js
index 5f57046a9..fc952d060 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 import './App.css';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
 import Library from './components/Library';
 import Customers from './components/Customers';
 import Rental from './components/Rental';
@@ -60,55 +60,44 @@ class App extends Component {
 
   }
 
-  formatDate = (time) => {
-    let d = new Date(),
-    month = d.getMonth() + 1,
-    day = d.getDate(),
-    year = d.getFullYear();
-
-    if (time === "now") {
-      day = d.getDate()
-    } else if (time === "future") {
-      day = d.getDate() + 5
-    }
-
-    if (month < 10) month = '0' + month;
-    if (day < 10) day = '0' + day;
-
-    return [year, month, day].join('/');
-  }
-  // Referred to this post for formatting date: https://stackoverflow.com/questions/23593052/format-javascript-date-to-yyyy-mm-dd
-
-
   rentMovie = () => {
     const movie = this.state.rentedMovie
     const customer = this.state.chosenCustomer
 
-    const dueDate = this.formatDate("future")
-    const checkoutDate = this.formatDate("now")
+    const checkoutDate = new Date();
+    const dueDate = new Date();
+    dueDate.setDate(dueDate.getDate() + 7 );
+
+    const checkoutDateFormatted = `${checkoutDate.getFullYear()}/${checkoutDate.getMonth() + 1}/${checkoutDate.getDate()}`;
+    const dueDateFormatted = `${dueDate.getFullYear()}/${dueDate.getMonth() + 1}/${dueDate.getDate()}`;
+
+    console.log(checkoutDate);
+    console.log(checkoutDateFormatted);
+    console.log(dueDate);
+    console.log(dueDateFormatted);
 
-    const url = `http://localhost:3001/rentals/${movie.title}/check-out`
 
-    axios.post(url, {
+    const url = `http://localhost:3001/rentals/${movie.title}/check-out`;
+
+    const params = {
+      due_date: dueDate,
       customer_id: customer.id,
-      due_date: dueDate
-    })
+    }
+    axios.post(url, params)
     .then((response)=> {
       console.log(response)
-        // if (response.status === 200) {
-          console.log('success')
-            this.setState({
-                success: `Rented! "${movie.title}" checked out by ${customer.name}`,
-                rentedMovie: undefined,
-                chosenCustomer: undefined,
-            })
-            return (
-              <Rental movie={movie} customer={customer} checkoutDate={checkoutDate} dueDate={dueDate} />
-            )
-        // }
+      console.log(`Rented! "${movie.title}" checked out by ${customer.name}`)
+
+          this.setState({
+              rentedMovie: undefined,
+              chosenCustomer: undefined,
+          })
+        return (
+          <Rental movie={movie} customer={customer} checkoutDate={checkoutDateFormatted} dueDate={dueDateFormatted} />
+        )
     })
     .catch((error) => {
-      console.log(error)
+      console.log(error.message)
       console.log('err')
         this.setState({
             error: error.message
diff --git a/src/components/Rental.js b/src/components/Rental.js
index 54b7f4ad1..553689dbf 100644
--- a/src/components/Rental.js
+++ b/src/components/Rental.js
@@ -4,28 +4,9 @@ import PropTypes from 'prop-types';
 // import './Rental.css';
 
 const Rental = (props) => {
-  // const rentMovie = () => {
-  //   const title = props.movie.title
-  //   axios.post(`http://localhost:3001/rentals/${title}/check-out`)
-  //   .then((response)=> {
-  //       if (response.status === 200) {
-  //           this.setState({
-  //               success: `Rented! "${props.movie.title}" checked out by ${props.chosenCustomer.name} `
-  //           })
-  //       }
-  //   })
-  //   .catch((error) => {
-  //       this.setState({
-  //           error: error.message
-  //       })
-  //   });
-  // }
   return (
     <div>
-      {/* <button onClick={rentMovie}>Rent Movie</button> */}
-      {props.customer}
-      {props.movie}
-      {props.dueDate}
+      {props.customer}, {props.movie}, {props.dueDate}
     </div>
   )
 }

From e712ceb77bab370dd0c82b65744824e7006c0531 Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Wed, 26 Jun 2019 13:16:37 -0700
Subject: [PATCH 17/66] moved errer section higher on app

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

diff --git a/src/App.js b/src/App.js
index fc952d060..9b29dfba1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -83,6 +83,7 @@ class App extends Component {
       due_date: dueDate,
       customer_id: customer.id,
     }
+
     axios.post(url, params)
     .then((response)=> {
       console.log(response)
@@ -97,8 +98,6 @@ class App extends Component {
         )
     })
     .catch((error) => {
-      console.log(error.message)
-      console.log('err')
         this.setState({
             error: error.message
         })
@@ -120,6 +119,7 @@ class App extends Component {
           {/* <Rental movie={this.state.rentedMovie} customer={this.state.chosenCustomer} dueDate="" /> } */}
 
           <Header />
+          {errorSection}
 
           <Route exact path="/" component={Home} />
           <Route path="/search" render={() => <Search />}/>
@@ -143,8 +143,6 @@ class App extends Component {
               />
             )} 
           />
-
-          {errorSection}
         </div>
       </Router>
     );

From ca9aca56b85d3bd9b799965111c5a997990e31f4 Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Wed, 26 Jun 2019 14:18:48 -0700
Subject: [PATCH 18/66] added styles

---
 package-lock.json            | 273 +++++++++++++++++++++++++++++++++++
 package.json                 |   2 +
 src/App.css                  |   1 +
 src/App.js                   |  32 ++--
 src/components/Customer.js   |   7 +-
 src/components/Customers.js  |  17 ++-
 src/components/Details.css   |   3 +
 src/components/Details.js    |  20 ++-
 src/components/Library.js    |  30 ++--
 src/components/Movie.js      |   9 +-
 src/components/MovieCard.js  |   3 +-
 src/components/Search.css    |   4 +
 src/components/Search.js     |   7 +-
 src/components/SearchBar.css |   7 +
 src/components/SearchBar.js  |  25 ++--
 src/index.js                 |   1 +
 16 files changed, 383 insertions(+), 58 deletions(-)
 create mode 100644 src/components/Details.css
 create mode 100644 src/components/Search.css
 create mode 100644 src/components/SearchBar.css

diff --git a/package-lock.json b/package-lock.json
index 9bc9f54a4..db958783b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1162,6 +1162,39 @@
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
     },
+    "@react-bootstrap/react-popper": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@react-bootstrap/react-popper/-/react-popper-1.2.1.tgz",
+      "integrity": "sha512-4l3q7LcZEhrSkI4d3Ie3g4CdrXqqTexXX4PFT45CB0z5z2JUbaxgRwKNq7r5j2bLdVpZm+uvUGqxJw8d9vgbJQ==",
+      "requires": {
+        "babel-runtime": "6.x.x",
+        "create-react-context": "^0.2.1",
+        "popper.js": "^1.14.4",
+        "prop-types": "^15.6.1",
+        "typed-styles": "^0.0.5",
+        "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.0.0"
+          }
+        }
+      }
+    },
+    "@restart/context": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
+      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
+    },
+    "@restart/hooks": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.1.tgz",
+      "integrity": "sha512-kjGGlli8iTe5TFDw6qHZJ5QK1naITMveIO+o8yQJJqwX8VIkiQzLddK98Lduga2krJMzWlNqDR/4isGLiyBlUA=="
+    },
     "@svgr/babel-plugin-add-jsx-attribute": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz",
@@ -2428,6 +2461,11 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "bootstrap": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz",
+      "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -3359,6 +3397,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-css": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
@@ -3709,6 +3752,15 @@
         "sha.js": "^2.4.8"
       }
     },
+    "create-react-context": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.3.tgz",
+      "integrity": "sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==",
+      "requires": {
+        "fbjs": "^0.8.0",
+        "gud": "^1.0.0"
+      }
+    },
     "cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -4266,6 +4318,14 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+      "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "dom-serializer": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
@@ -4392,6 +4452,14 @@
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
     },
+    "encoding": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
+      "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
+      "requires": {
+        "iconv-lite": "~0.4.13"
+      }
+    },
     "end-of-stream": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
@@ -5232,6 +5300,35 @@
         "bser": "^2.0.0"
       }
     },
+    "fbjs": {
+      "version": "0.8.17",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
+      "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
+      "requires": {
+        "core-js": "^1.0.0",
+        "isomorphic-fetch": "^2.1.1",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.18"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "1.2.7",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+        },
+        "promise": {
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+          "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+          "requires": {
+            "asap": "~2.0.3"
+          }
+        }
+      }
+    },
     "figgy-pudding": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz",
@@ -6436,6 +6533,15 @@
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
       "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
     },
+    "isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
+      "requires": {
+        "node-fetch": "^1.0.1",
+        "whatwg-fetch": ">=0.10.0"
+      }
+    },
     "isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -7759,6 +7865,11 @@
         "array-includes": "^3.0.3"
       }
     },
+    "keycode": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
+      "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ="
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -8398,6 +8509,15 @@
         "lower-case": "^1.1.1"
       }
     },
+    "node-fetch": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+      "requires": {
+        "encoding": "^0.1.11",
+        "is-stream": "^1.0.1"
+      }
+    },
     "node-forge": {
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz",
@@ -9051,6 +9171,11 @@
         "ts-pnp": "^1.0.0"
       }
     },
+    "popper.js": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz",
+      "integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA=="
+    },
     "portfinder": {
       "version": "1.0.20",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz",
@@ -9992,6 +10117,25 @@
         "react-is": "^16.8.1"
       }
     },
+    "prop-types-extra": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.0.tgz",
+      "integrity": "sha512-QFyuDxvMipmIVKD2TwxLVPzMnO4e5oOf1vr3tJIomL8E7d0lr6phTHd5nkPhFIzTD1idBLLEPeylL9g+rrTzRg==",
+      "requires": {
+        "react-is": "^16.3.2",
+        "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.0.0"
+          }
+        }
+      }
+    },
     "property-information": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.1.0.tgz",
@@ -10164,6 +10308,33 @@
         "whatwg-fetch": "3.0.0"
       }
     },
+    "react-bootstrap": {
+      "version": "1.0.0-beta.9",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.0.0-beta.9.tgz",
+      "integrity": "sha512-M0BYLuuUdMITJ16+DDDb1p4vWV87csEBi/uOxZYODuDZh7hvbrJVahfvPXcqeqq4eEpNL+PKSlqb9fNaY0HZyA==",
+      "requires": {
+        "@babel/runtime": "^7.4.2",
+        "@react-bootstrap/react-popper": "1.2.1",
+        "@restart/context": "^2.1.4",
+        "@restart/hooks": "^0.3.0",
+        "classnames": "^2.2.6",
+        "dom-helpers": "^3.4.0",
+        "invariant": "^2.2.4",
+        "keycode": "^2.2.0",
+        "popper.js": "^1.14.7",
+        "prop-types": "^15.7.2",
+        "prop-types-extra": "^1.1.0",
+        "react-overlays": "^1.2.0",
+        "react-transition-group": "^4.0.0",
+        "uncontrollable": "^6.1.0",
+        "warning": "^4.0.3"
+      }
+    },
+    "react-context-toolbox": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/react-context-toolbox/-/react-context-toolbox-2.0.2.tgz",
+      "integrity": "sha512-tY4j0imkYC3n5ZlYSgFkaw7fmlCp3IoQQ6DxpqeNHzcD0hf+6V+/HeJxviLUZ1Rv1Yn3N3xyO2EhkkZwHn0m1A=="
+    },
     "react-dev-utils": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-9.0.1.tgz",
@@ -10262,6 +10433,50 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
       "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
     },
+    "react-overlays": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-1.2.0.tgz",
+      "integrity": "sha512-i/FCV8wR6aRaI+Kz/dpJhOdyx+ah2tN1RhT9InPrexyC4uzf3N4bNayFTGtUeQVacj57j1Mqh1CwV60/5153Iw==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "dom-helpers": "^3.4.0",
+        "prop-types": "^15.6.2",
+        "prop-types-extra": "^1.1.0",
+        "react-context-toolbox": "^2.0.2",
+        "react-popper": "^1.3.2",
+        "uncontrollable": "^6.0.0",
+        "warning": "^4.0.2"
+      }
+    },
+    "react-popper": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.3.tgz",
+      "integrity": "sha512-ynMZBPkXONPc5K4P5yFWgZx5JGAUIP3pGGLNs58cfAPgK67olx7fmLp+AdpZ0+GoQ+ieFDa/z4cdV6u7sioH6w==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "create-react-context": "<=0.2.2",
+        "popper.js": "^1.14.4",
+        "prop-types": "^15.6.1",
+        "typed-styles": "^0.0.7",
+        "warning": "^4.0.2"
+      },
+      "dependencies": {
+        "create-react-context": {
+          "version": "0.2.2",
+          "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.2.tgz",
+          "integrity": "sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==",
+          "requires": {
+            "fbjs": "^0.8.0",
+            "gud": "^1.0.0"
+          }
+        },
+        "typed-styles": {
+          "version": "0.0.7",
+          "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
+          "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q=="
+        }
+      }
+    },
     "react-router": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.0.1.tgz",
@@ -10368,6 +10583,27 @@
         "workbox-webpack-plugin": "4.2.0"
       }
     },
+    "react-transition-group": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.1.1.tgz",
+      "integrity": "sha512-K/N1wqJ2GRP2yj3WBqEUYa0KV5fiaAWpUfU9SpHOHefeKvyrO+VrnMBML21M19QZoVbDZKmuQFHZYoMMi1xuJA==",
+      "requires": {
+        "@babel/runtime": "^7.4.5",
+        "dom-helpers": "^3.4.0",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.4.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.5.tgz",
+          "integrity": "sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        }
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -11950,11 +12186,21 @@
         "mime-types": "~2.1.24"
       }
     },
+    "typed-styles": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.5.tgz",
+      "integrity": "sha512-ht+rEe5UsdEBAa3gr64+QjUOqjOLJfWLvl5HZR5Ev9uo/OnD3p43wPeFSB1hNFc13GXQF/JU1Bn0YHLUqBRIlw=="
+    },
     "typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
+    "ua-parser-js": {
+      "version": "0.7.20",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.20.tgz",
+      "integrity": "sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw=="
+    },
     "uglify-js": {
       "version": "3.4.10",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
@@ -11976,6 +12222,25 @@
         }
       }
     },
+    "uncontrollable": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-6.2.3.tgz",
+      "integrity": "sha512-VgOAoBU2ptCL2bfTG2Mra0I8i1u6Aq84AFonD5tmCAYSfs3hWvr2Rlw0q2ntoxXTHjcQOmZOh3FKaN+UZVyREQ==",
+      "requires": {
+        "@babel/runtime": "^7.4.5",
+        "invariant": "^2.2.4"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.4.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.5.tgz",
+          "integrity": "sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        }
+      }
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@@ -12346,6 +12611,14 @@
         "makeerror": "1.0.x"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
diff --git a/package.json b/package.json
index eeff31f0a..e092f2f8c 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,9 @@
   "private": true,
   "dependencies": {
     "axios": "^0.19.0",
+    "bootstrap": "^4.3.1",
     "react": "^16.8.6",
+    "react-bootstrap": "^1.0.0-beta.9",
     "react-dom": "^16.8.6",
     "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.1"
diff --git a/src/App.css b/src/App.css
index c5c6e8a68..b46285012 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,3 +1,4 @@
+
 .App {
   text-align: center;
 }
diff --git a/src/App.js b/src/App.js
index abdd991d6..0c3264bf9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,7 @@
 import React, { Component } from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import Nav from 'react-bootstrap/Nav';
+import Navbar from 'react-bootstrap/Navbar';
 import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 import './App.css';
 import PropTypes from 'prop-types';
@@ -7,6 +10,7 @@ import Customers from './components/Customers';
 import axios from 'axios';
 import Search from './components/Search';
 
+
 class App extends Component {
   constructor() {
     super();
@@ -67,12 +71,11 @@ class App extends Component {
     return (
       <Router>
         <div>
+          <Header />
           { this.state.rentedMovie && <p>Movie Selection: {this.state.rentedMovie.title}</p> }
 
           { this.state.chosenCustomer && <p>Customer Selection: {this.state.chosenCustomer.name}</p> }
-
-          <Header />
-
+          
           <Route exact path="/" component={Home} />
           <Route path="/search" render={() => <Search moviesInLibrary={this.state.movies}/>}/>
           <Route 
@@ -109,20 +112,15 @@ function Home() {
 
 function Header() {
   return (
-    <ul>
-      <li>
-        <Link to="/">Home</Link>
-      </li>
-      <li>
-        <Link to="/search">Search</Link>
-      </li>
-      <li>
-        <Link to="/library">Library</Link>
-      </li>
-      <li>
-        <Link to="/customers">Customers</Link>
-      </li>
-    </ul>
+    <Navbar bg="primary" variant="dark">
+    <Navbar.Brand href="/">Video World</Navbar.Brand>
+    <Nav className="mr-auto">
+      <Nav.Link href="/">Home</Nav.Link>
+      <Nav.Link href="/search">Search</Nav.Link>
+      <Nav.Link href="/library">Library</Nav.Link>
+      <Nav.Link href="/customers">Customers</Nav.Link>
+    </Nav>
+    </Navbar>
   );
 }
 
diff --git a/src/components/Customer.js b/src/components/Customer.js
index a931bd6d8..7478fb743 100644
--- a/src/components/Customer.js
+++ b/src/components/Customer.js
@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import Button from 'react-bootstrap/Button'
+
 // import axios from 'axios';
 // import './Customer.css';
 
@@ -9,7 +11,10 @@ const Customer = (props) => {
   }
 
   return (
-    <div>{props.name}<button onClick={onClickButton}>Select Customer</button></div>
+    <tr>
+      <td>{props.name}</td>
+      <td><Button onClick={onClickButton}>Select Customer</Button></td>
+    </tr>
   )
 }
 
diff --git a/src/components/Customers.js b/src/components/Customers.js
index 389c10bfc..d217ebcf4 100644
--- a/src/components/Customers.js
+++ b/src/components/Customers.js
@@ -1,19 +1,28 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Customer from './Customer';
+import Table from 'react-bootstrap/Table'
+
 // import axios from 'axios';
 // import './Customers.css';
 
 const Customers = (props) => {
   const customerCollection = props.customers.map((customer, i) => {
-    return <li key={i}><Customer id={customer.id} name={customer.name} onSelectCustomerCallback={props.onSelectCustomerCallback}/></li>
+    return <Customer key={i} id={customer.id} name={customer.name} onSelectCustomerCallback={props.onSelectCustomerCallback}/>
    });
 
   return (
-    <div>
+    <section>
       <h2>Customers</h2>
-      <ul>{customerCollection}</ul>
-    </div>
+      <Table>
+        <thead>
+          <tr>
+            <th>Customer Name</th>
+          </tr>
+        </thead>
+        <tbody>{customerCollection}</tbody>
+      </Table>
+    </section>
   )
 }
 
diff --git a/src/components/Details.css b/src/components/Details.css
new file mode 100644
index 000000000..1a728b7ba
--- /dev/null
+++ b/src/components/Details.css
@@ -0,0 +1,3 @@
+.pic {
+    width: 200px;
+}
\ No newline at end of file
diff --git a/src/components/Details.js b/src/components/Details.js
index 4633024c3..4bdebb034 100644
--- a/src/components/Details.js
+++ b/src/components/Details.js
@@ -1,18 +1,22 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import Card from 'react-bootstrap/Card';
+import './Details.css';
 // import './Library.css';
 
 const Details = (props) => {
   const movieDetails = () => {
     return (
-      <ul>
-        <li>Id: {props.id}</li>
-        <li>Title: {props.title}</li>
-        <li>Overview: {props.overview} </li>
-        <li>Release Date: {props.release_date}</li>
-        <li><img src={props.image_url} alt={`${props.title}`}/></li>
-        <li>External Id: {props.external_id}</li>
-      </ul>
+      <Card>
+        <Card.Img variant="top" class="pic" src={props.image_url} alt={`${props.title}`}/>
+        <Card.Body>
+          <Card.Title>Title: {props.title}</Card.Title>
+          <Card.Text>Overview: {props.overview} </Card.Text>
+          <li>Id: {props.id}</li>
+          <li>Release Date: {props.release_date}</li>
+          <li>External Id: {props.external_id}</li>
+        </Card.Body>
+      </Card>
     )
   };
 
diff --git a/src/components/Library.js b/src/components/Library.js
index 56dc5609e..8309f563e 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -1,25 +1,33 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Movie from './Movie';
+import Table from 'react-bootstrap/Table'
+
 // import './Library.css';
 
 const Library = (props) => {
   const movieCollection = props.library.map((movie, i) => {
-    return <li key={i}>
-      <Movie 
-        movie={movie} 
-        viewMovieDetails={props.expandedMovies[movie.id]} 
-        onClickDetailsCallback={props.onClickDetailsCallback} 
-        onSelectMovieCallback={props.onSelectMovieCallback}
-      />
-    </li>
+    return <Movie key={i} 
+            movie={movie} 
+            viewMovieDetails={props.expandedMovies[movie.id]} 
+            onClickDetailsCallback={props.onClickDetailsCallback} 
+            onSelectMovieCallback={props.onSelectMovieCallback}/>
    });
    
   return (
-    <div>
+    <section>
       <h2>Library</h2>
-      <ul>{movieCollection}</ul>
-    </div>
+      <thead>
+        <tr>
+          <th>Movie Title</th>
+        </tr>
+      </thead>
+      <Table>
+        <tbody>
+          {movieCollection}
+        </tbody>
+      </Table>
+    </section>
   )
 }
 
diff --git a/src/components/Movie.js b/src/components/Movie.js
index 60b481bac..6b133ca11 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -13,11 +13,12 @@ const Movie = (props) => {
   }
   
   return (
-    <div>{props.movie.title}
-      <button onClick={onClickDetailsButton}>View Details</button>
-      <button onClick={onClickButton}>Select Movie</button>
+    <tr>
+      <td>{props.movie.title}</td>
+      <td><button onClick={onClickDetailsButton}>View Details</button></td>
+      <td><button onClick={onClickButton}>Select Movie</button></td>
       {props.viewMovieDetails && <Details {...props.movie} />}
-    </div>
+    </tr>
   )
 }
 
diff --git a/src/components/MovieCard.js b/src/components/MovieCard.js
index df196e91d..54be0e509 100644
--- a/src/components/MovieCard.js
+++ b/src/components/MovieCard.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import Button from 'react-bootstrap/Button'
 
 const MovieCard = (props) => {
     const {image_url, title, overview, release_date,addMovieCallback } = props;
@@ -11,7 +12,7 @@ const MovieCard = (props) => {
             <td>{title}</td>
             <td>{overview}</td>
             <td>{release_date}</td>
-            <td><button onClick={addMovie}>Add to Library</button></td>
+            <td><Button onClick={addMovie}>Add to Library</Button></td>
         </tr>
     )
 }
diff --git a/src/components/Search.css b/src/components/Search.css
new file mode 100644
index 000000000..3034fa63e
--- /dev/null
+++ b/src/components/Search.css
@@ -0,0 +1,4 @@
+.search_title {
+    text-align: center;
+    margin-top: 5rem;
+}
\ No newline at end of file
diff --git a/src/components/Search.js b/src/components/Search.js
index 7da4f4c7b..cb204dd53 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -2,6 +2,8 @@ import React, {Component} from 'react';
 import SearchBar from './SearchBar';
 import MovieCard from './MovieCard';
 import axios from 'axios';
+import Table from 'react-bootstrap/Table';
+import './Search.css';
 class Search extends Component {
     constructor(props) {
         super(props);
@@ -108,16 +110,17 @@ class Search extends Component {
 
         return (
             <section>
+                <h3 className="search_title">Search for Movies</h3>
                 <SearchBar searchCallback={this.searchCallback}/>
                 {errorSection}
                 {successSection}
-                <table>
+                <Table>
                         {tableHeader}
                     <tbody>
                         {movieCards}
                     </tbody>
                 
-                </table>
+                </Table>
 
             </section>
         )
diff --git a/src/components/SearchBar.css b/src/components/SearchBar.css
new file mode 100644
index 000000000..68e7ca272
--- /dev/null
+++ b/src/components/SearchBar.css
@@ -0,0 +1,7 @@
+.search_bar {
+  margin: 20px auto;
+  width: 100%;
+  max-width: 300px;
+  height: 40px; 
+  text-align: center; 
+}
\ No newline at end of file
diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js
index 7efd14a59..908e0f3bd 100644
--- a/src/components/SearchBar.js
+++ b/src/components/SearchBar.js
@@ -1,4 +1,10 @@
 import React, {Component} from 'react';
+import Form from 'react-bootstrap/Form';
+import FormControl from 'react-bootstrap/FormControl';
+import Button from 'react-bootstrap/Button';
+import './SearchBar.css';
+
+
 class SearchBar extends Component {
     constructor(props) {
         super(props);
@@ -8,7 +14,6 @@ class SearchBar extends Component {
     }
 
     queryChanged = (event) => {
-        // event.preventDefault();
         const queryString = event.target.value;
         this.setState({
             queryString
@@ -18,15 +23,15 @@ class SearchBar extends Component {
     }
     render() {
         return (
-            <section>
-                <label>
-                    Search <input name="search"
-                                type="text"
-                                value={this.state.queryString}
-                                onChange={this.queryChanged}/>
-
-                </label>
-            </section>
+            <div className="search_bar">
+                <Form>
+                    <FormControl type="text" placeholder="Search"
+                        name="search"
+                        type="text"
+                        value={this.state.queryString}
+                        onChange={this.queryChanged} />
+                </Form>
+            </div>
         )
     }
 };
diff --git a/src/index.js b/src/index.js
index fae3e3500..cb6856b7c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
+import 'bootstrap/dist/css/bootstrap.css';
 
 ReactDOM.render(<App />, document.getElementById('root'));
 registerServiceWorker();

From 636e2ef84807cc8f8bb736307178992a3b44854a Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Wed, 26 Jun 2019 14:36:26 -0700
Subject: [PATCH 19/66] fixed issues with customer selection

---
 src/App.css |  5 +++++
 src/App.js  | 10 +++++-----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/App.css b/src/App.css
index b46285012..06f869435 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,4 +1,9 @@
 
+.nav_link {
+  color: white;
+  margin-right: 2rem;
+}
+
 .App {
   text-align: center;
 }
diff --git a/src/App.js b/src/App.js
index 0c3264bf9..1959e1ce3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -67,7 +67,7 @@ class App extends Component {
   render() {
     const errorSection = (this.state.error) ?
     (<section>Error: {this.state.error}</section>) : null;
-
+    console.log(this.state)
     return (
       <Router>
         <div>
@@ -115,10 +115,10 @@ function Header() {
     <Navbar bg="primary" variant="dark">
     <Navbar.Brand href="/">Video World</Navbar.Brand>
     <Nav className="mr-auto">
-      <Nav.Link href="/">Home</Nav.Link>
-      <Nav.Link href="/search">Search</Nav.Link>
-      <Nav.Link href="/library">Library</Nav.Link>
-      <Nav.Link href="/customers">Customers</Nav.Link>
+      <Link className="nav_link" to="/">Home</Link>
+      <Link className="nav_link" to="/search">Search</Link>
+      <Link className="nav_link" to="/library">Library</Link>
+      <Link className="nav_link" to="/customers">Customers</Link>
     </Nav>
     </Navbar>
   );

From 24d5fc6de168288bceba1afc95bab45e54c81b15 Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Wed, 26 Jun 2019 14:51:07 -0700
Subject: [PATCH 20/66] fixed brand link

---
 src/App.css | 6 ++++++
 src/App.js  | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/App.css b/src/App.css
index 06f869435..8767a87c8 100644
--- a/src/App.css
+++ b/src/App.css
@@ -4,6 +4,12 @@
   margin-right: 2rem;
 }
 
+/* .brand_link {
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 2rem;
+  color: white;
+} */
+
 .App {
   text-align: center;
 }
diff --git a/src/App.js b/src/App.js
index 1959e1ce3..3c183b3e0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -113,7 +113,7 @@ function Home() {
 function Header() {
   return (
     <Navbar bg="primary" variant="dark">
-    <Navbar.Brand href="/">Video World</Navbar.Brand>
+    <Navbar.Brand>Video World</Navbar.Brand>
     <Nav className="mr-auto">
       <Link className="nav_link" to="/">Home</Link>
       <Link className="nav_link" to="/search">Search</Link>

From 764ae95db84bd1137c9e2d3302fcc8baa848ce3e Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Wed, 26 Jun 2019 15:09:12 -0700
Subject: [PATCH 21/66] able to view rental response

---
 src/App.js               |  63 ++++++++++++------------
 src/components/Rental.js | 102 ++++++++++++++++++++++++++++++++++++---
 2 files changed, 127 insertions(+), 38 deletions(-)

diff --git a/src/App.js b/src/App.js
index 9b29dfba1..16cc6dfcb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,7 +4,7 @@ import './App.css';
 // import PropTypes from 'prop-types';
 import Library from './components/Library';
 import Customers from './components/Customers';
-import Rental from './components/Rental';
+// import Rental from './components/Rental';
 import axios from 'axios';
 import Search from './components/Search';
 
@@ -18,7 +18,11 @@ class App extends Component {
       expandedMovies: {},
       rentedMovie: undefined,
       chosenCustomer: undefined,
-      error: null
+      // rentalExists: false,
+      dueDate: undefined,
+      checkoutDate: undefined,
+      alert: undefined,
+      error: null,
     };
   }
 
@@ -61,47 +65,46 @@ class App extends Component {
   }
 
   rentMovie = () => {
-    const movie = this.state.rentedMovie
-    const customer = this.state.chosenCustomer
-
     const checkoutDate = new Date();
     const dueDate = new Date();
     dueDate.setDate(dueDate.getDate() + 7 );
-
-    const checkoutDateFormatted = `${checkoutDate.getFullYear()}/${checkoutDate.getMonth() + 1}/${checkoutDate.getDate()}`;
-    const dueDateFormatted = `${dueDate.getFullYear()}/${dueDate.getMonth() + 1}/${dueDate.getDate()}`;
-
-    console.log(checkoutDate);
-    console.log(checkoutDateFormatted);
-    console.log(dueDate);
-    console.log(dueDateFormatted);
-
-
-    const url = `http://localhost:3001/rentals/${movie.title}/check-out`;
+  
+    const url = `http://localhost:3001/rentals/${this.state.rentedMovie.title}/check-out`;
 
     const params = {
       due_date: dueDate,
-      customer_id: customer.id,
+      customer_id: this.state.chosenCustomer.id,
     }
 
     axios.post(url, params)
     .then((response)=> {
-      console.log(response)
-      console.log(`Rented! "${movie.title}" checked out by ${customer.name}`)
-
-          this.setState({
-              rentedMovie: undefined,
-              chosenCustomer: undefined,
-          })
-        return (
-          <Rental movie={movie} customer={customer} checkoutDate={checkoutDateFormatted} dueDate={dueDateFormatted} />
-        )
+      const movie = this.state.rentedMovie.title
+      const customer = this.state.chosenCustomer.name
+
+      this.setState({
+        // rentalExists: true,
+        dueDate: dueDate,
+        checkoutDate: checkoutDate,
+        alert: `Rented! "${movie}" checked out by ${customer}`
+      })
+
+      this.onRentCallback()
     })
     .catch((error) => {
         this.setState({
             error: error.message
         })
-    });
+    })
+  }
+
+  onRentCallback = () => {
+    this.setState({
+      rentedMovie: undefined,
+      chosenCustomer: undefined,
+      // rentalExists: false,
+      dueDate: undefined,
+      checkoutDate: undefined,
+    })
   }
 
   render() {
@@ -115,10 +118,10 @@ class App extends Component {
 
           { this.state.chosenCustomer && <p>Customer Selection: {this.state.chosenCustomer.name}</p> }
 
-          { this.state.rentedMovie && this.state.chosenCustomer && <button onClick={this.rentMovie}>Rent Movie</button>}
-          {/* <Rental movie={this.state.rentedMovie} customer={this.state.chosenCustomer} dueDate="" /> } */}
+          { this.state.chosenCustomer && this.state.rentedMovie && <button onClick={this.rentMovie}>Rent Movie</button>}
 
           <Header />
+          {this.state.alert} 
           {errorSection}
 
           <Route exact path="/" component={Home} />
diff --git a/src/components/Rental.js b/src/components/Rental.js
index 553689dbf..80be91ef3 100644
--- a/src/components/Rental.js
+++ b/src/components/Rental.js
@@ -1,21 +1,107 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-// import axios from 'axios';
+import axios from 'axios';
 // import './Rental.css';
 
 const Rental = (props) => {
+  // const rentMovie = () => {
+
+
+
+    // const checkoutDate = new Date();
+    // const dueDate = new Date();
+    // dueDate.setDate(dueDate.getDate() + 7 );
+  
+    // const checkoutDateFormatted = `${checkoutDate.getFullYear()}/${checkoutDate.getMonth() + 1}/${checkoutDate.getDate()}`;
+    // const dueDateFormatted = `${dueDate.getFullYear()}/${dueDate.getMonth() + 1}/${dueDate.getDate()}`;
+
+    // const url = `http://localhost:3001/rentals/${props.movie.title}/check-out`;
+
+    // const params = {
+    //   due_date: props.dueDate,
+    //   customer_id: props.customer.id,
+    // }
+  
+    // axios.post(url, params)
+    // .then((response)=> {
+    //   console.log(response.data)
+    //   const movie = props.movie.title
+    //   const customer = props.customer.name
+
+    //   props.onRentCallback()
+    //   return `Rented! "${movie}" checked out by ${customer}`
+    // })
+    // .catch((error) => {
+    //     this.setState({
+    //         error: error.message
+    //     })
+    // });
+  // }
+
+
+
+  // console.log(checkoutDate);
+  // console.log(checkoutDateFormatted);
+  // console.log(dueDate);
+  // console.log(dueDateFormatted);
+
+    // const rental = () => {
+    // const url = `http://localhost:3001/rentals/${props.movie.title}/check-out`;
+
+    // const params = {
+    //   due_date: props.dueDate,
+    //   customer_id: props.customer.id,
+    // }
+  
+    // axios.post(url, params)
+    // .then((response)=> {
+    //   console.log(response.data)
+    //   const movie = props.movie.title
+    //   const customer = props.customer.name
+
+    //   props.onRentCallback()
+    //   return `Rented! "${movie}" checked out by ${customer}`
+    // })
+    // .catch((error) => {
+    //     this.setState({
+    //         error: error.message
+    //     })
+    // })}
+
+
   return (
-    <div>
-      {props.customer}, {props.movie}, {props.dueDate}
-    </div>
+    // axios.post(url, params)
+    // .then((response)=> {
+    //   console.log(response.data)
+    //   const movie = props.movie.title
+    //   const customer = props.customer.name
+
+    //   props.onRentCallback()
+    //   return `Rented! "${movie}" checked out by ${customer}`
+    // })
+    // .catch((error) => {
+    //     this.setState({
+    //         error: error.message
+    //     })
+    // })
+
+    // {rental()}
+    `Rented! "${props.movie.title}" checked out by Customer #${props.customer.id}`
+
+    // <div>
+    //   Hello
+    //   <p>{props.customer.id} </p>
+    //   <p>{props.movie} </p>
+    //   <p>{props.dueDate} </p>
+    // </div>
   )
 }
 
 Rental.propTypes = {
-  movie: PropTypes.object.isRequired,
-  customer: PropTypes.object.isRequired,
-  checkoutDate: PropTypes.string.isRequired,
-  dueDate: PropTypes.string.isRequired,
+  // movie: PropTypes.object.isRequired,
+  // customer: PropTypes.object.isRequired,
+  // checkoutDate: PropTypes.string.isRequired,
+  // dueDate: PropTypes.string.isRequired,
 };
 
 export default Rental;
\ No newline at end of file

From 82de6112ae51e7ba388eba5c0f2a9be481e904b7 Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Wed, 26 Jun 2019 15:17:32 -0700
Subject: [PATCH 22/66] removed unused code

---
 src/App.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/App.js b/src/App.js
index 16cc6dfcb..73753c11d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -18,7 +18,6 @@ class App extends Component {
       expandedMovies: {},
       rentedMovie: undefined,
       chosenCustomer: undefined,
-      // rentalExists: false,
       dueDate: undefined,
       checkoutDate: undefined,
       alert: undefined,
@@ -80,12 +79,10 @@ class App extends Component {
     .then((response)=> {
       const movie = this.state.rentedMovie.title
       const customer = this.state.chosenCustomer.name
-
       this.setState({
-        // rentalExists: true,
         dueDate: dueDate,
         checkoutDate: checkoutDate,
-        alert: `Rented! "${movie}" checked out by ${customer}`
+        alert: `Rental #${response.data["rental"]}! "${movie}" checked out by ${customer}`
       })
 
       this.onRentCallback()
@@ -101,7 +98,6 @@ class App extends Component {
     this.setState({
       rentedMovie: undefined,
       chosenCustomer: undefined,
-      // rentalExists: false,
       dueDate: undefined,
       checkoutDate: undefined,
     })

From 9fd478f04f89641f5fd92b1296612ef4b70a62b2 Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Wed, 26 Jun 2019 15:32:30 -0700
Subject: [PATCH 23/66] remove type

---
 src/App.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index 9f59fdc88..191e7b4ff 100644
--- a/src/App.js
+++ b/src/App.js
@@ -121,7 +121,6 @@ class App extends Component {
 
           { this.state.chosenCustomer && this.state.rentedMovie && <button onClick={this.rentMovie}>Rent Movie</button>}
 
-          <Header />
           {this.state.alert} 
           {errorSection}
 

From 5679e73d33389bdd448157d8de03294f6845cb0f Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Wed, 26 Jun 2019 15:39:24 -0700
Subject: [PATCH 24/66] removed Home component

---
 src/App.js              | 10 +++-------
 src/components/Home.css |  7 +++++++
 src/components/Home.js  | 13 +++++++++++++
 3 files changed, 23 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Home.css
 create mode 100644 src/components/Home.js

diff --git a/src/App.js b/src/App.js
index 3c183b3e0..ad59f2940 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,6 +9,7 @@ import Library from './components/Library';
 import Customers from './components/Customers';
 import axios from 'axios';
 import Search from './components/Search';
+import Home from './components/Home';
 
 
 class App extends Component {
@@ -76,7 +77,7 @@ class App extends Component {
 
           { this.state.chosenCustomer && <p>Customer Selection: {this.state.chosenCustomer.name}</p> }
           
-          <Route exact path="/" component={Home} />
+          <Route exact path="/" render={() => <Home/>} />
           <Route path="/search" render={() => <Search moviesInLibrary={this.state.movies}/>}/>
           <Route 
             path="/library" 
@@ -106,16 +107,11 @@ class App extends Component {
   }
 }
 
-function Home() {
-  return <h2>Home</h2>;
-}
-
 function Header() {
   return (
     <Navbar bg="primary" variant="dark">
     <Navbar.Brand>Video World</Navbar.Brand>
-    <Nav className="mr-auto">
-      <Link className="nav_link" to="/">Home</Link>
+    <Nav className="flex">
       <Link className="nav_link" to="/search">Search</Link>
       <Link className="nav_link" to="/library">Library</Link>
       <Link className="nav_link" to="/customers">Customers</Link>
diff --git a/src/components/Home.css b/src/components/Home.css
new file mode 100644
index 000000000..d7bb35aa3
--- /dev/null
+++ b/src/components/Home.css
@@ -0,0 +1,7 @@
+main {
+    text-align: center;
+}
+.brand_name {
+    color: #007bff;
+    text-align: center;
+}
\ No newline at end of file
diff --git a/src/components/Home.js b/src/components/Home.js
new file mode 100644
index 000000000..d6d102994
--- /dev/null
+++ b/src/components/Home.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import './Home.css';
+
+const Home = () => {
+    return (
+        <main>
+            <h1 className="brand_name">Video World</h1>
+            <h3>Rental Management</h3>
+        </main>
+    )
+}
+
+export default Home;
\ No newline at end of file

From b3a2dd93a095b0b6e3dfc889f23ccfbf83838b99 Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Wed, 26 Jun 2019 16:31:50 -0700
Subject: [PATCH 25/66] now have a rental object state in app

---
 src/App.js | 32 ++++++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/App.js b/src/App.js
index 191e7b4ff..51acd0a3c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -24,7 +24,11 @@ class App extends Component {
       chosenCustomer: undefined,
       dueDate: undefined,
       checkoutDate: undefined,
-      alert: undefined,
+      currentRental: {
+        count: undefined,
+        movie: undefined,
+        customer: undefined,
+      },
       error: null,
     };
   }
@@ -81,13 +85,19 @@ class App extends Component {
 
     axios.post(url, params)
     .then((response)=> {
-      const movie = this.state.rentedMovie.title
-      const customer = this.state.chosenCustomer.name
-      this.setState({
+      // const movie = this.state.rentedMovie.title
+      // const customer = this.state.chosenCustomer.name
+      this.setState((prevState) => ({
         dueDate: dueDate,
         checkoutDate: checkoutDate,
-        alert: `Rental #${response.data["rental"]}! "${movie}" checked out by ${customer}`
-      })
+        currentRental: {
+          ...prevState.currentRental,
+          count: response.data["rental"],
+          movie: prevState.rentedMovie.title,
+          customer: prevState.chosenCustomer.name,
+        }
+        // `Rental #${response.data["rental"]}! "${movie}" checked out by ${customer}`
+      }))
 
       this.onRentCallback()
     })
@@ -104,13 +114,18 @@ class App extends Component {
       chosenCustomer: undefined,
       dueDate: undefined,
       checkoutDate: undefined,
+      // currentRental: undefined,
     })
   }
 
+  checkinMovie = () => {
+
+  }
+
   render() {
     const errorSection = (this.state.error) ?
     (<section>Error: {this.state.error}</section>) : null;
-    console.log(this.state)
+
     return (
       <Router>
         <div>
@@ -121,7 +136,8 @@ class App extends Component {
 
           { this.state.chosenCustomer && this.state.rentedMovie && <button onClick={this.rentMovie}>Rent Movie</button>}
 
-          {this.state.alert} 
+          {this.state.currentRental.count} 
+
           {errorSection}
 
           <Route exact path="/" component={Home} />

From 89f894980b0599d4a659f35bcd69834be3eeaad2 Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Wed, 26 Jun 2019 17:08:29 -0700
Subject: [PATCH 26/66] rental object state in app able to be viewed

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

diff --git a/src/App.js b/src/App.js
index 51acd0a3c..0e33a391c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -85,8 +85,6 @@ class App extends Component {
 
     axios.post(url, params)
     .then((response)=> {
-      // const movie = this.state.rentedMovie.title
-      // const customer = this.state.chosenCustomer.name
       this.setState((prevState) => ({
         dueDate: dueDate,
         checkoutDate: checkoutDate,
@@ -94,9 +92,8 @@ class App extends Component {
           ...prevState.currentRental,
           count: response.data["rental"],
           movie: prevState.rentedMovie.title,
-          customer: prevState.chosenCustomer.name,
+          customer: prevState.chosenCustomer.id,
         }
-        // `Rental #${response.data["rental"]}! "${movie}" checked out by ${customer}`
       }))
 
       this.onRentCallback()
@@ -114,13 +111,12 @@ class App extends Component {
       chosenCustomer: undefined,
       dueDate: undefined,
       checkoutDate: undefined,
-      // currentRental: undefined,
     })
   }
 
-  checkinMovie = () => {
-
-  }
+  // checkinMovie = () => {
+      // currentRental: undefined,
+  // }
 
   render() {
     const errorSection = (this.state.error) ?
@@ -136,7 +132,7 @@ class App extends Component {
 
           { this.state.chosenCustomer && this.state.rentedMovie && <button onClick={this.rentMovie}>Rent Movie</button>}
 
-          {this.state.currentRental.count} 
+          {this.state.currentRental.count && <div>Rental #{this.state.currentRental.count}: "{this.state.currentRental.movie}" checked out by Customer #{this.state.currentRental.customer}</div>} 
 
           {errorSection}
 

From 36c27cebf41405b49213396febccc8245285a3a8 Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Wed, 26 Jun 2019 17:24:03 -0700
Subject: [PATCH 27/66] able to check in movie most recent checkout movie

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

diff --git a/src/App.js b/src/App.js
index 0e33a391c..7197b587c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -28,6 +28,7 @@ class App extends Component {
         count: undefined,
         movie: undefined,
         customer: undefined,
+        checkin: false,
       },
       error: null,
     };
@@ -114,9 +115,33 @@ class App extends Component {
     })
   }
 
-  // checkinMovie = () => {
-      // currentRental: undefined,
-  // }
+  checkinMovie = () => {
+    const url = `http://localhost:3001/rentals/${this.state.currentRental.movie}/return`;
+
+    const params = {
+      customer_id: this.state.currentRental.customer,
+    }
+
+    axios.post(url, params)
+    .then(() => {
+      console.log("CHECKIN SUCCESS")
+      this.setState((prevState) => ({
+        currentRental: {
+          ...prevState.currentRental,
+          count: undefined,
+          movie: undefined,
+          customer: undefined,
+          checkin: true,
+        }
+      }))
+    })
+      .catch((error) => {
+        this.setState({
+            error: error.message
+        })
+      })
+    }
+
 
   render() {
     const errorSection = (this.state.error) ?
@@ -133,7 +158,11 @@ class App extends Component {
           { this.state.chosenCustomer && this.state.rentedMovie && <button onClick={this.rentMovie}>Rent Movie</button>}
 
           {this.state.currentRental.count && <div>Rental #{this.state.currentRental.count}: "{this.state.currentRental.movie}" checked out by Customer #{this.state.currentRental.customer}</div>} 
+          {this.state.currentRental.count && <button onClick={this.checkinMovie}>Check-in Movie</button>}
 
+          {!this.state.chosenCustomer && !this.state.rentedMovie && 
+            this.state.currentRental.checkin && <p>Movie Successfully Checked-In!</p>}
+          
           {errorSection}
 
           <Route exact path="/" component={Home} />

From a5e97acd068e345bbd29bd75ae577f9bd0d0de9b Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Wed, 26 Jun 2019 23:21:08 -0700
Subject: [PATCH 28/66] added more styles to the library

---
 src/App.js                   | 11 ++++++++++-
 src/components/Customers.css |  4 ++--
 src/components/Customers.js  |  6 +++---
 src/components/Details.js    |  5 ++---
 src/components/Home.css      |  7 -------
 src/components/Home.js       | 13 -------------
 src/components/Library.css   |  7 ++++---
 src/components/Library.js    |  7 ++++---
 src/components/Movie.css     | 17 +++++++++++++++++
 src/components/Movie.js      | 18 +++++++++++++-----
 src/components/Search.js     |  7 ++++---
 11 files changed, 59 insertions(+), 43 deletions(-)
 delete mode 100644 src/components/Home.css
 delete mode 100644 src/components/Home.js
 create mode 100644 src/components/Movie.css

diff --git a/src/App.js b/src/App.js
index 0d9c12389..0e33f6e98 100644
--- a/src/App.js
+++ b/src/App.js
@@ -104,6 +104,13 @@ class App extends Component {
     })
   }
 
+  addMovieCallback = (movie) => {
+    const movieIds = this.state.movies.map(movie => movie.id)
+    this.setState({
+      movies: [...this.state.movies, {...movie, id: Math.max(...movieIds) + 1}]
+    });
+  }
+
   render() {
     const errorSection = (this.state.error) ?
     (<section>Error: {this.state.error}</section>) : null;
@@ -121,7 +128,9 @@ class App extends Component {
           {errorSection}
 
           {/* <Route exact path="/" component={Home} /> */}
-          <Route path="/search" render={() => <Search moviesInLibrary={this.state.movies}/>}/>
+          <Route path="/search" render={() => <Search 
+                                                addMovieCallback={this.addMovieCallback}
+                                                moviesInLibrary={this.state.movies}/>}/>
           <Route 
             path="/library" 
             render={() => (
diff --git a/src/components/Customers.css b/src/components/Customers.css
index 41ff74fa9..6e95746ea 100644
--- a/src/components/Customers.css
+++ b/src/components/Customers.css
@@ -1,6 +1,6 @@
-h1 {
+/* h1 {
     text-align: center;
-}
+} */
 
 .customers_container {
     margin: 1rem;
diff --git a/src/components/Customers.js b/src/components/Customers.js
index 738a345a4..e652a7885 100644
--- a/src/components/Customers.js
+++ b/src/components/Customers.js
@@ -14,12 +14,12 @@ const Customers = (props) => {
   return (
     <section className="customers_container">
       <h1>Customers</h1>
-        <thead>
+        {/* <thead>
           <tr>
             <th>Name</th>
           </tr>
-        </thead>
-        <Table striped size="sm">
+        </thead> */}
+      <Table striped size="sm">
         <tbody>{customerCollection}</tbody>
       </Table>
     </section>
diff --git a/src/components/Details.js b/src/components/Details.js
index 4bdebb034..8b37abd8e 100644
--- a/src/components/Details.js
+++ b/src/components/Details.js
@@ -8,12 +8,11 @@ const Details = (props) => {
   const movieDetails = () => {
     return (
       <Card>
-        <Card.Img variant="top" class="pic" src={props.image_url} alt={`${props.title}`}/>
         <Card.Body>
-          <Card.Title>Title: {props.title}</Card.Title>
+          {/* <Card.Title>Title: {props.title}</Card.Title> */}
           <Card.Text>Overview: {props.overview} </Card.Text>
           <li>Id: {props.id}</li>
-          <li>Release Date: {props.release_date}</li>
+          {/* <li>Release Date: {props.release_date}</li> */}
           <li>External Id: {props.external_id}</li>
         </Card.Body>
       </Card>
diff --git a/src/components/Home.css b/src/components/Home.css
deleted file mode 100644
index d7bb35aa3..000000000
--- a/src/components/Home.css
+++ /dev/null
@@ -1,7 +0,0 @@
-main {
-    text-align: center;
-}
-.brand_name {
-    color: #007bff;
-    text-align: center;
-}
\ No newline at end of file
diff --git a/src/components/Home.js b/src/components/Home.js
deleted file mode 100644
index d6d102994..000000000
--- a/src/components/Home.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import './Home.css';
-
-const Home = () => {
-    return (
-        <main>
-            <h1 className="brand_name">Video World</h1>
-            <h3>Rental Management</h3>
-        </main>
-    )
-}
-
-export default Home;
\ No newline at end of file
diff --git a/src/components/Library.css b/src/components/Library.css
index 5094a44bb..be4585150 100644
--- a/src/components/Library.css
+++ b/src/components/Library.css
@@ -1,7 +1,8 @@
 .library_container {
     margin: 3rem;
+    text-align: left;
 }
 
-h1 {
-    text-align: center;
-}
\ No newline at end of file
+/* h1 {
+    text-align: left;
+} */
\ No newline at end of file
diff --git a/src/components/Library.js b/src/components/Library.js
index 025d0020c..f2c3234cd 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -17,14 +17,15 @@ const Library = (props) => {
     <section className="library_container">
       <h1>Library</h1>
       
-      <Table striped>
-        <thead>
+      <Table striped size="sm">
+        {/* <thead>
           <tr>
+            <th>ID</th>
             <th>Movie Title</th>
             <th></th>
             <th></th>
           </tr>
-        </thead>
+        </thead> */}
         <tbody>
           {movieCollection}
         </tbody>
diff --git a/src/components/Movie.css b/src/components/Movie.css
new file mode 100644
index 000000000..a9f93e83b
--- /dev/null
+++ b/src/components/Movie.css
@@ -0,0 +1,17 @@
+.movie_container {
+    display: flex;
+    flex-direction: row;
+}
+
+.title {
+    font-weight: bold;
+    font-size: 1.5rem;
+}
+
+.movie_description {
+    margin-left: 1rem;
+}
+
+.bold_words {
+    font-weight: bold;
+}
\ No newline at end of file
diff --git a/src/components/Movie.js b/src/components/Movie.js
index 6b133ca11..d90093cbc 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Details from './Details';
-// import './Movie.css';
+import './Movie.css';
 
 const Movie = (props) => {
   const onClickButton = () => {
@@ -14,10 +14,18 @@ const Movie = (props) => {
   
   return (
     <tr>
-      <td>{props.movie.title}</td>
-      <td><button onClick={onClickDetailsButton}>View Details</button></td>
-      <td><button onClick={onClickButton}>Select Movie</button></td>
-      {props.viewMovieDetails && <Details {...props.movie} />}
+      <td className="movie_container">
+        <img src={props.movie.image_url} alt={props.movie.title}/>
+        <div className="movie_description">
+          <h3 className="title">{props.movie.title}</h3>
+          <p><span className="bold_words">Release Date: </span>{props.movie.release_date}</p>
+          <p><span className="bold_words">Overview: </span>{props.movie.overview.length > 128 ? `${props.movie.overview.substring(0, 150)}...` : props.movie.overview}</p>
+          <button onClick={onClickDetailsButton}>View Details</button>
+          <button onClick={onClickButton}>Select Movie</button>
+          {props.viewMovieDetails && <Details {...props.movie} />}
+        </div>
+      </td>
+      
     </tr>
   )
 }
diff --git a/src/components/Search.js b/src/components/Search.js
index a14a940af..14d228e50 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -46,19 +46,20 @@ class Search extends Component {
                 error: "Movie already exists!"
             })
         } else {
-            const movieToApi = {
+            const movieToLibrary = {
                 external_id: movie.external_id,
                 image_url: movie.image_url,
                 title: movie.title,
                 overview: movie.overview,
                 release_date: movie.release_date
             }
-            axios.post('http://localhost:3001/movies', movieToApi)
+            axios.post('http://localhost:3001/movies', movieToLibrary)
             .then((response)=> {
                 if (response.status === 200) {
                     this.setState({
                         success: "Movie has been added to the rental library!"
-                    })
+                    });
+                    this.props.addMovieCallback(movie);
                 }
             })
             .catch((error) => {

From dd89e0be1a4a6fa10cec5b27ecff7bbfbbcdf3a4 Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Wed, 26 Jun 2019 23:33:17 -0700
Subject: [PATCH 29/66] more stylings for search results

---
 src/components/Movie.js     |  1 -
 src/components/MovieCard.js | 22 +++++++++++++++++-----
 src/components/Search.js    | 26 +++++++++++++-------------
 3 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/src/components/Movie.js b/src/components/Movie.js
index d90093cbc..d80672418 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -25,7 +25,6 @@ const Movie = (props) => {
           {props.viewMovieDetails && <Details {...props.movie} />}
         </div>
       </td>
-      
     </tr>
   )
 }
diff --git a/src/components/MovieCard.js b/src/components/MovieCard.js
index 54be0e509..8a4fd53b9 100644
--- a/src/components/MovieCard.js
+++ b/src/components/MovieCard.js
@@ -7,12 +7,24 @@ const MovieCard = (props) => {
         addMovieCallback(props);
     }
     return (
+        // <tr>
+        //     <td><img src={image_url} alt={title}/></td>
+        //     <td>{title}</td>
+        //     <td>{overview}</td>
+        //     <td>{release_date}</td>
+        //     <td><Button onClick={addMovie}>Add to Library</Button></td>
+        // </tr>
+
         <tr>
-            <td><img src={image_url} alt={title}/></td>
-            <td>{title}</td>
-            <td>{overview}</td>
-            <td>{release_date}</td>
-            <td><Button onClick={addMovie}>Add to Library</Button></td>
+            <td className="movie_container">
+            <img src={image_url} alt={title}/>
+            <div className="movie_description">
+                <h3 className="title">{title}</h3>
+                <p><span className="bold_words">Release Date: </span>{release_date}</p>
+                <p><span className="bold_words">Overview: </span>{overview.length > 200 ? `${overview.substring(0, 150)}...` : overview}</p>
+                <Button onClick={addMovie}>Add to Library</Button>
+            </div>
+            </td>
         </tr>
     )
 }
diff --git a/src/components/Search.js b/src/components/Search.js
index 14d228e50..16dc6fcdd 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -79,7 +79,7 @@ class Search extends Component {
         (<section>{this.state.success}</section>) : null;
     
         let movieCards;
-        let tableHeader;
+        // let tableHeader;
 
         if (this.state.searchResults !== null) {
             movieCards = this.state.searchResults.map((movie,i) => {
@@ -93,17 +93,17 @@ class Search extends Component {
                             addMovieCallback={this.addMovieCallback}/>]
             });
 
-            if (movieCards && movieCards.length > 0){
-                tableHeader = (<thead>
-                    <tr>
-                        <th>Image</th>
-                        <th>Title</th>
-                        <th>Overview</th>
-                        <th>Release Date</th>
-                        <th></th>
-                    </tr>
-                </thead>);
-            }
+            // if (movieCards && movieCards.length > 0){
+            //     tableHeader = (<thead>
+            //         <tr>
+            //             <th>Image</th>
+            //             <th>Title</th>
+            //             <th>Overview</th>
+            //             <th>Release Date</th>
+            //             <th></th>
+            //         </tr>
+            //     </thead>);
+            // }
         } else if (this.state.searched) {
             movieCards = (<tr><td>No matched Results!</td></tr>);
         } else {
@@ -117,7 +117,7 @@ class Search extends Component {
                 {errorSection}
                 {successSection}
                 <Table>
-                        {tableHeader}
+                        {/* {tableHeader} */}
                     <tbody>
                         {movieCards}
                     </tbody>

From 35cf2ce21a440355cf7a4c0c892aea77477af5d4 Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Thu, 27 Jun 2019 09:50:50 -0700
Subject: [PATCH 30/66] attempt at overdue movies feature

---
 src/App.js               |  16 +++---
 src/components/Home.js   |  36 +++++++++++++
 src/components/Rental.js | 107 ---------------------------------------
 3 files changed, 45 insertions(+), 114 deletions(-)
 create mode 100644 src/components/Home.js
 delete mode 100644 src/components/Rental.js

diff --git a/src/App.js b/src/App.js
index 7197b587c..5475da12c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,7 +7,7 @@ import './App.css';
 // import PropTypes from 'prop-types';
 import Library from './components/Library';
 import Customers from './components/Customers';
-// import Rental from './components/Rental';
+import Home from './components/Home';
 import axios from 'axios';
 import Search from './components/Search';
 
@@ -19,6 +19,7 @@ class App extends Component {
     this.state = {
       movies: [],
       customers: [],
+      overdueMovies: undefined,
       expandedMovies: {},
       rentedMovie: undefined,
       chosenCustomer: undefined,
@@ -69,7 +70,6 @@ class App extends Component {
     .catch((error) => {
       this.setState({ error: error.message });
     });
-
   }
 
   rentMovie = () => {
@@ -142,6 +142,11 @@ class App extends Component {
       })
     }
 
+  setOverdueMoviesCallback = (value) => {
+    this.setState({ 
+      overdueMovies: value
+    });
+  }
 
   render() {
     const errorSection = (this.state.error) ?
@@ -165,7 +170,8 @@ class App extends Component {
           
           {errorSection}
 
-          <Route exact path="/" component={Home} />
+          {/* <Route exact path="/" component={Home} /> */}
+          <Route path="/" render={() => <Home setOverdueMoviesCallback={this.setOverdueMoviesCallback} overdueMovies={this.state.overdueMovies}/>}/>
           <Route path="/search" render={() => <Search moviesInLibrary={this.state.movies}/>}/>
           <Route 
             path="/library" 
@@ -193,10 +199,6 @@ class App extends Component {
   }
 }
 
-function Home() {
-  return <h2>Home</h2>;
-}
-
 function Header() {
   return (
     <Navbar bg="primary" variant="dark">
diff --git a/src/components/Home.js b/src/components/Home.js
new file mode 100644
index 000000000..e41673c5a
--- /dev/null
+++ b/src/components/Home.js
@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+// import './Home.css';
+
+const Home = (props) => {
+  const overdueMovies = () => {
+    axios.get('http://localhost:3001/rentals/overdue')
+    .then((response) => {
+      const overdueMovieCollection = response.data.map((overdueMovie) => {
+        console.log(overdueMovie.title)
+        return <li>{overdueMovie.title}</li>
+      })
+      props.setOverdueMoviesCallback(overdueMovieCollection)
+    })
+    .catch((error) => {
+      this.setState({ error: error.message });
+    });
+  }
+
+  return (
+    <div>
+      <button onClick={overdueMovies}>Overdue Movies</button>
+      {props.overdueMovie && <ul>{props.overdueMovie}</ul>}
+    </div>
+  )
+}
+
+Home.propTypes = {
+  // movie: PropTypes.object.isRequired,
+  // customer: PropTypes.object.isRequired,
+  // checkoutDate: PropTypes.string.isRequired,
+  // dueDate: PropTypes.string.isRequired,
+};
+
+export default Home;
\ No newline at end of file
diff --git a/src/components/Rental.js b/src/components/Rental.js
deleted file mode 100644
index 80be91ef3..000000000
--- a/src/components/Rental.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import axios from 'axios';
-// import './Rental.css';
-
-const Rental = (props) => {
-  // const rentMovie = () => {
-
-
-
-    // const checkoutDate = new Date();
-    // const dueDate = new Date();
-    // dueDate.setDate(dueDate.getDate() + 7 );
-  
-    // const checkoutDateFormatted = `${checkoutDate.getFullYear()}/${checkoutDate.getMonth() + 1}/${checkoutDate.getDate()}`;
-    // const dueDateFormatted = `${dueDate.getFullYear()}/${dueDate.getMonth() + 1}/${dueDate.getDate()}`;
-
-    // const url = `http://localhost:3001/rentals/${props.movie.title}/check-out`;
-
-    // const params = {
-    //   due_date: props.dueDate,
-    //   customer_id: props.customer.id,
-    // }
-  
-    // axios.post(url, params)
-    // .then((response)=> {
-    //   console.log(response.data)
-    //   const movie = props.movie.title
-    //   const customer = props.customer.name
-
-    //   props.onRentCallback()
-    //   return `Rented! "${movie}" checked out by ${customer}`
-    // })
-    // .catch((error) => {
-    //     this.setState({
-    //         error: error.message
-    //     })
-    // });
-  // }
-
-
-
-  // console.log(checkoutDate);
-  // console.log(checkoutDateFormatted);
-  // console.log(dueDate);
-  // console.log(dueDateFormatted);
-
-    // const rental = () => {
-    // const url = `http://localhost:3001/rentals/${props.movie.title}/check-out`;
-
-    // const params = {
-    //   due_date: props.dueDate,
-    //   customer_id: props.customer.id,
-    // }
-  
-    // axios.post(url, params)
-    // .then((response)=> {
-    //   console.log(response.data)
-    //   const movie = props.movie.title
-    //   const customer = props.customer.name
-
-    //   props.onRentCallback()
-    //   return `Rented! "${movie}" checked out by ${customer}`
-    // })
-    // .catch((error) => {
-    //     this.setState({
-    //         error: error.message
-    //     })
-    // })}
-
-
-  return (
-    // axios.post(url, params)
-    // .then((response)=> {
-    //   console.log(response.data)
-    //   const movie = props.movie.title
-    //   const customer = props.customer.name
-
-    //   props.onRentCallback()
-    //   return `Rented! "${movie}" checked out by ${customer}`
-    // })
-    // .catch((error) => {
-    //     this.setState({
-    //         error: error.message
-    //     })
-    // })
-
-    // {rental()}
-    `Rented! "${props.movie.title}" checked out by Customer #${props.customer.id}`
-
-    // <div>
-    //   Hello
-    //   <p>{props.customer.id} </p>
-    //   <p>{props.movie} </p>
-    //   <p>{props.dueDate} </p>
-    // </div>
-  )
-}
-
-Rental.propTypes = {
-  // movie: PropTypes.object.isRequired,
-  // customer: PropTypes.object.isRequired,
-  // checkoutDate: PropTypes.string.isRequired,
-  // dueDate: PropTypes.string.isRequired,
-};
-
-export default Rental;
\ No newline at end of file

From dafd0e40e018d8f2641262d5dc1f320af95ad9b3 Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Thu, 27 Jun 2019 09:56:56 -0700
Subject: [PATCH 31/66] trying to fix viewing movie details

---
 src/App.css               | 21 +++-------------
 src/App.js                | 15 +++++++++---
 src/components/Library.js |  8 ------
 src/components/Movie.js   | 51 ++++++++++++++++++++++++++++++---------
 src/components/Search.js  | 12 ---------
 5 files changed, 54 insertions(+), 53 deletions(-)

diff --git a/src/App.css b/src/App.css
index 16ae7122f..a0fd03139 100644
--- a/src/App.css
+++ b/src/App.css
@@ -6,19 +6,11 @@
   flex-wrap: wrap;
   flex-direction: column;
   position: relative;
-  height: 7rem;
-}
-
-.nav_link {
-  color: white;
-  margin-right: 2rem;
-  padding-top: 2.7rem;
-  /* border: 1px solid black; */
+  height: 12rem;
 }
 
 .brand {
   color: white;
-  margin-right: 3rem;
   font-size: 3rem;
   text-decoration-line: none;
   font-family: 'Lobster', cursive;
@@ -32,24 +24,17 @@
   display: flex;
   flex-direction: row;
   right: 0;
-  /* top: 1rem; */
-  /* float: right; */
-  /* text-align: right; */
-  /* align-items: flex-end; */
-  /* align-self: right; */
-  /* height: 10rem; */
-  /* border: 1px solid black; */
 
 }
 
-
 .nav_link {
+  color: white;
   margin-right: 1rem;
   font-size: 1rem;
   text-decoration: none;
   display: inline-block;
   padding: .1rem 2.1rem;
-  padding-top: 4rem;
+  margin-top: 9rem;
   /* border-left: 2px solid white;; */
   /* float: right; */
 }
diff --git a/src/App.js b/src/App.js
index 0e33f6e98..1237282bf 100644
--- a/src/App.js
+++ b/src/App.js
@@ -26,15 +26,24 @@ class App extends Component {
     };
   }
 
-  onClickDetailsCallback = (id) => {
-    this.setState((prevState) => ({ 
+  onClickDetailsCallback = (movie) => {
+    this.setState({ 
       expandedMovies: {
         ...prevState.expandedMovies, 
         [id]: !prevState.expandedMovies[id],
       }
-    }));
+    });
   }
 
+  // onClickDetailsCallback = (id) => {
+  //   this.setState((prevState) => ({ 
+  //     expandedMovies: {
+  //       ...prevState.expandedMovies, 
+  //       [id]: !prevState.expandedMovies[id],
+  //     }
+  //   }));
+  // }
+
   onSelectMovieCallback = (index) => {
     const selectedMovie = this.state.movies[index]
     this.setState({ rentedMovie: selectedMovie });
diff --git a/src/components/Library.js b/src/components/Library.js
index f2c3234cd..4a5af2f9a 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -18,14 +18,6 @@ const Library = (props) => {
       <h1>Library</h1>
       
       <Table striped size="sm">
-        {/* <thead>
-          <tr>
-            <th>ID</th>
-            <th>Movie Title</th>
-            <th></th>
-            <th></th>
-          </tr>
-        </thead> */}
         <tbody>
           {movieCollection}
         </tbody>
diff --git a/src/components/Movie.js b/src/components/Movie.js
index d80672418..29a47a5fc 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -8,23 +8,50 @@ const Movie = (props) => {
     props.onSelectMovieCallback(props.movie.id)
   }
 
+  let movie;
+  let movieDetails;
+
+  movie = (<td className="movie_container">
+          <img src={props.movie.image_url} alt={props.movie.title}/>
+          <div className="movie_description">
+          <h3 className="title">{props.movie.title}</h3>
+          <p><span className="bold_words">Release Date: </span>{props.movie.release_date}</p>
+          <p><span className="bold_words">Overview: </span>{props.movie.overview.length > 128 ? `${props.movie.overview.substring(0, 150)}...` : props.movie.overview}</p>
+          </div>
+      </td>)
+
   const onClickDetailsButton = () => {
-    props.onClickDetailsCallback(props.movie.id)
+    props.onClickDetailsCallback(props.movie);
   }
+  // const onClickDetailsButton = () => {
+  //   props.onClickDetailsCallback(props.movie.id);
+  // }
+
+  // movie = (<td className="movie_container">
+  //       <img src={props.movie.image_url} alt={props.movie.title}/>
+  //       <div className="movie_description">
+  //         <h3 className="title">{props.movie.title}</h3>
+  //         <p><span className="bold_words">Release Date: </span>{props.movie.release_date}</p>
+  //         <p><span className="bold_words">Overview: </span>{props.movie.overview.length > 128 ? `${props.movie.overview.substring(0, 150)}...` : props.movie.overview}</p>
+  //         <button onClick={onClickDetailsButton}>View Details</button>
+  //         <button onClick={onClickButton}>Select Movie</button>
+  //         {props.viewMovieDetails && <Details {...props.movie} />}
+  //       </div>
+  //     </td>)
+  
+  
+
+  
   
   return (
+    
     <tr>
-      <td className="movie_container">
-        <img src={props.movie.image_url} alt={props.movie.title}/>
-        <div className="movie_description">
-          <h3 className="title">{props.movie.title}</h3>
-          <p><span className="bold_words">Release Date: </span>{props.movie.release_date}</p>
-          <p><span className="bold_words">Overview: </span>{props.movie.overview.length > 128 ? `${props.movie.overview.substring(0, 150)}...` : props.movie.overview}</p>
-          <button onClick={onClickDetailsButton}>View Details</button>
-          <button onClick={onClickButton}>Select Movie</button>
-          {props.viewMovieDetails && <Details {...props.movie} />}
-        </div>
-      </td>
+        {movie}
+        {/* <button onClick={onClickDetails}>View Details</button> */}
+        <button onClick={onClickDetailsButton}>View Details</button>
+        <button onClick={onClickButton}>Select Movie</button>
+        {props.viewMovieDetails && <Details {...props.movie} />}
+        {movieDetails}
     </tr>
   )
 }
diff --git a/src/components/Search.js b/src/components/Search.js
index 16dc6fcdd..766442db6 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -79,7 +79,6 @@ class Search extends Component {
         (<section>{this.state.success}</section>) : null;
     
         let movieCards;
-        // let tableHeader;
 
         if (this.state.searchResults !== null) {
             movieCards = this.state.searchResults.map((movie,i) => {
@@ -93,17 +92,6 @@ class Search extends Component {
                             addMovieCallback={this.addMovieCallback}/>]
             });
 
-            // if (movieCards && movieCards.length > 0){
-            //     tableHeader = (<thead>
-            //         <tr>
-            //             <th>Image</th>
-            //             <th>Title</th>
-            //             <th>Overview</th>
-            //             <th>Release Date</th>
-            //             <th></th>
-            //         </tr>
-            //     </thead>);
-            // }
         } else if (this.state.searched) {
             movieCards = (<tr><td>No matched Results!</td></tr>);
         } else {

From a199867e8542b42d1ace4bc33f3598b1ee448d0f Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Thu, 27 Jun 2019 10:29:37 -0700
Subject: [PATCH 32/66] able to view overdue movies

---
 src/App.js             | 84 +++++++++++++++++++++++++-----------------
 src/components/Home.js | 36 ------------------
 src/components/Log.js  | 33 +++++++++++++++++
 3 files changed, 84 insertions(+), 69 deletions(-)
 delete mode 100644 src/components/Home.js
 create mode 100644 src/components/Log.js

diff --git a/src/App.js b/src/App.js
index 8267280ef..32c72841e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,13 +2,12 @@ import React, { Component } from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import Nav from 'react-bootstrap/Nav';
 import { BrowserRouter as Router, Route, Link } from "react-router-dom";
-import './App.css';
+import Search from './components/Search';
 import Library from './components/Library';
 import Customers from './components/Customers';
-import Home from './components/Home';
+import Log from './components/Log';
 import axios from 'axios';
-import Search from './components/Search';
-
+import './App.css';
 
 class App extends Component {
   constructor() {
@@ -33,6 +32,31 @@ class App extends Component {
     };
   }
 
+  componentDidMount() {
+    axios.get('http://localhost:3001/movies')
+    .then((response) => {
+      this.setState({ movies: response.data});
+    })
+    .catch((error) => {
+      this.setState({ error: error.message });
+    });
+
+    axios.get('http://localhost:3001/customers')
+    .then((response) => {
+      this.setState({ customers: response.data });
+    })
+    .catch((error) => {
+      this.setState({ error: error.message });
+    });
+  }
+
+  addMovieCallback = (movie) => {
+    const movieIds = this.state.movies.map(movie => movie.id)
+    this.setState({
+      movies: [...this.state.movies, {...movie, id: Math.max(...movieIds) + 1}]
+    });
+  }
+
   onClickDetailsCallback = (id) => {
     this.setState((prevState) => ({ 
       expandedMovies: {
@@ -52,24 +76,6 @@ class App extends Component {
     this.setState({ chosenCustomer: selectedCustomer });
   }
 
-  componentDidMount() {
-    axios.get('http://localhost:3001/movies')
-    .then((response) => {
-      this.setState({ movies: response.data});
-    })
-    .catch((error) => {
-      this.setState({ error: error.message });
-    });
-
-    axios.get('http://localhost:3001/customers')
-    .then((response) => {
-      this.setState({ customers: response.data });
-    })
-    .catch((error) => {
-      this.setState({ error: error.message });
-    });
-  }
-
   rentMovie = () => {
     const checkoutDate = new Date();
     const dueDate = new Date();
@@ -122,7 +128,6 @@ class App extends Component {
 
     axios.post(url, params)
     .then(() => {
-      console.log("CHECKIN SUCCESS")
       this.setState((prevState) => ({
         currentRental: {
           ...prevState.currentRental,
@@ -146,10 +151,9 @@ class App extends Component {
     })
   }
 
-  addMovieCallback = (movie) => {
-    const movieIds = this.state.movies.map(movie => movie.id)
-    this.setState({
-      movies: [...this.state.movies, {...movie, id: Math.max(...movieIds) + 1}]
+  setErrorOverdueCallback = (error) => {
+    this.setState({ 
+      error: error.message
     });
   }
 
@@ -175,12 +179,15 @@ class App extends Component {
           
           {errorSection}
 
-          {/* <Route exact path="/" component={Home} /> */}
-          <Route path="/" render={() => <Home setOverdueMoviesCallback={this.setOverdueMoviesCallback} overdueMovies={this.state.overdueMovies}/>}/>
-
-          <Route path="/search" render={() => <Search 
-                                                addMovieCallback={this.addMovieCallback}
-                                                moviesInLibrary={this.state.movies}/>}/>
+          <Route 
+            path="/search" 
+            render={() => (
+              <Search
+                addMovieCallback={this.addMovieCallback}
+                moviesInLibrary={this.state.movies}
+              />
+            )}
+          />
           <Route 
             path="/library" 
             render={() => (
@@ -201,6 +208,16 @@ class App extends Component {
               />
             )} 
           />
+          <Route 
+            path="/log" 
+            render={() => (
+              <Log 
+                setOverdueMoviesCallback={this.setOverdueMoviesCallback} 
+                overdueMovies={this.state.overdueMovies}
+                setErrorOverdueCallback={this.setErrorOverdueCallback}
+              />
+            )}
+          />
         </div>
       </Router>
     );
@@ -218,6 +235,7 @@ function Header() {
         <Link className="nav_link" to="/search">Search</Link>
         <Link className="nav_link" to="/library">Library</Link>
         <Link className="nav_link" to="/customers">Customers</Link>
+        <Link className="nav_link" to="/log">Log</Link>
       </Nav>
     </nav>
   );
diff --git a/src/components/Home.js b/src/components/Home.js
deleted file mode 100644
index e41673c5a..000000000
--- a/src/components/Home.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import axios from 'axios';
-// import './Home.css';
-
-const Home = (props) => {
-  const overdueMovies = () => {
-    axios.get('http://localhost:3001/rentals/overdue')
-    .then((response) => {
-      const overdueMovieCollection = response.data.map((overdueMovie) => {
-        console.log(overdueMovie.title)
-        return <li>{overdueMovie.title}</li>
-      })
-      props.setOverdueMoviesCallback(overdueMovieCollection)
-    })
-    .catch((error) => {
-      this.setState({ error: error.message });
-    });
-  }
-
-  return (
-    <div>
-      <button onClick={overdueMovies}>Overdue Movies</button>
-      {props.overdueMovie && <ul>{props.overdueMovie}</ul>}
-    </div>
-  )
-}
-
-Home.propTypes = {
-  // movie: PropTypes.object.isRequired,
-  // customer: PropTypes.object.isRequired,
-  // checkoutDate: PropTypes.string.isRequired,
-  // dueDate: PropTypes.string.isRequired,
-};
-
-export default Home;
\ No newline at end of file
diff --git a/src/components/Log.js b/src/components/Log.js
new file mode 100644
index 000000000..dfd2ec8f5
--- /dev/null
+++ b/src/components/Log.js
@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+// import './Log.css';
+
+const Log = (props) => {
+  const overdueMoviesCall = () => {
+    axios.get('http://localhost:3001/rentals/overdue')
+    .then((response) => {
+      const overdueMovieCollection = response.data.map((overdueMovie) => {
+        return <li>{overdueMovie.title}</li>
+      })
+      props.setOverdueMoviesCallback(overdueMovieCollection)
+    })
+    .catch((error) => {
+      props.setErrorOverdueCallback(error)
+    });
+  }
+
+  return (
+    <div>
+      <button onClick={overdueMoviesCall}>Overdue Movies</button>
+      {props.overdueMovies && <ul><li>{props.overdueMovies.length > 0 ? props.overdueMovies : "No Movies are Overdue!" }</li></ul>}
+    </div>
+  )
+}
+
+Log.propTypes = {
+  setOverdueMoviesCallback: PropTypes.func.isRequired,
+  overdueMovies: PropTypes.array,
+};
+
+export default Log;
\ No newline at end of file

From e16e0eef3f8b8ab1c8cb3d7b4fe1db2ba5a91193 Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Thu, 27 Jun 2019 13:51:45 -0700
Subject: [PATCH 33/66] styled view details in library

---
 src/App.js                  |  29 +++++-----
 src/components/Details.css  |   4 ++
 src/components/Details.js   |  28 ++++++----
 src/components/Library.js   |   4 +-
 src/components/Movie.css    |  15 ++++++
 src/components/Movie.js     | 104 +++++++++++++++++++++++++-----------
 src/components/MovieCard.js |   7 ---
 7 files changed, 132 insertions(+), 59 deletions(-)

diff --git a/src/App.js b/src/App.js
index f871b6ac1..811654862 100644
--- a/src/App.js
+++ b/src/App.js
@@ -18,7 +18,9 @@ class App extends Component {
       movies: [],
       customers: [],
       overdueMovies: undefined,
+      // expandedMovies: null,
       expandedMovies: {},
+      isDetailsClicked: false,
       rentedMovie: undefined,
       chosenCustomer: undefined,
       dueDate: undefined,
@@ -33,24 +35,24 @@ class App extends Component {
     };
   }
 
-  onClickDetailsCallback = (movie) => {
-    this.setState({ 
+  // onClickDetailsCallback = (movieId) => {
+  //   const movie = this.state.movies.find(movie => movie.id === movieId);
+  //   this.setState({ 
+  //     expandedMovies: movie,
+  //     isDetailsClicked: true
+  //   });
+
+  // }
+
+  onClickDetailsCallback = (id) => {
+    this.setState((prevState) => ({ 
       expandedMovies: {
         ...prevState.expandedMovies, 
         [id]: !prevState.expandedMovies[id],
       }
-    });
+    }));
   }
 
-  // onClickDetailsCallback = (id) => {
-  //   this.setState((prevState) => ({ 
-  //     expandedMovies: {
-  //       ...prevState.expandedMovies, 
-  //       [id]: !prevState.expandedMovies[id],
-  //     }
-  //   }));
-  // }
-
   onSelectMovieCallback = (index) => {
     const selectedMovie = this.state.movies[index]
     this.setState({ rentedMovie: selectedMovie });
@@ -163,6 +165,8 @@ class App extends Component {
   }
 
   render() {
+    // console.log(this.state.expandedMovies);
+
     const errorSection = (this.state.error) ?
     (<section>Error: {this.state.error}</section>) : null;
 
@@ -195,6 +199,7 @@ class App extends Component {
             render={() => (
               <Library 
                 library={this.state.movies} 
+                isDetailsClicked = {this.state.isDetailsClicked}
                 expandedMovies={this.state.expandedMovies} 
                 onClickDetailsCallback={this.onClickDetailsCallback} 
                 onSelectMovieCallback={this.onSelectMovieCallback} 
diff --git a/src/components/Details.css b/src/components/Details.css
index 1a728b7ba..7595d469b 100644
--- a/src/components/Details.css
+++ b/src/components/Details.css
@@ -1,3 +1,7 @@
 .pic {
     width: 200px;
+}
+
+.inline {
+    display: inline;
 }
\ No newline at end of file
diff --git a/src/components/Details.js b/src/components/Details.js
index 8b37abd8e..d398e035e 100644
--- a/src/components/Details.js
+++ b/src/components/Details.js
@@ -7,15 +7,25 @@ import './Details.css';
 const Details = (props) => {
   const movieDetails = () => {
     return (
-      <Card>
-        <Card.Body>
-          {/* <Card.Title>Title: {props.title}</Card.Title> */}
-          <Card.Text>Overview: {props.overview} </Card.Text>
-          <li>Id: {props.id}</li>
-          {/* <li>Release Date: {props.release_date}</li> */}
-          <li>External Id: {props.external_id}</li>
-        </Card.Body>
-      </Card>
+      // <Card>
+      //   <Card.Body>
+      //     <h3 className="title">{props.title}</h3>
+      //     {/* <Card.Text><span className="bold_words">Overview: </span>{props.viewMovieDetails.title} </Card.Text> */}
+      //     <Card.Text><span className="bold_words">Release Date: </span>{props.release_date} </Card.Text>
+      //     <Card.Text><span className="bold_words">Overview: </span>{props.overview} </Card.Text>
+      //     <p className="inline"><span className="bold_words">Id: </span>{props.id}</p>
+      //     {/* <li>Release Date: {props.release_date}</li> */}
+      //     <p className="inline"><span className="bold_words">External Id:  </span>{props.external_id}</p>
+      //   </Card.Body>
+      // </Card>
+
+      <div>
+        <h3 className="title">{props.title}</h3>
+        <p><span className="bold_words">Release Date: </span>{props.release_date}</p>
+        <p><span className="bold_words">Overview: </span>{props.overview}</p>
+        {/* <p><span className="bold_words">Id: </span>{props.id}</p> */}
+        {/* <p><span className="bold_words">External Id:  </span>{props.external_id}</p> */}
+      </div>
     )
   };
 
diff --git a/src/components/Library.js b/src/components/Library.js
index 4a5af2f9a..e55dad74e 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -8,11 +8,13 @@ const Library = (props) => {
   const movieCollection = props.library.map((movie, i) => {
     return <Movie key={i} 
             movie={movie} 
+            // isDetailsClicked={props.isDetailsClicked}
+            // viewMovieDetails={props.expandedMovies} 
             viewMovieDetails={props.expandedMovies[movie.id]} 
             onClickDetailsCallback={props.onClickDetailsCallback} 
             onSelectMovieCallback={props.onSelectMovieCallback}/>
    });
-   
+   console.log(props.expandedMovies);
   return (
     <section className="library_container">
       <h1>Library</h1>
diff --git a/src/components/Movie.css b/src/components/Movie.css
index a9f93e83b..2b4b21863 100644
--- a/src/components/Movie.css
+++ b/src/components/Movie.css
@@ -1,4 +1,5 @@
 .movie_container {
+    height: 300px;
     display: flex;
     flex-direction: row;
 }
@@ -14,4 +15,18 @@
 
 .bold_words {
     font-weight: bold;
+}
+
+.movie_image {
+    width: 300px;
+}
+
+.description {
+    display: flex;
+    flex-direction: column;
+    /* flex-wrap: wrap; */
+}
+
+.select_movie-button {
+    margin-top: 1rem;
 }
\ No newline at end of file
diff --git a/src/components/Movie.js b/src/components/Movie.js
index 29a47a5fc..550ec4b3c 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -2,56 +2,100 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Details from './Details';
 import './Movie.css';
+import Button from 'react-bootstrap/Button'
+
 
 const Movie = (props) => {
   const onClickButton = () => {
     props.onSelectMovieCallback(props.movie.id)
   }
 
-  let movie;
-  let movieDetails;
-
-  movie = (<td className="movie_container">
-          <img src={props.movie.image_url} alt={props.movie.title}/>
-          <div className="movie_description">
-          <h3 className="title">{props.movie.title}</h3>
-          <p><span className="bold_words">Release Date: </span>{props.movie.release_date}</p>
-          <p><span className="bold_words">Overview: </span>{props.movie.overview.length > 128 ? `${props.movie.overview.substring(0, 150)}...` : props.movie.overview}</p>
-          </div>
-      </td>)
-
+  
   const onClickDetailsButton = () => {
-    props.onClickDetailsCallback(props.movie);
+    props.onClickDetailsCallback(props.movie.id);
   }
-  // const onClickDetailsButton = () => {
-  //   props.onClickDetailsCallback(props.movie.id);
-  // }
+  // const movieDetails = <Details {...props.movie}/>;
+  // const movieDetails = <Details viewMovieDetails= {props.viewMovieDetails}/>;
 
-  // movie = (<td className="movie_container">
-  //       <img src={props.movie.image_url} alt={props.movie.title}/>
-  //       <div className="movie_description">
+  // const movie = (<td className="movie_container">
+  //         <img src={props.movie.image_url} alt={props.movie.title}/>
+  //         <div className="movie_description">
   //         <h3 className="title">{props.movie.title}</h3>
   //         <p><span className="bold_words">Release Date: </span>{props.movie.release_date}</p>
   //         <p><span className="bold_words">Overview: </span>{props.movie.overview.length > 128 ? `${props.movie.overview.substring(0, 150)}...` : props.movie.overview}</p>
   //         <button onClick={onClickDetailsButton}>View Details</button>
   //         <button onClick={onClickButton}>Select Movie</button>
-  //         {props.viewMovieDetails && <Details {...props.movie} />}
-  //       </div>
-  //     </td>)
-  
+  //         </div>
+  //               </td>)
   
+  // let movieToShow;
+  // if (props.isDetailsClicked) {
+  //   movieToShow = movieDetails;
+  // } else {
+  //   movieToShow = movie;
+  // }
 
-  
+  let movieDescription = <div>
+      <h3 className="title">{props.movie.title}</h3>
+      <p><span className="bold_words">Release Date: </span>{props.movie.release_date}</p>
+      <p><span className="bold_words">Overview: </span>{props.movie.overview.length > 128 ? `${props.movie.overview.substring(0, 150)}...` : props.movie.overview}</p>
+      {/* <button onClick={onClickDetailsButton}>View Details</button>
+      <button onClick={onClickButton}>Select Movie</button>     */}
+    </div>
+
+  let buttons = <div className="buttons">
+                  <div>
+                    <Button variant="outline-info" onClick={onClickDetailsButton}>Show More</Button>
+                  </div>
+                  <div>
+                    <Button className="select_movie-button" onClick={onClickButton}>Select Movie</Button>
+                  </div>
+                </div>
+
+  if (props.viewMovieDetails) {
+    movieDescription = null;
+      {/* <button onClick={onClickDetailsButton}>View Details</button>
+      <button onClick={onClickButton}>Select Movie</button> */}
+    buttons = <div className="buttons">
+                <div>
+                  <Button variant="outline-info" onClick={onClickDetailsButton}>Show Less</Button>
+                </div>
+                <div>
+                  <Button  className="select_movie-button" onClick={onClickButton}>Select Movie</Button>
+                </div>
+              </div>
+  }
   
   return (
     
     <tr>
-        {movie}
-        {/* <button onClick={onClickDetails}>View Details</button> */}
-        <button onClick={onClickDetailsButton}>View Details</button>
-        <button onClick={onClickButton}>Select Movie</button>
-        {props.viewMovieDetails && <Details {...props.movie} />}
-        {movieDetails}
+        {/* {movie} */}
+        {/* {props.viewMovieDetails && <Details {...props.movie} />} */}
+        {/* {movieToShow} */}
+        {/* <button onClick={onClickDetailsButton}>View Details</button>
+        <button onClick={onClickButton}>Select Movie</button> */}
+        {/* {movieDetails} */}
+      <td className="movie_container">
+        <img className="movie_image" src={props.movie.image_url} alt={props.movie.title}/>
+        <div className="movie_description">
+          {movieDescription}
+          {/* <div>
+            <h3 className="title">{props.movie.title}</h3>
+            <p><span className="bold_words">Release Date: </span>{props.movie.release_date}</p>
+            <p><span className="bold_words">Overview: </span>{props.movie.overview.length > 128 ? `${props.movie.overview.substring(0, 150)}...` : props.movie.overview}</p>
+          </div> */}
+          {/* <button onClick={onClickDetailsButton}>View Details</button>
+          <button onClick={onClickButton}>Select Movie</button> */}
+          <div className="description"> 
+            {props.viewMovieDetails && <Details {...props.movie} />}
+            {/* <div className="buttons">
+              <button onClick={onClickDetailsButton}>View Details</button>
+              <button onClick={onClickButton}>Select Movie</button>
+            </div> */}
+            {buttons}
+          </div>
+        </div>
+      </td>
     </tr>
   )
 }
diff --git a/src/components/MovieCard.js b/src/components/MovieCard.js
index 8a4fd53b9..53547543c 100644
--- a/src/components/MovieCard.js
+++ b/src/components/MovieCard.js
@@ -7,13 +7,6 @@ const MovieCard = (props) => {
         addMovieCallback(props);
     }
     return (
-        // <tr>
-        //     <td><img src={image_url} alt={title}/></td>
-        //     <td>{title}</td>
-        //     <td>{overview}</td>
-        //     <td>{release_date}</td>
-        //     <td><Button onClick={addMovie}>Add to Library</Button></td>
-        // </tr>
 
         <tr>
             <td className="movie_container">

From c352602b766847f1b431bbeba8b1187771a23599 Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Thu, 27 Jun 2019 14:10:57 -0700
Subject: [PATCH 34/66] fixed image sizes and cleaned up comments

---
 src/components/Details.js | 13 ------------
 src/components/Library.js |  2 --
 src/components/Movie.css  |  3 ---
 src/components/Movie.js   | 43 +--------------------------------------
 4 files changed, 1 insertion(+), 60 deletions(-)

diff --git a/src/components/Details.js b/src/components/Details.js
index d398e035e..b2f6deb0f 100644
--- a/src/components/Details.js
+++ b/src/components/Details.js
@@ -7,24 +7,11 @@ import './Details.css';
 const Details = (props) => {
   const movieDetails = () => {
     return (
-      // <Card>
-      //   <Card.Body>
-      //     <h3 className="title">{props.title}</h3>
-      //     {/* <Card.Text><span className="bold_words">Overview: </span>{props.viewMovieDetails.title} </Card.Text> */}
-      //     <Card.Text><span className="bold_words">Release Date: </span>{props.release_date} </Card.Text>
-      //     <Card.Text><span className="bold_words">Overview: </span>{props.overview} </Card.Text>
-      //     <p className="inline"><span className="bold_words">Id: </span>{props.id}</p>
-      //     {/* <li>Release Date: {props.release_date}</li> */}
-      //     <p className="inline"><span className="bold_words">External Id:  </span>{props.external_id}</p>
-      //   </Card.Body>
-      // </Card>
 
       <div>
         <h3 className="title">{props.title}</h3>
         <p><span className="bold_words">Release Date: </span>{props.release_date}</p>
         <p><span className="bold_words">Overview: </span>{props.overview}</p>
-        {/* <p><span className="bold_words">Id: </span>{props.id}</p> */}
-        {/* <p><span className="bold_words">External Id:  </span>{props.external_id}</p> */}
       </div>
     )
   };
diff --git a/src/components/Library.js b/src/components/Library.js
index e55dad74e..4f527f5c9 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -8,8 +8,6 @@ const Library = (props) => {
   const movieCollection = props.library.map((movie, i) => {
     return <Movie key={i} 
             movie={movie} 
-            // isDetailsClicked={props.isDetailsClicked}
-            // viewMovieDetails={props.expandedMovies} 
             viewMovieDetails={props.expandedMovies[movie.id]} 
             onClickDetailsCallback={props.onClickDetailsCallback} 
             onSelectMovieCallback={props.onSelectMovieCallback}/>
diff --git a/src/components/Movie.css b/src/components/Movie.css
index 2b4b21863..36a11e458 100644
--- a/src/components/Movie.css
+++ b/src/components/Movie.css
@@ -17,9 +17,6 @@
     font-weight: bold;
 }
 
-.movie_image {
-    width: 300px;
-}
 
 .description {
     display: flex;
diff --git a/src/components/Movie.js b/src/components/Movie.js
index 550ec4b3c..3e4ce0468 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Details from './Details';
 import './Movie.css';
@@ -14,33 +14,11 @@ const Movie = (props) => {
   const onClickDetailsButton = () => {
     props.onClickDetailsCallback(props.movie.id);
   }
-  // const movieDetails = <Details {...props.movie}/>;
-  // const movieDetails = <Details viewMovieDetails= {props.viewMovieDetails}/>;
-
-  // const movie = (<td className="movie_container">
-  //         <img src={props.movie.image_url} alt={props.movie.title}/>
-  //         <div className="movie_description">
-  //         <h3 className="title">{props.movie.title}</h3>
-  //         <p><span className="bold_words">Release Date: </span>{props.movie.release_date}</p>
-  //         <p><span className="bold_words">Overview: </span>{props.movie.overview.length > 128 ? `${props.movie.overview.substring(0, 150)}...` : props.movie.overview}</p>
-  //         <button onClick={onClickDetailsButton}>View Details</button>
-  //         <button onClick={onClickButton}>Select Movie</button>
-  //         </div>
-  //               </td>)
-  
-  // let movieToShow;
-  // if (props.isDetailsClicked) {
-  //   movieToShow = movieDetails;
-  // } else {
-  //   movieToShow = movie;
-  // }
 
   let movieDescription = <div>
       <h3 className="title">{props.movie.title}</h3>
       <p><span className="bold_words">Release Date: </span>{props.movie.release_date}</p>
       <p><span className="bold_words">Overview: </span>{props.movie.overview.length > 128 ? `${props.movie.overview.substring(0, 150)}...` : props.movie.overview}</p>
-      {/* <button onClick={onClickDetailsButton}>View Details</button>
-      <button onClick={onClickButton}>Select Movie</button>     */}
     </div>
 
   let buttons = <div className="buttons">
@@ -54,8 +32,6 @@ const Movie = (props) => {
 
   if (props.viewMovieDetails) {
     movieDescription = null;
-      {/* <button onClick={onClickDetailsButton}>View Details</button>
-      <button onClick={onClickButton}>Select Movie</button> */}
     buttons = <div className="buttons">
                 <div>
                   <Button variant="outline-info" onClick={onClickDetailsButton}>Show Less</Button>
@@ -69,29 +45,12 @@ const Movie = (props) => {
   return (
     
     <tr>
-        {/* {movie} */}
-        {/* {props.viewMovieDetails && <Details {...props.movie} />} */}
-        {/* {movieToShow} */}
-        {/* <button onClick={onClickDetailsButton}>View Details</button>
-        <button onClick={onClickButton}>Select Movie</button> */}
-        {/* {movieDetails} */}
       <td className="movie_container">
         <img className="movie_image" src={props.movie.image_url} alt={props.movie.title}/>
         <div className="movie_description">
           {movieDescription}
-          {/* <div>
-            <h3 className="title">{props.movie.title}</h3>
-            <p><span className="bold_words">Release Date: </span>{props.movie.release_date}</p>
-            <p><span className="bold_words">Overview: </span>{props.movie.overview.length > 128 ? `${props.movie.overview.substring(0, 150)}...` : props.movie.overview}</p>
-          </div> */}
-          {/* <button onClick={onClickDetailsButton}>View Details</button>
-          <button onClick={onClickButton}>Select Movie</button> */}
           <div className="description"> 
             {props.viewMovieDetails && <Details {...props.movie} />}
-            {/* <div className="buttons">
-              <button onClick={onClickDetailsButton}>View Details</button>
-              <button onClick={onClickButton}>Select Movie</button>
-            </div> */}
             {buttons}
           </div>
         </div>

From 2aedf3bb29fc867f98bdd795166ffbf2803d6ffa Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Thu, 27 Jun 2019 14:13:21 -0700
Subject: [PATCH 35/66] changed overview in search results

---
 src/components/MovieCard.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/MovieCard.js b/src/components/MovieCard.js
index 53547543c..1820de98d 100644
--- a/src/components/MovieCard.js
+++ b/src/components/MovieCard.js
@@ -14,7 +14,8 @@ const MovieCard = (props) => {
             <div className="movie_description">
                 <h3 className="title">{title}</h3>
                 <p><span className="bold_words">Release Date: </span>{release_date}</p>
-                <p><span className="bold_words">Overview: </span>{overview.length > 200 ? `${overview.substring(0, 150)}...` : overview}</p>
+                <p><span className="bold_words">Overview: </span>{overview}</p>
+                {/* <p><span className="bold_words">Overview: </span>{overview.length > 200 ? `${overview.substring(0, 150)}...` : overview}</p> */}
                 <Button onClick={addMovie}>Add to Library</Button>
             </div>
             </td>

From f49292abcd28e7d1dcdbd788d380783cfaa6cb6f Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Thu, 27 Jun 2019 14:16:21 -0700
Subject: [PATCH 36/66] able to view rentals per each customer

---
 src/App.js                  | 133 +++++++++++++++++++++++++++++++++++-
 src/components/Customer.js  |  25 +++++--
 src/components/Customers.js |   2 +-
 src/components/Log.js       |  32 ++++++++-
 4 files changed, 184 insertions(+), 8 deletions(-)

diff --git a/src/App.js b/src/App.js
index 32c72841e..b4addc6e6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -16,6 +16,8 @@ class App extends Component {
     this.state = {
       movies: [],
       customers: [],
+      allRentals: undefined,
+      customerRentals: undefined,
       overdueMovies: undefined,
       expandedMovies: {},
       rentedMovie: undefined,
@@ -157,6 +159,127 @@ class App extends Component {
     });
   }
 
+
+  gatherAllRentals = (customerID) => {
+    let uniqueRentals = {}
+
+    axios.get('http://localhost:3001/rentals')
+    .then((response) => {
+      console.log("succcess")
+      console.log(response.data)
+      response.data.forEach((rental, i) => {
+        if (rental !== null) {
+          uniqueRentals[i] = {
+            "customer": rental.customer_id,
+            "movie": rental.title,
+            "checkout_date": rental.checkout_date,
+            "due_date": rental.due_date
+          }
+        }
+      })
+      // props.setAllRentals(rentalCollection)
+      console.log(this.state.allRentals)
+
+      this.setState({ 
+        allRentals: uniqueRentals
+      })
+      console.log(this.state.allRentals)
+
+      this.findCustomerRentals(customerID)
+    })
+    .catch((error) => {
+      // props.setAllRentalsError(error)
+      this.setState({ 
+        error: error.message
+      });
+    });
+
+
+    // const rentalCollection = Object.keys(uniqueRentals).map((key, i) => {
+    //   return <li key={i}>{key} checked out by Customer #{uniqueRentals[key]["customer_id"]} on {uniqueRentals[key]["checkout_date"]} due {uniqueRentals[key]["due_date"]} </li>
+    // })
+  }
+
+  findCustomerRentals = (customerID) => {
+    console.log("find customers rentals")
+    console.log(this.state.allRentals)
+    
+    // console.log(this.state.allRentals[customerID])
+    const rentals = []
+
+for (let key in this.state.allRentals) {
+  console.log(this.state.allRentals[key]["customer"])
+  if (this.state.allRentals[key]["customer"] === customerID) {
+    rentals.push(
+      {
+        "movie": this.state.allRentals[key]["movie"],
+        "checkout_date": this.state.allRentals[key]["checkout_date"],
+        "due_date": this.state.allRentals[key]["due_date"]
+      }
+    )
+    
+    // `<tr><td>${this.state.allRentals[key]["movie"]}</td><td>${this.state.allRentals[key]["checkout_date"]}</td><td>${this.state.allRentals[key]["due_date"]}</td></tr>`)
+  }
+}
+
+console.log(rentals)
+// this.state.allRentals.forEach((rental) => {
+  // console.log(rental)
+// })
+      // const customerRentalCollection = Object.keys(this.state.allRentals).map((key, i) => {
+      //   console.log(key)
+      //   if (key === customerID) {
+      //   //   return (<li key={i}>"{key["movie"]}": checked out {key["checkout_date"]} due {key["due_date"]} </li>)
+      //   }
+      // })
+
+      this.setState({
+        customerRentals: rentals,
+      });
+    // }
+
+    // console.log(this.state.customerRentals)
+  }
+
+
+  // setAllRentals = (value) => {
+  //   this.setState({ 
+  //     allRentals: value
+  //   })
+  // }
+
+  // setAllRentalsError = (error) => {
+  //   this.setState({ 
+  //     error: error.message
+  //   });
+  // }
+
+
+  onCustomerRentalsCallback = (customerID) => {
+    this.gatherAllRentals(customerID)
+    // this.findCustomerRentals(customerID)
+    // this.setState((prevState) => ({ 
+    //   allRentals: prevState.allRentals
+    // }))
+
+    // console.log(
+      // "works?"
+    // )
+    // console.log(this.state.allRentals)
+    // console.log(this.state.customerRentals)
+
+
+    // const customerRentalCollection = Object.keys(this.state.allRentals).map((key, i) => {
+    //   if (key === customerID) {
+    //     return (<li key={i}>"{key["movie"]}": checked out {key["checkout_date"]} due {key["due_date"]} </li>)
+    //   }
+    // })
+
+    // this.setState({
+    //   customerRentals: customerRentalCollection,
+    // });
+  }
+
   render() {
     const errorSection = (this.state.error) ?
     (<section>Error: {this.state.error}</section>) : null;
@@ -203,17 +326,23 @@ class App extends Component {
             path="/customers" 
             render={() => (
               <Customers 
+                // allRentals={this.state.allRentals}
+                customerRentals={this.state.customerRentals}
                 customers={this.state.customers} 
                 onSelectCustomerCallback={this.onSelectCustomerCallback}
+                onCustomerRentalsCallback={this.onCustomerRentalsCallback}
               />
             )} 
           />
           <Route 
             path="/log" 
             render={() => (
-              <Log 
-                setOverdueMoviesCallback={this.setOverdueMoviesCallback} 
+              <Log  
                 overdueMovies={this.state.overdueMovies}
+                allRentals={this.state.allRentals}
+                setAllRentals={this.setAllRentals}
+                setAllRentalsError={this.setAllRentalsError}
+                setOverdueMoviesCallback={this.setOverdueMoviesCallback}
                 setErrorOverdueCallback={this.setErrorOverdueCallback}
               />
             )}
diff --git a/src/components/Customer.js b/src/components/Customer.js
index 7478fb743..93269850c 100644
--- a/src/components/Customer.js
+++ b/src/components/Customer.js
@@ -1,19 +1,34 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Button from 'react-bootstrap/Button'
-
-// import axios from 'axios';
+import axios from 'axios';
 // import './Customer.css';
 
 const Customer = (props) => {
-  const onClickButton = () => {
+  const onSelectCustomer = () => {
     props.onSelectCustomerCallback(props.id - 1)
   }
 
+  const onViewRentals = () => {
+    props.onCustomerRentalsCallback(props.id)
+  }
+
+  const showCustomerRentals = () => {
+    const rentalHTML = props.customerRentals.map((rental, i) => {
+      return <tr key={i}><td>{rental["movie"]}</td><td>{rental["checkout_date"]}</td><td>{rental["due_date"]}</td></tr>
+    })
+
+    return rentalHTML
+  }
+
   return (
     <tr>
       <td>{props.name}</td>
-      <td><Button onClick={onClickButton}>Select Customer</Button></td>
+      <td><Button onClick={onSelectCustomer}>Select Customer</Button></td>
+      <td><Button onClick={onViewRentals}>Rentals</Button></td>
+      {props.customerRentals && <table><tr><th>Movie</th><th>Checked Out</th><th>Due On</th></tr>{showCustomerRentals()}</table>}
+
+
     </tr>
   )
 }
@@ -21,7 +36,9 @@ const Customer = (props) => {
 Customer.propTypes = {
   id: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,
+  allRentals: PropTypes.array,
   onSelectCustomerCallback: PropTypes.func.isRequired,
+  onCustomerRentalsCallback: PropTypes.func.isRequired,
 };
 
 export default Customer;
\ No newline at end of file
diff --git a/src/components/Customers.js b/src/components/Customers.js
index e652a7885..82cecc294 100644
--- a/src/components/Customers.js
+++ b/src/components/Customers.js
@@ -8,7 +8,7 @@ import './Customers.css';
 
 const Customers = (props) => {
   const customerCollection = props.customers.map((customer, i) => {
-    return <Customer key={i} id={customer.id} name={customer.name} onSelectCustomerCallback={props.onSelectCustomerCallback}/>
+    return <Customer key={i} id={customer.id} name={customer.name} customerRentals={props.customerRentals} onSelectCustomerCallback={props.onSelectCustomerCallback} onCustomerRentalsCallback={props.onCustomerRentalsCallback}/>
    });
 
   return (
diff --git a/src/components/Log.js b/src/components/Log.js
index dfd2ec8f5..ad4692714 100644
--- a/src/components/Log.js
+++ b/src/components/Log.js
@@ -16,11 +16,41 @@ const Log = (props) => {
       props.setErrorOverdueCallback(error)
     });
   }
+  // let uniqueRentals = {}
+
+  // const showAllRentals = () => {
+  //   axios.get('http://localhost:3001/rentals')
+  //   .then((response) => {
+  //     console.log("succcess")
+  //     console.log(response.data)
+  //     // let uniqueRentals = {}
+  //     response.data.forEach((rental) => {
+  //       if (rental) {
+  //         uniqueRentals[rental.title] = {
+  //           "customer": rental.customer,
+  //           "checkout_date": rental.checkout_date,
+  //           "due_date": rental.due_date
+  //         }
+  //       }
+  //     })
+  //     props.setAllRentals(rentalCollection)
+  //   })
+  //   .catch((error) => {
+  //     props.setAllRentalsError(error)
+  //   });
+  // }
+
+  // const rentalCollection = Object.keys(uniqueRentals).map((key, i) => {
+  //   return <li key={i}>{key} checked out by Customer #{uniqueRentals[key]["customer_id"]} on {uniqueRentals[key]["checkout_date"]} due {uniqueRentals[key]["due_date"]} </li>
+  // })
 
   return (
     <div>
       <button onClick={overdueMoviesCall}>Overdue Movies</button>
-      {props.overdueMovies && <ul><li>{props.overdueMovies.length > 0 ? props.overdueMovies : "No Movies are Overdue!" }</li></ul>}
+      {props.overdueMovies && <ul>{props.overdueMovies.length > 0 ? props.overdueMovies : "No Movies are Overdue!" }</ul>}
+
+      {/* <button onClick={showAllRentals}>All Rentals</button> */}
+      {/* {props.allRentals && <ul>{props.allRentals.length > 0 ? rentalCollection : "No Current Rentals!" }</ul>} */}
     </div>
   )
 }

From d39cfdfa73b80f2d4bdc3a5c82b27c7674ee70dc Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Thu, 27 Jun 2019 14:19:02 -0700
Subject: [PATCH 37/66] removed old unused code

---
 src/App.js                 | 93 ++++++--------------------------------
 src/components/Customer.js |  2 -
 src/components/Log.js      | 31 -------------
 3 files changed, 13 insertions(+), 113 deletions(-)

diff --git a/src/App.js b/src/App.js
index b4addc6e6..9667a1fa8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -165,8 +165,6 @@ class App extends Component {
 
     axios.get('http://localhost:3001/rentals')
     .then((response) => {
-      console.log("succcess")
-      console.log(response.data)
       response.data.forEach((rental, i) => {
         if (rental !== null) {
           uniqueRentals[i] = {
@@ -177,107 +175,42 @@ class App extends Component {
           }
         }
       })
-      // props.setAllRentals(rentalCollection)
-      console.log(this.state.allRentals)
 
       this.setState({ 
         allRentals: uniqueRentals
       })
-      console.log(this.state.allRentals)
 
       this.findCustomerRentals(customerID)
     })
     .catch((error) => {
-      // props.setAllRentalsError(error)
       this.setState({ 
         error: error.message
       });
     });
-
-
-    // const rentalCollection = Object.keys(uniqueRentals).map((key, i) => {
-    //   return <li key={i}>{key} checked out by Customer #{uniqueRentals[key]["customer_id"]} on {uniqueRentals[key]["checkout_date"]} due {uniqueRentals[key]["due_date"]} </li>
-    // })
   }
 
   findCustomerRentals = (customerID) => {
-    console.log("find customers rentals")
-    console.log(this.state.allRentals)
-    
-    // console.log(this.state.allRentals[customerID])
     const rentals = []
 
-for (let key in this.state.allRentals) {
-  console.log(this.state.allRentals[key]["customer"])
-  if (this.state.allRentals[key]["customer"] === customerID) {
-    rentals.push(
-      {
-        "movie": this.state.allRentals[key]["movie"],
-        "checkout_date": this.state.allRentals[key]["checkout_date"],
-        "due_date": this.state.allRentals[key]["due_date"]
+    for (let key in this.state.allRentals) {
+      if (this.state.allRentals[key]["customer"] === customerID) {
+        rentals.push(
+          {
+            "movie": this.state.allRentals[key]["movie"],
+            "checkout_date": this.state.allRentals[key]["checkout_date"],
+            "due_date": this.state.allRentals[key]["due_date"]
+          }
+        )
       }
-    )
-    
-    // `<tr><td>${this.state.allRentals[key]["movie"]}</td><td>${this.state.allRentals[key]["checkout_date"]}</td><td>${this.state.allRentals[key]["due_date"]}</td></tr>`)
-  }
-}
-
-console.log(rentals)
-// this.state.allRentals.forEach((rental) => {
-  // console.log(rental)
-// })
-      // const customerRentalCollection = Object.keys(this.state.allRentals).map((key, i) => {
-      //   console.log(key)
-      //   if (key === customerID) {
-      //   //   return (<li key={i}>"{key["movie"]}": checked out {key["checkout_date"]} due {key["due_date"]} </li>)
-      //   }
-      // })
-
-      this.setState({
-        customerRentals: rentals,
-      });
-    // }
+    }
 
-    // console.log(this.state.customerRentals)
+    this.setState({
+      customerRentals: rentals,
+    });
   }
 
-
-  // setAllRentals = (value) => {
-  //   this.setState({ 
-  //     allRentals: value
-  //   })
-  // }
-
-  // setAllRentalsError = (error) => {
-  //   this.setState({ 
-  //     error: error.message
-  //   });
-  // }
-
-
   onCustomerRentalsCallback = (customerID) => {
     this.gatherAllRentals(customerID)
-    // this.findCustomerRentals(customerID)
-    // this.setState((prevState) => ({ 
-    //   allRentals: prevState.allRentals
-    // }))
-
-    // console.log(
-      // "works?"
-    // )
-    // console.log(this.state.allRentals)
-    // console.log(this.state.customerRentals)
-
-
-    // const customerRentalCollection = Object.keys(this.state.allRentals).map((key, i) => {
-    //   if (key === customerID) {
-    //     return (<li key={i}>"{key["movie"]}": checked out {key["checkout_date"]} due {key["due_date"]} </li>)
-    //   }
-    // })
-
-    // this.setState({
-    //   customerRentals: customerRentalCollection,
-    // });
   }
 
   render() {
diff --git a/src/components/Customer.js b/src/components/Customer.js
index 93269850c..1c9ec09ed 100644
--- a/src/components/Customer.js
+++ b/src/components/Customer.js
@@ -27,8 +27,6 @@ const Customer = (props) => {
       <td><Button onClick={onSelectCustomer}>Select Customer</Button></td>
       <td><Button onClick={onViewRentals}>Rentals</Button></td>
       {props.customerRentals && <table><tr><th>Movie</th><th>Checked Out</th><th>Due On</th></tr>{showCustomerRentals()}</table>}
-
-
     </tr>
   )
 }
diff --git a/src/components/Log.js b/src/components/Log.js
index ad4692714..44fb54f5a 100644
--- a/src/components/Log.js
+++ b/src/components/Log.js
@@ -16,41 +16,10 @@ const Log = (props) => {
       props.setErrorOverdueCallback(error)
     });
   }
-  // let uniqueRentals = {}
-
-  // const showAllRentals = () => {
-  //   axios.get('http://localhost:3001/rentals')
-  //   .then((response) => {
-  //     console.log("succcess")
-  //     console.log(response.data)
-  //     // let uniqueRentals = {}
-  //     response.data.forEach((rental) => {
-  //       if (rental) {
-  //         uniqueRentals[rental.title] = {
-  //           "customer": rental.customer,
-  //           "checkout_date": rental.checkout_date,
-  //           "due_date": rental.due_date
-  //         }
-  //       }
-  //     })
-  //     props.setAllRentals(rentalCollection)
-  //   })
-  //   .catch((error) => {
-  //     props.setAllRentalsError(error)
-  //   });
-  // }
-
-  // const rentalCollection = Object.keys(uniqueRentals).map((key, i) => {
-  //   return <li key={i}>{key} checked out by Customer #{uniqueRentals[key]["customer_id"]} on {uniqueRentals[key]["checkout_date"]} due {uniqueRentals[key]["due_date"]} </li>
-  // })
-
   return (
     <div>
       <button onClick={overdueMoviesCall}>Overdue Movies</button>
       {props.overdueMovies && <ul>{props.overdueMovies.length > 0 ? props.overdueMovies : "No Movies are Overdue!" }</ul>}
-
-      {/* <button onClick={showAllRentals}>All Rentals</button> */}
-      {/* {props.allRentals && <ul>{props.allRentals.length > 0 ? rentalCollection : "No Current Rentals!" }</ul>} */}
     </div>
   )
 }

From 26e164d786dd3bee20def15aad96278b02a96e72 Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Thu, 27 Jun 2019 15:33:18 -0700
Subject: [PATCH 38/66] fixed problem with image url

---
 src/components/Movie.js  | 2 ++
 src/components/Search.js | 3 ++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Movie.js b/src/components/Movie.js
index 3e4ce0468..6dc793bd0 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -42,6 +42,8 @@ const Movie = (props) => {
               </div>
   }
   
+  console.log("Rendering movie with image URL:", props.movie.image_url);
+
   return (
     
     <tr>
diff --git a/src/components/Search.js b/src/components/Search.js
index 766442db6..9303f0c3c 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -48,7 +48,8 @@ class Search extends Component {
         } else {
             const movieToLibrary = {
                 external_id: movie.external_id,
-                image_url: movie.image_url,
+                image_url: movie.image_url.substring(31, movie.image_url.length),
+                // image_url: movie.image_url,
                 title: movie.title,
                 overview: movie.overview,
                 release_date: movie.release_date

From d6dd091538306ec9adaaeb556dde6829956f79e9 Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Thu, 27 Jun 2019 17:35:48 -0700
Subject: [PATCH 39/66] show Selected button when the movie is selected in the
 library

---
 src/App.js                  |  6 +++---
 src/components/Library.js   |  5 +++--
 src/components/Movie.js     | 32 +++++++++++++++++---------------
 src/components/MovieCard.js |  1 -
 4 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/App.js b/src/App.js
index c5fdedcd2..73de18bc1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -68,8 +68,8 @@ class App extends Component {
     }));
   }
 
-  onSelectMovieCallback = (index) => {
-    const selectedMovie = this.state.movies[index]
+  onSelectMovieCallback = (id) => {
+    const selectedMovie = this.state.movies.find(movie => movie.id === id);
     this.setState({ rentedMovie: selectedMovie });
   }
 
@@ -160,7 +160,6 @@ class App extends Component {
   }
 
   render() {
-    // console.log(this.state.expandedMovies);
 
     const errorSection = (this.state.error) ?
     (<section>Error: {this.state.error}</section>) : null;
@@ -201,6 +200,7 @@ class App extends Component {
                 expandedMovies={this.state.expandedMovies} 
                 onClickDetailsCallback={this.onClickDetailsCallback} 
                 onSelectMovieCallback={this.onSelectMovieCallback} 
+                selectedMovie={this.state.rentedMovie}
               />
             )} 
           />
diff --git a/src/components/Library.js b/src/components/Library.js
index 4f527f5c9..382befadd 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -10,9 +10,10 @@ const Library = (props) => {
             movie={movie} 
             viewMovieDetails={props.expandedMovies[movie.id]} 
             onClickDetailsCallback={props.onClickDetailsCallback} 
-            onSelectMovieCallback={props.onSelectMovieCallback}/>
+            onSelectMovieCallback={props.onSelectMovieCallback}
+            selectedMovie={props.selectedMovie}/>
    });
-   console.log(props.expandedMovies);
+
   return (
     <section className="library_container">
       <h1>Library</h1>
diff --git a/src/components/Movie.js b/src/components/Movie.js
index 6dc793bd0..72c64d405 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -21,29 +21,28 @@ const Movie = (props) => {
       <p><span className="bold_words">Overview: </span>{props.movie.overview.length > 128 ? `${props.movie.overview.substring(0, 150)}...` : props.movie.overview}</p>
     </div>
 
-  let buttons = <div className="buttons">
-                  <div>
+  let showButton = <div>
                     <Button variant="outline-info" onClick={onClickDetailsButton}>Show More</Button>
                   </div>
-                  <div>
-                    <Button className="select_movie-button" onClick={onClickButton}>Select Movie</Button>
-                  </div>
-                </div>
+  let selectButton = <div>
+                      <Button  className="select_movie-button" onClick={onClickButton}>Select Movie</Button>
+                    </div>
 
   if (props.viewMovieDetails) {
     movieDescription = null;
-    buttons = <div className="buttons">
-                <div>
+    showButton = <div>
                   <Button variant="outline-info" onClick={onClickDetailsButton}>Show Less</Button>
                 </div>
-                <div>
-                  <Button  className="select_movie-button" onClick={onClickButton}>Select Movie</Button>
-                </div>
-              </div>
+                
   }
-  
-  console.log("Rendering movie with image URL:", props.movie.image_url);
 
+
+  if (props.selectedMovie === props.movie) {
+    selectButton = <div>
+                      <Button  className="select_movie-button" onClick={onClickButton}>Selected</Button>
+                    </div>
+  }
+  
   return (
     
     <tr>
@@ -53,7 +52,10 @@ const Movie = (props) => {
           {movieDescription}
           <div className="description"> 
             {props.viewMovieDetails && <Details {...props.movie} />}
-            {buttons}
+            <div className="buttons">
+                {showButton}
+                {selectButton}
+            </div>
           </div>
         </div>
       </td>
diff --git a/src/components/MovieCard.js b/src/components/MovieCard.js
index 1820de98d..f30b53c24 100644
--- a/src/components/MovieCard.js
+++ b/src/components/MovieCard.js
@@ -15,7 +15,6 @@ const MovieCard = (props) => {
                 <h3 className="title">{title}</h3>
                 <p><span className="bold_words">Release Date: </span>{release_date}</p>
                 <p><span className="bold_words">Overview: </span>{overview}</p>
-                {/* <p><span className="bold_words">Overview: </span>{overview.length > 200 ? `${overview.substring(0, 150)}...` : overview}</p> */}
                 <Button onClick={addMovie}>Add to Library</Button>
             </div>
             </td>

From 5046ea023b66709db9acf2923d446e1d6d945531 Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Thu, 27 Jun 2019 17:39:13 -0700
Subject: [PATCH 40/66] able to view each customers rentals now

---
 src/App.js                                    | 89 ++++++++++---------
 src/components/Customer.js                    | 34 ++++---
 src/components/Customers.js                   | 13 +--
 src/components/Library.js                     |  7 +-
 src/components/Log.js                         |  2 +-
 src/components/Movie.js                       | 18 ++--
 .../{Details.css => MovieDetails.css}         |  0
 .../{Details.js => MovieDetails.js}           | 19 ++--
 8 files changed, 100 insertions(+), 82 deletions(-)
 rename src/components/{Details.css => MovieDetails.css} (100%)
 rename src/components/{Details.js => MovieDetails.js} (55%)

diff --git a/src/App.js b/src/App.js
index 9667a1fa8..e6301868b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,11 +15,9 @@ class App extends Component {
 
     this.state = {
       movies: [],
-      customers: [],
-      allRentals: undefined,
-      customerRentals: undefined,
-      overdueMovies: undefined,
       expandedMovies: {},
+      customers: [],
+      expandedCustomers: {},
       rentedMovie: undefined,
       chosenCustomer: undefined,
       dueDate: undefined,
@@ -30,6 +28,9 @@ class App extends Component {
         customer: undefined,
         checkin: false,
       },
+      allRentals: undefined,
+      customerRentals: undefined,
+      overdueMovies: undefined,
       error: null,
     };
   }
@@ -37,7 +38,7 @@ class App extends Component {
   componentDidMount() {
     axios.get('http://localhost:3001/movies')
     .then((response) => {
-      this.setState({ movies: response.data});
+      this.setState({ movies: response.data });
     })
     .catch((error) => {
       this.setState({ error: error.message });
@@ -59,7 +60,7 @@ class App extends Component {
     });
   }
 
-  onClickDetailsCallback = (id) => {
+  onClickMovieDetailsCallback = (id) => {
     this.setState((prevState) => ({ 
       expandedMovies: {
         ...prevState.expandedMovies, 
@@ -68,20 +69,29 @@ class App extends Component {
     }));
   }
 
-  onSelectMovieCallback = (index) => {
-    const selectedMovie = this.state.movies[index]
+  onSelectMovieCallback = (id) => {
+    const selectedMovie = this.state.movies[id - 1]
     this.setState({ rentedMovie: selectedMovie });
   }
 
-  onSelectCustomerCallback = (index) => {
-    const selectedCustomer = this.state.customers[index]
+  onClickCustomerRentalsCallback = (id) => {
+    this.setState((prevState) => ({ 
+      expandedCustomers: {
+        ...prevState.expandedCustomers, 
+        [id]: !prevState.expandedCustomers[id],
+      }
+    }));
+  }
+
+  onSelectCustomerCallback = (id) => {
+    const selectedCustomer = this.state.customers[id - 1]
     this.setState({ chosenCustomer: selectedCustomer });
   }
 
   rentMovie = () => {
     const checkoutDate = new Date();
     const dueDate = new Date();
-    dueDate.setDate(dueDate.getDate() + 7 );
+    dueDate.setDate(dueDate.getDate() + 1 );
   
     const url = `http://localhost:3001/rentals/${this.state.rentedMovie.title}/check-out`;
 
@@ -159,8 +169,27 @@ class App extends Component {
     });
   }
 
+  findCustomerRentals = (customerID) => {
+    const rentals = []
+
+    for (let key in this.state.allRentals) {
+      if (this.state.allRentals[key]["customer"] === customerID) {
+        rentals.push(
+          {
+            "movie": this.state.allRentals[key]["movie"],
+            "checkout_date": this.state.allRentals[key]["checkout_date"],
+            "due_date": this.state.allRentals[key]["due_date"]
+          }
+        )
+      }
+    }
+
+    this.setState({
+      customerRentals: rentals,
+    });
+  }
 
-  gatherAllRentals = (customerID) => {
+  onCustomerRentalsCallback = (customerID) => {
     let uniqueRentals = {}
 
     axios.get('http://localhost:3001/rentals')
@@ -181,6 +210,7 @@ class App extends Component {
       })
 
       this.findCustomerRentals(customerID)
+      this.onClickCustomerRentalsCallback(customerID)
     })
     .catch((error) => {
       this.setState({ 
@@ -189,30 +219,6 @@ class App extends Component {
     });
   }
 
-  findCustomerRentals = (customerID) => {
-    const rentals = []
-
-    for (let key in this.state.allRentals) {
-      if (this.state.allRentals[key]["customer"] === customerID) {
-        rentals.push(
-          {
-            "movie": this.state.allRentals[key]["movie"],
-            "checkout_date": this.state.allRentals[key]["checkout_date"],
-            "due_date": this.state.allRentals[key]["due_date"]
-          }
-        )
-      }
-    }
-
-    this.setState({
-      customerRentals: rentals,
-    });
-  }
-
-  onCustomerRentalsCallback = (customerID) => {
-    this.gatherAllRentals(customerID)
-  }
-
   render() {
     const errorSection = (this.state.error) ?
     (<section>Error: {this.state.error}</section>) : null;
@@ -250,8 +256,8 @@ class App extends Component {
               <Library 
                 library={this.state.movies} 
                 expandedMovies={this.state.expandedMovies} 
-                onClickDetailsCallback={this.onClickDetailsCallback} 
                 onSelectMovieCallback={this.onSelectMovieCallback} 
+                onClickMovieDetailsCallback={this.onClickMovieDetailsCallback} 
               />
             )} 
           />
@@ -259,9 +265,9 @@ class App extends Component {
             path="/customers" 
             render={() => (
               <Customers 
-                // allRentals={this.state.allRentals}
-                customerRentals={this.state.customerRentals}
-                customers={this.state.customers} 
+                customers={this.state.customers}
+                expandedCustomers={this.state.expandedCustomers}
+                customerRentals={this.state.customerRentals} 
                 onSelectCustomerCallback={this.onSelectCustomerCallback}
                 onCustomerRentalsCallback={this.onCustomerRentalsCallback}
               />
@@ -272,9 +278,6 @@ class App extends Component {
             render={() => (
               <Log  
                 overdueMovies={this.state.overdueMovies}
-                allRentals={this.state.allRentals}
-                setAllRentals={this.setAllRentals}
-                setAllRentalsError={this.setAllRentalsError}
                 setOverdueMoviesCallback={this.setOverdueMoviesCallback}
                 setErrorOverdueCallback={this.setErrorOverdueCallback}
               />
diff --git a/src/components/Customer.js b/src/components/Customer.js
index 1c9ec09ed..9305379b4 100644
--- a/src/components/Customer.js
+++ b/src/components/Customer.js
@@ -1,19 +1,19 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
+import Card from 'react-bootstrap/Card';
 import Button from 'react-bootstrap/Button'
-import axios from 'axios';
 // import './Customer.css';
 
 const Customer = (props) => {
   const onSelectCustomer = () => {
-    props.onSelectCustomerCallback(props.id - 1)
+    props.onSelectCustomerCallback(props.customer.id)
   }
 
   const onViewRentals = () => {
-    props.onCustomerRentalsCallback(props.id)
+    props.onCustomerRentalsCallback(props.customer.id)
   }
 
-  const showCustomerRentals = () => {
+  const customerRentals = () => {
     const rentalHTML = props.customerRentals.map((rental, i) => {
       return <tr key={i}><td>{rental["movie"]}</td><td>{rental["checkout_date"]}</td><td>{rental["due_date"]}</td></tr>
     })
@@ -23,18 +23,30 @@ const Customer = (props) => {
 
   return (
     <tr>
-      <td>{props.name}</td>
+      <td>{props.customer.name}</td>
       <td><Button onClick={onSelectCustomer}>Select Customer</Button></td>
-      <td><Button onClick={onViewRentals}>Rentals</Button></td>
-      {props.customerRentals && <table><tr><th>Movie</th><th>Checked Out</th><th>Due On</th></tr>{showCustomerRentals()}</table>}
+      <td><Button onClick={onViewRentals}>Customer Rentals</Button></td>
+
+      {props.viewCustomerRental && <Card>
+        <Card.Body>
+          <Card.Title>
+            {props.customer.name}'s Rentals
+          </Card.Title>
+          <Card.Text>
+            <table>
+              {customerRentals()}
+            </table>
+          </Card.Text>
+        </Card.Body>
+      </Card>}
     </tr>
   )
 }
 
 Customer.propTypes = {
-  id: PropTypes.number.isRequired,
-  name: PropTypes.string.isRequired,
-  allRentals: PropTypes.array,
+  customer: PropTypes.object.isRequired,
+  viewCustomerRental: PropTypes.bool,
+  customerRentals: PropTypes.array,
   onSelectCustomerCallback: PropTypes.func.isRequired,
   onCustomerRentalsCallback: PropTypes.func.isRequired,
 };
diff --git a/src/components/Customers.js b/src/components/Customers.js
index 82cecc294..a31e38662 100644
--- a/src/components/Customers.js
+++ b/src/components/Customers.js
@@ -1,24 +1,17 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Customer from './Customer';
 import Table from 'react-bootstrap/Table'
-
-// import axios from 'axios';
 import './Customers.css';
 
 const Customers = (props) => {
   const customerCollection = props.customers.map((customer, i) => {
-    return <Customer key={i} id={customer.id} name={customer.name} customerRentals={props.customerRentals} onSelectCustomerCallback={props.onSelectCustomerCallback} onCustomerRentalsCallback={props.onCustomerRentalsCallback}/>
+    return <Customer key={i} customer={customer} viewCustomerRental={props.expandedCustomers[customer.id]} customerRentals={props.customerRentals} onSelectCustomerCallback={props.onSelectCustomerCallback} onCustomerRentalsCallback={props.onCustomerRentalsCallback}/>
    });
 
   return (
     <section className="customers_container">
       <h1>Customers</h1>
-        {/* <thead>
-          <tr>
-            <th>Name</th>
-          </tr>
-        </thead> */}
       <Table striped size="sm">
         <tbody>{customerCollection}</tbody>
       </Table>
@@ -28,7 +21,9 @@ const Customers = (props) => {
 
 Customers.propTypes = {
   customers: PropTypes.array.isRequired,
+  expandedCustomer: PropTypes.object,
   onSelectCustomerCallback: PropTypes.func.isRequired,
+  onCustomerRentalsCallback: PropTypes.func.isRequired,
 };
 
 export default Customers;
\ No newline at end of file
diff --git a/src/components/Library.js b/src/components/Library.js
index f2c3234cd..fc4df2031 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Movie from './Movie';
 import Table from 'react-bootstrap/Table';
@@ -9,7 +9,7 @@ const Library = (props) => {
     return <Movie key={i} 
             movie={movie} 
             viewMovieDetails={props.expandedMovies[movie.id]} 
-            onClickDetailsCallback={props.onClickDetailsCallback} 
+            onClickMovieDetailsCallback={props.onClickMovieDetailsCallback} 
             onSelectMovieCallback={props.onSelectMovieCallback}/>
    });
    
@@ -36,8 +36,9 @@ const Library = (props) => {
 
 Library.propTypes = {
   library: PropTypes.array.isRequired,
-  onClickDetailsCallback: PropTypes.func.isRequired,
+  expandedMovies: PropTypes.object,
   onSelectMovieCallback: PropTypes.func.isRequired,
+  onClickMovieDetailsCallback: PropTypes.func.isRequired,
 };
 
 export default Library;
\ No newline at end of file
diff --git a/src/components/Log.js b/src/components/Log.js
index 44fb54f5a..09bc7fe26 100644
--- a/src/components/Log.js
+++ b/src/components/Log.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import axios from 'axios';
 // import './Log.css';
diff --git a/src/components/Movie.js b/src/components/Movie.js
index d80672418..28e1cccbf 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -1,15 +1,15 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import Details from './Details';
+import MovieDetails from './MovieDetails';
 import './Movie.css';
 
 const Movie = (props) => {
-  const onClickButton = () => {
+  const onSelectMovie = () => {
     props.onSelectMovieCallback(props.movie.id)
   }
 
-  const onClickDetailsButton = () => {
-    props.onClickDetailsCallback(props.movie.id)
+  const onViewMovieDetails = () => {
+    props.onClickMovieDetailsCallback(props.movie.id)
   }
   
   return (
@@ -20,9 +20,9 @@ const Movie = (props) => {
           <h3 className="title">{props.movie.title}</h3>
           <p><span className="bold_words">Release Date: </span>{props.movie.release_date}</p>
           <p><span className="bold_words">Overview: </span>{props.movie.overview.length > 128 ? `${props.movie.overview.substring(0, 150)}...` : props.movie.overview}</p>
-          <button onClick={onClickDetailsButton}>View Details</button>
-          <button onClick={onClickButton}>Select Movie</button>
-          {props.viewMovieDetails && <Details {...props.movie} />}
+          <button onClick={onViewMovieDetails}>View Details</button>
+          <button onClick={onSelectMovie}>Select Movie</button>
+          {props.viewMovieDetails && <MovieDetails {...props.movie} />}
         </div>
       </td>
     </tr>
@@ -31,6 +31,8 @@ const Movie = (props) => {
 
 Movie.propTypes = {
   movie: PropTypes.object.isRequired,
+  viewMovieDetails: PropTypes.bool,
+  onClickMovieDetailsCallback: PropTypes.func.isRequired,
   onSelectMovieCallback: PropTypes.func.isRequired,
 };
 
diff --git a/src/components/Details.css b/src/components/MovieDetails.css
similarity index 100%
rename from src/components/Details.css
rename to src/components/MovieDetails.css
diff --git a/src/components/Details.js b/src/components/MovieDetails.js
similarity index 55%
rename from src/components/Details.js
rename to src/components/MovieDetails.js
index 8b37abd8e..463765136 100644
--- a/src/components/Details.js
+++ b/src/components/MovieDetails.js
@@ -1,10 +1,10 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Card from 'react-bootstrap/Card';
-import './Details.css';
-// import './Library.css';
+// import './MovieDetails.css';
 
-const Details = (props) => {
+const MovieDetails = (props) => {
+  console.log(props)
   const movieDetails = () => {
     return (
       <Card>
@@ -22,8 +22,13 @@ const Details = (props) => {
   return movieDetails();
 }
 
-Details.propTypes = {
-  // showMovie: PropTypes.array.isRequired,
+MovieDetails.propTypes = {
+  external_id: PropTypes.number.isRequired,
+  id: PropTypes.number.isRequired,
+  image_url: PropTypes.string.isRequired,
+  overview: PropTypes.string.isRequired,
+  release_date: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
 };
 
-export default Details;
\ No newline at end of file
+export default MovieDetails;
\ No newline at end of file

From 4d64fc1af0113f7a52184ad87397bad3d19d9289 Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Thu, 27 Jun 2019 19:13:02 -0700
Subject: [PATCH 41/66] able to view correct customer rentals

---
 src/App.js                        | 26 +++-----------------------
 src/components/Customer.js        | 11 ++---------
 src/components/CustomerRentals.js | 17 +++++++++++++++++
 src/components/Customers.js       | 20 +++++++++++++++++++-
 4 files changed, 41 insertions(+), 33 deletions(-)
 create mode 100644 src/components/CustomerRentals.js

diff --git a/src/App.js b/src/App.js
index 1a808234e..cf7ce6243 100644
--- a/src/App.js
+++ b/src/App.js
@@ -30,7 +30,7 @@ class App extends Component {
         checkin: false,
       },
       allRentals: undefined,
-      customerRentals: undefined,
+      // customerRentals: undefined,
       overdueMovies: undefined,
       error: null,
     };
@@ -170,26 +170,6 @@ class App extends Component {
     });
   }
 
-  findCustomerRentals = (customerID) => {
-    const rentals = []
-
-    for (let key in this.state.allRentals) {
-      if (this.state.allRentals[key]["customer"] === customerID) {
-        rentals.push(
-          {
-            "movie": this.state.allRentals[key]["movie"],
-            "checkout_date": this.state.allRentals[key]["checkout_date"],
-            "due_date": this.state.allRentals[key]["due_date"]
-          }
-        )
-      }
-    }
-
-    this.setState({
-      customerRentals: rentals,
-    });
-  }
-
   onCustomerRentalsCallback = (customerID) => {
     let uniqueRentals = {}
 
@@ -210,7 +190,7 @@ class App extends Component {
         allRentals: uniqueRentals
       })
 
-      this.findCustomerRentals(customerID)
+      // this.findCustomerRentals(customerID)
       this.onClickCustomerRentalsCallback(customerID)
     })
     .catch((error) => {
@@ -271,7 +251,7 @@ class App extends Component {
               <Customers 
                 customers={this.state.customers}
                 expandedCustomers={this.state.expandedCustomers}
-                customerRentals={this.state.customerRentals} 
+                allRentals={this.state.allRentals} 
                 onSelectCustomerCallback={this.onSelectCustomerCallback}
                 onCustomerRentalsCallback={this.onCustomerRentalsCallback}
               />
diff --git a/src/components/Customer.js b/src/components/Customer.js
index 9305379b4..8274633c5 100644
--- a/src/components/Customer.js
+++ b/src/components/Customer.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import CustomerRentals from './CustomerRentals';
 import Card from 'react-bootstrap/Card';
 import Button from 'react-bootstrap/Button'
 // import './Customer.css';
@@ -13,14 +14,6 @@ const Customer = (props) => {
     props.onCustomerRentalsCallback(props.customer.id)
   }
 
-  const customerRentals = () => {
-    const rentalHTML = props.customerRentals.map((rental, i) => {
-      return <tr key={i}><td>{rental["movie"]}</td><td>{rental["checkout_date"]}</td><td>{rental["due_date"]}</td></tr>
-    })
-
-    return rentalHTML
-  }
-
   return (
     <tr>
       <td>{props.customer.name}</td>
@@ -34,7 +27,7 @@ const Customer = (props) => {
           </Card.Title>
           <Card.Text>
             <table>
-              {customerRentals()}
+              <CustomerRentals rentals={props.findRentalsCallback(props.customer.id)}/>
             </table>
           </Card.Text>
         </Card.Body>
diff --git a/src/components/CustomerRentals.js b/src/components/CustomerRentals.js
new file mode 100644
index 000000000..e195accba
--- /dev/null
+++ b/src/components/CustomerRentals.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+// import './CustomerRentals.css';
+
+const CustomerRentals = (props) => {
+  const rentalHTML = props.rentals.map((rental, i) => {
+    return <tr key={i}><td>{rental["movie"]}</td><td>{rental["checkout_date"]}</td><td>{rental["due_date"]}</td></tr>
+  })
+
+  return rentalHTML
+}
+
+CustomerRentals.propTypes = {
+  rentals: PropTypes.array,
+};
+
+export default CustomerRentals;
\ No newline at end of file
diff --git a/src/components/Customers.js b/src/components/Customers.js
index a31e38662..8a34f756a 100644
--- a/src/components/Customers.js
+++ b/src/components/Customers.js
@@ -5,8 +5,26 @@ import Table from 'react-bootstrap/Table'
 import './Customers.css';
 
 const Customers = (props) => {
+
+  const findRentalsCallback = (customerID) => {
+    const rentals = []
+    for (let key in props.allRentals) {
+      if (props.allRentals[key]["customer"] === customerID) {
+        rentals.push(
+          {
+            "movie": props.allRentals[key]["movie"],
+            "checkout_date": props.allRentals[key]["checkout_date"],
+            "due_date": props.allRentals[key]["due_date"]
+          }
+        )
+      }
+    }
+    return rentals
+  }
+
+
   const customerCollection = props.customers.map((customer, i) => {
-    return <Customer key={i} customer={customer} viewCustomerRental={props.expandedCustomers[customer.id]} customerRentals={props.customerRentals} onSelectCustomerCallback={props.onSelectCustomerCallback} onCustomerRentalsCallback={props.onCustomerRentalsCallback}/>
+    return <Customer key={i} customer={customer} viewCustomerRental={props.expandedCustomers[customer.id]} findRentalsCallback={findRentalsCallback} onSelectCustomerCallback={props.onSelectCustomerCallback} onCustomerRentalsCallback={props.onCustomerRentalsCallback}/>
    });
 
   return (

From bfc1719a84a4ddef443a082d7d8b498383d8a101 Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Thu, 27 Jun 2019 20:03:25 -0700
Subject: [PATCH 42/66] theme and styling for navigation and front page added

---
 src/App.css   | 40 +++++++++++++++++++---------------------
 src/App.js    | 22 +++++++++++-----------
 src/index.css |  7 +++++--
 3 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/src/App.css b/src/App.css
index a0fd03139..48c235766 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,42 +1,40 @@
-@import url('https://fonts.googleapis.com/css?family=Open+Sans');
-
 .nav_container {
-  background-color: #99A0B0;
+  background: #300701 url("https://i.kinja-img.com/gawker-media/image/upload/s--m9daP_xN--/c_scale,f_auto,fl_progressive,q_80,w_800/unsnbwg2cke5spzlpsuy.jpg") no-repeat center top;
+  background-size: 100% 180%;
   display: flex;
-  flex-wrap: wrap;
   flex-direction: column;
   position: relative;
-  height: 12rem;
+  height: 15rem;
 }
 
 .brand {
-  color: white;
-  font-size: 3rem;
+  color: black;
+  font-size: 6rem;
   text-decoration-line: none;
-  font-family: 'Lobster', cursive;
   margin-left: 1rem;
-  /* border: 1px solid black; */
-
+  text-align: center;
+  padding-top: 35px;
 }
 
 .nav {
   position: absolute;
+  left: 35%;
+  margin-left: -80px;
+  bottom: 15px;
   display: flex;
-  flex-direction: row;
-  right: 0;
-
 }
 
 .nav_link {
   color: white;
-  margin-right: 1rem;
-  font-size: 1rem;
+  text-shadow:
+  -1px -1px 0 #000,
+  1px -1px 0 #000,
+  -1px 1px 0 #000,
+  1px 1px 0 #000;
+  font-size: 2rem;
   text-decoration: none;
-  display: inline-block;
-  padding: .1rem 2.1rem;
-  margin-top: 9rem;
-  /* border-left: 2px solid white;; */
-  /* float: right; */
+  padding-left: 15px;
+  padding-right: 15px;
 }
 
 .nav_link:first-child {
@@ -49,7 +47,7 @@
 }
 
 .brand:hover {
-  color: white;
+  color: #990708;
   text-decoration: none;
 
 }
diff --git a/src/App.js b/src/App.js
index cf7ce6243..03ecf44dd 100644
--- a/src/App.js
+++ b/src/App.js
@@ -275,18 +275,18 @@ class App extends Component {
 
 function Header() {
   return (
-    <nav className="nav_container">
-      <div>
+    <header>
+      <nav className="nav_container">
         <Link className="brand" to="/search">VIDEO WORLD</Link>
-      </div>
-
-      <Nav>
-        <Link className="nav_link" to="/search">Search</Link>
-        <Link className="nav_link" to="/library">Library</Link>
-        <Link className="nav_link" to="/customers">Customers</Link>
-        <Link className="nav_link" to="/log">Log</Link>
-      </Nav>
-    </nav>
+
+        <Nav>
+          <Link className="nav_link" to="/search">Search</Link>
+          <Link className="nav_link" to="/library">Library</Link>
+          <Link className="nav_link" to="/customers">Customers</Link>
+          <Link className="nav_link" to="/log">Log</Link>
+        </Nav>
+      </nav>
+    </header>
   );
 }
 
diff --git a/src/index.css b/src/index.css
index b4cc7250b..61b9f0c0b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,8 @@
-body {
+@import url('https://fonts.googleapis.com/css?family=Limelight&display=swap');
+
+* {
   margin: 0;
   padding: 0;
-  font-family: sans-serif;
+  /* font-family: sans-serif; */
+  font-family: 'Limelight', cursive;
 }

From 38c59cd203d4da602bb8200d0bd00dc6be13a06d Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Thu, 27 Jun 2019 22:06:52 -0700
Subject: [PATCH 43/66] select and deselect movie

---
 src/App.js                | 16 +++++++++++++---
 src/components/Library.js |  2 ++
 src/components/Movie.js   | 12 +++++++++++-
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/App.js b/src/App.js
index 03ecf44dd..d93ca3a18 100644
--- a/src/App.js
+++ b/src/App.js
@@ -18,7 +18,8 @@ class App extends Component {
       expandedMovies: {},
       customers: [],
       expandedCustomers: {},
-      isDetailsClicked: false,
+      // isDetailsClicked: false,
+      deselectedMovie: null,
       rentedMovie: undefined,
       chosenCustomer: undefined,
       dueDate: undefined,
@@ -75,6 +76,14 @@ class App extends Component {
     this.setState({ rentedMovie: selectedMovie });
   }
 
+  onDeselectMovieCallback = () => {
+    this.setState({
+      deselectedMovie: this.state.rentedMovie,
+      rentedMovie: null,
+    });
+  }
+  
+
   onClickCustomerRentalsCallback = (id) => {
     this.setState((prevState) => ({ 
       expandedCustomers: {
@@ -239,8 +248,9 @@ class App extends Component {
                 library={this.state.movies} 
                 isDetailsClicked = {this.state.isDetailsClicked}
                 expandedMovies={this.state.expandedMovies} 
-                onSelectMovieCallback={this.onSelectMovieCallback} 
-                onClickMovieDetailsCallback={this.onClickMovieDetailsCallback} 
+                onSelectMovieCallback={this.onSelectMovieCallback}
+                onDeselectMovieCallback={this.onDeselectMovieCallback} 
+                deselectedMovie={this.state.deselectedMovie} 
                 selectedMovie={this.state.rentedMovie}
               />
             )} 
diff --git a/src/components/Library.js b/src/components/Library.js
index 7606a7867..e8a52c5ba 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -11,6 +11,8 @@ const Library = (props) => {
             viewMovieDetails={props.expandedMovies[movie.id]} 
             onClickMovieDetailsCallback={props.onClickMovieDetailsCallback} 
             onSelectMovieCallback={props.onSelectMovieCallback}
+            onDeselectMovieCallback={props.onDeselectMovieCallback}
+            deselectedMovie={props.deselectedMovie}
             selectedMovie={props.selectedMovie}/>
    });
 
diff --git a/src/components/Movie.js b/src/components/Movie.js
index 1202060b0..a8d766934 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -14,6 +14,10 @@ const Movie = (props) => {
     props.onClickMovieDetailsCallback(props.movie.id)
   }
 
+  const onDeselectMovie = () => {
+    props.onDeselectMovieCallback()
+  }
+
   let movieDescription = <div>
       <h3 className="title">{props.movie.title}</h3>
       <p><span className="bold_words">Release Date: </span>{props.movie.release_date}</p>
@@ -38,9 +42,15 @@ const Movie = (props) => {
 
   if (props.selectedMovie === props.movie) {
     selectButton = <div>
-                      <Button  className="select_movie-button" onClick={onSelectMovie}>Selected</Button>
+                      <Button  variant="danger" className="select_movie-button" onClick={onDeselectMovie}>Deselect</Button>
                     </div>
   }
+
+  if (props.deselectedMovie === props.movie) {
+    selectButton = <div>
+                      <Button  className="select_movie-button" onClick={onSelectMovie}>Select Movie</Button>
+                  </div>
+  }
   
   return (
     

From 038f7fc9ccd0f946a57e6a3bce7fd2e38b38aa14 Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Thu, 27 Jun 2019 22:26:01 -0700
Subject: [PATCH 44/66] fixed deselecting bug

---
 src/App.js              | 12 +++++++++---
 src/components/Movie.js |  3 ++-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/App.js b/src/App.js
index d93ca3a18..5797576cc 100644
--- a/src/App.js
+++ b/src/App.js
@@ -73,12 +73,17 @@ class App extends Component {
 
   onSelectMovieCallback = (id) => {
     const selectedMovie = this.state.movies.find(movie => movie.id === id);
-    this.setState({ rentedMovie: selectedMovie });
+    this.setState({ 
+      rentedMovie: selectedMovie,
+      deselectedMovie: null
+     });
   }
 
-  onDeselectMovieCallback = () => {
+  onDeselectMovieCallback = (id) => {
+    const deselectedMovie = this.state.movies.find(movie => movie.id === id);
+
     this.setState({
-      deselectedMovie: this.state.rentedMovie,
+      deselectedMovie: deselectedMovie,
       rentedMovie: null,
     });
   }
@@ -248,6 +253,7 @@ class App extends Component {
                 library={this.state.movies} 
                 isDetailsClicked = {this.state.isDetailsClicked}
                 expandedMovies={this.state.expandedMovies} 
+                onClickMovieDetailsCallback={this.onClickMovieDetailsCallback}
                 onSelectMovieCallback={this.onSelectMovieCallback}
                 onDeselectMovieCallback={this.onDeselectMovieCallback} 
                 deselectedMovie={this.state.deselectedMovie} 
diff --git a/src/components/Movie.js b/src/components/Movie.js
index a8d766934..8ddd96731 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -15,7 +15,7 @@ const Movie = (props) => {
   }
 
   const onDeselectMovie = () => {
-    props.onDeselectMovieCallback()
+    props.onDeselectMovieCallback(props.movie.id)
   }
 
   let movieDescription = <div>
@@ -52,6 +52,7 @@ const Movie = (props) => {
                   </div>
   }
   
+  console.log(props.selectedMovie);
   return (
     
     <tr>

From d491e1dba99846eec204fedbf915efdaee704e4b Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Thu, 27 Jun 2019 22:41:00 -0700
Subject: [PATCH 45/66] select and deselect customer

---
 src/App.js                  | 18 ++++++++++++++++--
 src/components/Customer.js  | 12 +++++++++++-
 src/components/Customers.js |  9 ++++++++-
 3 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/App.js b/src/App.js
index 5797576cc..4d3bcadae 100644
--- a/src/App.js
+++ b/src/App.js
@@ -22,6 +22,7 @@ class App extends Component {
       deselectedMovie: null,
       rentedMovie: undefined,
       chosenCustomer: undefined,
+      deselectedCustomer: null,
       dueDate: undefined,
       checkoutDate: undefined,
       currentRental: {
@@ -100,7 +101,18 @@ class App extends Component {
 
   onSelectCustomerCallback = (id) => {
     const selectedCustomer = this.state.customers.find(customer => customer.id === id);
-    this.setState({ chosenCustomer: selectedCustomer });
+    this.setState({ 
+      deselectedCustomer: null,
+      chosenCustomer: selectedCustomer 
+    });
+  }
+
+  onDeselectCustomerCallback = (id) => {
+    const deselectedCustomer = this.state.customers.find(customer => customer.id === id);
+    this.setState({ 
+      chosenCustomer: null,
+      deselectedCustomer
+    });
   }
 
   rentMovie = () => {
@@ -251,7 +263,7 @@ class App extends Component {
             render={() => (
               <Library 
                 library={this.state.movies} 
-                isDetailsClicked = {this.state.isDetailsClicked}
+                // isDetailsClicked = {this.state.isDetailsClicked}
                 expandedMovies={this.state.expandedMovies} 
                 onClickMovieDetailsCallback={this.onClickMovieDetailsCallback}
                 onSelectMovieCallback={this.onSelectMovieCallback}
@@ -269,6 +281,8 @@ class App extends Component {
                 expandedCustomers={this.state.expandedCustomers}
                 allRentals={this.state.allRentals} 
                 onSelectCustomerCallback={this.onSelectCustomerCallback}
+                chosenCustomer={this.state.chosenCustomer}
+                onDeselectCustomerCallback={this.onDeselectCustomerCallback}
                 onCustomerRentalsCallback={this.onCustomerRentalsCallback}
               />
             )} 
diff --git a/src/components/Customer.js b/src/components/Customer.js
index 8274633c5..b6093bafd 100644
--- a/src/components/Customer.js
+++ b/src/components/Customer.js
@@ -10,14 +10,24 @@ const Customer = (props) => {
     props.onSelectCustomerCallback(props.customer.id)
   }
 
+  const onDeselectCustomer = () => {
+    props.onDeselectCustomerCallback(props.customer.id)
+  }
+
   const onViewRentals = () => {
     props.onCustomerRentalsCallback(props.customer.id)
   }
 
+    
+    const selectButton = (props.chosenCustomer === props.customer) ?
+      <td><Button variant="danger" onClick={onDeselectCustomer}>Deselect</Button></td> :
+      <td><Button onClick={onSelectCustomer}>Select Customer</Button></td>
+
   return (
     <tr>
       <td>{props.customer.name}</td>
-      <td><Button onClick={onSelectCustomer}>Select Customer</Button></td>
+      {selectButton}
+      {/* <td><Button onClick={onSelectCustomer}>Select Customer</Button></td> */}
       <td><Button onClick={onViewRentals}>Customer Rentals</Button></td>
 
       {props.viewCustomerRental && <Card>
diff --git a/src/components/Customers.js b/src/components/Customers.js
index 8a34f756a..239b19bb8 100644
--- a/src/components/Customers.js
+++ b/src/components/Customers.js
@@ -24,7 +24,14 @@ const Customers = (props) => {
 
 
   const customerCollection = props.customers.map((customer, i) => {
-    return <Customer key={i} customer={customer} viewCustomerRental={props.expandedCustomers[customer.id]} findRentalsCallback={findRentalsCallback} onSelectCustomerCallback={props.onSelectCustomerCallback} onCustomerRentalsCallback={props.onCustomerRentalsCallback}/>
+    return <Customer key={i} 
+                    customer={customer} 
+                    viewCustomerRental={props.expandedCustomers[customer.id]} 
+                    findRentalsCallback={findRentalsCallback} 
+                    onSelectCustomerCallback={props.onSelectCustomerCallback} 
+                    chosenCustomer={props.chosenCustomer}
+                    onDeselectCustomerCallback={props.onDeselectCustomerCallback}
+                    onCustomerRentalsCallback={props.onCustomerRentalsCallback}/>
    });
 
   return (

From 5154a8726ab2a393ba0f5e0df0b8c41b6629a3fe Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Thu, 27 Jun 2019 23:50:14 -0700
Subject: [PATCH 46/66] changed movie details to show data from the api

---
 src/App.js                     | 39 ++++++++++++++++++++++++++--------
 src/components/Customer.js     |  1 -
 src/components/Library.js      |  6 ++++--
 src/components/Movie.css       |  8 ++++---
 src/components/Movie.js        | 38 ++++++++++++++++-----------------
 src/components/MovieDetails.js |  2 ++
 6 files changed, 59 insertions(+), 35 deletions(-)

diff --git a/src/App.js b/src/App.js
index 4d3bcadae..292a0202f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -18,7 +18,6 @@ class App extends Component {
       expandedMovies: {},
       customers: [],
       expandedCustomers: {},
-      // isDetailsClicked: false,
       deselectedMovie: null,
       rentedMovie: undefined,
       chosenCustomer: undefined,
@@ -64,12 +63,34 @@ class App extends Component {
   }
 
   onClickMovieDetailsCallback = (id) => {
-    this.setState((prevState) => ({ 
-      expandedMovies: {
-        ...prevState.expandedMovies, 
-        [id]: !prevState.expandedMovies[id],
-      }
-    }));
+    const movie = this.state.movies.find(movie => movie.id === id);
+    const title = movie.title;
+    // const id = movie.id;
+
+    axios.get("http://localhost:3001/movies/" + title)
+      .then((response) => {
+        this.setState({
+          expandedMovies: {
+            ...response.data,
+          }
+        });
+      })
+      .catch((error) => {
+        this.setState({error: error.message})
+      });
+
+    // this.setState((prevState) => ({ 
+    //   expandedMovies: {
+    //     ...prevState.expandedMovies, 
+    //     [id]: !prevState.expandedMovies[id],
+    //   }
+    // }));
+  }
+
+  onCloseMovieDetailsCallback = () => {
+    this.setState({
+      expandedMovies: null
+    });
   }
 
   onSelectMovieCallback = (id) => {
@@ -227,7 +248,7 @@ class App extends Component {
   }
 
   render() {
-
+    // console.log(this.state.expandedMovies);
     const errorSection = (this.state.error) ?
     (<section>Error: {this.state.error}</section>) : null;
 
@@ -263,9 +284,9 @@ class App extends Component {
             render={() => (
               <Library 
                 library={this.state.movies} 
-                // isDetailsClicked = {this.state.isDetailsClicked}
                 expandedMovies={this.state.expandedMovies} 
                 onClickMovieDetailsCallback={this.onClickMovieDetailsCallback}
+                onCloseMovieDetailsCallback={this.onCloseMovieDetailsCallback}
                 onSelectMovieCallback={this.onSelectMovieCallback}
                 onDeselectMovieCallback={this.onDeselectMovieCallback} 
                 deselectedMovie={this.state.deselectedMovie} 
diff --git a/src/components/Customer.js b/src/components/Customer.js
index b6093bafd..13c5429ad 100644
--- a/src/components/Customer.js
+++ b/src/components/Customer.js
@@ -27,7 +27,6 @@ const Customer = (props) => {
     <tr>
       <td>{props.customer.name}</td>
       {selectButton}
-      {/* <td><Button onClick={onSelectCustomer}>Select Customer</Button></td> */}
       <td><Button onClick={onViewRentals}>Customer Rentals</Button></td>
 
       {props.viewCustomerRental && <Card>
diff --git a/src/components/Library.js b/src/components/Library.js
index e8a52c5ba..f0828631d 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -8,8 +8,10 @@ const Library = (props) => {
   const movieCollection = props.library.map((movie, i) => {
     return <Movie key={i} 
             movie={movie} 
-            viewMovieDetails={props.expandedMovies[movie.id]} 
-            onClickMovieDetailsCallback={props.onClickMovieDetailsCallback} 
+            viewMovieDetails={props.expandedMovies} 
+            // viewMovieDetails={props.expandedMovies[movie.id]} 
+            onClickMovieDetailsCallback={props.onClickMovieDetailsCallback}
+            onCloseMovieDetailsCallback={props.onCloseMovieDetailsCallback}
             onSelectMovieCallback={props.onSelectMovieCallback}
             onDeselectMovieCallback={props.onDeselectMovieCallback}
             deselectedMovie={props.deselectedMovie}
diff --git a/src/components/Movie.css b/src/components/Movie.css
index 36a11e458..4e25f7513 100644
--- a/src/components/Movie.css
+++ b/src/components/Movie.css
@@ -11,6 +11,7 @@
 
 .movie_description {
     margin-left: 1rem;
+    font-family: 'Courier New', Courier, monospace;
 }
 
 .bold_words {
@@ -24,6 +25,7 @@
     /* flex-wrap: wrap; */
 }
 
-.select_movie-button {
-    margin-top: 1rem;
-}
\ No newline at end of file
+.btn-sm, .btn-group-sm > .btn {
+    margin-right: 1rem;
+}
+
diff --git a/src/components/Movie.js b/src/components/Movie.js
index 8ddd96731..fe0e4a1fa 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -14,6 +14,10 @@ const Movie = (props) => {
     props.onClickMovieDetailsCallback(props.movie.id)
   }
 
+  const onCloseMovieDetails = () => {
+    props.onCloseMovieDetailsCallback(props.movie.id)
+  }
+
   const onDeselectMovie = () => {
     props.onDeselectMovieCallback(props.movie.id)
   }
@@ -24,35 +28,29 @@ const Movie = (props) => {
       <p><span className="bold_words">Overview: </span>{props.movie.overview.length > 128 ? `${props.movie.overview.substring(0, 150)}...` : props.movie.overview}</p>
     </div>
 
-  let showButton = <div>
-                    <Button variant="outline-info" onClick={onViewMovieDetails}>Show More</Button>
-                  </div>
-  let selectButton = <div>
-                      <Button  className="select_movie-button" onClick={onSelectMovie}>Select Movie</Button>
-                    </div>
+  let movieDetails = null;
+  let showButton = <Button size="sm" className="movie-button" variant="outline-info" onClick={onViewMovieDetails}>Show More</Button>
+  let selectButton =  <Button  size="sm" className="movie-button" onClick={onSelectMovie}>Select Movie</Button>
 
   if (props.viewMovieDetails) {
-    movieDescription = null;
-    showButton = <div>
-                  <Button variant="outline-info" onClick={onViewMovieDetails}>Show Less</Button>
-                </div>
-                
+    if (props.viewMovieDetails.title === props.movie.title) {
+      movieDescription = null;
+      movieDetails = <MovieDetails {...props.viewMovieDetails} />
+              
+      showButton =  <Button size="sm" className="movie-button" variant="outline-info" onClick={onCloseMovieDetails}>Show Less</Button>
+                  
+    }
   }
-
+  // console.log(props.viewMovieDetails);
 
   if (props.selectedMovie === props.movie) {
-    selectButton = <div>
-                      <Button  variant="danger" className="select_movie-button" onClick={onDeselectMovie}>Deselect</Button>
-                    </div>
+    selectButton = <Button  size="sm" variant="danger" className="movie-button" onClick={onDeselectMovie}>Deselect</Button>
   }
 
   if (props.deselectedMovie === props.movie) {
-    selectButton = <div>
-                      <Button  className="select_movie-button" onClick={onSelectMovie}>Select Movie</Button>
-                  </div>
+    selectButton = <Button  size="sm" className="movie-button" onClick={onSelectMovie}>Select Movie</Button>
   }
   
-  console.log(props.selectedMovie);
   return (
     
     <tr>
@@ -60,8 +58,8 @@ const Movie = (props) => {
         <img className="movie_image" src={props.movie.image_url} alt={props.movie.title}/>
         <div className="movie_description">
           {movieDescription}
+          {movieDetails}
           <div className="description"> 
-            {props.viewMovieDetails && <MovieDetails {...props.movie} />}
             <div className="buttons">
                 {showButton}
                 {selectButton}
diff --git a/src/components/MovieDetails.js b/src/components/MovieDetails.js
index e2da7ffcd..eaef686a0 100644
--- a/src/components/MovieDetails.js
+++ b/src/components/MovieDetails.js
@@ -9,6 +9,8 @@ const MovieDetails = (props) => {
         <h3 className="title">{props.title}</h3>
         <p><span className="bold_words">Release Date: </span>{props.release_date}</p>
         <p><span className="bold_words">Overview: </span>{props.overview}</p>
+        <p><span className="bold_words">Inventory: </span>{props.inventory}</p>
+        <p><span className="bold_words">Available Inventory: </span>{props.available_inventory}</p>
       </div>
     )
   };

From 3c691f128ad2f0bc61e749e1e1b276e77bea1f05 Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Thu, 27 Jun 2019 23:56:04 -0700
Subject: [PATCH 47/66] clicking on logo will reset state

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

diff --git a/src/App.js b/src/App.js
index 292a0202f..8c4fb603e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -328,7 +328,7 @@ function Header() {
   return (
     <header>
       <nav className="nav_container">
-        <Link className="brand" to="/search">VIDEO WORLD</Link>
+        <Nav.Link className="brand" href="/search">VIDEO WORLD</Nav.Link>
 
         <Nav>
           <Link className="nav_link" to="/search">Search</Link>

From bf20d9cfadfe4428d04236293fe0131d0fcfa095 Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Fri, 28 Jun 2019 00:36:02 -0700
Subject: [PATCH 48/66] fixed customer rentals

---
 src/App.js | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/App.js b/src/App.js
index 8c4fb603e..6b660ce4f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -65,7 +65,6 @@ class App extends Component {
   onClickMovieDetailsCallback = (id) => {
     const movie = this.state.movies.find(movie => movie.id === id);
     const title = movie.title;
-    // const id = movie.id;
 
     axios.get("http://localhost:3001/movies/" + title)
       .then((response) => {
@@ -78,13 +77,6 @@ class App extends Component {
       .catch((error) => {
         this.setState({error: error.message})
       });
-
-    // this.setState((prevState) => ({ 
-    //   expandedMovies: {
-    //     ...prevState.expandedMovies, 
-    //     [id]: !prevState.expandedMovies[id],
-    //   }
-    // }));
   }
 
   onCloseMovieDetailsCallback = () => {
@@ -220,7 +212,7 @@ class App extends Component {
   onCustomerRentalsCallback = (customerID) => {
     let uniqueRentals = {}
 
-    axios.get('http://localhost:3001/rentals')
+    axios.get('http://localhost:3001/rentals/overdue')
     .then((response) => {
       response.data.forEach((rental, i) => {
         if (rental !== null) {

From cdfae53067b9e332dcdec61fa8e27d124f08bb6c Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Fri, 28 Jun 2019 01:12:02 -0700
Subject: [PATCH 49/66] fixed rentals link and button stylings

---
 src/App.css                |  5 +++++
 src/App.js                 | 21 +++++++++++++++++----
 src/components/Customer.js | 11 +++++++----
 3 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/App.css b/src/App.css
index 48c235766..33e37b53c 100644
--- a/src/App.css
+++ b/src/App.css
@@ -52,4 +52,9 @@
 
 }
 
+.currently-selected {
+  text-align: center;
+  margin-top: 1rem;
+}
+
 
diff --git a/src/App.js b/src/App.js
index 6b660ce4f..c481f1b81 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import Nav from 'react-bootstrap/Nav';
+import Button from 'react-bootstrap/Button';
 import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 import Search from './components/Search';
 import Library from './components/Library';
@@ -244,15 +245,27 @@ class App extends Component {
     const errorSection = (this.state.error) ?
     (<section>Error: {this.state.error}</section>) : null;
 
+    const currentlySelected = (this.state.rentedMovie || this.state.chosenCustomer) ?
+      <div className="currently-selected">
+        <h4>Currently Selected: </h4>
+        { this.state.rentedMovie && <p>Movie Selection: {this.state.rentedMovie.title}</p> }
+
+        { this.state.chosenCustomer && <p>Customer Selection: {this.state.chosenCustomer.name}</p> }
+        
+        { this.state.chosenCustomer && this.state.rentedMovie && <Button onClick={this.rentMovie}>Rent Movie</Button>}
+      </div> : null
+
     return (
       <Router>
         <div>
           <Header />
-          { this.state.rentedMovie && <p>Movie Selection: {this.state.rentedMovie.title}</p> }
 
-          { this.state.chosenCustomer && <p>Customer Selection: {this.state.chosenCustomer.name}</p> }
-          
-          { this.state.chosenCustomer && this.state.rentedMovie && <button onClick={this.rentMovie}>Rent Movie</button>}
+            {currentlySelected}
+            {/* { this.state.rentedMovie && <p>Movie Selection: {this.state.rentedMovie.title}</p> }
+
+            { this.state.chosenCustomer && <p>Customer Selection: {this.state.chosenCustomer.name}</p> }
+            
+            { this.state.chosenCustomer && this.state.rentedMovie && <button onClick={this.rentMovie}>Rent Movie</button>} */}
 
           {this.state.currentRental.count && <div>Rental #{this.state.currentRental.count}: "{this.state.currentRental.movie}" checked out by Customer #{this.state.currentRental.customer}</div>} 
           {this.state.currentRental.count && <button onClick={this.checkinMovie}>Check-in Movie</button>}
diff --git a/src/components/Customer.js b/src/components/Customer.js
index 13c5429ad..2a195eb2c 100644
--- a/src/components/Customer.js
+++ b/src/components/Customer.js
@@ -20,15 +20,18 @@ const Customer = (props) => {
 
     
     const selectButton = (props.chosenCustomer === props.customer) ?
-      <td><Button variant="danger" onClick={onDeselectCustomer}>Deselect</Button></td> :
-      <td><Button onClick={onSelectCustomer}>Select Customer</Button></td>
+      <td><Button size="sm" variant="danger" onClick={onDeselectCustomer}>Deselect</Button></td> :
+      <td><Button size="sm" onClick={onSelectCustomer}>Select Customer</Button></td>
 
+    const rentalButton =  (props.viewCustomerRental) ?
+      <td><Button variant="danger" size="sm" onClick={onViewRentals}>Close</Button></td> :
+      <td><Button variant="outline-primary" size="sm" onClick={onViewRentals}>Customer Rentals</Button></td>
+       
   return (
     <tr>
       <td>{props.customer.name}</td>
       {selectButton}
-      <td><Button onClick={onViewRentals}>Customer Rentals</Button></td>
-
+      {rentalButton}
       {props.viewCustomerRental && <Card>
         <Card.Body>
           <Card.Title>

From 7b91086ad86ae431004ab7f087393ee4465d656f Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Fri, 28 Jun 2019 01:34:16 -0700
Subject: [PATCH 50/66] changed back to /rentals after accidentally added
 /rentals/overdue

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

diff --git a/src/App.js b/src/App.js
index c481f1b81..33fad8844 100644
--- a/src/App.js
+++ b/src/App.js
@@ -213,7 +213,7 @@ class App extends Component {
   onCustomerRentalsCallback = (customerID) => {
     let uniqueRentals = {}
 
-    axios.get('http://localhost:3001/rentals/overdue')
+    axios.get('http://localhost:3001/rentals')
     .then((response) => {
       response.data.forEach((rental, i) => {
         if (rental !== null) {

From fc877e81fe9c019efcbd52679de84023a185be92 Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Fri, 28 Jun 2019 08:48:18 -0700
Subject: [PATCH 51/66] added customer id

---
 src/components/Customer.js        | 34 +++++++++++++++----------------
 src/components/CustomerRentals.js |  6 +++++-
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/components/Customer.js b/src/components/Customer.js
index 2a195eb2c..648c5d167 100644
--- a/src/components/Customer.js
+++ b/src/components/Customer.js
@@ -28,23 +28,23 @@ const Customer = (props) => {
       <td><Button variant="outline-primary" size="sm" onClick={onViewRentals}>Customer Rentals</Button></td>
        
   return (
-    <tr>
-      <td>{props.customer.name}</td>
-      {selectButton}
-      {rentalButton}
-      {props.viewCustomerRental && <Card>
-        <Card.Body>
-          <Card.Title>
-            {props.customer.name}'s Rentals
-          </Card.Title>
-          <Card.Text>
-            <table>
-              <CustomerRentals rentals={props.findRentalsCallback(props.customer.id)}/>
-            </table>
-          </Card.Text>
-        </Card.Body>
-      </Card>}
-    </tr>
+      <tr>
+        <td>{props.customer.id}</td>
+        <td>{props.customer.name}</td>
+        {selectButton}
+        {rentalButton}
+        {props.viewCustomerRental && 
+        <Card>
+          <Card.Body>
+            <Card.Title>
+              {props.customer.name}'s Rentals
+            </Card.Title>
+            <Card.Text>
+                <CustomerRentals rentals={props.findRentalsCallback(props.customer.id)}/>
+            </Card.Text>
+          </Card.Body>
+        </Card>}
+      </tr>
   )
 }
 
diff --git a/src/components/CustomerRentals.js b/src/components/CustomerRentals.js
index e195accba..370f7f61d 100644
--- a/src/components/CustomerRentals.js
+++ b/src/components/CustomerRentals.js
@@ -4,7 +4,11 @@ import PropTypes from 'prop-types';
 
 const CustomerRentals = (props) => {
   const rentalHTML = props.rentals.map((rental, i) => {
-    return <tr key={i}><td>{rental["movie"]}</td><td>{rental["checkout_date"]}</td><td>{rental["due_date"]}</td></tr>
+    return <tr key={i}>
+        <td>{rental["movie"]}</td>
+        <td>{rental["checkout_date"]}</td>
+        <td>{rental["due_date"]}</td>
+      </tr>
   })
 
   return rentalHTML

From 45f2eacb61e19de38c7121589c54c37265432df4 Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Fri, 28 Jun 2019 09:14:31 -0700
Subject: [PATCH 52/66] corrected flex view on header and nav

---
 src/App.css | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/App.css b/src/App.css
index 48c235766..4845e2186 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3,11 +3,18 @@
   background-size: 100% 180%;
   display: flex;
   flex-direction: column;
-  position: relative;
   height: 15rem;
 }
 
 .brand {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  text-shadow:
+  -1px -1px 0 white,
+  1px -1px 0 white,
+  -1px 1px 0 white,
+  1px 1px 0 white;
   color: black;
   font-size: 6rem;
   text-decoration-line: none;
@@ -17,11 +24,8 @@
 }
 
 .nav {
-  position: absolute;
-  left: 35%;
-  margin-left: -80px;
-  bottom: 15px;
   display: flex;
+  justify-content: center;
 }
 
 .nav_link {
@@ -49,7 +53,6 @@
 .brand:hover {
   color: #990708;
   text-decoration: none;
-
 }
 
 

From 9cad92c8f62f1eb739c50d4540a3c0fed3d25efe Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Fri, 28 Jun 2019 09:30:33 -0700
Subject: [PATCH 53/66] change font of body of app

---
 src/App.css   | 4 ++++
 src/index.css | 5 ++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/App.css b/src/App.css
index 0e70d0d9e..b82f6c721 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css?family=Limelight&display=swap');
+
 .nav_container {
   background: #300701 url("https://i.kinja-img.com/gawker-media/image/upload/s--m9daP_xN--/c_scale,f_auto,fl_progressive,q_80,w_800/unsnbwg2cke5spzlpsuy.jpg") no-repeat center top;
   background-size: 100% 180%;
@@ -21,6 +23,7 @@
   margin-left: 1rem;
   text-align: center;
   padding-top: 35px;
+  font-family: 'Limelight', cursive;
 }
 
 .nav {
@@ -29,6 +32,7 @@
 }
 
 .nav_link {
+  font-family: 'Limelight', cursive;
   color: white;
   text-shadow:
   -1px -1px 0 #000,
diff --git a/src/index.css b/src/index.css
index 61b9f0c0b..df5e0649a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,8 +1,7 @@
-@import url('https://fonts.googleapis.com/css?family=Limelight&display=swap');
+@import url('https://fonts.googleapis.com/css?family=DM+Serif+Display&display=swap');
 
 * {
   margin: 0;
   padding: 0;
-  /* font-family: sans-serif; */
-  font-family: 'Limelight', cursive;
+  font-family: 'DM Serif Display', serif;
 }

From acc95840f356eac6298af4fe48d9bed8a3c7a426 Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Fri, 28 Jun 2019 10:07:09 -0700
Subject: [PATCH 54/66] styling added for active rental section

---
 src/App.css | 11 +++++++----
 src/App.js  | 36 +++++++++++++++++++++---------------
 2 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/App.css b/src/App.css
index b82f6c721..3d83ae00a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -22,7 +22,7 @@
   text-decoration-line: none;
   margin-left: 1rem;
   text-align: center;
-  padding-top: 35px;
+  margin-top: 20px;
   font-family: 'Limelight', cursive;
 }
 
@@ -61,7 +61,10 @@
 
 .currently-selected {
   text-align: center;
+  margin-left: 500px;
+  margin-right: 500px;
+  background-color: #FEE1A8;
+  border: 4px dotted black;
   margin-top: 1rem;
-}
-
-
+  padding: 15px;
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 33fad8844..aa4891743 100644
--- a/src/App.js
+++ b/src/App.js
@@ -241,16 +241,15 @@ class App extends Component {
   }
 
   render() {
-    // console.log(this.state.expandedMovies);
     const errorSection = (this.state.error) ?
     (<section>Error: {this.state.error}</section>) : null;
 
     const currentlySelected = (this.state.rentedMovie || this.state.chosenCustomer) ?
       <div className="currently-selected">
-        <h4>Currently Selected: </h4>
-        { this.state.rentedMovie && <p>Movie Selection: {this.state.rentedMovie.title}</p> }
+        <h4><b>ACTIVE SELECTION</b></h4>
+        { this.state.rentedMovie && <p><b>Movie:</b> {this.state.rentedMovie.title}</p> }
 
-        { this.state.chosenCustomer && <p>Customer Selection: {this.state.chosenCustomer.name}</p> }
+        { this.state.chosenCustomer && <p><b>Customer:</b> {this.state.chosenCustomer.name}</p> }
         
         { this.state.chosenCustomer && this.state.rentedMovie && <Button onClick={this.rentMovie}>Rent Movie</Button>}
       </div> : null
@@ -259,19 +258,26 @@ class App extends Component {
       <Router>
         <div>
           <Header />
-
+          
+          <section >
             {currentlySelected}
-            {/* { this.state.rentedMovie && <p>Movie Selection: {this.state.rentedMovie.title}</p> }
-
-            { this.state.chosenCustomer && <p>Customer Selection: {this.state.chosenCustomer.name}</p> }
-            
-            { this.state.chosenCustomer && this.state.rentedMovie && <button onClick={this.rentMovie}>Rent Movie</button>} */}
-
-          {this.state.currentRental.count && <div>Rental #{this.state.currentRental.count}: "{this.state.currentRental.movie}" checked out by Customer #{this.state.currentRental.customer}</div>} 
-          {this.state.currentRental.count && <button onClick={this.checkinMovie}>Check-in Movie</button>}
 
-          {!this.state.chosenCustomer && !this.state.rentedMovie && 
-            this.state.currentRental.checkin && <p>Movie Successfully Checked-In!</p>}
+            {
+              this.state.currentRental.count && 
+              <div className="currently-selected">
+                Rental #{this.state.currentRental.count}: 
+                "{this.state.currentRental.movie}" checked out by Customer #{this.state.currentRental.customer}
+                {this.state.currentRental.count && <button onClick={this.checkinMovie}>Check-in Movie</button>}
+              </div>
+            } 
+
+            {
+              !this.state.chosenCustomer && !this.state.rentedMovie && 
+              this.state.currentRental.checkin && 
+              <p className="currently-selected">Movie Successfully Checked-In!</p>
+            }
+
+          </section>
           
           {errorSection}
 

From aef9dda8e39215adddceb5fd98524f46ac05c349 Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Fri, 28 Jun 2019 10:29:02 -0700
Subject: [PATCH 55/66] button colors changed to black

---
 src/components/Customer.js |  4 ++--
 src/components/Library.js  |  1 -
 src/components/Movie.js    | 11 +++++------
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/Customer.js b/src/components/Customer.js
index 648c5d167..ed6edfa39 100644
--- a/src/components/Customer.js
+++ b/src/components/Customer.js
@@ -21,11 +21,11 @@ const Customer = (props) => {
     
     const selectButton = (props.chosenCustomer === props.customer) ?
       <td><Button size="sm" variant="danger" onClick={onDeselectCustomer}>Deselect</Button></td> :
-      <td><Button size="sm" onClick={onSelectCustomer}>Select Customer</Button></td>
+      <td><Button size="sm" variant="dark" onClick={onSelectCustomer}>Select Customer</Button></td>
 
     const rentalButton =  (props.viewCustomerRental) ?
       <td><Button variant="danger" size="sm" onClick={onViewRentals}>Close</Button></td> :
-      <td><Button variant="outline-primary" size="sm" onClick={onViewRentals}>Customer Rentals</Button></td>
+      <td><Button variant="outline-dark" size="sm" onClick={onViewRentals}>Customer Rentals</Button></td>
        
   return (
       <tr>
diff --git a/src/components/Library.js b/src/components/Library.js
index f0828631d..58a03c18e 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -9,7 +9,6 @@ const Library = (props) => {
     return <Movie key={i} 
             movie={movie} 
             viewMovieDetails={props.expandedMovies} 
-            // viewMovieDetails={props.expandedMovies[movie.id]} 
             onClickMovieDetailsCallback={props.onClickMovieDetailsCallback}
             onCloseMovieDetailsCallback={props.onCloseMovieDetailsCallback}
             onSelectMovieCallback={props.onSelectMovieCallback}
diff --git a/src/components/Movie.js b/src/components/Movie.js
index fe0e4a1fa..a246fa786 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -29,26 +29,25 @@ const Movie = (props) => {
     </div>
 
   let movieDetails = null;
-  let showButton = <Button size="sm" className="movie-button" variant="outline-info" onClick={onViewMovieDetails}>Show More</Button>
-  let selectButton =  <Button  size="sm" className="movie-button" onClick={onSelectMovie}>Select Movie</Button>
+  let showButton = <Button size="sm" className="movie-button" variant="outline-dark" onClick={onViewMovieDetails}>Show More</Button>
+  let selectButton =  <Button variant="dark" size="sm" className="movie-button" onClick={onSelectMovie}>Select Movie</Button>
 
   if (props.viewMovieDetails) {
     if (props.viewMovieDetails.title === props.movie.title) {
       movieDescription = null;
       movieDetails = <MovieDetails {...props.viewMovieDetails} />
               
-      showButton =  <Button size="sm" className="movie-button" variant="outline-info" onClick={onCloseMovieDetails}>Show Less</Button>
+      showButton =  <Button size="sm" className="movie-button" variant="outline-dark" onClick={onCloseMovieDetails}>Show Less</Button>
                   
     }
   }
-  // console.log(props.viewMovieDetails);
 
   if (props.selectedMovie === props.movie) {
-    selectButton = <Button  size="sm" variant="danger" className="movie-button" onClick={onDeselectMovie}>Deselect</Button>
+    selectButton = <Button variant="danger"  size="sm" className="movie-button" onClick={onDeselectMovie}>Deselect</Button>
   }
 
   if (props.deselectedMovie === props.movie) {
-    selectButton = <Button  size="sm" className="movie-button" onClick={onSelectMovie}>Select Movie</Button>
+    selectButton = <Button variant="dark"  size="sm" className="movie-button" onClick={onSelectMovie}>Select Movie</Button>
   }
   
   return (

From 1efa5ca2f108a5614daee72d99c21dc99eb7c5b0 Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Fri, 28 Jun 2019 10:37:18 -0700
Subject: [PATCH 56/66] all button colors ammended

---
 src/components/Library.css   | 6 +-----
 src/components/MovieCard.css | 5 +++++
 src/components/MovieCard.js  | 3 ++-
 3 files changed, 8 insertions(+), 6 deletions(-)
 create mode 100644 src/components/MovieCard.css

diff --git a/src/components/Library.css b/src/components/Library.css
index be4585150..761006b04 100644
--- a/src/components/Library.css
+++ b/src/components/Library.css
@@ -1,8 +1,4 @@
 .library_container {
     margin: 3rem;
     text-align: left;
-}
-
-/* h1 {
-    text-align: left;
-} */
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/components/MovieCard.css b/src/components/MovieCard.css
new file mode 100644
index 000000000..0b6f26e1e
--- /dev/null
+++ b/src/components/MovieCard.css
@@ -0,0 +1,5 @@
+@import url('https://fonts.googleapis.com/css?family=DM+Serif+Display&display=swap');
+
+#button_font {
+  font-family: 'DM Serif Display', serif;
+}
\ No newline at end of file
diff --git a/src/components/MovieCard.js b/src/components/MovieCard.js
index f30b53c24..08596cc9c 100644
--- a/src/components/MovieCard.js
+++ b/src/components/MovieCard.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import Button from 'react-bootstrap/Button'
+import './MovieCard.css';
 
 const MovieCard = (props) => {
     const {image_url, title, overview, release_date,addMovieCallback } = props;
@@ -15,7 +16,7 @@ const MovieCard = (props) => {
                 <h3 className="title">{title}</h3>
                 <p><span className="bold_words">Release Date: </span>{release_date}</p>
                 <p><span className="bold_words">Overview: </span>{overview}</p>
-                <Button onClick={addMovie}>Add to Library</Button>
+                <Button variant="dark" id="button_font" onClick={addMovie}>Add to Library</Button>
             </div>
             </td>
         </tr>

From 50544eab97b03705c78de20fa7122a5fae727b68 Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Fri, 28 Jun 2019 10:43:52 -0700
Subject: [PATCH 57/66] added headers to Customer Rentals

---
 src/components/Customer.js        | 10 ++++++++++
 src/components/CustomerRentals.js |  8 ++++----
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/Customer.js b/src/components/Customer.js
index 648c5d167..27fca53eb 100644
--- a/src/components/Customer.js
+++ b/src/components/Customer.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import CustomerRentals from './CustomerRentals';
 import Card from 'react-bootstrap/Card';
+import Table from 'react-bootstrap/Table';
 import Button from 'react-bootstrap/Button'
 // import './Customer.css';
 
@@ -40,7 +41,16 @@ const Customer = (props) => {
               {props.customer.name}'s Rentals
             </Card.Title>
             <Card.Text>
+              <Table>
+                <thead>
+                  <tr>
+                    <th>Title</th>
+                    <th>Check-out</th>
+                    <th>Check-in</th>
+                  </tr>
+                </thead>
                 <CustomerRentals rentals={props.findRentalsCallback(props.customer.id)}/>
+                </Table>
             </Card.Text>
           </Card.Body>
         </Card>}
diff --git a/src/components/CustomerRentals.js b/src/components/CustomerRentals.js
index 370f7f61d..b4e0a58fc 100644
--- a/src/components/CustomerRentals.js
+++ b/src/components/CustomerRentals.js
@@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
 const CustomerRentals = (props) => {
   const rentalHTML = props.rentals.map((rental, i) => {
     return <tr key={i}>
-        <td>{rental["movie"]}</td>
-        <td>{rental["checkout_date"]}</td>
-        <td>{rental["due_date"]}</td>
-      </tr>
+          <td>{rental["movie"]}</td>
+          <td>{rental["checkout_date"]}</td>
+          <td>{rental["due_date"]}</td>
+        </tr>
   })
 
   return rentalHTML

From 3488116a880653d63255898c70299861b340a9d9 Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Fri, 28 Jun 2019 10:56:12 -0700
Subject: [PATCH 58/66] formatted overdue movies page

---
 src/App.js                                  |  8 ++++----
 src/components/OverdueMovies.css            |  5 +++++
 src/components/{Log.js => OverdueMovies.js} | 13 +++++++------
 3 files changed, 16 insertions(+), 10 deletions(-)
 create mode 100644 src/components/OverdueMovies.css
 rename src/components/{Log.js => OverdueMovies.js} (70%)

diff --git a/src/App.js b/src/App.js
index aa4891743..55a4b7cf0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,7 +6,7 @@ import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 import Search from './components/Search';
 import Library from './components/Library';
 import Customers from './components/Customers';
-import Log from './components/Log';
+import OverdueMovies from './components/OverdueMovies';
 import axios from 'axios';
 import './App.css';
 
@@ -320,9 +320,9 @@ class App extends Component {
             )} 
           />
           <Route 
-            path="/log" 
+            path="/overdue" 
             render={() => (
-              <Log  
+              <OverdueMovies  
                 overdueMovies={this.state.overdueMovies}
                 setOverdueMoviesCallback={this.setOverdueMoviesCallback}
                 setErrorOverdueCallback={this.setErrorOverdueCallback}
@@ -345,7 +345,7 @@ function Header() {
           <Link className="nav_link" to="/search">Search</Link>
           <Link className="nav_link" to="/library">Library</Link>
           <Link className="nav_link" to="/customers">Customers</Link>
-          <Link className="nav_link" to="/log">Log</Link>
+          <Link className="nav_link" to="/overdue">Log</Link>
         </Nav>
       </nav>
     </header>
diff --git a/src/components/OverdueMovies.css b/src/components/OverdueMovies.css
new file mode 100644
index 000000000..229f417fe
--- /dev/null
+++ b/src/components/OverdueMovies.css
@@ -0,0 +1,5 @@
+.overdue_container {
+  margin: 50px;
+  display: flex-wrap;
+  text-align: center; 
+}
\ No newline at end of file
diff --git a/src/components/Log.js b/src/components/OverdueMovies.js
similarity index 70%
rename from src/components/Log.js
rename to src/components/OverdueMovies.js
index 09bc7fe26..02b7a166d 100644
--- a/src/components/Log.js
+++ b/src/components/OverdueMovies.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import axios from 'axios';
-// import './Log.css';
+import Button from 'react-bootstrap/Button';
+import './OverdueMovies.css';
 
-const Log = (props) => {
+const OverdueMovies = (props) => {
   const overdueMoviesCall = () => {
     axios.get('http://localhost:3001/rentals/overdue')
     .then((response) => {
@@ -17,16 +18,16 @@ const Log = (props) => {
     });
   }
   return (
-    <div>
-      <button onClick={overdueMoviesCall}>Overdue Movies</button>
+    <div className="overdue_container">
+      <Button className="format" variant="dark" onClick={overdueMoviesCall}>View Overdue Movies</Button>
       {props.overdueMovies && <ul>{props.overdueMovies.length > 0 ? props.overdueMovies : "No Movies are Overdue!" }</ul>}
     </div>
   )
 }
 
-Log.propTypes = {
+OverdueMovies.propTypes = {
   setOverdueMoviesCallback: PropTypes.func.isRequired,
   overdueMovies: PropTypes.array,
 };
 
-export default Log;
\ No newline at end of file
+export default OverdueMovies;
\ No newline at end of file

From 3ce6a5647dc2d470617bc7479b6afe197c543be4 Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Fri, 28 Jun 2019 10:58:19 -0700
Subject: [PATCH 59/66] removed bullets on overdue movies

---
 src/components/OverdueMovies.css | 4 ++++
 src/components/OverdueMovies.js  | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/OverdueMovies.css b/src/components/OverdueMovies.css
index 229f417fe..ccfd3dce6 100644
--- a/src/components/OverdueMovies.css
+++ b/src/components/OverdueMovies.css
@@ -2,4 +2,8 @@
   margin: 50px;
   display: flex-wrap;
   text-align: center; 
+}
+
+.overdueMovie {
+  text-decoration: none;
 }
\ No newline at end of file
diff --git a/src/components/OverdueMovies.js b/src/components/OverdueMovies.js
index 02b7a166d..49d487a52 100644
--- a/src/components/OverdueMovies.js
+++ b/src/components/OverdueMovies.js
@@ -9,7 +9,7 @@ const OverdueMovies = (props) => {
     axios.get('http://localhost:3001/rentals/overdue')
     .then((response) => {
       const overdueMovieCollection = response.data.map((overdueMovie) => {
-        return <li>{overdueMovie.title}</li>
+        return <li className="overdueMovie">{overdueMovie.title}</li>
       })
       props.setOverdueMoviesCallback(overdueMovieCollection)
     })

From bb88c82882c3883ae076326b21a4714fb1cdf327 Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Fri, 28 Jun 2019 11:03:28 -0700
Subject: [PATCH 60/66] formatting for overdue movies

---
 src/components/OverdueMovies.css | 5 +----
 src/components/OverdueMovies.js  | 3 ++-
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/OverdueMovies.css b/src/components/OverdueMovies.css
index ccfd3dce6..ec7375456 100644
--- a/src/components/OverdueMovies.css
+++ b/src/components/OverdueMovies.css
@@ -2,8 +2,5 @@
   margin: 50px;
   display: flex-wrap;
   text-align: center; 
-}
-
-.overdueMovie {
-  text-decoration: none;
+  list-style: none;
 }
\ No newline at end of file
diff --git a/src/components/OverdueMovies.js b/src/components/OverdueMovies.js
index 49d487a52..97bd7e910 100644
--- a/src/components/OverdueMovies.js
+++ b/src/components/OverdueMovies.js
@@ -9,7 +9,8 @@ const OverdueMovies = (props) => {
     axios.get('http://localhost:3001/rentals/overdue')
     .then((response) => {
       const overdueMovieCollection = response.data.map((overdueMovie) => {
-        return <li className="overdueMovie">{overdueMovie.title}</li>
+        console.log(overdueMovie)
+        return <li className="overdueMovie">{overdueMovie.title} due {overdueMovie.due_date}</li>
       })
       props.setOverdueMoviesCallback(overdueMovieCollection)
     })

From 9f5604f25e9d6add9e0ae73e6d2e88b60022f410 Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Fri, 28 Jun 2019 11:06:39 -0700
Subject: [PATCH 61/66] removed bulltes in Overdue movies

---
 src/components/OverdueMovies.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/OverdueMovies.css b/src/components/OverdueMovies.css
index ec7375456..4f8f039c7 100644
--- a/src/components/OverdueMovies.css
+++ b/src/components/OverdueMovies.css
@@ -3,4 +3,8 @@
   display: flex-wrap;
   text-align: center; 
   list-style: none;
+}
+
+.overdueMovie {
+  list-style: none;
 }
\ No newline at end of file

From 34d66e0a7f52b1321160a06a1df5da16b2155957 Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Fri, 28 Jun 2019 13:26:49 -0700
Subject: [PATCH 62/66] customer page css

---
 src/components/Customer.js   | 10 ++++------
 src/components/Customers.css | 33 ++++++++++++++++++++++++++++++---
 src/components/Customers.js  | 17 ++++++++---------
 3 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/src/components/Customer.js b/src/components/Customer.js
index 7c78f26cc..d078fef4c 100644
--- a/src/components/Customer.js
+++ b/src/components/Customer.js
@@ -29,11 +29,9 @@ const Customer = (props) => {
       <td><Button variant="outline-dark" size="sm" onClick={onViewRentals}>Customer Rentals</Button></td>
        
   return (
-      <tr>
-        <td>{props.customer.id}</td>
-        <td>{props.customer.name}</td>
-        {selectButton}
-        {rentalButton}
+      <div className="avatar">
+        <p className="user">#{props.customer.id}. {props.customer.name}</p>
+        <p className="buttons">{selectButton}{rentalButton}</p>
         {props.viewCustomerRental && 
         <Card>
           <Card.Body>
@@ -54,7 +52,7 @@ const Customer = (props) => {
             </Card.Text>
           </Card.Body>
         </Card>}
-      </tr>
+      </div>
   )
 }
 
diff --git a/src/components/Customers.css b/src/components/Customers.css
index 6e95746ea..e3c9b9a82 100644
--- a/src/components/Customers.css
+++ b/src/components/Customers.css
@@ -1,7 +1,34 @@
-/* h1 {
+.header {
+    padding-top: 20px;
     text-align: center;
-} */
+    font-size: 3em;
+    color: #fff3c9;
+    background: #000;
+}
 
 .customers_container {
-    margin: 1rem;
+    background: #000;
+    padding: 50px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    padding-top: 20px;
+}
+
+.user {
+    font-size: 25px;
+    text-align: center;
+}
+
+
+.avatar {
+    background-color: white;
+    border-radius: 25px;
+    border: 5px outset #fff3c9;
+    margin: 15px;
+}
+
+.buttons {
+    padding-left: 10px;
 }
\ No newline at end of file
diff --git a/src/components/Customers.js b/src/components/Customers.js
index 239b19bb8..3732296ae 100644
--- a/src/components/Customers.js
+++ b/src/components/Customers.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Customer from './Customer';
-import Table from 'react-bootstrap/Table'
 import './Customers.css';
 
 const Customers = (props) => {
@@ -24,23 +23,23 @@ const Customers = (props) => {
 
 
   const customerCollection = props.customers.map((customer, i) => {
-    return <Customer key={i} 
+    return <div key={i}><Customer  
                     customer={customer} 
                     viewCustomerRental={props.expandedCustomers[customer.id]} 
                     findRentalsCallback={findRentalsCallback} 
                     onSelectCustomerCallback={props.onSelectCustomerCallback} 
                     chosenCustomer={props.chosenCustomer}
                     onDeselectCustomerCallback={props.onDeselectCustomerCallback}
-                    onCustomerRentalsCallback={props.onCustomerRentalsCallback}/>
+                    onCustomerRentalsCallback={props.onCustomerRentalsCallback}/></div>
    });
 
   return (
-    <section className="customers_container">
-      <h1>Customers</h1>
-      <Table striped size="sm">
-        <tbody>{customerCollection}</tbody>
-      </Table>
-    </section>
+    <body>
+      <section className="header"><b>- Our Community -</b></section>
+      <section className="customers_container">
+        {customerCollection}
+      </section>
+    </body>
   )
 }
 

From 9c04a839923b1ac56d6a012d2201929b1037e31d Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Fri, 28 Jun 2019 13:33:27 -0700
Subject: [PATCH 63/66] coloring of navigation links

---
 src/App.css | 12 +++++++++++-
 src/App.js  |  4 ++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/App.css b/src/App.css
index 3d83ae00a..a141c34e8 100644
--- a/src/App.css
+++ b/src/App.css
@@ -50,12 +50,22 @@
 }
 
 .nav_link:hover {
-  color: white;
+  color: red;
+  text-shadow:
+  -1px -1px 0 #990708,
+  1px -1px 0 #990708,
+  -1px 1px 0 #990708,
+  1px 1px 0 #990708;
   text-decoration: none;
 }
 
 .brand:hover {
   color: #990708;
+  text-shadow:
+  -1px -1px 0 red,
+  1px -1px 0 red,
+  -1px 1px 0 red,
+  1px 1px 0 red;
   text-decoration: none;
 }
 
diff --git a/src/App.js b/src/App.js
index 55a4b7cf0..f5b915fe7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -343,8 +343,8 @@ function Header() {
 
         <Nav>
           <Link className="nav_link" to="/search">Search</Link>
-          <Link className="nav_link" to="/library">Library</Link>
-          <Link className="nav_link" to="/customers">Customers</Link>
+          <Link className="nav_link" to="/library">Collection</Link>
+          <Link className="nav_link" to="/customers">Community</Link>
           <Link className="nav_link" to="/overdue">Log</Link>
         </Nav>
       </nav>

From fbc6323636712f1fec822d90dfb2f203275fd5ed Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Fri, 28 Jun 2019 13:47:02 -0700
Subject: [PATCH 64/66] styling on library page

---
 src/components/Customers.css |  3 ++-
 src/components/Customers.js  |  2 +-
 src/components/Library.css   | 18 ++++++++++++++++--
 src/components/Library.js    |  2 +-
 4 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/Customers.css b/src/components/Customers.css
index e3c9b9a82..c202f0240 100644
--- a/src/components/Customers.css
+++ b/src/components/Customers.css
@@ -1,4 +1,4 @@
-.header {
+#communityHeader {
     padding-top: 20px;
     text-align: center;
     font-size: 3em;
@@ -7,6 +7,7 @@
 }
 
 .customers_container {
+    /* border-top:  */
     background: #000;
     padding: 50px;
     display: flex;
diff --git a/src/components/Customers.js b/src/components/Customers.js
index 3732296ae..b12bb76d5 100644
--- a/src/components/Customers.js
+++ b/src/components/Customers.js
@@ -35,7 +35,7 @@ const Customers = (props) => {
 
   return (
     <body>
-      <section className="header"><b>- Our Community -</b></section>
+      <section id="communityHeader"><b>- Our <i>Community</i> -</b></section>
       <section className="customers_container">
         {customerCollection}
       </section>
diff --git a/src/components/Library.css b/src/components/Library.css
index 761006b04..9f98006c3 100644
--- a/src/components/Library.css
+++ b/src/components/Library.css
@@ -1,4 +1,18 @@
 .library_container {
-    margin: 3rem;
+    background: #000;
     text-align: left;
-}
\ No newline at end of file
+    padding: 30px;
+}
+
+#collectionHeader {
+    text-align: center;
+    font-size: 3em;
+    color: #fff3c9;
+}
+
+.movie_container {
+    background: white;
+    margin: 5px;
+    margin-left: 40px;
+    margin-right: 40px;
+}
diff --git a/src/components/Library.js b/src/components/Library.js
index 58a03c18e..1c3547a6e 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -19,7 +19,7 @@ const Library = (props) => {
 
   return (
     <section className="library_container">
-      <h1>Library</h1>
+      <h1 id="collectionHeader"><b>- Our <i>Collection</i> -</b></h1>
       
       <Table striped size="sm">
         <tbody>

From fbc626f32a20372583a3dbe28b21ee1659bec0d6 Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Fri, 28 Jun 2019 14:07:12 -0700
Subject: [PATCH 65/66] styling added to all pages'

---
 src/components/Customers.css     | 8 ++++----
 src/components/Library.css       | 5 +++--
 src/components/OverdueMovies.css | 5 ++++-
 src/components/Search.css        | 4 +++-
 src/components/Search.js         | 2 --
 5 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/Customers.css b/src/components/Customers.css
index c202f0240..de4df6af7 100644
--- a/src/components/Customers.css
+++ b/src/components/Customers.css
@@ -1,14 +1,14 @@
 #communityHeader {
+    border-top: 10px solid black;
     padding-top: 20px;
     text-align: center;
     font-size: 3em;
-    color: #fff3c9;
-    background: #000;
+    color: black;
+    background: #DCDCDC;
 }
 
 .customers_container {
-    /* border-top:  */
-    background: #000;
+    background: #DCDCDC;
     padding: 50px;
     display: flex;
     flex-wrap: wrap;
diff --git a/src/components/Library.css b/src/components/Library.css
index 9f98006c3..d35d8a906 100644
--- a/src/components/Library.css
+++ b/src/components/Library.css
@@ -1,5 +1,6 @@
 .library_container {
-    background: #000;
+    border-top: 10px solid black;
+    background: #DCDCDC;
     text-align: left;
     padding: 30px;
 }
@@ -7,7 +8,7 @@
 #collectionHeader {
     text-align: center;
     font-size: 3em;
-    color: #fff3c9;
+    color: #000;
 }
 
 .movie_container {
diff --git a/src/components/OverdueMovies.css b/src/components/OverdueMovies.css
index 4f8f039c7..d407bb6c2 100644
--- a/src/components/OverdueMovies.css
+++ b/src/components/OverdueMovies.css
@@ -1,5 +1,8 @@
 .overdue_container {
-  margin: 50px;
+  border-top: 10px solid black;
+  background: #DCDCDC;
+  padding: 80px;
+  min-height: 800px;
   display: flex-wrap;
   text-align: center; 
   list-style: none;
diff --git a/src/components/Search.css b/src/components/Search.css
index 38aa863cd..faf93744d 100644
--- a/src/components/Search.css
+++ b/src/components/Search.css
@@ -4,5 +4,7 @@
 }
 
 .search_container {
-    margin: 1rem;
+    min-height: 800px;
+    border-top: 10px solid black;
+    background: #DCDCDC;
 }
\ No newline at end of file
diff --git a/src/components/Search.js b/src/components/Search.js
index 9303f0c3c..bd400bda2 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -106,11 +106,9 @@ class Search extends Component {
                 {errorSection}
                 {successSection}
                 <Table>
-                        {/* {tableHeader} */}
                     <tbody>
                         {movieCards}
                     </tbody>
-                
                 </Table>
 
             </section>

From c145a5a86ebe48dedd076f827d09ee3a8c0131e3 Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Fri, 28 Jun 2019 14:18:21 -0700
Subject: [PATCH 66/66] final styling for rental section

---
 src/App.css | 11 +++++++++++
 src/App.js  | 14 +++++++-------
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/App.css b/src/App.css
index a141c34e8..d81badff8 100644
--- a/src/App.css
+++ b/src/App.css
@@ -69,7 +69,14 @@
   text-decoration: none;
 }
 
+#rentalSection {
+  border-top: 10px solid black;
+  background: white;
+  padding-bottom: 15px;
+}
+
 .currently-selected {
+  font-size: 1em;
   text-align: center;
   margin-left: 500px;
   margin-right: 500px;
@@ -77,4 +84,8 @@
   border: 4px dotted black;
   margin-top: 1rem;
   padding: 15px;
+}
+
+.rentalHeader {
+  font-size: 2em;
 }
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index f5b915fe7..0e6a437dd 100644
--- a/src/App.js
+++ b/src/App.js
@@ -246,12 +246,12 @@ class App extends Component {
 
     const currentlySelected = (this.state.rentedMovie || this.state.chosenCustomer) ?
       <div className="currently-selected">
-        <h4><b>ACTIVE SELECTION</b></h4>
+        <h4><b>ACTIVE RENTAL SELECTION</b></h4>
         { this.state.rentedMovie && <p><b>Movie:</b> {this.state.rentedMovie.title}</p> }
 
         { this.state.chosenCustomer && <p><b>Customer:</b> {this.state.chosenCustomer.name}</p> }
         
-        { this.state.chosenCustomer && this.state.rentedMovie && <Button onClick={this.rentMovie}>Rent Movie</Button>}
+        { this.state.chosenCustomer && this.state.rentedMovie && <Button variant="warning" onClick={this.rentMovie}>Rent Movie</Button>}
       </div> : null
 
     return (
@@ -259,22 +259,22 @@ class App extends Component {
         <div>
           <Header />
           
-          <section >
+          <section id="rentalSection">
             {currentlySelected}
 
             {
               this.state.currentRental.count && 
               <div className="currently-selected">
-                Rental #{this.state.currentRental.count}: 
-                "{this.state.currentRental.movie}" checked out by Customer #{this.state.currentRental.customer}
-                {this.state.currentRental.count && <button onClick={this.checkinMovie}>Check-in Movie</button>}
+                <p className="rentalHeader">Rental #{this.state.currentRental.count}</p> 
+                <p>"{this.state.currentRental.movie}" checked out by Customer #{this.state.currentRental.customer}</p>
+                {this.state.currentRental.count && <Button variant="danger" onClick={this.checkinMovie}>Check-in Movie</Button>}
               </div>
             } 
 
             {
               !this.state.chosenCustomer && !this.state.rentedMovie && 
               this.state.currentRental.checkin && 
-              <p className="currently-selected">Movie Successfully Checked-In!</p>
+              <p className="currently-selected rentalHeader">Movie Successfully Checked-In!</p>
             }
 
           </section>