From d0b2eb8023c1cd69cf19b776cd8acb2af82f8f2a Mon Sep 17 00:00:00 2001
From: Mello-Cello <celloelle@gmail.com>
Date: Mon, 24 Jun 2019 14:44:23 -0700
Subject: [PATCH 01/38] Initial commit.

---
 package.json | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/package.json b/package.json
index e7e4a7c62..b3eb42e1a 100644
--- a/package.json
+++ b/package.json
@@ -12,5 +12,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 0dcbf5b5f737b26a3491edb84d5d2dde3af546dd Mon Sep 17 00:00:00 2001
From: Ngoc Le <ngocle@outlook.com>
Date: Mon, 24 Jun 2019 14:51:28 -0700
Subject: [PATCH 02/38] initial setup

---
 .gitignore   |  1 +
 package.json | 12 ++++++++++++
 2 files changed, 13 insertions(+)

diff --git a/.gitignore b/.gitignore
index d30f40ef4..71b7f9fd3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,3 +19,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
diff --git a/package.json b/package.json
index e7e4a7c62..b3eb42e1a 100644
--- a/package.json
+++ b/package.json
@@ -12,5 +12,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 f1e822c5a235c2ae69da79b96b6a61b78f0a1613 Mon Sep 17 00:00:00 2001
From: Shamira <marshallscm@gmail.com>
Date: Mon, 24 Jun 2019 14:51:28 -0700
Subject: [PATCH 03/38] initial setup

---
 package.json | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/package.json b/package.json
index e7e4a7c62..b3eb42e1a 100644
--- a/package.json
+++ b/package.json
@@ -12,5 +12,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 e9064815768a8894819384e893fbfc5a81a0f65a Mon Sep 17 00:00:00 2001
From: Ngoc Le <ngocle@outlook.com>
Date: Mon, 24 Jun 2019 16:07:12 -0700
Subject: [PATCH 04/38] added React Routes

---
 package-lock.json              | 102 +++++++++++++++++++++++++++++++++
 package.json                   |   1 +
 public/index.html              |   2 +-
 src/App.js                     |  45 ++++++++++++---
 src/components/AppRouter.js    |   0
 src/components/CustomerList.js |   8 +++
 src/components/MovieList.js    |   7 +++
 src/components/SearchTMDB.js   |   8 +++
 src/components/Selected.js     |  10 ++++
 9 files changed, 173 insertions(+), 10 deletions(-)
 create mode 100644 src/components/AppRouter.js
 create mode 100644 src/components/CustomerList.js
 create mode 100644 src/components/MovieList.js
 create mode 100644 src/components/SearchTMDB.js
 create mode 100644 src/components/Selected.js

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 b3eb42e1a..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": {
diff --git a/public/index.html b/public/index.html
index ed0ebafa1..79279a988 100644
--- a/public/index.html
+++ b/public/index.html
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Video Store</title>
   </head>
   <body>
     <noscript>
diff --git a/src/App.js b/src/App.js
index 203067e4d..598580b68 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,19 +1,46 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import CustomerList from './components/CustomerList';
+import MovieList from './components/MovieList';
+import Selected from './components/Selected';
+import SearchTMDB from './components/SearchTMDB';
+import {BrowserRouter as Router, Route, Link} from "react-router-dom";
 
 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>
+        {/* <Root> */}
+        <div>
+          <nav>
+            <ul>
+              <li>
+                <Link to="/">Home</Link>
+              </li>
+              <li>
+                <Link to="/search">Search Page</Link>
+              </li>
+              <li>
+                <Link to="/customers">Customer List</Link>
+              </li>
+              <li>
+                <Link to="/movies">Movie List</Link>
+                <MovieList />
+              </li>
+            </ul>
+          </nav>
+          
+
+          {/* <Route path="/" exact component={App} /> */}
+          <Route path="/search" component={SearchTMDB} />
+          <Route path="/customers" component={CustomerList} />
+          <Route path="/movies" component={MovieList} />
+        </div>
+        {/* </Root> */}
+      </Router>
     );
   }
 }
diff --git a/src/components/AppRouter.js b/src/components/AppRouter.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js
new file mode 100644
index 000000000..4585d4056
--- /dev/null
+++ b/src/components/CustomerList.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function CustomerList() {
+    return <h2>Customer List</h2>
+}
+
+export default CustomerList;
\ No newline at end of file
diff --git a/src/components/MovieList.js b/src/components/MovieList.js
new file mode 100644
index 000000000..9a5553a01
--- /dev/null
+++ b/src/components/MovieList.js
@@ -0,0 +1,7 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function MovieList() {
+    return <h2>Movie List</h2>
+}
+export default MovieList;
\ No newline at end of file
diff --git a/src/components/SearchTMDB.js b/src/components/SearchTMDB.js
new file mode 100644
index 000000000..d971715c1
--- /dev/null
+++ b/src/components/SearchTMDB.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function SearchTMDB() {
+    return <h2>Search TMDB</h2>
+}
+
+export default SearchTMDB;
\ No newline at end of file
diff --git a/src/components/Selected.js b/src/components/Selected.js
new file mode 100644
index 000000000..c2ef2ff14
--- /dev/null
+++ b/src/components/Selected.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CustomerList from './CustomerList';
+import MovieList from './MovieList';
+
+function Selected() {
+    return <h2>Selected</h2>
+}
+
+export default Selected;
\ No newline at end of file

From 59cbb7a4e6b6640d83b3c0bc5ec6f735d44e7056 Mon Sep 17 00:00:00 2001
From: Shamira <marshallscm@gmail.com>
Date: Mon, 24 Jun 2019 16:39:53 -0700
Subject: [PATCH 05/38] Changed MovieList component name to Library

---
 src/App.js                  | 7 +++----
 src/components/AppRouter.js | 0
 src/components/Library.js   | 7 +++++++
 src/components/MovieList.js | 7 -------
 src/components/Selected.js  | 2 +-
 5 files changed, 11 insertions(+), 12 deletions(-)
 delete mode 100644 src/components/AppRouter.js
 create mode 100644 src/components/Library.js
 delete mode 100644 src/components/MovieList.js

diff --git a/src/App.js b/src/App.js
index 598580b68..fdbfe9758 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
 import CustomerList from './components/CustomerList';
-import MovieList from './components/MovieList';
+import Library from './components/Library';
 import Selected from './components/Selected';
 import SearchTMDB from './components/SearchTMDB';
 import {BrowserRouter as Router, Route, Link} from "react-router-dom";
