Ampers: Zheng, Alex;

package.json

@@ -3,8 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.18.0",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
+    "react-router": "^4.3.1",
+    "react-router-dom": "^4.3.1",
     "react-scripts": "1.1.4"
   },
   "scripts": {
@@ -13,4 +16,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}

src/App.css

@@ -2,27 +2,51 @@
   text-align: center;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+header {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 2.5fr 2.5fr 150px;
+  grid-gap: 15px;
+  align-items: center;
+  padding: 10px;
+  background: #7d9174;
 }
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
+.fixed-header {
+   position: fixed;
+   top: 0;
+   left: 0;
+   width: 100%;
+   z-index: 99;
+}
+
+.movie-selection {
+  margin-left: 50px;
+}
+
+header p {
+  text-align: center;
+  font-size: 20px;
+  margin: 5px 10px;
 }
 
-.App-title {
-  font-size: 1.5em;
+.button, button {
+  text-align: center;
+  text-decoration: none;
+  font-size: 20px;
+  color: white;
+  background: #97c689;
+  border: none;
+  padding: 8px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
-.App-intro {
-  font-size: large;
+.button:hover, button:hover {
+  color: #24700d;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.notification {
+  display: flex;
+  justify-content: center;
+  margin: 0px;
+  background: #ffcc5e;
 }

src/App.js

@@ -1,21 +1,107 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+import {
+  BrowserRouter as Router,
+  Route,
+  Link
+} from 'react-router-dom';
+import axios from 'axios';
+
+import SearchMovie from './components/SearchMovie';
+import MovieCollection from './components/MovieCollection';
+import CustomerCollection from './components/CustomerCollection';
 import './App.css';
 
+const URL = "http://localhost:3001/rentals/check-out"
+
 class App extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      selectedMovie: "",
+      selectedCustomer: "",
+      selectedCustomerId: "",
+    }
+  }
+
+  setSelectedMovie = (title) => {
+    this.setState({
+      selectedMovie: title,
+    });
+  }
+
+  setSelectedCustomer = (name, id) => {
+    this.setState({
+      selectedCustomer: name,
+      selectedCustomerId: id,
+    });
+  }
+
+  makeRental = () => {
+    axios.post(URL + `?customer_id=${this.state.selectedCustomerId}&title=${this.state.selectedMovie}`)
+    .then((response) => {
+      this.setState({
+        notification: "Rental successfully added.",
+        selectedMovie: "",
+        selectedCustomer: "",
+        selectedCustomerId: "",
+      })
+    })
+    .catch((error) => {
+      this.setState({
+        notification: error.message
+      })
+    })
+  }
+
+  displayNotification = () => {
+    setTimeout(this.notificationTimer, 6000);
+    return this.state.notification
+  }
+
+  notificationTimer = () => {
+    this.setState({ notification: ""})
+  }
+
   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>
+        <article>
+          <section className="fixed-header">
+            <header>
+              <Link className="button" to="/">Search</Link>
+              <Link className="button" to="/library">Library</Link>
+              <Link className="button" to="/customers">Customers</Link>
+              <section className="movie-selection">
+                <p><strong>Selected Movie</strong></p>
+                <p>{this.state.selectedMovie}</p>
+              </section>
+              <section className="customer-selection">
+                <p><strong>Selected Customer</strong></p>
+                <p>{this.state.selectedCustomer}</p>
+              </section>
+              <button className="button" onClick={this.makeRental}>Make Rental</button>
+            </header>
+            <p className="notification">{this.displayNotification()}</p>
+          </section>
+
+          <section>
+            <Route exact path="/" component={SearchMovie} />
+            <Route exact path="/search" component={SearchMovie} />
+            <Route
+              path="/library"
+              render={(props) => <MovieCollection {...props} selectedMovieCallback={this.setSelectedMovie} />}
+              />
+            <Route
+              path="/customers"
+              render={(props) => <CustomerCollection {...props} selectedCustomerCallback={this.setSelectedCustomer} />}
+              />
+          </section>
+        </article>
+      </Router>
     );
   }
+
 }
 
 export default App;

src/components/Customer.css

@@ -0,0 +1,22 @@
+.customer-container {
+  background-color: #f4f9f2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2em;
+  margin: 1em 1em 0em 1em;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+.customer-container > p {
+  padding: .5em;
+  margin: 0px;
+}
+
+.card-header {
+  margin-top: 0px;
+}
+
+.customer-container > button {
+  margin-top: 1em;
+}

src/components/Customer.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import css from './Customer.css';
+
+class Customer extends Component {
+
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    phone: PropTypes.string.isRequired,
+    accountCredit: PropTypes.string.isRequired,
+    id: PropTypes.number,
+    checkedOutMoviesCount: PropTypes.number.isRequired,
+    selectedCustomerCallback: PropTypes.func.isRequired,
+  }
+
+  selectedCustomerCallback = () => {
+    this.props.selectedCustomerCallback(this.props.name, this.props.id);
+  }
+
+  render () {
+    return (
+      <article className="customer-container">
+        <h2 className="card-header">{this.props.name}</h2>
+        <p><strong>Phone:</strong> {this.props.phone}</p>
+        <p><strong>Account Credit:</strong> ${this.props.accountCredit}</p>
+        <p><strong>Checked Out Movies Count:</strong> {this.props.checkedOutMoviesCount}</p>
+        <button onClick={this.selectedCustomerCallback} >Select This Customer</button>
+      </article>
+    );
+  }
+}
+
+export default Customer;

src/components/CustomerCollection.css

@@ -0,0 +1,6 @@
+.collection {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  margin-top: 100px;
+}