Time - Sharon & Emily

.gitignore

@@ -19,3 +19,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+node_modules

package.json

@@ -2,15 +2,37 @@
   "name": "video-store-consumer",
   "version": "0.1.1",
   "private": true,
+  "proxy": "http://localhost:3000",
   "dependencies": {
+    "axios": "^0.19.2",
+    "bootstrap": "^4.4.1",
+    "prop-types": "^15.7.2",
     "react": "^16.13.1",
+    "react-bootstrap": "^1.0.1",
     "react-dom": "^16.13.1",
+    "react-player": "^2.3.1",
+    "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"
+    ]
+  },
+  "devDependencies": {
+    "case-sensitive-paths-webpack-plugin": "^2.3.0"
   }
 }

src/App.css

@@ -26,3 +26,45 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+/* Add a black background color to the top navigation */
+.topnav {
+  background-color: #333;
+  overflow: hidden;
+}
+
+/* Style the links inside the navigation bar */
+.topnav a {
+  float: left;
+  color: #f2f2f2;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+  font-size: 17px;
+}
+
+/* Change the color of links on hover */
+.topnav a:hover {
+  background-color: #ddd;
+  color: black;
+}
+
+/* Add a color to the active/current link */
+.topnav a.active {
+  background-color: #4CAF50;
+  color: white;
+}
+.text_box {
+  display: inline-block;
+  text-align: center;
+  vertical-align: middle;
+  padding: .375rem .75rem;
+  color: #007bff;
+  border: #007bff 1px solid;
+  min-width: 10rem;
+  min-height: 2.5rem;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.font-pg-button {
+  margin: 5px;
+}

src/App.js

@@ -1,21 +1,157 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
+import React, { useState, useEffect } from 'react';
 import './App.css';
+import PropTypes from 'prop-types';
+import axios from 'axios';
 
-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.
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link
+} from "react-router-dom";
+
+import Home from './components/Home';
+import Search from './components/Search';
+import Library from './components/Library';
+import Customers from './components/Customers';
+import CustomerDetail from './components/CustomerDetail';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+const App = ({url}) => {
+
+  const BASE_URL = url
+  const [ customer, setCustomer ] = useState("");
+  const [ movie, setMovie ] = useState(null);
+  const [ flash, setFlash ] = useState("");
+  const [errorMessage, setErrorMessage] = useState(null);
+
+  const selectCustomer = (customer) => {
+    const selectedCustomer = customer
+    setCustomer(selectedCustomer);
+  }
+  const selectMovie = (movie) => {
+    const movieName = movie.title
+    setMovie(movieName);
+  }
+  const removeCustomer = () => {
+    setCustomer("");
+  }
+
+  const removeMovie = () => {
+    setMovie("");
+  }
+
+  const makeRental = () => {
+    const today = new Date();
+    const dueDate = new Date(new Date().getTime() + (7 * 24 * 3600 * 1000));
+
+    if (customer && movie) {
+      axios.post((url+'rentals/'+ movie +'/check-out'),{
+        customer_id: customer.id,
+        due_date: dueDate
+      })
+        .then((response) => {
+          const flashMsg = movie+ " is successfully checked out by "+ customer.name
+          setCustomer("");
+          setMovie("");
+          setFlash(flashMsg);
+
+          setTimeout(() => {
+            setFlash(null)
+          }, 2000);
+        })
+        .catch((error) => {
+          setErrorMessage(movie + "wasn't checked out!");
+        });
+    }
+  }
+
+
+
+  return (
+    <Router>
+    <div>
+      <nav className="topnav">
+          <Link to="/">Home</Link>
+          <Link to="/search">Search</Link>
+          <Link to="/library">Library</Link>
+          <Link to="/customers">Customers</Link>     
+      </nav>
+      <div className='container'>
+        <p> 
+          Selected Customer: <span className='text_box'>{customer.name}</span>
+          < Link to ="/customerdetail">
+            <button 
+              className="btn btn-secondary font-pg-button" 
+            >
+            Customer Detail
+            </button>
+          </Link>
+
+          <button 
+            className="btn btn-secondary font-pg-button" 
+            onClick={() => removeCustomer()}
+            >
+            Remove Customer
+          </button>
+        </p>
+        <p> 
+          Selected Movie: <span className='text_box'>{movie}</span>  
+          <button 
+            className="btn btn-secondary font-pg-button" 
+            onClick={() => {makeRental(customer, movie)} }
+            >
+            Make Rental
+            </button>
+
+            <button 
+            className="btn btn-secondary font-pg-button" 
+            onClick={() => removeMovie()}
+            >
+            Remove Movie
+          </button>
         </p>
       </div>
-    );
-  }
+      { flash ? <p className="center-error-message alert alert-success">{ flash }</p> : '' }
+      { errorMessage ? <p className="center-error-message alert alert-danger">{ errorMessage }</p> : '' }
+      <div className="">
+        <nav className="">
+        <Switch>
+          <Route path="/" exact component={Home} />
+          <Route path="/search">  
+            <Search  
+              baseUrl={BASE_URL}
+              onClickCallBack={selectMovie}
+            />
+          </Route>        
+          <Route exact path="/library">
+            <Library
+              baseUrl={BASE_URL}
+              onClickCallBack={selectMovie}
+            />
+          </Route>
+          <Route exact path="/customers">
+            <Customers
+              baseUrl={BASE_URL}
+              onClickCallBack={selectCustomer}
+            />
+          </Route>
+          <Route exact path="/customerdetail">
+            <CustomerDetail 
+            baseUrl={BASE_URL}
+            customer={customer}
+            />
+          </Route> 
+        </Switch>
+        </nav>
+        </div>
+      </div>
+    </Router>
+  );
 }
 