@@ -27,8 +27,7 @@ class App extends Component {
                 <Link to="/customers">Customer List</Link>
               </li>
               <li>
-                <Link to="/movies">Movie List</Link>
-                <MovieList />
+                <Link to="/library">Library</Link>
               </li>
             </ul>
           </nav>
@@ -37,7 +36,7 @@ class App extends Component {
           {/* <Route path="/" exact component={App} /> */}
           <Route path="/search" component={SearchTMDB} />
           <Route path="/customers" component={CustomerList} />
-          <Route path="/movies" component={MovieList} />
+          <Route path="/library" component={Library} />
         </div>
         {/* </Root> */}
       </Router>
diff --git a/src/components/AppRouter.js b/src/components/AppRouter.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/components/Library.js b/src/components/Library.js
new file mode 100644
index 000000000..2695c5cd6
--- /dev/null
+++ b/src/components/Library.js
@@ -0,0 +1,7 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function Library() {
+    return <h2>Library</h2>
+}
+export default Library;
\ No newline at end of file
diff --git a/src/components/MovieList.js b/src/components/MovieList.js
deleted file mode 100644
index 9a5553a01..000000000
--- a/src/components/MovieList.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-function MovieList() {
-    return <h2>Movie List</h2>
-}
-export default MovieList;
\ No newline at end of file
diff --git a/src/components/Selected.js b/src/components/Selected.js
index c2ef2ff14..bedb0460d 100644
--- a/src/components/Selected.js
+++ b/src/components/Selected.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import CustomerList from './CustomerList';
-import MovieList from './MovieList';
+import Library from './Library';
 
 function Selected() {
     return <h2>Selected</h2>

From e99b0a55eee31063e47e01f6caf31260a79565f0 Mon Sep 17 00:00:00 2001
From: Shamira <marshallscm@gmail.com>
Date: Tue, 25 Jun 2019 14:34:59 -0700
Subject: [PATCH 06/38] Show all movies, GET request working.

---
 package-lock.json         | 32 ++++++++++++++++++++++
 package.json              |  1 +
 src/App.js                |  8 +++---
 src/components/Library.js | 56 ++++++++++++++++++++++++++++++++++++---
 4 files changed, 91 insertions(+), 6 deletions(-)

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 fdbfe9758..c3fd44229 100644
--- a/src/App.js
+++ b/src/App.js
@@ -13,7 +13,7 @@ class App extends Component {
   render() {
     return (
       <Router>
-        {/* <Root> */}
+
         <div>
           <nav>
             <ul>
@@ -28,17 +28,19 @@ class App extends Component {
               </li>
               <li>
                 <Link to="/library">Library</Link>
+                {Library}
+                
+              
               </li>
             </ul>
           </nav>
           
 
-          {/* <Route path="/" exact component={App} /> */}
+
           <Route path="/search" component={SearchTMDB} />
           <Route path="/customers" component={CustomerList} />
           <Route path="/library" component={Library} />
         </div>
-        {/* </Root> */}
       </Router>
     );
   }
diff --git a/src/components/Library.js b/src/components/Library.js
index 2695c5cd6..8bca4c7de 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -1,7 +1,57 @@
-import React from 'react';
+import React, {Component} from 'react';
 import PropTypes from 'prop-types';
+import axios from 'axios';
 
-function Library() {
-    return <h2>Library</h2>
+class Library extends Component {
+    constructor() {
+        super();
+
+        this.state = {
+            movies: [],
+            errorMessage: null,
+        }
+    }
+
+    displayMovies() {
+        const moviesURL = 'http://localhost:3001/movies'; 
+        axios.get(moviesURL)
+            .then((response) => {
+                console.log(response.data);
+                const movies = response.data.map((movieInfo) => {
+                    const movie = {
+                      id: movieInfo.id,
+                      title: movieInfo.title,
+                      overview: movieInfo.overview,
+                      release_date: movieInfo.release_date,
+                      image_url: movieInfo.image_url,
+                      extrenal_id: movieInfo.extrenal_id,  
+                    }
+                    return movie
+                })
+            })
+            .catch((error) => {
+               console.log(error.message)
+            });
+    };
+
+    // showMovieButtonClick = () => {
+    //     this.props.displayMoviesCallback;
+    // }
+
+// on button click I want it to show all movies. 
+    render() {
+       
+        const errors = this.state.error;
+      
+        return (
+            <section>
+                <button onClick={this.displayMovies}>Show Movies</button>
+
+            </section>
+        )
+    }
+    
+
+      
 }
 export default Library;
\ No newline at end of file

From feb33482ba9b5ac232f21b4d35a01ab4b4b687ac Mon Sep 17 00:00:00 2001
From: Shamira <marshallscm@gmail.com>
Date: Tue, 25 Jun 2019 15:40:19 -0700
Subject: [PATCH 07/38] Working Library component. Renders Title for all
 movies.

---
 src/App.js                |  4 +---
 src/components/Library.js | 34 +++++++++++++++++++++-------------
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/App.js b/src/App.js
index c3fd44229..7b03653b3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -28,9 +28,7 @@ class App extends Component {
               </li>
               <li>
                 <Link to="/library">Library</Link>
-                {Library}
-                
-              
+    
               </li>
             </ul>
           </nav>
diff --git a/src/components/Library.js b/src/components/Library.js
index 8bca4c7de..184045e0c 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -1,8 +1,13 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import axios from 'axios';
+import { createDecipher } from 'crypto';
 
 class Library extends Component {
+    //change Library to functional component
+    //pass in props
+    //make a variable movies = props to pull movies array from App
+    //set another variable 'allmovies' and loop through map and return 
     constructor() {
         super();
 
@@ -12,13 +17,13 @@ class Library extends Component {
         }
     }
 
-    displayMovies() {
+    componentDidMount() {
         const moviesURL = 'http://localhost:3001/movies'; 
         axios.get(moviesURL)
             .then((response) => {
                 console.log(response.data);
                 const movies = response.data.map((movieInfo) => {
-                    const movie = {
+                    return {
                       id: movieInfo.id,
                       title: movieInfo.title,
                       overview: movieInfo.overview,
@@ -26,27 +31,30 @@ class Library extends Component {
                       image_url: movieInfo.image_url,
                       extrenal_id: movieInfo.extrenal_id,  
                     }
-                    return movie
+                
                 })
+                this.setState({
+                    movies: movies,
+                });
             })
             .catch((error) => {
                console.log(error.message)
             });
     };
-
-    // showMovieButtonClick = () => {
-    //     this.props.displayMoviesCallback;
-    // }
-
-// on button click I want it to show all movies. 
+ 
     render() {
-       
+       const eachMovie = this.state.movies.map((movie, i) => {
+           return (
+           <div>
+           <h2>{movie.title}</h2>
+            </div>     
+            )
+       })
         const errors = this.state.error;
       
         return (
-            <section>
-                <button onClick={this.displayMovies}>Show Movies</button>
-
+            <section> 
+                {eachMovie}
             </section>
         )
     }

From aca962abdeff694096e172f63b4e537933db2d5e Mon Sep 17 00:00:00 2001
From: Shamira <marshallscm@gmail.com>
Date: Tue, 25 Jun 2019 15:52:39 -0700
Subject: [PATCH 08/38] Added button to select movie.

---
 src/App.js                | 14 ++++++++++----
 src/components/Library.js |  4 ++--
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/App.js b/src/App.js
index 7b03653b3..483e5731e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,7 +9,15 @@ import {BrowserRouter as Router, Route, Link} from "react-router-dom";
 
 class App extends Component {
 
-  
+  constructor() {
+    super();
+
+    this.state = {
+        selected_movie: this.movie,
+        selected_customer: this.customer, 
+        errorMessage: null,
+    }
+}
   render() {
     return (
       <Router>
@@ -32,9 +40,7 @@ class App extends Component {
               </li>
             </ul>
           </nav>
-          
-
-
+        
           <Route path="/search" component={SearchTMDB} />
           <Route path="/customers" component={CustomerList} />
           <Route path="/library" component={Library} />
diff --git a/src/components/Library.js b/src/components/Library.js
index 184045e0c..d59046c54 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -46,8 +46,8 @@ class Library extends Component {
        const eachMovie = this.state.movies.map((movie, i) => {
            return (
            <div>
-           <h2>{movie.title}</h2>
-            </div>     
+            <p>{movie.title} <button>Select: {movie.title}</button> </p>
+           </div>     
             )
        })
         const errors = this.state.error;

From 7276e936bac2cfc1fa0ca25b010de21b915d36d4 Mon Sep 17 00:00:00 2001
From: Mello-Cello <celloelle@gmail.com>
Date: Wed, 26 Jun 2019 09:50:17 -0700
Subject: [PATCH 09/38] Initial commit, customer branch. Setting up classical
 component for customers.

---
 src/components/CustomerList.js | 66 ++++++++++++++++++++++++++++++++--
 1 file changed, 63 insertions(+), 3 deletions(-)

diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js
index 4585d4056..20616545c 100644
--- a/src/components/CustomerList.js
+++ b/src/components/CustomerList.js
@@ -1,8 +1,68 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import axios from 'axios';
+import { createDecipher } from 'crypto';
+
+class CustomerList extends Component {
+    //pass in props?
+    //make a variable movies = props to pull movies array from App
+    //set another variable 'allmovies' and loop through map and return
+    constructor() {
+        super();
+
+        this.state = {
+            customers: [],
+            errorMessage: null,
+        }
+    }
+
+    componentDidMount() {
+        const customersURL = 'http://localhost:3001/customers';
+        axios.get(customersURL)
+            .then((response) => {
+                console.log(response.data);
+                const customers = response.data.map((CustInfo) => {
+                    return {
+                      "name": "Shelley Rocha",
+                      "registered_at": "Wed, 29 Apr 2015 07:54:14 -0700",
+                      "address": "Ap #292-5216 Ipsum Rd.",
+                      "city": "Hillsboro",
+                      "state": "OR",
+                      "postal_code": "24309",
+                      "phone": "(322) 510-8695",
+                      "account_credit": 13.15
+                      extrenal_id: movieInfo.extrenal_id,
+                    }
+
+                })
+                this.setState({
+                    customers: customers, // only need "customers," since they match?
+                });
+            })
+            .catch((error) => {
+               console.log(error.message)
+            });
+    };
+
+    render() {
+       // const eachMovie = this.state.movies.map((movie, i) => {
+       //     return (
+       //     <div>
+       //      <p>{movie.title} <button>Select: {movie.title}</button> </p>
+       //     </div>
+       //      )
+       // })
+       //  const errors = this.state.error;
+       //
+       //  return (
+       //      <section>
+       //          {eachMovie}
+       //      </section>
+       //  )
+    }
+
+
 
-function CustomerList() {
-    return <h2>Customer List</h2>
 }
 
-export default CustomerList;
\ No newline at end of file
+export default CustomerList;

From 7e5112e43c7d7736fd7312479f046c41ba639cd4 Mon Sep 17 00:00:00 2001
From: Mello-Cello <celloelle@gmail.com>
Date: Wed, 26 Jun 2019 10:33:10 -0700
Subject: [PATCH 10/38] Wrote CustomerList component to show each customer's
 name and a select button on the Customer List page.

---
 src/components/CustomerList.js | 56 +++++++++++++++++-----------------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js
index 20616545c..eb1ed0e9b 100644
--- a/src/components/CustomerList.js
+++ b/src/components/CustomerList.js
@@ -1,7 +1,7 @@
-import React from 'react';
+import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import axios from 'axios';
-import { createDecipher } from 'crypto';
+import { createDecipher } from 'crypto'; // do we need this?
 
 class CustomerList extends Component {
     //pass in props?
@@ -21,19 +21,19 @@ class CustomerList extends Component {
         axios.get(customersURL)
             .then((response) => {
                 console.log(response.data);
-                const customers = response.data.map((CustInfo) => {
+                const customers = response.data.map((custInfo) => {
+                  // const { name, registered_at, address, city, state, postal_code, phone, account_credit } = custInfo;
                     return {
-                      "name": "Shelley Rocha",
-                      "registered_at": "Wed, 29 Apr 2015 07:54:14 -0700",
-                      "address": "Ap #292-5216 Ipsum Rd.",
-                      "city": "Hillsboro",
-                      "state": "OR",
-                      "postal_code": "24309",
-                      "phone": "(322) 510-8695",
-                      "account_credit": 13.15
-                      extrenal_id: movieInfo.extrenal_id,
+                      name: custInfo.name,// string
+                      registered_at: custInfo.registered_at, // Date
+                      address: custInfo.address, // string
+                      city: custInfo.city, //string
+                      state: custInfo.state, // string
+                      postal_code: custInfo.postal_code, // string
+                      phone: custInfo.phone, // string
+                      account_credit: custInfo.account_credit, // number
+                      // external_id: custInfo.external_id, // customers don't have an external id as a field;
                     }
-
                 })
                 this.setState({
                     customers: customers, // only need "customers," since they match?
@@ -42,23 +42,23 @@ class CustomerList extends Component {
             .catch((error) => {
                console.log(error.message)
             });
-    };
+    }
 
     render() {
-       // const eachMovie = this.state.movies.map((movie, i) => {
-       //     return (
-       //     <div>
-       //      <p>{movie.title} <button>Select: {movie.title}</button> </p>
-       //     </div>
-       //      )
-       // })
-       //  const errors = this.state.error;
-       //
-       //  return (
-       //      <section>
-       //          {eachMovie}
-       //      </section>
-       //  )
+       const renderedCustomers = this.state.customers.map((customer, i) => {
+           return (
+           <div key={i}>
+            <p>{customer.name} <button>Select</button> </p>
+           </div>
+            )
+       })
+        // const errors = this.state.error;
+
+        return (
+            <section>
+                {renderedCustomers}
+            </section>
+        )
     }
 
 

From 15532f93bbca3671af48e93ecb54179ebd4460f1 Mon Sep 17 00:00:00 2001
From: Ngoc Le <ngocle@outlook.com>
Date: Wed, 26 Jun 2019 12:06:26 -0700
Subject: [PATCH 11/38] added external API request for list of movies from
 MovieDB to onSearchButtonHandler function in SearchTMDB component

---
 .gitignore                   |  1 +
 package-lock.json            | 90 ++++++++++++++++++++++++++++++++++++
 package.json                 |  4 +-
 src/App.js                   |  2 +-
 src/components/SearchTMDB.js | 55 ++++++++++++++++++++--
 5 files changed, 147 insertions(+), 5 deletions(-)

diff --git a/.gitignore b/.gitignore
index 71b7f9fd3..3fc270ed4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -20,3 +20,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+.env
diff --git a/package-lock.json b/package-lock.json
index 3e0662036..5706799d0 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",
@@ -10336,6 +10368,59 @@
         "workbox-webpack-plugin": "4.2.0"
       }
     },
+    "react-search-field": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-search-field/-/react-search-field-1.0.0.tgz",
+      "integrity": "sha512-oeHQfWQM3R6mX6Q/u7S1N4WcEYZwFXq4NrLIber7Q0+ESTcYKhOYxGtmTWjbEtzbQFl9FqORtj6Ws72hNA4hYQ==",
+      "requires": {
+        "prop-types": "15.6.2",
+        "react": "16.6.3",
+        "react-dom": "16.6.3",
+        "typeco": "1.0.0"
+      },
+      "dependencies": {
+        "prop-types": {
+          "version": "15.6.2",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
+          "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
+          "requires": {
+            "loose-envify": "^1.3.1",
+            "object-assign": "^4.1.1"
+          }
+        },
+        "react": {
+          "version": "16.6.3",
+          "resolved": "https://registry.npmjs.org/react/-/react-16.6.3.tgz",
+          "integrity": "sha512-zCvmH2vbEolgKxtqXL2wmGCUxUyNheYn/C+PD1YAjfxHC54+MhdruyhO7QieQrYsYeTxrn93PM2y0jRH1zEExw==",
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1",
+            "prop-types": "^15.6.2",
+            "scheduler": "^0.11.2"
+          }
+        },
+        "react-dom": {
+          "version": "16.6.3",
+          "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.6.3.tgz",
+          "integrity": "sha512-8ugJWRCWLGXy+7PmNh8WJz3g1TaTUt1XyoIcFN+x0Zbkoz+KKdUyx1AQLYJdbFXjuF41Nmjn5+j//rxvhFjgSQ==",
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1",
+            "prop-types": "^15.6.2",
+            "scheduler": "^0.11.2"
+          }
+        },
+        "scheduler": {
+          "version": "0.11.3",
+          "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.11.3.tgz",
+          "integrity": "sha512-i9X9VRRVZDd3xZw10NY5Z2cVMbdYg6gqFecfj79USv1CFN+YrJ3gIPRKf1qlY+Sxly4djoKdfx1T+m9dnRB8kQ==",
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1"
+          }
+        }
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -11918,6 +12003,11 @@
         "mime-types": "~2.1.24"
       }
     },
+    "typeco": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/typeco/-/typeco-1.0.0.tgz",
+      "integrity": "sha512-3mWzemIyiY5jL/fmW2sZp1vv7ifQ5ONjF6fT/4RMHJw3/1oabumpxvYZ9D+z01a5wRFSRPPXZkQjM4WIUzY+GA=="
+    },
     "typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
diff --git a/package.json b/package.json
index d63126caa..158e175c2 100644
--- a/package.json
+++ b/package.json
@@ -3,10 +3,12 @@
   "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",
-    "react-scripts": "3.0.1"
+    "react-scripts": "3.0.1",
+    "react-search-field": "^1.0.0"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/App.js b/src/App.js
index fdbfe9758..0c84a9190 100644
--- a/src/App.js
+++ b/src/App.js
@@ -22,7 +22,7 @@ class App extends Component {
               </li>
               <li>
                 <Link to="/search">Search Page</Link>
-              </li>
+              </li> 
               <li>
                 <Link to="/customers">Customer List</Link>
               </li>
diff --git a/src/components/SearchTMDB.js b/src/components/SearchTMDB.js
index d971715c1..b7f39c6a1 100644
--- a/src/components/SearchTMDB.js
+++ b/src/components/SearchTMDB.js
@@ -1,8 +1,57 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import axios from 'axios';
 
-function SearchTMDB() {
-    return <h2>Search TMDB</h2>
+
+class SearchTMDB extends Component {
+   constructor(props) {
+       super(props);
+
+       this.state = {
+           movieAddToRentalLib: null,
+           searchMovie: "",
+           apiKey: process.env.REACT_APP_MOVIEDB_KEY,
+           baseURL: "http://localhost:3001/"
+       };
+   }
+
+   onSearchChange = (event) => {
+       const updatedState = {
+           searchMovie: event.target.value
+       }
+       this.setState(updatedState)
+   }
+
+
+   onSearchButtonHandler = () => {
+    
+    if (this.state.searchMovie) {
+        axios.get('http://localhost:3001/movies?query=' + this.state.searchMovie)
+        .then((response) => {
+           console.log(response);
+       })
+        }
+       
+   }
+   
+
+   render() {
+       
+    return (
+        <main>
+            <h2>Movie Search Page</h2>
+            <p>To find a movie by title, type the movie title in the search bar</p>
+            <lable>
+                Movie Title:
+                <input 
+                type="text"
+                onChange={this.onSearchChange}>
+                </input>
+            </lable>
+            <input type="submit" name="submit" value="Search" onClick={this.onSearchButtonHandler} />
+        </main>
+        )
+    }
 }
 
 export default SearchTMDB;
\ No newline at end of file

From 9153bb20ab8463d216015332f07f2f442ab9c142 Mon Sep 17 00:00:00 2001
From: Ngoc Le <ngocle@outlook.com>
Date: Wed, 26 Jun 2019 14:10:36 -0700
Subject: [PATCH 12/38] display search results and added the add to rental
 library button for each movie

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

diff --git a/src/components/SearchTMDB.js b/src/components/SearchTMDB.js
index b7f39c6a1..c0bd7f541 100644
--- a/src/components/SearchTMDB.js
+++ b/src/components/SearchTMDB.js
@@ -10,8 +10,8 @@ class SearchTMDB extends Component {
        this.state = {
            movieAddToRentalLib: null,
            searchMovie: "",
-           apiKey: process.env.REACT_APP_MOVIEDB_KEY,
-           baseURL: "http://localhost:3001/"
+           searchResults: [],
+           apiError: null
        };
    }
 
@@ -28,15 +28,32 @@ class SearchTMDB extends Component {
     if (this.state.searchMovie) {
         axios.get('http://localhost:3001/movies?query=' + this.state.searchMovie)
         .then((response) => {
-           console.log(response);
+            const updatedMovieList = response.data
+           
+            this.setState({
+                searchResults: updatedMovieList
+            });
        })
+       .catch((error) => {
+           this.setState({
+               apiError: error.message
+           })
+       });
+           
         }
        
    }
-   
 
    render() {
-       
+        const eachMovie = this.state.searchResults.map((movie, i) => {
+            return (
+                <div>
+                    <p key={i}>{movie.title} <button>Add To Rental Library</button> </p>
+                </div>     
+            )      
+        })
+
+       const errorSection = (this.state.apiError) ? (<section> Error: {this.state.apiError}</section>) : null;
     return (
         <main>
             <h2>Movie Search Page</h2>
@@ -44,11 +61,13 @@ class SearchTMDB extends Component {
             <lable>
                 Movie Title:
                 <input 
-                type="text"
+                type="text" 
                 onChange={this.onSearchChange}>
                 </input>
             </lable>
             <input type="submit" name="submit" value="Search" onClick={this.onSearchButtonHandler} />
+            {errorSection}
+            {eachMovie}
         </main>
         )
     }

From cc0806be535cb3b05c7b8b57aa2364b8907a42ed Mon Sep 17 00:00:00 2001
From: Shamira <marshallscm@gmail.com>
Date: Wed, 26 Jun 2019 15:26:42 -0700
Subject: [PATCH 13/38] Select Movie working

---
 src/App.js                  | 30 +++++++++++++++++++++++++-----
 src/components/Library.js   | 26 ++++++++++++++++++--------
 src/components/Selected.css |  5 +++++
 src/components/Selected.js  | 17 +++++++++++++++--
 4 files changed, 63 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Selected.css

diff --git a/src/App.js b/src/App.js
index 483e5731e..0494e1816 100644
--- a/src/App.js
+++ b/src/App.js
@@ -13,15 +13,30 @@ class App extends Component {
     super();
 
     this.state = {
-        selected_movie: this.movie,
-        selected_customer: this.customer, 
-        errorMessage: null,
+        selectedMovie: '',
+        selectedCustomer: [], 
+        message: '',
     }
 }
+//selectId function that sets state for the movie ID
+selectedObject = (movie) => {
+  //this.setState updates the state and re-renders
+  
+
+  this.setState({
+    
+    selectedMovie: movie
+   
+  })
+  console.log(this.selectedMovie)
+}
+
+
   render() {
     return (
+      <section>
+        <Library selectedMovieCallback={this.selectedObject} />
       <Router>
-
         <div>
           <nav>
             <ul>
@@ -36,7 +51,6 @@ class App extends Component {
               </li>
               <li>
                 <Link to="/library">Library</Link>
-    
               </li>
             </ul>
           </nav>
@@ -46,6 +60,12 @@ class App extends Component {
           <Route path="/library" component={Library} />
         </div>
       </Router>
+      <div> 
+        
+        <Selected selectedObjectCallback={this.selectedObject} 
+         />
+      </div>
+      </section>
     );
   }
 }
diff --git a/src/components/Library.js b/src/components/Library.js
index d59046c54..8a189eb22 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -21,7 +21,6 @@ class Library extends Component {
         const moviesURL = 'http://localhost:3001/movies'; 
         axios.get(moviesURL)
             .then((response) => {
-                console.log(response.data);
                 const movies = response.data.map((movieInfo) => {
                     return {
                       id: movieInfo.id,
@@ -30,8 +29,7 @@ class Library extends Component {
                       release_date: movieInfo.release_date,
                       image_url: movieInfo.image_url,
                       extrenal_id: movieInfo.extrenal_id,  
-                    }
-                
+                    }   
                 })
                 this.setState({
                     movies: movies,
@@ -41,25 +39,37 @@ class Library extends Component {
                console.log(error.message)
             });
     };
- 
+
+    handleMovieSelection = movie => {
+        // const pickedMovie = this.state.movies.id
+        this.props.selectedMovieCallback(
+            movie.title
+        );
+        console.log(movie.title)
+    }
+
+
+    // make a callback function for selectedHandler
+    // selectedHandlerCallback=selectedHandler
     render() {
+    
        const eachMovie = this.state.movies.map((movie, i) => {
            return (
            <div>
-            <p>{movie.title} <button>Select: {movie.title}</button> </p>
+            {movie.title} <button onClick={()=>this.handleMovieSelection(movie)}>Select Movie</button>
            </div>     
             )
+
        })
         const errors = this.state.error;
-      
+
         return (
             <section> 
+                <h1>All Movies</h1>    
                 {eachMovie}
             </section>
         )
     }
-    
-
       
 }
 export default Library;
\ No newline at end of file
diff --git a/src/components/Selected.css b/src/components/Selected.css
new file mode 100644
index 000000000..2fb990cb8
--- /dev/null
+++ b/src/components/Selected.css
@@ -0,0 +1,5 @@
+.SelectedObjectsWrapper {
+  border: 2px solid;
+  background-color: lightpink;
+  opacity: 0.5;
+}
\ No newline at end of file
diff --git a/src/components/Selected.js b/src/components/Selected.js
index bedb0460d..46e72ea3a 100644
--- a/src/components/Selected.js
+++ b/src/components/Selected.js
@@ -2,9 +2,22 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import CustomerList from './CustomerList';
 import Library from './Library';
+import './Selected.css';
 
-function Selected() {
-    return <h2>Selected</h2>
+function Selected(props) {
+   const displaySelection = props.showSelection;
+    if (props.showSelection) {
+    return (
+      <section>
+        <div className='SelectedObjectsWrapper'>
+            <h3>Customer</h3>
+            <h3>Current Movie: {displaySelection}</h3> 
+            </div> 
+      </section>   
+    )
+} else {
+    return null
+}
 }
 
 export default Selected;
\ No newline at end of file

From 993958dde513256ed3fe623d72b03cd64f325b1c Mon Sep 17 00:00:00 2001
From: Shamira <marshallscm@gmail.com>
Date: Wed, 26 Jun 2019 15:35:38 -0700
Subject: [PATCH 14/38] Showing selected movie throughout app.

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

diff --git a/src/App.js b/src/App.js
index 0494e1816..d1b45335a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -21,8 +21,6 @@ class App extends Component {
 //selectId function that sets state for the movie ID
 selectedObject = (movie) => {
   //this.setState updates the state and re-renders
-  
-
   this.setState({
     
     selectedMovie: movie
@@ -61,8 +59,8 @@ selectedObject = (movie) => {
         </div>
       </Router>
       <div> 
-        
-        <Selected selectedObjectCallback={this.selectedObject} 
+
+        <Selected showSelection={this.state.selectedMovie} 
          />
       </div>
       </section>
diff --git a/src/components/Library.js b/src/components/Library.js
index 8a189eb22..b479d6d7f 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -47,20 +47,20 @@ class Library extends Component {
         );
         console.log(movie.title)
     }
-
-
     // make a callback function for selectedHandler
     // selectedHandlerCallback=selectedHandler
-    render() {
     
+    render() {
        const eachMovie = this.state.movies.map((movie, i) => {
            return (
            <div>
-            {movie.title} <button onClick={()=>this.handleMovieSelection(movie)}>Select Movie</button>
+            {movie.title} <button onClick={()=>this.handleMovieSelection(movie)}> Select Movie </button>
            </div>     
             )
 
        })
+    
+       
         const errors = this.state.error;
 
         return (
@@ -70,6 +70,8 @@ class Library extends Component {
             </section>
         )
     }
+    
+
       
 }
 export default Library;
\ No newline at end of file

From 4e5a6f4bfd25aa5b81f10b6bd1e9b799b43b8d78 Mon Sep 17 00:00:00 2001
From: Shamira <marshallscm@gmail.com>
Date: Wed, 26 Jun 2019 15:42:50 -0700
Subject: [PATCH 15/38] Added route path so Library is only renddered when at
 the Library route.

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

diff --git a/src/App.js b/src/App.js
index d1b45335a..52df83bf1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -33,7 +33,7 @@ selectedObject = (movie) => {
   render() {
     return (
       <section>
-        <Library selectedMovieCallback={this.selectedObject} />
+       
       <Router>
         <div>
           <nav>
@@ -55,7 +55,12 @@ selectedObject = (movie) => {
         
           <Route path="/search" component={SearchTMDB} />
           <Route path="/customers" component={CustomerList} />
-          <Route path="/library" component={Library} />
+          <Route path="/library" component={Library} 
+          render={(props) => 
+            <Library selectedMovieCallback={this.selectedObject} 
+            isAuthed={true}/>
+          }
+          />
         </div>
       </Router>
       <div> 

From 95c839b69a413483a87e5f57fe4fd744a10f7de4 Mon Sep 17 00:00:00 2001
From: Shamira <marshallscm@gmail.com>
Date: Wed, 26 Jun 2019 16:09:24 -0700
Subject: [PATCH 16/38] Library component and render working

---
 src/App.js                | 11 ++++++-----
 src/components/Library.js |  1 +
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/App.js b/src/App.js
index 52df83bf1..d2aba1bc0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -26,7 +26,7 @@ selectedObject = (movie) => {
     selectedMovie: movie
    
   })
-  console.log(this.selectedMovie)
+
 }
 
 
@@ -53,12 +53,13 @@ selectedObject = (movie) => {
             </ul>
           </nav>
         
-          <Route path="/search" component={SearchTMDB} />
-          <Route path="/customers" component={CustomerList} />
-          <Route path="/library" component={Library} 
+          <Route path="/search"/>
+          <Route path="/customers"/>
+          <Route path="/library" 
           render={(props) => 
             <Library selectedMovieCallback={this.selectedObject} 
-            isAuthed={true}/>
+            isAuthed={true}
+            />
           }
           />
         </div>
diff --git a/src/components/Library.js b/src/components/Library.js
index b479d6d7f..8c195b128 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -47,6 +47,7 @@ class Library extends Component {
         );
         console.log(movie.title)
     }
+
     // make a callback function for selectedHandler
     // selectedHandlerCallback=selectedHandler
     

From 7ee9858e6f8de5b2599639db04fcc8eb541f3c7c Mon Sep 17 00:00:00 2001
From: Shamira <marshallscm@gmail.com>
Date: Wed, 26 Jun 2019 18:29:07 -0700
Subject: [PATCH 17/38] Working Selection Component

---
 src/App.js                     | 30 ++++++++++-----
 src/components/CustomerList.js | 69 ++++++++++++++++++++++++++++++++--
 src/components/Selected.js     | 13 ++++---
 3 files changed, 93 insertions(+), 19 deletions(-)

diff --git a/src/App.js b/src/App.js
index d2aba1bc0..975f1db13 100644
--- a/src/App.js
+++ b/src/App.js
@@ -14,23 +14,27 @@ class App extends Component {
 
     this.state = {
         selectedMovie: '',
-        selectedCustomer: [], 
+        selectedCustomer: '', 
         message: '',
     }
 }
 //selectId function that sets state for the movie ID
-selectedObject = (movie) => {
+selectedMovieObject = (movie) => {
   //this.setState updates the state and re-renders
   this.setState({
-    
-    selectedMovie: movie
-   
+    selectedMovie: movie,
   })
 
 }
+selectedCustomerObject = (customer) => {
+  //this.setState updates the state and re-renders
+  this.setState({   
+    selectedCustomer: customer, 
+  })
 
-
+}
   render() {
+    console.log(this.state)
     return (
       <section>
        
@@ -54,10 +58,16 @@ selectedObject = (movie) => {
           </nav>
         
           <Route path="/search"/>
-          <Route path="/customers"/>
+          <Route path="/customers"
+          render={(props) => 
+            <CustomerList selectedCustomerCallback={this.selectedCustomerObject} 
+            isAuthed={true}
+            />
+          }
+          />
           <Route path="/library" 
           render={(props) => 
-            <Library selectedMovieCallback={this.selectedObject} 
+            <Library selectedMovieCallback={this.selectedMovieObject} 
             isAuthed={true}
             />
           }
@@ -65,8 +75,8 @@ selectedObject = (movie) => {
         </div>
       </Router>
       <div> 
-
-        <Selected showSelection={this.state.selectedMovie} 
+        <Selected showMovie={this.state.selectedMovie} 
+        showCustomer={this.state.selectedCustomer}
          />
       </div>
       </section>
diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js
index 4585d4056..7a7646e2c 100644
--- a/src/components/CustomerList.js
+++ b/src/components/CustomerList.js
@@ -1,8 +1,71 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import axios from 'axios';
+import { createDecipher } from 'crypto'; // do we need this?
 
-function CustomerList() {
-    return <h2>Customer List</h2>
+class CustomerList extends Component {
+    //pass in props?
+    //make a variable movies = props to pull movies array from App
+    //set another variable 'allmovies' and loop through map and return
+    constructor() {
+        super();
+
+        this.state = {
+            customers: [],
+            errorMessage: null,
+        }
+    }
+
+    componentDidMount() {
+        const customersURL = 'http://localhost:3001/customers';
+        axios.get(customersURL)
+            .then((response) => {
+                console.log(response.data);
+                const customers = response.data.map((custInfo) => {
+                  // const { name, registered_at, address, city, state, postal_code, phone, account_credit } = custInfo;
+                    return {
+                      name: custInfo.name,// string
+                      registered_at: custInfo.registered_at, // Date
+                      address: custInfo.address, // string
+                      city: custInfo.city, //string
+                      state: custInfo.state, // string
+                      postal_code: custInfo.postal_code, // string
+                      phone: custInfo.phone, // string
+                      account_credit: custInfo.account_credit, // number
+                      // external_id: custInfo.external_id, // customers don't have an external id as a field;
+                    }
+                })
+                this.setState({
+                    customers: customers, // only need "customers," since they match?
+                });
+            })
+            .catch((error) => {
+               console.log(error.message)
+            });
+    }
+        handleCustomerSelection = customer => {
+            // const pickedMovie = this.state.movies.id
+            this.props.selectedCustomerCallback(
+                customer.name
+            );
+            console.log(customer.name)
+        }
+    render() {
+       const renderedCustomers = this.state.customers.map((customer, i) => {
+           return (
+           <div key={i}>
+            <p>{customer.name} <button onClick={()=>this.handleCustomerSelection(customer)}>Select</button> </p>
+           </div>
+            )
+       })
+        // const errors = this.state.error;
+
+        return (
+            <section>
+                {renderedCustomers}
+            </section>
+        )
+    }
 }
 
 export default CustomerList;
\ No newline at end of file
diff --git a/src/components/Selected.js b/src/components/Selected.js
index 46e72ea3a..9feddf744 100644
--- a/src/components/Selected.js
+++ b/src/components/Selected.js
@@ -5,19 +5,20 @@ import Library from './Library';
 import './Selected.css';
 
 function Selected(props) {
-   const displaySelection = props.showSelection;
-    if (props.showSelection) {
+   const displaySelection = props.showMovie;
+   const displayCustomer = props.showCustomer;
+    // if (props.showSelection) {
     return (
       <section>
         <div className='SelectedObjectsWrapper'>
-            <h3>Customer</h3>
+            <h3>Customer: {displayCustomer}</h3>
             <h3>Current Movie: {displaySelection}</h3> 
             </div> 
       </section>   
     )
-} else {
-    return null
-}
+// } else {
+//     return null
+// }
 }
 
 export default Selected;
\ No newline at end of file

From 8ffcb9783f8b9a9b49dc1fe2c3b3fe0fe27316f7 Mon Sep 17 00:00:00 2001
From: Ngoc Le <ngocle@outlook.com>
Date: Thu, 27 Jun 2019 10:07:47 -0700
Subject: [PATCH 18/38] updated post request to add movie to internal database

---
 src/components/SearchTMDB.js | 41 +++++++++++++++++++++++++++++++++---
 1 file changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/components/SearchTMDB.js b/src/components/SearchTMDB.js
index c0bd7f541..2095c89f0 100644
--- a/src/components/SearchTMDB.js
+++ b/src/components/SearchTMDB.js
@@ -11,7 +11,8 @@ class SearchTMDB extends Component {
            movieAddToRentalLib: null,
            searchMovie: "",
            searchResults: [],
-           apiError: null
+           apiError: null,
+           apiSuccess: null,
        };
    }
 
@@ -44,15 +45,48 @@ class SearchTMDB extends Component {
        
    }
 
+   onAddtoRentalButtonHandler = (movie) => {
+       console.log(movie)
+    const movieDataToSendToApi ={
+            "movie": {
+              "title": movie.title,
+              "overview": movie.overview,
+              "release_date": movie.release_date,
+              "image_url": movie.image_url,
+              "external_id": movie.external_id,
+              "inventory": 1
+            }
+    }
+    
+    axios.post('http://localhost:3001/movies',movieDataToSendToApi)
+    .then((response) => {
+        const successMessage = `Succesfully added ${response.data.movie.title}`
+        this.setState({
+            apiSuccess: successMessage
+        })
+   })
+   .catch((error) => {
+       this.setState({
+           apiError: error.message
+       })
+   });
+   }
+
    render() {
         const eachMovie = this.state.searchResults.map((movie, i) => {
             return (
                 <div>
-                    <p key={i}>{movie.title} <button>Add To Rental Library</button> </p>
+                    <article key={i}>
+                        <p >{movie.title}</p>
+                        <button 
+                        onClick={() => {this.onAddtoRentalButtonHandler(movie)}}>
+                            Add To Rental Library
+                        </button> 
+                    </article>
                 </div>     
             )      
         })
-
+        const successSection = (this.state.apiSuccess) ? (<section> Yay!{this.state.apiSuccess}</section>) : null;
        const errorSection = (this.state.apiError) ? (<section> Error: {this.state.apiError}</section>) : null;
     return (
         <main>
@@ -67,6 +101,7 @@ class SearchTMDB extends Component {
             </lable>
             <input type="submit" name="submit" value="Search" onClick={this.onSearchButtonHandler} />
             {errorSection}
+            {successSection}
             {eachMovie}
         </main>
         )

From 85fc2d1834f13a85cdf7172d2a422964a047ae28 Mon Sep 17 00:00:00 2001
From: Ngoc Le <ngocle@outlook.com>
Date: Thu, 27 Jun 2019 10:24:51 -0700
Subject: [PATCH 19/38] added search component to app

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

diff --git a/src/App.js b/src/App.js
index 3a1c66085..048c75c7d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -57,7 +57,7 @@ selectedCustomerObject = (customer) => {
             </ul>
           </nav>
         
-          <Route path="/search"/>
+          <Route path="/search" component={SearchTMDB}/>
           <Route path="/customers"
           render={(props) => 
             <CustomerList selectedCustomerCallback={this.selectedCustomerObject} 

From 899ece230bda953461d64eaf43bf51b5d4a4622c Mon Sep 17 00:00:00 2001
From: Mello-Cello <celloelle@gmail.com>
Date: Thu, 27 Jun 2019 14:53:55 -0700
Subject: [PATCH 20/38] Cleaned up small errors. Uncomment later if components
 are needed.

---
 src/App.js                     | 28 ++++++++++++-------------
 src/components/CustomerList.js |  4 ++--
 src/components/Library.js      | 32 ++++++++++++++--------------
 src/components/SearchTMDB.js   | 38 +++++++++++++++++++---------------
 src/components/Selected.js     | 14 ++++++-------
 5 files changed, 60 insertions(+), 56 deletions(-)

diff --git a/src/App.js b/src/App.js
index 048c75c7d..ece3c364f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+// import logo from './logo.svg';
 import './App.css';
 import CustomerList from './components/CustomerList';
 import Library from './components/Library';
@@ -14,7 +14,7 @@ class App extends Component {
 
     this.state = {
         selectedMovie: '',
-        selectedCustomer: '', 
+        selectedCustomer: '',
         message: '',
     }
 }
@@ -28,8 +28,8 @@ selectedMovieObject = (movie) => {
 }
 selectedCustomerObject = (customer) => {
   //this.setState updates the state and re-renders
-  this.setState({   
-    selectedCustomer: customer, 
+  this.setState({
+    selectedCustomer: customer,
   })
 
 }
@@ -37,7 +37,7 @@ selectedCustomerObject = (customer) => {
     console.log(this.state)
     return (
       <section>
-       
+
       <Router>
         <div>
           <nav>
@@ -47,7 +47,7 @@ selectedCustomerObject = (customer) => {
               </li>
               <li>
                 <Link to="/search">Search Page</Link>
-              </li> 
+              </li>
               <li>
                 <Link to="/customers">Customer List</Link>
               </li>
@@ -56,26 +56,26 @@ selectedCustomerObject = (customer) => {
               </li>
             </ul>
           </nav>
-        
+
           <Route path="/search" component={SearchTMDB}/>
           <Route path="/customers"
-          render={(props) => 
-            <CustomerList selectedCustomerCallback={this.selectedCustomerObject} 
+          render={(props) =>
+            <CustomerList selectedCustomerCallback={this.selectedCustomerObject}
             isAuthed={true}
             />
           }
           />
-          <Route path="/library" 
-          render={(props) => 
-            <Library selectedMovieCallback={this.selectedMovieObject} 
+          <Route path="/library"
+          render={(props) =>
+            <Library selectedMovieCallback={this.selectedMovieObject}
             isAuthed={true}
             />
           }
           />
         </div>
       </Router>
-      <div> 
-        <Selected showMovie={this.state.selectedMovie} 
+      <div>
+        <Selected showMovie={this.state.selectedMovie}
         showCustomer={this.state.selectedCustomer}
          />
       </div>
diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js
index b5516879a..775c445ff 100644
--- a/src/components/CustomerList.js
+++ b/src/components/CustomerList.js
@@ -1,8 +1,8 @@
 
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
 import axios from 'axios';
-import { createDecipher } from 'crypto'; // do we need this?
+// import { createDecipher } from 'crypto'; // do we need this?
 
 class CustomerList extends Component {
     //pass in props?
diff --git a/src/components/Library.js b/src/components/Library.js
index 8c195b128..e4b2b4586 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -1,13 +1,13 @@
 import React, {Component} from 'react';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
 import axios from 'axios';
-import { createDecipher } from 'crypto';
+// import { createDecipher } from 'crypto';
 
 class Library extends Component {
     //change Library to functional component
     //pass in props
     //make a variable movies = props to pull movies array from App
-    //set another variable 'allmovies' and loop through map and return 
+    //set another variable 'allmovies' and loop through map and return
     constructor() {
         super();
 
@@ -18,7 +18,7 @@ class Library extends Component {
     }
 
     componentDidMount() {
-        const moviesURL = 'http://localhost:3001/movies'; 
+        const moviesURL = 'http://localhost:3001/movies';
         axios.get(moviesURL)
             .then((response) => {
                 const movies = response.data.map((movieInfo) => {
@@ -28,8 +28,8 @@ class Library extends Component {
                       overview: movieInfo.overview,
                       release_date: movieInfo.release_date,
                       image_url: movieInfo.image_url,
-                      extrenal_id: movieInfo.extrenal_id,  
-                    }   
+                      extrenal_id: movieInfo.extrenal_id,
+                    }
                 })
                 this.setState({
                     movies: movies,
@@ -50,29 +50,29 @@ class Library extends Component {
 
     // make a callback function for selectedHandler
     // selectedHandlerCallback=selectedHandler
-    
+
     render() {
        const eachMovie = this.state.movies.map((movie, i) => {
            return (
-           <div>
+           <div key={i}>
             {movie.title} <button onClick={()=>this.handleMovieSelection(movie)}> Select Movie </button>
-           </div>     
+           </div>
             )
 
        })
-    
-       
+
+
         const errors = this.state.error;
 
         return (
-            <section> 
-                <h1>All Movies</h1>    
+            <section>
+                <h1>All Movies</h1>
                 {eachMovie}
             </section>
         )
     }
-    
 
-      
+
+
 }
-export default Library;
\ No newline at end of file
+export default Library;
diff --git a/src/components/SearchTMDB.js b/src/components/SearchTMDB.js
index 2095c89f0..e50045b8e 100644
--- a/src/components/SearchTMDB.js
+++ b/src/components/SearchTMDB.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
 import axios from 'axios';
 
 
@@ -25,12 +25,12 @@ class SearchTMDB extends Component {
 
 
    onSearchButtonHandler = () => {
-    
+
     if (this.state.searchMovie) {
         axios.get('http://localhost:3001/movies?query=' + this.state.searchMovie)
         .then((response) => {
             const updatedMovieList = response.data
-           
+
             this.setState({
                 searchResults: updatedMovieList
             });
@@ -40,13 +40,13 @@ class SearchTMDB extends Component {
                apiError: error.message
            })
        });
-           
+
         }
-       
+
    }
 
    onAddtoRentalButtonHandler = (movie) => {
-       console.log(movie)
+       // console.log(movie)
     const movieDataToSendToApi ={
             "movie": {
               "title": movie.title,
@@ -57,16 +57,20 @@ class SearchTMDB extends Component {
               "inventory": 1
             }
     }
-    
+
     axios.post('http://localhost:3001/movies',movieDataToSendToApi)
     .then((response) => {
+      console.log(response)
         const successMessage = `Succesfully added ${response.data.movie.title}`
         this.setState({
             apiSuccess: successMessage
         })
    })
    .catch((error) => {
+     // console.log("in catch *******");
+
        this.setState({
+
            apiError: error.message
        })
    });
@@ -75,16 +79,16 @@ class SearchTMDB extends Component {
    render() {
         const eachMovie = this.state.searchResults.map((movie, i) => {
             return (
-                <div>
+                <div key={i}>
                     <article key={i}>
                         <p >{movie.title}</p>
-                        <button 
+                        <button
                         onClick={() => {this.onAddtoRentalButtonHandler(movie)}}>
                             Add To Rental Library
-                        </button> 
+                        </button>
                     </article>
-                </div>     
-            )      
+                </div>
+            )
         })
         const successSection = (this.state.apiSuccess) ? (<section> Yay!{this.state.apiSuccess}</section>) : null;
        const errorSection = (this.state.apiError) ? (<section> Error: {this.state.apiError}</section>) : null;
@@ -92,13 +96,13 @@ class SearchTMDB extends Component {
         <main>
             <h2>Movie Search Page</h2>
             <p>To find a movie by title, type the movie title in the search bar</p>
-            <lable>
+            <label>
                 Movie Title:
-                <input 
-                type="text" 
+                <input
+                type="text"
                 onChange={this.onSearchChange}>
                 </input>
-            </lable>
+            </label>
             <input type="submit" name="submit" value="Search" onClick={this.onSearchButtonHandler} />
             {errorSection}
             {successSection}
@@ -108,4 +112,4 @@ class SearchTMDB extends Component {
     }
 }
 
-export default SearchTMDB;
\ No newline at end of file
+export default SearchTMDB;
diff --git a/src/components/Selected.js b/src/components/Selected.js
index 9feddf744..71d0175df 100644
--- a/src/components/Selected.js
+++ b/src/components/Selected.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import CustomerList from './CustomerList';
-import Library from './Library';
+// import PropTypes from 'prop-types';
+// import CustomerList from './CustomerList';
+// import Library from './Library';
 import './Selected.css';
 
 function Selected(props) {
@@ -12,13 +12,13 @@ function Selected(props) {
       <section>
         <div className='SelectedObjectsWrapper'>
             <h3>Customer: {displayCustomer}</h3>
-            <h3>Current Movie: {displaySelection}</h3> 
-            </div> 
-      </section>   
+            <h3>Current Movie: {displaySelection}</h3>
+            </div>
+      </section>
     )
 // } else {
 //     return null
 // }
 }
 
-export default Selected;
\ No newline at end of file
+export default Selected;

From 6834fc8db35534c51a1140968d116f6c04c2e85f Mon Sep 17 00:00:00 2001
From: Mello-Cello <celloelle@gmail.com>
Date: Thu, 27 Jun 2019 16:21:14 -0700
Subject: [PATCH 21/38] Updated messages displayed to user on adding a
 duplicate movie.

---
 src/components/Library.js    |  2 +-
 src/components/SearchTMDB.js | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/Library.js b/src/components/Library.js
index e4b2b4586..c90e130bf 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -38,7 +38,7 @@ class Library extends Component {
             .catch((error) => {
                console.log(error.message)
             });
-    };
+    }
 
     handleMovieSelection = movie => {
         // const pickedMovie = this.state.movies.id
diff --git a/src/components/SearchTMDB.js b/src/components/SearchTMDB.js
index e50045b8e..ac7b15bb5 100644
--- a/src/components/SearchTMDB.js
+++ b/src/components/SearchTMDB.js
@@ -61,10 +61,18 @@ class SearchTMDB extends Component {
     axios.post('http://localhost:3001/movies',movieDataToSendToApi)
     .then((response) => {
       console.log(response)
+      if (response.data.movie) {
         const successMessage = `Succesfully added ${response.data.movie.title}`
         this.setState({
             apiSuccess: successMessage
         })
+      } else {
+        const successMessage = response.data.errors
+        this.setState({
+            apiSuccess: successMessage
+        })
+      }
+
    })
    .catch((error) => {
      // console.log("in catch *******");
@@ -90,7 +98,7 @@ class SearchTMDB extends Component {
                 </div>
             )
         })
-        const successSection = (this.state.apiSuccess) ? (<section> Yay!{this.state.apiSuccess}</section>) : null;
+        const successSection = (this.state.apiSuccess) ? (<section> Yay! {this.state.apiSuccess}</section>) : null;
        const errorSection = (this.state.apiError) ? (<section> Error: {this.state.apiError}</section>) : null;
     return (
         <main>

From a9fd124166df0aa4b01150402db9472ed0582493 Mon Sep 17 00:00:00 2001
From: Ngoc Le <ngocle@outlook.com>
Date: Thu, 27 Jun 2019 16:58:05 -0700
Subject: [PATCH 22/38] updated error message for post request to internal API

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

diff --git a/src/components/SearchTMDB.js b/src/components/SearchTMDB.js
index ac7b15bb5..5c97c7304 100644
--- a/src/components/SearchTMDB.js
+++ b/src/components/SearchTMDB.js
@@ -62,7 +62,7 @@ class SearchTMDB extends Component {
     .then((response) => {
       console.log(response)
       if (response.data.movie) {
-        const successMessage = `Succesfully added ${response.data.movie.title}`
+        const successMessage = `Yay! Succesfully added ${response.data.movie.title}`
         this.setState({
             apiSuccess: successMessage
         })
@@ -98,7 +98,7 @@ class SearchTMDB extends Component {
                 </div>
             )
         })
-        const successSection = (this.state.apiSuccess) ? (<section> Yay! {this.state.apiSuccess}</section>) : null;
+        const successSection = (this.state.apiSuccess) ? (<section>{this.state.apiSuccess} </section>) : null;
        const errorSection = (this.state.apiError) ? (<section> Error: {this.state.apiError}</section>) : null;
     return (
         <main>

From 76311f97a23b4cee8848649c5fd84eb1a010dc11 Mon Sep 17 00:00:00 2001
From: Shamira <marshallscm@gmail.com>
Date: Thu, 27 Jun 2019 20:31:34 -0700
Subject: [PATCH 23/38] movie styling and nav bar

---
 package-lock.json              | 273 +++++++++++++++++++++++++++++++++
 package.json                   |   2 +
 src/App.css                    |  39 +++++
 src/App.js                     |  25 +--
 src/components/CustomerList.js |   2 +-
 src/components/Library.js      |  17 +-
 src/components/Selected.css    |   4 +-
 src/index.js                   |   2 +-
 8 files changed, 344 insertions(+), 20 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5706799d0..f3d003bdc 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.2",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.2.tgz",
+      "integrity": "sha512-gZF+r35a5R3sHhtoQi6YhtG2fRzwVuassZ+GvrlieHG531ocF2oJvwe0/gYtAd8bDr30MlET3ctFyJ/r6gJZfw=="
+    },
     "@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",
@@ -10421,6 +10636,27 @@
         }
       }
     },
+    "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",
@@ -12008,11 +12244,21 @@
       "resolved": "https://registry.npmjs.org/typeco/-/typeco-1.0.0.tgz",
       "integrity": "sha512-3mWzemIyiY5jL/fmW2sZp1vv7ifQ5ONjF6fT/4RMHJw3/1oabumpxvYZ9D+z01a5wRFSRPPXZkQjM4WIUzY+GA=="
     },
+    "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",
@@ -12034,6 +12280,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",
@@ -12404,6 +12669,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 158e175c2..640e54645 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..580ec3c9a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -26,3 +26,42 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+.movie_container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ 
+  grid-column-gap: 10px;
+  grid-row-gap: 10px;
+  margin: 2em;
+  
+}
+
+#title {
+  font-size: 1em;
+  font-weight: bold;
+  border: 1px, solid;
+}
+
+.movie_card {
+  padding-top: .5em;
+  height: auto;
+  width: 18em;
+  border: 1px solid;
+  border-radius: 5px;
+}
+
+ul {
+  list-style-type: none; 
+  
+}
+
+.most_btns{
+  border: solid lightseagreen;
+  border-radius: 5px;
+
+}
+
+#selected_objects {
+  text-align: right;
+}
diff --git a/src/App.js b/src/App.js
index ece3c364f..b4554fe7b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -40,23 +40,26 @@ selectedCustomerObject = (customer) => {
 
       <Router>
         <div>
-          <nav>
-            <ul>
+          <nav className="navbar navbar-expand-lg navbar-light bg-light">
+            <ul className="navbar-nav">
               <li>
-                <Link to="/">Home</Link>
+                <Link className="navbar-brand" to="/">Home</Link>
               </li>
-              <li>
-                <Link to="/search">Search Page</Link>
+              <li className="nav-item">
+                <Link className="nav-link" to="/search">Search Page</Link>
               </li>
-              <li>
-                <Link to="/customers">Customer List</Link>
+              <li className="nav-item">
+                <Link className="nav-link" to="/customers">Customer List</Link>
               </li>
               <li>
-                <Link to="/library">Library</Link>
+                <Link className="nav-link" to="/library">Library</Link>
               </li>
+            
             </ul>
           </nav>
-
+          <div> <Selected  showMovie={this.state.selectedMovie}
+                showCustomer={this.state.selectedCustomer} />
+          </div>
           <Route path="/search" component={SearchTMDB}/>
           <Route path="/customers"
           render={(props) =>
@@ -75,9 +78,7 @@ selectedCustomerObject = (customer) => {
         </div>
       </Router>
       <div>
-        <Selected showMovie={this.state.selectedMovie}
-        showCustomer={this.state.selectedCustomer}
-         />
+      
       </div>
       </section>
     );
diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js
index 775c445ff..de7ca43e7 100644
--- a/src/components/CustomerList.js
+++ b/src/components/CustomerList.js
@@ -55,7 +55,7 @@ class CustomerList extends Component {
        const renderedCustomers = this.state.customers.map((customer, i) => {
            return (
            <div key={i}>
-            <p>{customer.name} <button onClick={()=>this.handleCustomerSelection(customer)}>Select</button> </p>
+            <p>{customer.name} <button className="most_btns" onClick={()=>this.handleCustomerSelection(customer)}>Select</button> </p>
            </div>
             )
        })
diff --git a/src/components/Library.js b/src/components/Library.js
index c90e130bf..d5780f074 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -45,7 +45,6 @@ class Library extends Component {
         this.props.selectedMovieCallback(
             movie.title
         );
-        console.log(movie.title)
     }
 
     // make a callback function for selectedHandler
@@ -54,20 +53,30 @@ class Library extends Component {
     render() {
        const eachMovie = this.state.movies.map((movie, i) => {
            return (
-           <div key={i}>
-            {movie.title} <button onClick={()=>this.handleMovieSelection(movie)}> Select Movie </button>
+           <div className="movie_card" key={i}>
+            <ul>
+            <img src={movie.image_url} alt="movie image" className="movie_IMG" />
+            
+                <li id="title" className="movie_info">{movie.title} </li> 
+                <li>Released: {movie.release_date}</li>
+                
+                {/* <li className="movie_info">About:{movie.overview}</li> */}
+            
+                <button className="most_btns" onClick={()=>this.handleMovieSelection(movie)}> Select Movie </button>
+            </ul>
            </div>
             )
 
        })
 
-
         const errors = this.state.error;
 
         return (
             <section>
                 <h1>All Movies</h1>
+            <div className="movie_container"> 
                 {eachMovie}
+            </div>
             </section>
         )
     }
diff --git a/src/components/Selected.css b/src/components/Selected.css
index 2fb990cb8..d1682a8a1 100644
--- a/src/components/Selected.css
+++ b/src/components/Selected.css
@@ -1,5 +1,5 @@
-.SelectedObjectsWrapper {
+/* .SelectedObjectsWrapper {
   border: 2px solid;
   background-color: lightpink;
   opacity: 0.5;
-}
\ No newline at end of file
+} */
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index fae3e3500..4c0f4dce0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,6 +3,6 @@ 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 2551b5472f9344c22e4b43fd05a7953b5003b457 Mon Sep 17 00:00:00 2001
From: Shamira <marshallscm@gmail.com>
Date: Thu, 27 Jun 2019 21:29:46 -0700
Subject: [PATCH 24/38] Movie search page styling

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

diff --git a/src/App.css b/src/App.css
index 580ec3c9a..e340b75e2 100644
--- a/src/App.css
+++ b/src/App.css
@@ -62,6 +62,26 @@ ul {
 
 }
 
-#selected_objects {
-  text-align: right;
+#selected_objects_card {
+  display: grid;
+  grid-column-end: -1;
+  align-items: right;
+  padding-top: .5em;
+  height: auto;
+  width: 18em;
+  border: 1px solid;
+  border-radius: 5px;
+}
+
+.movie_search {
+  padding-top: .5em;
+  height: auto;
+  width: 35em;
+  border: 1px solid;
+  border-radius: 5px;
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 5em;
+
 }
diff --git a/src/App.js b/src/App.js
index b4554fe7b..be9d40268 100644
--- a/src/App.js
+++ b/src/App.js
@@ -57,7 +57,7 @@ selectedCustomerObject = (customer) => {
             
             </ul>
           </nav>
-          <div> <Selected  showMovie={this.state.selectedMovie}
+          <div id="selected_objects_card"> <Selected showMovie={this.state.selectedMovie}
                 showCustomer={this.state.selectedCustomer} />
           </div>
           <Route path="/search" component={SearchTMDB}/>
diff --git a/src/components/SearchTMDB.js b/src/components/SearchTMDB.js
index 5c97c7304..f53d1a409 100644
--- a/src/components/SearchTMDB.js
+++ b/src/components/SearchTMDB.js
@@ -101,7 +101,7 @@ class SearchTMDB extends Component {
         const successSection = (this.state.apiSuccess) ? (<section>{this.state.apiSuccess} </section>) : null;
        const errorSection = (this.state.apiError) ? (<section> Error: {this.state.apiError}</section>) : null;
     return (
-        <main>
+        <main className="movie_search">
             <h2>Movie Search Page</h2>
             <p>To find a movie by title, type the movie title in the search bar</p>
             <label>
@@ -111,7 +111,7 @@ class SearchTMDB extends Component {
                 onChange={this.onSearchChange}>
                 </input>
             </label>
-            <input type="submit" name="submit" value="Search" onClick={this.onSearchButtonHandler} />
+            <input className="most_btns"type="submit" name="submit" value="Search" onClick={this.onSearchButtonHandler} />
             {errorSection}
             {successSection}
             {eachMovie}

From 7804bc46de92e9f2c0722f3a212a383823e905b6 Mon Sep 17 00:00:00 2001
From: Shamira <marshallscm@gmail.com>
Date: Thu, 27 Jun 2019 21:32:11 -0700
Subject: [PATCH 25/38] Selected objects functionality

---
 src/App.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/App.css b/src/App.css
index e340b75e2..98657b873 100644
--- a/src/App.css
+++ b/src/App.css
@@ -71,6 +71,8 @@ ul {
   width: 18em;
   border: 1px solid;
   border-radius: 5px;
+  margin-left: auto;
+  margin-right: 10px;
 }
 
 .movie_search {

From a03432fb610914f4d498840582aa1a27f5271527 Mon Sep 17 00:00:00 2001
From: Mello-Cello <celloelle@gmail.com>
Date: Thu, 27 Jun 2019 21:41:03 -0700
Subject: [PATCH 26/38] Figured out post request body syntax to make a new
 rental. Began implementation of function to check out the selected movie to
 the selected customer. Getting an error - cannot read property
 'handleSubmitRental' of undefined. Need to troubleshoot. Need to look more
 closely at what props are coming in from App to Selected, think the customer
 name is being passed and we need the id to send the post request. Side note -
 check props for selected movie and customer callback functions.

---
 src/components/CustomerList.js |  2 +-
 src/components/Selected.js     | 50 ++++++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js
index 775c445ff..ab99ef9ae 100644
--- a/src/components/CustomerList.js
+++ b/src/components/CustomerList.js
@@ -21,7 +21,7 @@ class CustomerList extends Component {
         const customersURL = 'http://localhost:3001/customers';
         axios.get(customersURL)
             .then((response) => {
-                console.log(response.data);
+                // console.log(response.data);
                 const customers = response.data.map((custInfo) => {
                   // const { name, registered_at, address, city, state, postal_code, phone, account_credit } = custInfo;
                     return {
diff --git a/src/components/Selected.js b/src/components/Selected.js
index 71d0175df..824c4d9b7 100644
--- a/src/components/Selected.js
+++ b/src/components/Selected.js
@@ -7,12 +7,62 @@ import './Selected.css';
 function Selected(props) {
    const displaySelection = props.showMovie;
    const displayCustomer = props.showCustomer;
+console.log('props in return in selected are ', props)
+
+const handleSubmitRental = (customer, movie) => {
+   const rentalDataToSendToApi ={
+      "title": movie,
+      "customer_id": 1,
+      "due_date": "2019-07-16" // CHANGE THIS TO TODAY + 3 DAYS
+    }
+
+   this.axios.post('http://localhost:3001/rentals/' + displaySelection.title + '/check-out', rentalDataToSendToApi)
+   .then((response) => {
+     console.log(response)
+     if (response.data.movie) {
+       // ***** CHECK ALL OF THIS AGAINST THE ACTUAL API RESPONSE!!! ****
+       const successMessage =
+       `Succesfully checked out movie ${response.data.movie_id} to cutomer ${response.data.customer_id}`
+       this.setState({
+           apiSuccess: successMessage
+       })
+     } else {
+       const successMessage = response.data.errors
+       this.setState({
+           apiSuccess: successMessage
+       })
+     }
+
+
+     const resetSelected = () => {
+       // WRITE A CALLBACK FUNCTION TO SET STATE IN APP
+       // PASS IN THROUGH PROPS
+       // displaySelection: '',
+       // displayCustomer: ''
+     }
+
+  })
+  .catch((error) => {
+    // console.log("in catch *******");
+
+      this.setState({
+
+          apiError: error.message
+      })
+  });
+}
+
+// TypeError: Cannot read property 'handleSubmitRental' of undefined
     // if (props.showSelection) {
     return (
+
       <section>
         <div className='SelectedObjectsWrapper'>
             <h3>Customer: {displayCustomer}</h3>
             <h3>Current Movie: {displaySelection}</h3>
+            <button onClick={()=>this.handleSubmitRental(this.props.showCustomer, this.props.showMovie)}>
+              check out
+            </button>
             </div>
       </section>
     )

From dfa19027941d524ab9cad9357df1baf7c81e1c76 Mon Sep 17 00:00:00 2001
From: Mello-Cello <celloelle@gmail.com>
Date: Thu, 27 Jun 2019 21:56:20 -0700
Subject: [PATCH 27/38] One more comment.

---
 src/components/Selected.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/Selected.js b/src/components/Selected.js
index 824c4d9b7..83c1cfe7a 100644
--- a/src/components/Selected.js
+++ b/src/components/Selected.js
@@ -9,6 +9,8 @@ function Selected(props) {
    const displayCustomer = props.showCustomer;
 console.log('props in return in selected are ', props)
 
+
+// ********* FIX THIS *******************************************
 const handleSubmitRental = (customer, movie) => {
    const rentalDataToSendToApi ={
       "title": movie,
@@ -53,6 +55,8 @@ const handleSubmitRental = (customer, movie) => {
 }
 
 // TypeError: Cannot read property 'handleSubmitRental' of undefined
+// *****************************************************************
+
     // if (props.showSelection) {
     return (
 

From 2ab1ec200ce677b991b7b9d0a2b951d50d6474c0 Mon Sep 17 00:00:00 2001
From: Shamira <marshallscm@gmail.com>
Date: Fri, 28 Jun 2019 08:11:17 -0700
Subject: [PATCH 28/38] Added logic for Selection view

---
 src/App.js                  | 10 +++++++---
 src/components/Selected.css | 17 ++++++++++++-----
 src/components/Selected.js  | 12 ++++++------
 3 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/src/App.js b/src/App.js
index be9d40268..1a5c68907 100644
--- a/src/App.js
+++ b/src/App.js
@@ -16,6 +16,7 @@ class App extends Component {
         selectedMovie: '',
         selectedCustomer: '',
         message: '',
+  
     }
 }
 //selectId function that sets state for the movie ID
@@ -46,18 +47,21 @@ selectedCustomerObject = (customer) => {
                 <Link className="navbar-brand" to="/">Home</Link>
               </li>
               <li className="nav-item">
-                <Link className="nav-link" to="/search">Search Page</Link>
+                <Link className="nav-link" to="/search">Search</Link>
               </li>
               <li className="nav-item">
                 <Link className="nav-link" to="/customers">Customer List</Link>
               </li>
               <li>
-                <Link className="nav-link" to="/library">Library</Link>
+                <Link className="nav-link" to="/library">Movies</Link>
               </li>
             
             </ul>
           </nav>
-          <div id="selected_objects_card"> <Selected showMovie={this.state.selectedMovie}
+        
+          <div > 
+          
+          <Selected showMovie={this.state.selectedMovie}
                 showCustomer={this.state.selectedCustomer} />
           </div>
           <Route path="/search" component={SearchTMDB}/>
diff --git a/src/components/Selected.css b/src/components/Selected.css
index d1682a8a1..fa85d4e63 100644
--- a/src/components/Selected.css
+++ b/src/components/Selected.css
@@ -1,5 +1,12 @@
-/* .SelectedObjectsWrapper {
-  border: 2px solid;
-  background-color: lightpink;
-  opacity: 0.5;
-} */
\ No newline at end of file
+#selected_objects_card {
+  display: grid;
+  grid-column-end: -1;
+  align-items: right;
+  padding-top: .5em;
+  height: auto;
+  width: 18em;
+  border: 1px solid;
+  border-radius: 5px;
+  margin-left: auto;
+  margin-right: 10px;
+}
\ No newline at end of file
diff --git a/src/components/Selected.js b/src/components/Selected.js
index 71d0175df..08c182e31 100644
--- a/src/components/Selected.js
+++ b/src/components/Selected.js
@@ -7,18 +7,18 @@ import './Selected.css';
 function Selected(props) {
    const displaySelection = props.showMovie;
    const displayCustomer = props.showCustomer;
-    // if (props.showSelection) {
+    if (displaySelection != '' || displayCustomer != ''){
     return (
       <section>
-        <div className='SelectedObjectsWrapper'>
+        <div id="selected_objects_card">
             <h3>Customer: {displayCustomer}</h3>
             <h3>Current Movie: {displaySelection}</h3>
             </div>
       </section>
-    )
-// } else {
-//     return null
-// }
+    );
+} else {
+    return null
+}
 }
 
 export default Selected;

From 55afbde0cb9e98315e42f5fc25e5066847dd92ea Mon Sep 17 00:00:00 2001
From: Shamira <marshallscm@gmail.com>
Date: Fri, 28 Jun 2019 10:27:35 -0700
Subject: [PATCH 29/38] Display vids for search component

---
 src/App.css                    | 32 ++++++++++++++++++++++++++++++++
 src/App.js                     |  2 +-
 src/components/CustomerList.js | 14 +++++++++++---
 src/components/Library.js      |  7 +------
 src/components/SearchTMDB.js   |  8 ++++----
 5 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/src/App.css b/src/App.css
index 98657b873..87dbee72c 100644
--- a/src/App.css
+++ b/src/App.css
@@ -36,7 +36,11 @@
   margin: 2em;
   
 }
+h1{
+  margin-left: auto;
+  margin-right: auto;
 
+}
 #title {
   font-size: 1em;
   font-weight: bold;
@@ -51,6 +55,23 @@
   border-radius: 5px;
 }
 
+.customer_container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
+ 
+  grid-column-gap: 10px;
+  grid-row-gap: 10px;
+  margin: 2em;
+  
+}
+
+.customer_card {
+  padding-top: .5em;
+  height: auto;
+  width: 15em;
+  border: 1px solid;
+  border-radius: 5px;
+}
 ul {
   list-style-type: none; 
   
@@ -85,5 +106,16 @@ ul {
   margin-left: auto;
   margin-right: auto;
   margin-top: 5em;
+}
 
+.movie_search_card {
+  padding-top: .5em;
+  padding-bottom: 1em;
+  height: auto;
+  width: 18em;
+  border: 1px solid;
+  border-radius: 5px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 2em;
 }
diff --git a/src/App.js b/src/App.js
index 1a5c68907..4ccae4810 100644
--- a/src/App.js
+++ b/src/App.js
@@ -59,7 +59,7 @@ selectedCustomerObject = (customer) => {
             </ul>
           </nav>
         
-          <div > 
+          <div  > 
           
           <Selected showMovie={this.state.selectedMovie}
                 showCustomer={this.state.selectedCustomer} />
diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js
index de7ca43e7..1b0c0e547 100644
--- a/src/components/CustomerList.js
+++ b/src/components/CustomerList.js
@@ -54,16 +54,24 @@ class CustomerList extends Component {
     render() {
        const renderedCustomers = this.state.customers.map((customer, i) => {
            return (
-           <div key={i}>
-            <p>{customer.name} <button className="most_btns" onClick={()=>this.handleCustomerSelection(customer)}>Select</button> </p>
+        
+           <div className="customer_card"key={i}>
+               <ul>
+               <li id="title" className="movie_info"> {customer.name} </li>
+            <li>{customer.address}</li>
+            <button className="most_btns" onClick={()=>this.handleCustomerSelection(customer)}>Select</button> 
+            </ul>
            </div>
+           
             )
        })
-        // const errors = this.state.error;
 
         return (
             <section>
+                <h1>Customers </h1>
+            <div className="customer_container">
                 {renderedCustomers}
+            </div>
             </section>
         )
     }
diff --git a/src/components/Library.js b/src/components/Library.js
index d5780f074..cac3d7185 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -58,10 +58,7 @@ class Library extends Component {
             <img src={movie.image_url} alt="movie image" className="movie_IMG" />
             
                 <li id="title" className="movie_info">{movie.title} </li> 
-                <li>Released: {movie.release_date}</li>
-                
-                {/* <li className="movie_info">About:{movie.overview}</li> */}
-            
+                <li>Released: {movie.release_date}</li>           
                 <button className="most_btns" onClick={()=>this.handleMovieSelection(movie)}> Select Movie </button>
             </ul>
            </div>
@@ -81,7 +78,5 @@ class Library extends Component {
         )
     }
 
-
-
 }
 export default Library;
diff --git a/src/components/SearchTMDB.js b/src/components/SearchTMDB.js
index f53d1a409..22cffa379 100644
--- a/src/components/SearchTMDB.js
+++ b/src/components/SearchTMDB.js
@@ -88,13 +88,13 @@ class SearchTMDB extends Component {
         const eachMovie = this.state.searchResults.map((movie, i) => {
             return (
                 <div key={i}>
-                    <article key={i}>
-                        <p >{movie.title}</p>
+                    <section className="movie_search_card" key={i}>
+                        <img src={movie.image_url} alt="movie image" className="movie_IMG" />
                         <button
                         onClick={() => {this.onAddtoRentalButtonHandler(movie)}}>
-                            Add To Rental Library
+                            Add: {movie.title}
                         </button>
-                    </article>
+                    </section>
                 </div>
             )
         })

From 59a5b0add0f16d8e6991361259759030f18171a9 Mon Sep 17 00:00:00 2001
From: Shamira <marshallscm@gmail.com>
Date: Fri, 28 Jun 2019 11:29:44 -0700
Subject: [PATCH 30/38] Added BlockBusted logo

---
 package-lock.json       | 737 +++++++++++++++++++++++++++++++++++++++-
 package.json            |   1 +
 src/App.css             |   6 +
 src/App.js              |   6 +-
 src/components/Home.css |   5 +
 src/components/Home.js  |  16 +
 6 files changed, 766 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Home.css
 create mode 100644 src/components/Home.js

diff --git a/package-lock.json b/package-lock.json
index f3d003bdc..da074fff6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1619,6 +1619,11 @@
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.0.tgz",
       "integrity": "sha512-sY5AXXVZv4Y1VACTtR11UJCPHHudgY5i26Qj5TypE6DKlIApbwb5uqhXcJ5UUGbvZNRh7EeIoW+LrJumBsKp7w=="
     },
+    "abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
+    },
     "accepts": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
@@ -1688,6 +1693,11 @@
       "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz",
       "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM="
     },
+    "amdefine": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
+      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
+    },
     "ansi-colors": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
@@ -1730,6 +1740,15 @@
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
       "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw=="
     },
+    "are-we-there-yet": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
+      "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
+      "requires": {
+        "delegates": "^1.0.0",
+        "readable-stream": "^2.0.6"
+      }
+    },
     "argparse": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
@@ -1772,6 +1791,11 @@
       "resolved": "https://registry.npmjs.org/array-filter/-/array-filter-0.0.1.tgz",
       "integrity": "sha1-fajPLiZijtcygDWB/SH2fKzS7uw="
     },
+    "array-find-index": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
+      "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E="
+    },
     "array-flatten": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
@@ -1896,6 +1920,11 @@
       "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz",
       "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ=="
     },
+    "async-foreach": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
+      "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI="
+    },
     "async-limiter": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.0.tgz",
@@ -2391,6 +2420,14 @@
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
       "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw=="
     },
+    "block-stream": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
+      "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=",
+      "requires": {
+        "inherits": "~2.0.0"
+      }
+    },
     "bluebird": {
       "version": "3.5.5",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.5.tgz",
@@ -2722,6 +2759,22 @@
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
       "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
     },
+    "camelcase-keys": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
+      "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
+      "requires": {
+        "camelcase": "^2.0.0",
+        "map-obj": "^1.0.0"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
+          "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8="
+        }
+      }
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -3616,6 +3669,11 @@
         "date-now": "^0.1.4"
       }
     },
+    "console-control-strings": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
+    },
     "constants-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
@@ -4032,6 +4090,14 @@
         "cssom": "0.3.x"
       }
     },
+    "currently-unhandled": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
+      "integrity": "sha1-mI3zP+qxke95mmE2nddsF635V+o=",
+      "requires": {
+        "array-find-index": "^1.0.1"
+      }
+    },
     "cyclist": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-0.2.2.tgz",
@@ -4203,6 +4269,11 @@
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
     },
+    "delegates": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o="
+    },
     "depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -5588,6 +5659,17 @@
       "integrity": "sha512-vfmKZp3XPM36DNF0qhW+Cdxk7xm7gTEHY1clv1Xq1arwRQuKZgAhw+NZNWbJBtuaNxzNXwhfdPYRrvIbjfS33A==",
       "optional": true
     },
+    "fstream": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
+      "integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==",
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "inherits": "~2.0.0",
+        "mkdirp": ">=0.5 0",
+        "rimraf": "2"
+      }
+    },
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -5598,6 +5680,62 @@
       "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc="
     },
+    "gauge": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
+      "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
+      "requires": {
+        "aproba": "^1.0.3",
+        "console-control-strings": "^1.0.0",
+        "has-unicode": "^2.0.0",
+        "object-assign": "^4.1.0",
+        "signal-exit": "^3.0.0",
+        "string-width": "^1.0.1",
+        "strip-ansi": "^3.0.1",
+        "wide-align": "^1.1.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
+        },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "requires": {
+            "number-is-nan": "^1.0.0"
+          }
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "requires": {
+            "code-point-at": "^1.0.0",
+            "is-fullwidth-code-point": "^1.0.0",
+            "strip-ansi": "^3.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        }
+      }
+    },
+    "gaze": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz",
+      "integrity": "sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==",
+      "requires": {
+        "globule": "^1.0.0"
+      }
+    },
     "get-caller-file": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
@@ -5608,6 +5746,11 @@
       "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.0.tgz",
       "integrity": "sha512-CIJYJC4GGF06TakLg8z4GQKvDsx9EMspVxOYih7LerEL/WosUnFIww45CGfxfeKHqlg3twgUrYRT1O3WQqjGCg=="
     },
+    "get-stdin": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
+      "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4="
+    },
     "get-stream": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
@@ -5722,6 +5865,16 @@
         }
       }
     },
+    "globule": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.1.tgz",
+      "integrity": "sha512-g7QtgWF4uYSL5/dn71WxubOrS7JVGCnFPEnoeChJmBnyR9Mw8nGoEwOgJL/RC2Te0WhbsEUCejfH8SZNJ+adYQ==",
+      "requires": {
+        "glob": "~7.1.1",
+        "lodash": "~4.17.10",
+        "minimatch": "~3.0.2"
+      }
+    },
     "graceful-fs": {
       "version": "4.1.15",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz",
@@ -5821,6 +5974,11 @@
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.0.tgz",
       "integrity": "sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q="
     },
+    "has-unicode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk="
+    },
     "has-value": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
@@ -6191,6 +6349,19 @@
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
     },
+    "in-publish": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz",
+      "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E="
+    },
+    "indent-string": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
+      "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=",
+      "requires": {
+        "repeating": "^2.0.0"
+      }
+    },
     "indexes-of": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
@@ -6389,6 +6560,14 @@
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
     },
+    "is-finite": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz",
+      "integrity": "sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=",
+      "requires": {
+        "number-is-nan": "^1.0.0"
+      }
+    },
     "is-fullwidth-code-point": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
@@ -6508,6 +6687,11 @@
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
       "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
     },
+    "is-utf8": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
+      "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI="
+    },
     "is-windows": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
@@ -7713,6 +7897,11 @@
         }
       }
     },
+    "js-base64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
+      "integrity": "sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw=="
+    },
     "js-levenshtein": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
@@ -8092,6 +8281,15 @@
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
     },
+    "loud-rejection": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz",
+      "integrity": "sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=",
+      "requires": {
+        "currently-unhandled": "^0.4.1",
+        "signal-exit": "^3.0.0"
+      }
+    },
     "lower-case": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
@@ -8152,6 +8350,11 @@
       "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
       "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8="
     },
+    "map-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
+      "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0="
+    },
     "map-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
@@ -8206,6 +8409,104 @@
         "readable-stream": "^2.0.1"
       }
     },
+    "meow": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
+      "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
+      "requires": {
+        "camelcase-keys": "^2.0.0",
+        "decamelize": "^1.1.2",
+        "loud-rejection": "^1.0.0",
+        "map-obj": "^1.0.1",
+        "minimist": "^1.1.3",
+        "normalize-package-data": "^2.3.4",
+        "object-assign": "^4.0.1",
+        "read-pkg-up": "^1.0.1",
+        "redent": "^1.0.0",
+        "trim-newlines": "^1.0.0"
+      },
+      "dependencies": {
+        "find-up": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
+          "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
+          "requires": {
+            "path-exists": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "load-json-file": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+          "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "parse-json": "^2.2.0",
+            "pify": "^2.0.0",
+            "pinkie-promise": "^2.0.0",
+            "strip-bom": "^2.0.0"
+          }
+        },
+        "parse-json": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
+          "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
+          "requires": {
+            "error-ex": "^1.2.0"
+          }
+        },
+        "path-exists": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
+          "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
+          "requires": {
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "path-type": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
+          "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "pify": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
+        },
+        "read-pkg": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
+          "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
+          "requires": {
+            "load-json-file": "^1.0.0",
+            "normalize-package-data": "^2.3.2",
+            "path-type": "^1.0.0"
+          }
+        },
+        "read-pkg-up": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
+          "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
+          "requires": {
+            "find-up": "^1.0.0",
+            "read-pkg": "^1.0.0"
+          }
+        },
+        "strip-bom": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
+          "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
+          "requires": {
+            "is-utf8": "^0.2.0"
+          }
+        }
+      }
+    },
     "merge-deep": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/merge-deep/-/merge-deep-3.0.2.tgz",
@@ -8453,8 +8754,7 @@
     "nan": {
       "version": "2.14.0",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz",
-      "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==",
-      "optional": true
+      "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg=="
     },
     "nanomatch": {
       "version": "1.2.13",
@@ -8523,6 +8823,32 @@
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz",
       "integrity": "sha512-MmbQJ2MTESTjt3Gi/3yG1wGpIMhUfcIypUCGtTizFR9IiccFwxSpfp0vtIZlkFclEqERemxfnSdZEMR9VqqEFQ=="
     },
+    "node-gyp": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.8.0.tgz",
+      "integrity": "sha512-3g8lYefrRRzvGeSowdJKAKyks8oUpLEd/DyPV4eMhVlhJ0aNaZqIrNUIPuEWWTAoPqyFkfGrM67MC69baqn6vA==",
+      "requires": {
+        "fstream": "^1.0.0",
+        "glob": "^7.0.3",
+        "graceful-fs": "^4.1.2",
+        "mkdirp": "^0.5.0",
+        "nopt": "2 || 3",
+        "npmlog": "0 || 1 || 2 || 3 || 4",
+        "osenv": "0",
+        "request": "^2.87.0",
+        "rimraf": "2",
+        "semver": "~5.3.0",
+        "tar": "^2.0.0",
+        "which": "1"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+          "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8="
+        }
+      }
+    },
     "node-int64": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
@@ -8604,6 +8930,98 @@
         }
       }
     },
+    "node-sass": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.12.0.tgz",
+      "integrity": "sha512-A1Iv4oN+Iel6EPv77/HddXErL2a+gZ4uBeZUy+a8O35CFYTXhgA8MgLCWBtwpGZdCvTvQ9d+bQxX/QC36GDPpQ==",
+      "requires": {
+        "async-foreach": "^0.1.3",
+        "chalk": "^1.1.1",
+        "cross-spawn": "^3.0.0",
+        "gaze": "^1.0.0",
+        "get-stdin": "^4.0.1",
+        "glob": "^7.0.3",
+        "in-publish": "^2.0.0",
+        "lodash": "^4.17.11",
+        "meow": "^3.7.0",
+        "mkdirp": "^0.5.1",
+        "nan": "^2.13.2",
+        "node-gyp": "^3.8.0",
+        "npmlog": "^4.0.0",
+        "request": "^2.88.0",
+        "sass-graph": "^2.2.4",
+        "stdout-stream": "^1.4.0",
+        "true-case-path": "^1.0.2"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
+        },
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "cross-spawn": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz",
+          "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=",
+          "requires": {
+            "lru-cache": "^4.0.1",
+            "which": "^1.2.9"
+          }
+        },
+        "lru-cache": {
+          "version": "4.1.5",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+          "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+          "requires": {
+            "pseudomap": "^1.0.2",
+            "yallist": "^2.1.2"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+        },
+        "yallist": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+          "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+        }
+      }
+    },
+    "nopt": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
+      "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
+      "requires": {
+        "abbrev": "1"
+      }
+    },
     "normalize-package-data": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
@@ -8648,6 +9066,17 @@
         "path-key": "^2.0.0"
       }
     },
+    "npmlog": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
+      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
+      "requires": {
+        "are-we-there-yet": "~1.1.2",
+        "console-control-strings": "~1.1.0",
+        "gauge": "~2.7.3",
+        "set-blocking": "~2.0.0"
+      }
+    },
     "nth-check": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
@@ -8867,6 +9296,11 @@
       "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
       "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc="
     },
+    "os-homedir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M="
+    },
     "os-locale": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz",
@@ -8882,6 +9316,15 @@
       "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
       "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
     },
+    "osenv": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+      "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
+      "requires": {
+        "os-homedir": "^1.0.0",
+        "os-tmpdir": "^1.0.0"
+      }
+    },
     "p-defer": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
