Sam and Angelica -- Octos

package.json

@@ -3,8 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.18.0",
+    "font-awesome": "^4.7.0",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
+    "react-router-dom": "^4.4.0-alpha.0",
     "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,54 @@
   text-align: center;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+body {
+  background: steelblue;
+  background-repeat: repeat;
 }
 
-.App-header {
+header {
   background-color: #222;
-  height: 150px;
   padding: 20px;
   color: white;
+  height: 60px;
+  line-height: 60px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: stretch;
 }
 
-.App-title {
-  font-size: 1.5em;
+header p {
+  margin: 0;
 }
 
-.App-intro {
-  font-size: large;
+header a {
+  color: #fff;
+  font-size: 1.25em;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+button.col-1 {
+  margin: .5em;
+  display: inline-block;
+  font-size: 1.25em;
+  cursor: pointer;
+  flex: none;
+}
+
+.search {
+  margin: .5em;
+  display: inline-block;
+  font-size: 1.25em;
+  cursor: pointer;
+  flex: none;
+}
+
+.col-1 {
+  flex-grow: 1;
+}
+
+.tagline {
+  text-align: center;
+  color: white;
+  font-weight: bold;
+  text-shadow: 2px 2px 4px #000000;
 }

src/App.js

@@ -1,19 +1,125 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+import { BrowserRouter as Router, Link, Route } from 'react-router-dom';
+import axios from 'axios';
+import Library from './components/Library';
+import Search from './components/Search';
+import CustomerList from './components/CustomerList';
+import Status from './components/Status';
+
 import './App.css';
 
 class App extends Component {
+  constructor(){
+    super();
+    this.state = {
+      customerName: "",
+      customerId: 0,
+      movieTitle: "",
+      movieId: 0,
+      status: {
+        message: "",
+        type: ""
+      }
+    }
+  }
+
+  displayCurrentCustomer = (name) => {
+    this.setState({
+      customerName: name
+    });
+  }
+
+  updateCurrentCustomer = (id) => {
+    this.setState({
+      customerId: id
+    });
+  }
+
+  updateCurrentMovie = (id) => {
+    this.setState({
+      movieId: id
+    });
+  }
+
+  displayCurrentMovie = (title) => {
+    this.setState({
+      movieTitle: title
+    });
+  }
+
+  updateStatus = (message, type) => {
+    const updatedStatus = {
+      message: message,
+      type: type
+    };
+    this.setState({
+      status: updatedStatus
+    });
+  }
+
+  createNewRental = () => {
+    this.updateStatus('Creating new rental', 'success');
+    let dueDate = new Date();
+    dueDate.setDate(dueDate.getDate() + 7);
+    dueDate = `${dueDate.getFullYear()}-${String(dueDate.getMonth() + 1).padStart(2, "0")}-${String(dueDate.getDate()).padStart(2, "0")}`;
+
+    const NEW_RENTAL_URL = `http://localhost:3000/rentals/${this.state.movieTitle}/check-out`;
+    axios.post(NEW_RENTAL_URL, {
+      due_date: dueDate,
+      customer_id: this.state.customerId
+    })
+      .then(() => {
+        this.updateStatus(`Successfully rented ${this.state.movieTitle}`, 'success');
+      })
+      .catch((error) => {
+        this.updateStatus(`Encountered an error when checking out ${this.state.movieTitle}: ${error.message}`, 'error');
+      });
+  }
+
   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>
+      <Router>
+        <div>
+          <header>
+            <Link to="/Search" className='col-1'>Search for Movies <i className="fa fa-search-plus"></i></Link>
+            <Link to="/library" className='col-1'>All Movies <i className="fa fa-file-movie-o"></i></Link>
+            <Link to="/customers" className='col-1'>Customers <i className="fa fa-group"></i></Link>
+
+            <p className='col-1'>Current Customer: {this.state.customerName}</p>
+            <p className='col-1'>Current Movie: {this.state.movieTitle}</p>
+            <button
+              className='col-1'
+              onClick={this.createNewRental}
+            >
+              Check Out
+            </button>
         </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-      </div>
+          <Status type={this.state.status.type} message={this.state.status.message}/>
+            <h1 className="tagline"> !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! </h1>
+            <h1 className="tagline"> Like Netflix, but not as Convenient </h1>
+            <h1 className="tagline"> !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! </h1>
+
+        <Route
+          path="/search"
+          render={() => <Search
+            updateStatusCallback={this.updateStatus}/>}
+        />
+          <Route
+            path="/library"
+            render={()=> <Library
+              updateCurrentMovieCallback={this.updateCurrentMovie}
+              displayCurrentMovieCallback={this.displayCurrentMovie}
+              updateStatusCallback={this.updateStatus}/>}
+          />
+          <Route
+            path="/customers"
+            render={() => <CustomerList
+            updateCurrentCustomerCallback={this.updateCurrentCustomer}
+            displayCurrentCustomerCallback={this.displayCurrentCustomer}
+            updateStatusCallback={this.updateStatus}/>}
+          />
+        </div>
+      </Router>
     );
   }
 }