Layla & Hayden - Edges - Video Store Consumer

package.json

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

src/App.css

@@ -3,26 +3,53 @@
 }
 
 .App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+  animation: App-logo-spin infinite 3s linear;
+  height: 120px;
+  margin-top: 14px;
 }
 
 .App-header {
   background-color: #222;
-  height: 150px;
-  padding: 20px;
+  height: 148px;
+  padding: 35px;
   color: white;
+  display: flex;
+
+}
+
+.App-titles {
+  text-align: left;
+  margin-left: 1.5vw;
+  text-shadow: 0px 0px 20px black;
+  width: 100%;
 }
 
 .App-title {
-  font-size: 1.5em;
+  font-size: 4em;
+  font-family: BOMBFONT;
+  margin: 0;
+}
+
+.App-title2 {
+  margin-top: -.15em;
 }
 
 .App-intro {
   font-size: large;
+  text-align: right;
+}
+
+.uppercontainer {
+  display: flex;
+  justify-content: space-around;
 }
 
 @keyframes App-logo-spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+@font-face {
+  font-family: 'BOMBFONT';
+  src: url(./assets/fonts/BOMBFONT.ttf) format('ttf');
+}

src/App.js

@@ -1,18 +1,88 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+import logo from './logo.png';
 import './App.css';
 
+import LibraryContainer from './components/LibraryContainer';
+import SearchContainer from './components/SearchContainer';
+import NewRental from './components/NewRental';
+import NavBar from './components/NavBar';
+import StatusBar from './components/StatusBar';
+import { Route } from 'react-router-dom';
+
+
 class App extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      movie: '',
+      customer: '',
+      cust_id: '',
+      status: '',
+    }
+  }
+
+  clearSelections = () => {
+    this.setState({
+      movie: '',
+      customer: '',
+      cust_id: '',
+    });
+  }
+
+  select = (obj, type) => {
+    let newState = this.state;
+    newState[type.toLowerCase()] = obj.title ? obj.title : obj.name;
+    if (obj.name) {
+      newState.cust_id = obj.id;
+    }
+
+    this.setState(newState);
+  }
+
+  status = (txt) => {
+    let newState = this.state;
+    newState.status = txt;
+
+    this.setState(newState);
+  }
+
+  clearStatus = () => {
+    let newState = this.state;
+    newState.status = '';
+
+    this.setState(newState);
+  }
+
   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>
+          <div className="App-titles">
+            <h1 className="App-title">Welcome to</h1>
+            <h1 className="App-title App-title2">React Video Store</h1>
+            <p className="App-intro">
+              "To get started, edit <code>kawaii/Anime.mkv</code> and save to reload..."
+            </p>
+          </div>
         </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
+        <div className="uppercontainer">
+          <NavBar clearCB={ this.clearStatus } />
+          <NewRental
+            movie={ this.state.movie }
+            customer={ this.state.customer }
+            cust_id={ this.state.cust_id }
+            clearCB={ this.clearSelections }
+            statusCB={ this.status } />
+        </div>
+
+        <StatusBar status={ this.state.status } />
+
+        <Route path="/" exact="true" render={() => <LibraryContainer type="Movie" selectCB={this.select} statusCB={ this.status } />} />
+        <Route path="/library" render={() => <LibraryContainer type="Movie" selectCB={this.select} statusCB={ this.status } />} />
+        <Route path="/customers" render={() => <LibraryContainer type="Customer" selectCB={this.select} statusCB={ this.status } />} />
+        <Route path="/search" render={() => <SearchContainer statusCB={ this.status } />} />
       </div>
     );
   }