@@ -10158,6 +10601,11 @@
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
       "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY="
     },
+    "pseudomap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
+      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
+    },
     "psl": {
       "version": "1.1.32",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.1.32.tgz",
@@ -10716,6 +11164,15 @@
         "minimatch": "3.0.4"
       }
     },
+    "redent": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
+      "integrity": "sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=",
+      "requires": {
+        "indent-string": "^2.1.0",
+        "strip-indent": "^1.0.1"
+      }
+    },
     "regenerate": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
@@ -10871,6 +11328,14 @@
       "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
       "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc="
     },
+    "repeating": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz",
+      "integrity": "sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=",
+      "requires": {
+        "is-finite": "^1.0.0"
+      }
+    },
     "replace-ext": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.0.tgz",
@@ -11092,6 +11557,208 @@
         "walker": "~1.0.5"
       }
     },
+    "sass-graph": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz",
+      "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=",
+      "requires": {
+        "glob": "^7.0.0",
+        "lodash": "^4.0.0",
+        "scss-tokenizer": "^0.2.3",
+        "yargs": "^7.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
+        },
+        "camelcase": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
+          "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo="
+        },
+        "cliui": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
+          "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
+          "requires": {
+            "string-width": "^1.0.1",
+            "strip-ansi": "^3.0.1",
+            "wrap-ansi": "^2.0.0"
+          }
+        },
+        "find-up": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
+          "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
+          "requires": {
+            "path-exists": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "invert-kv": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
+          "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY="
+        },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "requires": {
+            "number-is-nan": "^1.0.0"
+          }
+        },
+        "lcid": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
+          "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=",
+          "requires": {
+            "invert-kv": "^1.0.0"
+          }
+        },
+        "load-json-file": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+          "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "parse-json": "^2.2.0",
+            "pify": "^2.0.0",
+            "pinkie-promise": "^2.0.0",
+            "strip-bom": "^2.0.0"
+          }
+        },
+        "os-locale": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
+          "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
+          "requires": {
+            "lcid": "^1.0.0"
+          }
+        },
+        "parse-json": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
+          "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
+          "requires": {
+            "error-ex": "^1.2.0"
+          }
+        },
+        "path-exists": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
+          "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
+          "requires": {
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "path-type": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
+          "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "pify": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
+        },
+        "read-pkg": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
+          "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
+          "requires": {
+            "load-json-file": "^1.0.0",
+            "normalize-package-data": "^2.3.2",
+            "path-type": "^1.0.0"
+          }
+        },
+        "read-pkg-up": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
+          "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
+          "requires": {
+            "find-up": "^1.0.0",
+            "read-pkg": "^1.0.0"
+          }
+        },
+        "require-main-filename": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
+          "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE="
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "requires": {
+            "code-point-at": "^1.0.0",
+            "is-fullwidth-code-point": "^1.0.0",
+            "strip-ansi": "^3.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        },
+        "strip-bom": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
+          "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
+          "requires": {
+            "is-utf8": "^0.2.0"
+          }
+        },
+        "which-module": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/which-module/-/which-module-1.0.0.tgz",
+          "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8="
+        },
+        "y18n": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
+          "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE="
+        },
+        "yargs": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz",
+          "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=",
+          "requires": {
+            "camelcase": "^3.0.0",
+            "cliui": "^3.2.0",
+            "decamelize": "^1.1.1",
+            "get-caller-file": "^1.0.1",
+            "os-locale": "^1.4.0",
+            "read-pkg-up": "^1.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^1.0.1",
+            "set-blocking": "^2.0.0",
+            "string-width": "^1.0.2",
+            "which-module": "^1.0.0",
+            "y18n": "^3.2.1",
+            "yargs-parser": "^5.0.0"
+          }
+        },
+        "yargs-parser": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz",
+          "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=",
+          "requires": {
+            "camelcase": "^3.0.0"
+          }
+        }
+      }
+    },
     "sass-loader": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-7.1.0.tgz",