+    App.propTypes = {
+      url: PropTypes.string.isRequired,
+    }
+
 export default App;

src/components/Customer.css

@@ -0,0 +1,34 @@
+.card {
+  /* Add shadows to create the "card" effect */
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+  transition: 0.3s;
+  width: 50%;
+  margin: 10px;
+  width: 18rem;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  padding: 5px;
+  border: 1px lightgray solid;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  border: 1px solid rgba(0,0,0,.125);
+  border-radius: .25rem;
+  padding: 20px;
+  }
+
+/* On mouse-over, add a deeper shadow */
+.card:hover {
+  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+}
+
+/* Add some padding inside the card container */
+.customer-info-text {
+  padding: 2px 16px;
+}
+
+.customer-pic {
+  width: 100%;
+}
+

src/components/Customer.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import 'bootstrap/dist/css/bootstrap.min.css'; 
+import './Customer.css';
+
+const Customer = (props) => {
+  // console.log(props)
+
+const url = "http://lorempixel.com/640/380/cats/random"
+  return (
+
+      <section className="card">
+        <div className="">
+          <img src={url+props.id} alt="customer_pic" className="customer-pic"/>
+        </div>
+        <div className="customer-info-text">
+          <h5><strong>{props.name}</strong></h5>
+          <p>{props.address}</p>
+          <p>{props.city}, {props.state}, {props.postal_code}</p>
+          <p>{props.phone}</p>
+          <p>Member since: </p>
+          <p> {new Date(props.registered_at).toDateString()}</p>
+          <p>Account Credit: ${props.account_credit}</p>
+          <p><strong>Movies Checked Out: {props.movies_checked_out_count}</strong></p>
+          <button 
+          className="btn btn-primary" 
+          onClick={() => {props.onClickCallBack(props)} }
+          >
+          Select Customer
+          </button>
+        </div>
+      </section>
+
+  )
+}
+
+export default Customer;

src/components/CustomerDetail.css

@@ -0,0 +1,4 @@
+.container{
+  margin: 10px;
+  text-align: center;
+ }