Becca and Kate P

package.json

@@ -3,14 +3,31 @@
   "version": "0.1.1",
   "private": true,
   "dependencies": {
+    "axios": "^0.19.2",
+    "bootstrap": "^4.5.0",
     "react": "^16.13.1",
+    "react-bootstrap": "^1.0.1",
     "react-dom": "^16.13.1",
+    "react-notifications-component": "^2.4.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "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"
+    ]
   }
 }

src/App.css

@@ -2,27 +2,176 @@
   text-align: center;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+header {
+  position: relative;
+  background-color: black;
+  height: 75vh;
+  min-height: 25rem;
+  width: 100%;
+  overflow: hidden;
 }
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
+header video {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  min-width: 100%;
+  min-height: 100%;
+  width: auto;
+  height: auto;
+  z-index: 0;
+  -ms-transform: translateX(-50%) translateY(-50%);
+  -moz-transform: translateX(-50%) translateY(-50%);
+  -webkit-transform: translateX(-50%) translateY(-50%);
+  transform: translateX(-50%) translateY(-50%);
+}
+
+header .container {
+  position: relative;
+  z-index: 2;
+}
+
+header .overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background-color: black;
+  opacity: 0.5;
+  z-index: 1;
+}
+
+@media (pointer: coarse) and (hover: none) {
+  header {
+    background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
+  }
+  header video {
+    display: none;
+  }
+}
+
+.nav-style {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  min-height: 18vh;
+  background:	black;
+  color: white;
+}
+
+.navbar-brand {
+  color: white;
+}
+
+.nav-ul {
+  width: 60%;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  list-style: none;
+}
+
+.nav-links {  
+  list-style: none;
+  color: white;
+}
+
+.nav-links:hover {  
+  text-decoration: none;
+  color:#94e1e0;
+  font-size: 1.2em;
+}
+
+/* CURRENT CUSTOMER AND MOVIE IN CONTEXT */
+.selected-context {
+  color: #94e1e0;
+}
+
+.rental-buttons-container {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+/* FOOTER STYLES */
+
+.footer{
+  background: black;
+  color:white;
+  max-height: 200px;
+}
+
+/* SEARCH and LIBRARY STYLES */
+
+.search-input {
+  margin: auto;
+  margin-top: 10px;
+  margin-bottom: 20px;
+  min-width: 275px;
+}
+
+.pizazz-btn {
+  display: block;
+  margin: 0px auto;
+  margin-bottom: 20px;
+  height: 40px;
+  text-align: center;
+  color: rgba(255,255,255,0.9);
+  border-radius: 20px;
+  background: linear-gradient(-45deg, #FFA63D, #FF3D77, #338AFF, #3CF0C5);
+  background-size: 250%;
+}
+
+.pizazz-btn:hover {
+  box-shadow: 5px 5px #C0C0C0;
+  border: 0.5px solid black;
+}
+
+.add-btn {
+  display: block;
+  margin: 0px auto;
+  margin-bottom: 25px;
+  height: 40px;
+  width: 130px;
+  text-align: center;
+  color: black;
+  border-radius: 5px;
+  text-shadow: 0 1px 0 rgba(0,0,0,0.15);
+  background: linear-gradient(-45deg,#94e1a0, #94e1b0, #94e1c0, #94e1d0);
+  background-size: 200%;
+}
+
+.add-btn:hover {
   color: white;
+  font-size:1.1em;
+  box-shadow: 5px 5px #C0C0C0;
 }
 
-.App-title {
-  font-size: 1.5em;
+.movie-cards-container {
+  margin: 0px auto;
+  margin-bottom: 25px;
+  display: flex;
+  max-width: 80%;
+  justify-content: space-between;
+  flex-wrap: wrap;
 }
 
-.App-intro {
-  font-size: large;
+.movie-img {
+  max-width: 110%;
+  border: 5px solid black;
+  border-radius: 5px;
+  padding: 10px;
+  box-shadow: 5px 10px #C0C0C0;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.card-style {
+  width: 18rem;
+  align-items: center;
+  margin-bottom: 10px;
 }
+
+.card-title {
+  margin: 12px;
+}

src/App.js

@@ -1,21 +1,49 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
+import React, { useState } from 'react';
 import './App.css';
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route
+} from "react-router-dom";
+import Nav from './components/Nav.js'
+import Home from './components/Home.js'
+import Customers from './components/Customers.js'
+import Library from './components/Library.js'
+import Search from './components/Search.js'
+import Rentals from './components/Rentals.js'
+import ReactNotification from 'react-notifications-component';
+import 'react-notifications-component/dist/theme.css';
 
-class App extends Component {
-  render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-      </div>
-    );
-  }
+// so we can consume the context anywhere:
+export const SessionContext = React.createContext();
+
+const App = () => {
+
+  const [selectedCustomer, setSelectedCustomer] = useState(undefined);
+  const [selectedMovie, setSelectedMovie] = useState(undefined);
+
+  return (
+    <SessionContext.Provider value={{
+      selectedCustomer,
+      selectedMovie,
+      setSelectedCustomer,
+      setSelectedMovie
+    }}>
+      <Router>
+        <div className="App">
+          <ReactNotification />
+          <Nav />
+          <Switch>
+            <Route path='/' exact component={Home} />
+            <Route path='/library' component={Library} />
+            <Route path='/search' component={Search} />
+            <Route path='/customers' component={Customers} />
+            <Route path='/rentals' component={Rentals} />
+          </Switch>
+        </div>
+      </Router>
+    </SessionContext.Provider>
+  );
 }
 
 export default App;

src/components/Customers.js

@@ -0,0 +1,58 @@
+import React, { useState, useEffect, useContext } from 'react';
+import axios from 'axios';
+import {SessionContext} from "../App"
+
+const Customers = () => {
+
+  const [customers, setCustomers] = useState([]);
+  const sessionContext = useContext(SessionContext)
+
+  useEffect(() => {
+    axios.get('http://localhost:4000/customers')
+      .then((response) => {
+        setCustomers(response.data);
+      })
+      .catch(()=> {
+        alert("Failed to fectch customers");
+      })
+  }, [])
+
+  return (
+    <div className="App">
+      <table className="table">
+        <thead className="thead-light">
+          <tr>
+            <th>ID</th>
+            <th>Name</th>
+            <th>Movies checked out</th>
+            <th>Select a Customer</th>
+          </tr>
+        </thead>
+        <tbody>
+          {customers.map((customer) => {
+            return (
+              <tr>
+                <td>
+                  {customer.id}
+                </td>
+                <td>
+                  {customer.name}
+                </td>
+                <td>
+                  {customer.movies_checked_out_count}
+                </td>
+                <td>
+                <button onClick={()=> sessionContext.setSelectedCustomer(customer)} className="add-btn">Select</button>
+                </td>
+              </tr>
+            )
+          }
+          )}
+
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default Customers;

src/components/Home.js

@@ -0,0 +1,40 @@
+import React from 'react';
+// import './App.css';
+
+const Home = () => {
+  return (
+    <div className="App">
+
+      {/* HEADER */}
+      <header>
+        <div class="overlay"></div>
+        <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
+          <source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4" />
+        </video>
+        <div class="container h-100">
+          <div class="d-flex h-100 text-center align-items-center">
+            <div class="w-100 text-white">
+              <h1 class="display-3">Get the Popcorn Ready</h1>
+              <p class="lead mb-0">At KB Videos, it's always movie time.</p>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* FOOTER */}
+      <div class="mt-5 pt-5 pb-5 footer">
+        <div class="container">
+          <div class="row mt-5">
+            <div class="col copyright">
+              <h6><i>a Time and Space production</i></h6>
+              <p>Directed by Kate && Becca</p>
+              <p><small>© 2020. All Rights Reserved.</small></p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Home;