@@ -11185,6 +11852,25 @@
         "ajv-keywords": "^3.1.0"
       }
     },
+    "scss-tokenizer": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
+      "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=",
+      "requires": {
+        "js-base64": "^2.1.8",
+        "source-map": "^0.4.2"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.4.4",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+          "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
+          "requires": {
+            "amdefine": ">=0.0.4"
+          }
+        }
+      }
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -11787,6 +12473,14 @@
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
       "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
     },
+    "stdout-stream": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.1.tgz",
+      "integrity": "sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA==",
+      "requires": {
+        "readable-stream": "^2.0.1"
+      }
+    },
     "stealthy-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz",
@@ -11890,6 +12584,14 @@
       "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
       "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8="
     },
+    "strip-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz",
+      "integrity": "sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=",
+      "requires": {
+        "get-stdin": "^4.0.1"
+      }
+    },
     "strip-json-comments": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
@@ -12001,6 +12703,16 @@
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
       "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA=="
     },
+    "tar": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz",
+      "integrity": "sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==",
+      "requires": {
+        "block-stream": "*",
+        "fstream": "^1.0.12",
+        "inherits": "2"
+      }
+    },
     "terser": {
       "version": "3.17.0",
       "resolved": "https://registry.npmjs.org/terser/-/terser-3.17.0.tgz",
@@ -12176,6 +12888,11 @@
         "punycode": "^2.1.0"
       }
     },
+    "trim-newlines": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
+      "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM="
+    },
     "trim-right": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz",
@@ -12186,6 +12903,14 @@
       "resolved": "https://registry.npmjs.org/trough/-/trough-1.0.4.tgz",
       "integrity": "sha512-tdzBRDGWcI1OpPVmChbdSKhvSVurznZ8X36AYURAcl+0o2ldlCY2XPzyXNNxwJwwyIU+rIglTCG4kxtNKBQH7Q=="
     },
+    "true-case-path": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.3.tgz",
+      "integrity": "sha512-m6s2OdQe5wgpFMC+pAJ+q9djG82O2jcHPOI6RNg1yy9rCYR+WD6Nbpl32fDpfC56nirdRy+opFa/Vk7HYhqaew==",
+      "requires": {
+        "glob": "^7.1.2"
+      }
+    },
     "ts-pnp": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.1.2.tgz",
@@ -12948,6 +13673,14 @@
       "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
       "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
     },
+    "wide-align": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
+      "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
+      "requires": {
+        "string-width": "^1.0.2 || 2"
+      }
+    },
     "wordwrap": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
diff --git a/package.json b/package.json
index 640e54645..8e367a6af 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "axios": "^0.19.0",
     "bootstrap": "^4.3.1",
+    "node-sass": "^4.12.0",
     "react": "^16.8.6",
     "react-bootstrap": "^1.0.0-beta.9",
     "react-dom": "^16.8.6",
diff --git a/src/App.css b/src/App.css
index 87dbee72c..24f735e14 100644
--- a/src/App.css
+++ b/src/App.css
@@ -119,3 +119,9 @@ ul {
   margin-right: auto;
   margin-bottom: 2em;
 }
+
+.img_styling {
+	margin-left: auto;
+	margin-right: auto;
+}
+
diff --git a/src/App.js b/src/App.js
index 4ccae4810..f05aa6f6a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,6 +5,7 @@ import CustomerList from './components/CustomerList';
 import Library from './components/Library';
 import Selected from './components/Selected';
 import SearchTMDB from './components/SearchTMDB';
+import Home from './components/Home';
 import {BrowserRouter as Router, Route, Link} from "react-router-dom";
 
 class App extends Component {
@@ -64,6 +65,7 @@ selectedCustomerObject = (customer) => {
           <Selected showMovie={this.state.selectedMovie}
                 showCustomer={this.state.selectedCustomer} />
           </div>
+          <Route path="/home" component={Home}/>
           <Route path="/search" component={SearchTMDB}/>
           <Route path="/customers"
           render={(props) =>
@@ -81,9 +83,7 @@ selectedCustomerObject = (customer) => {
           />
         </div>
       </Router>
-      <div>
-      
-      </div>
+     
       </section>
     );
   }
diff --git a/src/components/Home.css b/src/components/Home.css
new file mode 100644
index 000000000..37852632c
--- /dev/null
+++ b/src/components/Home.css
@@ -0,0 +1,5 @@
+.img_styling {
+	margin-left: auto;
+	margin-right: auto;
+	width: 90%;
+}
\ No newline at end of file
diff --git a/src/components/Home.js b/src/components/Home.js
new file mode 100644
index 000000000..dd0ce6450
--- /dev/null
+++ b/src/components/Home.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import axios from 'axios';
+import './Home.css';
+
+
+function Home(props) {
+
+  return (
+    <div>
+      <img className="img_styling" src="https://www.bids4bonds.com/.a/6a00e553f9e0118834013485f121fd970c-pi" alt="BlockBusted image from bids for bonds dot com"/>
+   
+   </div>
+  )
+}
+
+export default Home;

From 0fcbc89de76696e8d972419f93fe75aae0248e47 Mon Sep 17 00:00:00 2001
From: Shamira <marshallscm@gmail.com>
Date: Fri, 28 Jun 2019 11:57:14 -0700
Subject: [PATCH 31/38] changes

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

diff --git a/src/App.css b/src/App.css
index 24f735e14..43a9bde4f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -85,15 +85,16 @@ ul {
 
 #selected_objects_card {
   display: grid;
-  grid-column-end: -1;
   align-items: right;
-  padding-top: .5em;
-  height: auto;
-  width: 18em;
+  width: max-content;
   border: 1px solid;
   border-radius: 5px;
   margin-left: auto;
-  margin-right: 10px;
+  background-color: lightseagreen;
+}
+
+.selected_objects_container {
+  position: fixed;
 }
 
 .movie_search {
diff --git a/src/components/Selected.css b/src/components/Selected.css
index fa85d4e63..84087179c 100644
--- a/src/components/Selected.css
+++ b/src/components/Selected.css
@@ -1,12 +1,13 @@
-#selected_objects_card {
+/* #selected_objects_card {
   display: grid;
-  grid-column-end: -1;
+ 
   align-items: right;
-  padding-top: .5em;
+ 
+  width: max-content;
   height: auto;
-  width: 18em;
-  border: 1px solid;
+  border: .5px solid;
   border-radius: 5px;
   margin-left: auto;
   margin-right: 10px;
-}
\ No newline at end of file
+  
+} */
\ No newline at end of file
diff --git a/src/components/Selected.js b/src/components/Selected.js
index 08c182e31..87057236c 100644
--- a/src/components/Selected.js
+++ b/src/components/Selected.js
@@ -10,7 +10,7 @@ function Selected(props) {
     if (displaySelection != '' || displayCustomer != ''){
     return (
       <section>
-        <div id="selected_objects_card">
+        <div className="selected_objects_container" id="selected_objects_card">
             <h3>Customer: {displayCustomer}</h3>
             <h3>Current Movie: {displaySelection}</h3>
             </div>

From b49b1d6791cd42f1686cb514e1bcece9f351f628 Mon Sep 17 00:00:00 2001
From: Mello-Cello <celloelle@gmail.com>
Date: Fri, 28 Jun 2019 11:58:12 -0700
Subject: [PATCH 32/38] Fixed post request for saving a movie rental.

---
 src/App.js                     | 18 ++++----
 src/components/CustomerList.js | 10 +++--
 src/components/Selected.js     | 75 ++++++++++++++++++----------------
 3 files changed, 56 insertions(+), 47 deletions(-)

diff --git a/src/App.js b/src/App.js
index ece3c364f..40f4e52b2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,6 +15,7 @@ class App extends Component {
     this.state = {
         selectedMovie: '',
         selectedCustomer: '',
+        selectedCustomerId: null,
         message: '',
     }
 }
@@ -26,10 +27,11 @@ selectedMovieObject = (movie) => {
   })
 
 }
-selectedCustomerObject = (customer) => {
+selectedCustomerObject = (customer, id) => {
   //this.setState updates the state and re-renders
   this.setState({
     selectedCustomer: customer,
+    selectedCustomerId: id
   })
 
 }
@@ -60,7 +62,8 @@ selectedCustomerObject = (customer) => {
           <Route path="/search" component={SearchTMDB}/>
           <Route path="/customers"
           render={(props) =>
-            <CustomerList selectedCustomerCallback={this.selectedCustomerObject}
+            <CustomerList
+            selectedCustomerCallback={this.selectedCustomerObject}
             isAuthed={true}
             />
           }
@@ -74,11 +77,12 @@ selectedCustomerObject = (customer) => {
           />
         </div>
       </Router>
-      <div>
-        <Selected showMovie={this.state.selectedMovie}
-        showCustomer={this.state.selectedCustomer}
-         />
-      </div>
+        <div>
+          <Selected showMovie={this.state.selectedMovie}
+          showCustomer={this.state.selectedCustomer}
+          showCustomerId={this.state.selectedCustomerId}
+           />
+        </div>
       </section>
     );
   }
diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js
index ab99ef9ae..9672fb881 100644
--- a/src/components/CustomerList.js
+++ b/src/components/CustomerList.js
@@ -8,8 +8,8 @@ class CustomerList extends Component {
     //pass in props?
     //make a variable movies = props to pull movies array from App
     //set another variable 'allmovies' and loop through map and return
-    constructor() {
-        super();
+    constructor(props) {
+        super(props);
 
         this.state = {
             customers: [],
@@ -25,6 +25,7 @@ class CustomerList extends Component {
                 const customers = response.data.map((custInfo) => {
                   // const { name, registered_at, address, city, state, postal_code, phone, account_credit } = custInfo;
                     return {
+                      id: custInfo.id,
                       name: custInfo.name,// string
                       registered_at: custInfo.registered_at, // Date
                       address: custInfo.address, // string
@@ -46,10 +47,11 @@ class CustomerList extends Component {
     }
         handleCustomerSelection = customer => {
             // const pickedMovie = this.state.movies.id
+            console.log('in handle customer selection:', customer);
             this.props.selectedCustomerCallback(
-                customer.name
+                customer.name,
+                customer.id
             );
-            console.log(customer.name)
         }
     render() {
        const renderedCustomers = this.state.customers.map((customer, i) => {
diff --git a/src/components/Selected.js b/src/components/Selected.js
index 83c1cfe7a..b8dcd1f04 100644
--- a/src/components/Selected.js
+++ b/src/components/Selected.js
@@ -3,55 +3,58 @@ import React from 'react';
 // import CustomerList from './CustomerList';
 // import Library from './Library';
 import './Selected.css';
+import axios from 'axios';
 
 function Selected(props) {
    const displaySelection = props.showMovie;
    const displayCustomer = props.showCustomer;
+   const displayCustomerId = props.showCustomerId;
 console.log('props in return in selected are ', props)
 
 
 // ********* FIX THIS *******************************************
 const handleSubmitRental = (customer, movie) => {
+  const todayDate = new Date();
    const rentalDataToSendToApi ={
       "title": movie,
-      "customer_id": 1,
+      "customer_id": customer,
       "due_date": "2019-07-16" // CHANGE THIS TO TODAY + 3 DAYS
     }
 
-   this.axios.post('http://localhost:3001/rentals/' + displaySelection.title + '/check-out', rentalDataToSendToApi)
-   .then((response) => {
-     console.log(response)
-     if (response.data.movie) {
-       // ***** CHECK ALL OF THIS AGAINST THE ACTUAL API RESPONSE!!! ****
-       const successMessage =
-       `Succesfully checked out movie ${response.data.movie_id} to cutomer ${response.data.customer_id}`
-       this.setState({
-           apiSuccess: successMessage
-       })
-     } else {
-       const successMessage = response.data.errors
-       this.setState({
-           apiSuccess: successMessage
-       })
-     }
-
-
-     const resetSelected = () => {
-       // WRITE A CALLBACK FUNCTION TO SET STATE IN APP
-       // PASS IN THROUGH PROPS
-       // displaySelection: '',
-       // displayCustomer: ''
-     }
-
-  })
-  .catch((error) => {
-    // console.log("in catch *******");
-
-      this.setState({
-
-          apiError: error.message
-      })
-  });
+   axios.post('http://localhost:3001/rentals/' + displaySelection + '/check-out', rentalDataToSendToApi)
+  //  .then((response) => {
+  //    console.log(response)
+  //    if (response.data.movie) {
+  //      // ***** CHECK ALL OF THIS AGAINST THE ACTUAL API RESPONSE!!! ****
+  //      const successMessage =
+  //      `Succesfully checked out movie ${response.data.movie_id} to cutomer ${response.data.customer_id}`
+  //      this.setState({
+  //          apiSuccess: successMessage
+  //      })
+  //    } else {
+  //      const successMessage = response.data.errors
+  //      this.setState({
+  //          apiSuccess: successMessage
+  //      })
+  //    }
+  //
+  //
+  //    const resetSelected = () => {
+  //      // WRITE A CALLBACK FUNCTION TO SET STATE IN APP
+  //      // PASS IN THROUGH PROPS
+  //      // displaySelection: '',
+  //      // displayCustomer: ''
+  //    }
+  //
+  // })
+  // .catch((error) => {
+  //   // console.log("in catch *******");
+  //
+  //     this.setState({
+  //
+  //         apiError: error.message
+  //     })
+  // });
 }
 
 // TypeError: Cannot read property 'handleSubmitRental' of undefined
@@ -64,7 +67,7 @@ const handleSubmitRental = (customer, movie) => {
         <div className='SelectedObjectsWrapper'>
             <h3>Customer: {displayCustomer}</h3>
             <h3>Current Movie: {displaySelection}</h3>
-            <button onClick={()=>this.handleSubmitRental(this.props.showCustomer, this.props.showMovie)}>
+            <button onClick={()=>handleSubmitRental(displayCustomerId, displaySelection)}>
               check out
             </button>
             </div>

From 79567e2fb67fa959cb909d07941ecd1483a3a11a Mon Sep 17 00:00:00 2001
From: Mello-Cello <celloelle@gmail.com>
Date: Fri, 28 Jun 2019 13:43:57 -0700
Subject: [PATCH 33/38] Added class name for button styling.

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

diff --git a/src/components/Selected.js b/src/components/Selected.js
index ec63cb1a4..c82c671f0 100644
--- a/src/components/Selected.js
+++ b/src/components/Selected.js
@@ -68,7 +68,7 @@ const handleSubmitRental = (customer, movie) => {
         <div className="selected_objects_container" id="selected_objects_card">
             <h3>Customer: {displayCustomer}</h3>
             <h3>Current Movie: {displaySelection}</h3>
-            <button onClick={()=>handleSubmitRental(displayCustomerId, displaySelection)}>
+            <button className="most_btns" onClick={()=>handleSubmitRental(displayCustomerId, displaySelection)}>
               check out
             </button>
             </div>

From 4be01af8f8c9b8167ab2fb9d342491bd7023d2ee Mon Sep 17 00:00:00 2001
From: Mello-Cello <celloelle@gmail.com>
Date: Fri, 28 Jun 2019 14:13:00 -0700
Subject: [PATCH 34/38] Finished merge. Fixed bug with customer id not getting
 passed to POST request. All is working as expected.

---
 src/App.js                 |  5 +++--
 src/components/Selected.js | 23 +++++++++++++----------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/App.js b/src/App.js
index 3337a83fd..c96d1107f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -38,7 +38,7 @@ selectedCustomerObject = (customer, id) => {
 
 }
   render() {
-    console.log(this.state)
+    console.log(`in App ${this.state.selectedCustomerId}`)
     return (
       <section>
 
@@ -65,7 +65,8 @@ selectedCustomerObject = (customer, id) => {
           <div  >
 
           <Selected showMovie={this.state.selectedMovie}
-                showCustomer={this.state.selectedCustomer} />
+                showCustomer={this.state.selectedCustomer}
+                showCustomerId={this.state.selectedCustomerId}/>
           </div>
           <Route path="/home" component={Home}/>
           <Route path="/search" component={SearchTMDB}/>
diff --git a/src/components/Selected.js b/src/components/Selected.js
index c82c671f0..0014490a9 100644
--- a/src/components/Selected.js
+++ b/src/components/Selected.js
@@ -14,7 +14,8 @@ console.log('props in return in selected are ', props)
 
 // ********* FIX THIS *******************************************
 const handleSubmitRental = (customer, movie) => {
-  const todayDate = new Date();
+  // const todayDate = new Date();
+  console.log(customer)
    const rentalDataToSendToApi ={
       "title": movie,
       "customer_id": customer,
@@ -22,15 +23,15 @@ const handleSubmitRental = (customer, movie) => {
     }
 
    axios.post('http://localhost:3001/rentals/' + displaySelection + '/check-out', rentalDataToSendToApi)
-  //  .then((response) => {
-  //    console.log(response)
-  //    if (response.data.movie) {
-  //      // ***** CHECK ALL OF THIS AGAINST THE ACTUAL API RESPONSE!!! ****
-  //      const successMessage =
-  //      `Succesfully checked out movie ${response.data.movie_id} to cutomer ${response.data.customer_id}`
-  //      this.setState({
-  //          apiSuccess: successMessage
-  //      })
+   .then((response) => {
+     console.log(response)
+     // if (response.data) {
+     //   // ***** CHECK ALL OF THIS AGAINST THE ACTUAL API RESPONSE!!! ****
+     //   const successMessage =
+     //   `Succesfully checked out movie ${response.data.movie_id} to cutomer ${response.data.customer_id}`
+     //   this.setState({
+     //       apiSuccess: successMessage
+     //   })
   //    } else {
   //      const successMessage = response.data.errors
   //      this.setState({
@@ -55,6 +56,8 @@ const handleSubmitRental = (customer, movie) => {
   //         apiError: error.message
   //     })
   // });
+})
+
 }
 
 // TypeError: Cannot read property 'handleSubmitRental' of undefined

From 68452ae66fe2075f1c91a97f5201b72d828aaa5b Mon Sep 17 00:00:00 2001
From: Ngoc Le <ngocle@outlook.com>
Date: Fri, 28 Jun 2019 14:18:10 -0700
Subject: [PATCH 35/38] debugged

---
 src/components/CustomerList.js | 2 +-
 src/components/SearchTMDB.js   | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js
index 775c445ff..3ada2b84f 100644
--- a/src/components/CustomerList.js
+++ b/src/components/CustomerList.js
@@ -49,7 +49,7 @@ class CustomerList extends Component {
             this.props.selectedCustomerCallback(
                 customer.name
             );
-            console.log(customer.name)
+            console.log(customer)
         }
     render() {
        const renderedCustomers = this.state.customers.map((customer, i) => {
diff --git a/src/components/SearchTMDB.js b/src/components/SearchTMDB.js
index 5c97c7304..09cfde36a 100644
--- a/src/components/SearchTMDB.js
+++ b/src/components/SearchTMDB.js
@@ -85,6 +85,7 @@ class SearchTMDB extends Component {
    }
 
    render() {
+        let today = new Date ()
         const eachMovie = this.state.searchResults.map((movie, i) => {
             return (
                 <div key={i}>

From a254bdb711f3f0f76d07f4518505f031cf8a3259 Mon Sep 17 00:00:00 2001
From: Ngoc Le <ngocle@outlook.com>
Date: Fri, 28 Jun 2019 16:45:16 -0700
Subject: [PATCH 36/38] added logic to slice image url for movie post request
 to internal API from search Result

---
 src/components/SearchTMDB.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/SearchTMDB.js b/src/components/SearchTMDB.js
index 126833e20..ca1e1c87e 100644
--- a/src/components/SearchTMDB.js
+++ b/src/components/SearchTMDB.js
@@ -46,13 +46,14 @@ class SearchTMDB extends Component {
    }
 
    onAddtoRentalButtonHandler = (movie) => {
-       // console.log(movie)
+    const slashIndex = movie.image_url.lastIndexOf('/')
+    const imageUrl = movie.image_url.slice(slashIndex, movie.image_url.length)
     const movieDataToSendToApi ={
             "movie": {
               "title": movie.title,
               "overview": movie.overview,
               "release_date": movie.release_date,
-              "image_url": movie.image_url,
+              "image_url": imageUrl,
               "external_id": movie.external_id,
               "inventory": 1
             }

From f87a99735f560fc9381ddce5d0bed7ad23bf8d79 Mon Sep 17 00:00:00 2001
From: Mello-Cello <celloelle@gmail.com>
Date: Fri, 28 Jun 2019 21:36:36 -0700
Subject: [PATCH 37/38] Fixed link to home button. Cleaned up lots of comments
 and console logs.

---
 src/App.js                     |  7 ++-----
 src/components/CustomerList.js | 17 +++++-----------
 src/components/Home.js         |  7 ++++---
 src/components/Library.js      | 20 ++++++-------------
 src/components/SearchTMDB.js   |  8 +++-----
 src/components/Selected.js     | 36 ++++++++++++++--------------------
 6 files changed, 35 insertions(+), 60 deletions(-)

diff --git a/src/App.js b/src/App.js
index c96d1107f..f6c6b604c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -21,16 +21,14 @@ class App extends Component {
 
     }
 }
-//selectId function that sets state for the movie ID
+
 selectedMovieObject = (movie) => {
-  //this.setState updates the state and re-renders
   this.setState({
     selectedMovie: movie,
   })
 
 }
 selectedCustomerObject = (customer, id) => {
-  //this.setState updates the state and re-renders
   this.setState({
     selectedCustomer: customer,
     selectedCustomerId: id
@@ -38,7 +36,6 @@ selectedCustomerObject = (customer, id) => {
 
 }
   render() {
-    console.log(`in App ${this.state.selectedCustomerId}`)
     return (
       <section>
 
@@ -47,7 +44,7 @@ selectedCustomerObject = (customer, id) => {
           <nav className="navbar navbar-expand-lg navbar-light bg-light">
             <ul className="navbar-nav">
               <li>
-                <Link className="navbar-brand" to="/">Home</Link>
+                <Link className="navbar-brand" to="/home">Home</Link>
               </li>
               <li className="nav-item">
                 <Link className="nav-link" to="/search">Search</Link>
diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js
index 9c5d95609..366e339ae 100644
--- a/src/components/CustomerList.js
+++ b/src/components/CustomerList.js
@@ -2,12 +2,8 @@
 import React, { Component } from 'react';
 // import PropTypes from 'prop-types';
 import axios from 'axios';
-// import { createDecipher } from 'crypto'; // do we need this?
 
 class CustomerList extends Component {
-    //pass in props?
-    //make a variable movies = props to pull movies array from App
-    //set another variable 'allmovies' and loop through map and return
     constructor(props) {
         super(props);
 
@@ -21,9 +17,8 @@ class CustomerList extends Component {
         const customersURL = 'http://localhost:3001/customers';
         axios.get(customersURL)
             .then((response) => {
-                // console.log(response.data);
                 const customers = response.data.map((custInfo) => {
-                  // const { name, registered_at, address, city, state, postal_code, phone, account_credit } = custInfo;
+                  // const { id, name, registered_at, address, city, state, postal_code, phone, account_credit } = custInfo;
                     return {
                       id: custInfo.id,
                       name: custInfo.name,// string
@@ -34,11 +29,10 @@ class CustomerList extends Component {
                       postal_code: custInfo.postal_code, // string
                       phone: custInfo.phone, // string
                       account_credit: custInfo.account_credit, // number
-                      // external_id: custInfo.external_id, // customers don't have an external id as a field;
                     }
                 })
                 this.setState({
-                    customers: customers, // only need "customers," since they match?
+                    customers
                 });
             })
             .catch((error) => {
@@ -46,7 +40,6 @@ class CustomerList extends Component {
             });
     }
         handleCustomerSelection = customer => {
-            // const pickedMovie = this.state.movies.id
             console.log('in handle customer selection:', customer);
             this.props.selectedCustomerCallback(
                 customer.name,
@@ -57,15 +50,15 @@ class CustomerList extends Component {
     render() {
        const renderedCustomers = this.state.customers.map((customer, i) => {
            return (
-        
+
            <div className="customer_card"key={i}>
                <ul>
                <li id="title" className="movie_info"> {customer.name} </li>
             <li>{customer.address}</li>
-            <button className="most_btns" onClick={()=>this.handleCustomerSelection(customer)}>Select</button> 
+            <button className="most_btns" onClick={()=>this.handleCustomerSelection(customer)}>Select</button>
             </ul>
            </div>
-           
+
             )
        })
 
diff --git a/src/components/Home.js b/src/components/Home.js
index dd0ce6450..c3faa564e 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import axios from 'axios';
 import './Home.css';
 
 
@@ -7,8 +6,10 @@ function Home(props) {
 
   return (
     <div>
-      <img className="img_styling" src="https://www.bids4bonds.com/.a/6a00e553f9e0118834013485f121fd970c-pi" alt="BlockBusted image from bids for bonds dot com"/>
-   
+      <img className="img_styling"
+      src="https://www.bids4bonds.com/.a/6a00e553f9e0118834013485f121fd970c-pi"
+      alt="BlockBusted logo from bids for bonds dot com"/>
+
    </div>
   )
 }
diff --git a/src/components/Library.js b/src/components/Library.js
index cac3d7185..157c95a69 100644
--- a/src/components/Library.js
+++ b/src/components/Library.js
@@ -1,13 +1,8 @@
 import React, {Component} from 'react';
 // import PropTypes from 'prop-types';
 import axios from 'axios';
-// import { createDecipher } from 'crypto';
 
 class Library extends Component {
-    //change Library to functional component
-    //pass in props
-    //make a variable movies = props to pull movies array from App
-    //set another variable 'allmovies' and loop through map and return
     constructor() {
         super();
 
@@ -41,24 +36,21 @@ class Library extends Component {
     }
 
     handleMovieSelection = movie => {
-        // const pickedMovie = this.state.movies.id
         this.props.selectedMovieCallback(
             movie.title
         );
     }
 
-    // make a callback function for selectedHandler
-    // selectedHandlerCallback=selectedHandler
 
     render() {
        const eachMovie = this.state.movies.map((movie, i) => {
            return (
            <div className="movie_card" key={i}>
             <ul>
-            <img src={movie.image_url} alt="movie image" className="movie_IMG" />
-            
-                <li id="title" className="movie_info">{movie.title} </li> 
-                <li>Released: {movie.release_date}</li>           
+            <img src={movie.image_url} alt="movie poster" className="movie_IMG" />
+
+                <li id="title" className="movie_info">{movie.title} </li>
+                <li>Released: {movie.release_date}</li>
                 <button className="most_btns" onClick={()=>this.handleMovieSelection(movie)}> Select Movie </button>
             </ul>
            </div>
@@ -66,12 +58,12 @@ class Library extends Component {
 
        })
 
-        const errors = this.state.error;
+        // const errors = this.state.error;
 
         return (
             <section>
                 <h1>All Movies</h1>
-            <div className="movie_container"> 
+            <div className="movie_container">
                 {eachMovie}
             </div>
             </section>
diff --git a/src/components/SearchTMDB.js b/src/components/SearchTMDB.js
index ca1e1c87e..69a479476 100644
--- a/src/components/SearchTMDB.js
+++ b/src/components/SearchTMDB.js
@@ -76,10 +76,7 @@ class SearchTMDB extends Component {
 
    })
    .catch((error) => {
-     // console.log("in catch *******");
-
        this.setState({
-
            apiError: error.message
        })
    });
@@ -91,7 +88,7 @@ class SearchTMDB extends Component {
             return (
                 <div key={i}>
                     <section className="movie_search_card" key={i}>
-                        <img src={movie.image_url} alt="movie image" className="movie_IMG" />
+                        <img src={movie.image_url} alt="movie poster" className="movie_IMG" />
                         <button
                         onClick={() => {this.onAddtoRentalButtonHandler(movie)}}>
                             Add: {movie.title}
@@ -113,7 +110,8 @@ class SearchTMDB extends Component {
                 onChange={this.onSearchChange}>
                 </input>
             </label>
-            <input className="most_btns"type="submit" name="submit" value="Search" onClick={this.onSearchButtonHandler} />
+            <input className="most_btns"type="submit" name="submit" value="Search"
+              onClick={this.onSearchButtonHandler} />
             {errorSection}
             {successSection}
             {eachMovie}
diff --git a/src/components/Selected.js b/src/components/Selected.js
index 0014490a9..49644d31c 100644
--- a/src/components/Selected.js
+++ b/src/components/Selected.js
@@ -9,7 +9,6 @@ function Selected(props) {
    const displaySelection = props.showMovie;
    const displayCustomer = props.showCustomer;
    const displayCustomerId = props.showCustomerId;
-console.log('props in return in selected are ', props)
 
 
 // ********* FIX THIS *******************************************
@@ -19,7 +18,7 @@ const handleSubmitRental = (customer, movie) => {
    const rentalDataToSendToApi ={
       "title": movie,
       "customer_id": customer,
-      "due_date": "2019-07-16" // CHANGE THIS TO TODAY + 3 DAYS
+      "due_date": "2019-07-16" // CHANGE THIS TO TODAY + 7 DAYS
     }
 
    axios.post('http://localhost:3001/rentals/' + displaySelection + '/check-out', rentalDataToSendToApi)
@@ -39,7 +38,6 @@ const handleSubmitRental = (customer, movie) => {
   //      })
   //    }
   //
-  //
   //    const resetSelected = () => {
   //      // WRITE A CALLBACK FUNCTION TO SET STATE IN APP
   //      // PASS IN THROUGH PROPS
@@ -56,27 +54,23 @@ const handleSubmitRental = (customer, movie) => {
   //         apiError: error.message
   //     })
   // });
-})
-
-}
+    })
 
-// TypeError: Cannot read property 'handleSubmitRental' of undefined
-// *****************************************************************
+  }
 
-    // if (props.showSelection) {
-    if (displaySelection != '' || displayCustomer != ''){
-    return (
+  if (displaySelection !== '' || displayCustomer !== ''){
+  return (
 
-      <section>
-        <div className="selected_objects_container" id="selected_objects_card">
-            <h3>Customer: {displayCustomer}</h3>
-            <h3>Current Movie: {displaySelection}</h3>
-            <button className="most_btns" onClick={()=>handleSubmitRental(displayCustomerId, displaySelection)}>
-              check out
-            </button>
-            </div>
-      </section>
-    );
+    <section>
+      <div className="selected_objects_container" id="selected_objects_card">
+          <h3>Customer: {displayCustomer}</h3>
+          <h3>Current Movie: {displaySelection}</h3>
+          <button className="most_btns" onClick={()=>handleSubmitRental(displayCustomerId, displaySelection)}>
+            check out
+          </button>
+          </div>
+    </section>
+  );
 } else {
     return null
 }

From 8e4ce032035f1c1965a6c01e040b2a5af958ec7e Mon Sep 17 00:00:00 2001
From: Mello-Cello <celloelle@gmail.com>
Date: Sat, 29 Jun 2019 13:44:43 -0700
Subject: [PATCH 38/38] Removed hard-coded due date and implemented a one-week
 rental period.

---
 src/components/Home.js       |  2 +-
 src/components/SearchTMDB.js |  1 -
 src/components/Selected.js   | 10 ++++++----
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/Home.js b/src/components/Home.js
index c3faa564e..60c75e257 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -2,7 +2,7 @@ import React from 'react';
 import './Home.css';
 
 
-function Home(props) {
+function Home() {
 
   return (
     <div>
diff --git a/src/components/SearchTMDB.js b/src/components/SearchTMDB.js
index 69a479476..f1160a48b 100644
--- a/src/components/SearchTMDB.js
+++ b/src/components/SearchTMDB.js
@@ -83,7 +83,6 @@ class SearchTMDB extends Component {
    }
 
    render() {
-        let today = new Date ()
         const eachMovie = this.state.searchResults.map((movie, i) => {
             return (
                 <div key={i}>
diff --git a/src/components/Selected.js b/src/components/Selected.js
index 49644d31c..4f982f83e 100644
--- a/src/components/Selected.js
+++ b/src/components/Selected.js
@@ -11,19 +11,21 @@ function Selected(props) {
    const displayCustomerId = props.showCustomerId;
 
 
-// ********* FIX THIS *******************************************
 const handleSubmitRental = (customer, movie) => {
-  // const todayDate = new Date();
-  console.log(customer)
+  const dueDate = new Date();
+  dueDate.setDate(dueDate.getDate()+7);
+
+  console.log(' due date is ', dueDate)
    const rentalDataToSendToApi ={
       "title": movie,
       "customer_id": customer,
-      "due_date": "2019-07-16" // CHANGE THIS TO TODAY + 7 DAYS
+      "due_date": dueDate
     }
 
    axios.post('http://localhost:3001/rentals/' + displaySelection + '/check-out', rentalDataToSendToApi)
    .then((response) => {
      console.log(response)
+// ********* FIX THIS *******************************************
      // if (response.data) {
      //   // ***** CHECK ALL OF THIS AGAINST THE ACTUAL API RESPONSE!!! ****
      //   const successMessage =