Wenjie & Anne - Octos - VideoStore

.gitignore

@@ -11,6 +11,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local
@@ -19,3 +20,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.env

package.json

@@ -3,8 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.18.0",
+    "cors": "^2.8.4",
     "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 +17,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}

src/App.css

@@ -1,28 +1,56 @@
-.App {
-  text-align: center;
+ul {
+  list-style-type: none;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+.navigation {
+  display: flex;
+  flex-wrap: wrap;
 }
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
+a {
+  text-decoration: none;
 }
 
-.App-title {
-  font-size: 1.5em;
+img {
+	width: 260px;
 }
 
-.App-intro {
-  font-size: large;
+.shiba {
+  border-radius: 5%;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.top-nav {
+  display: flex;
+  flex-direction: column;
 }
+
+.links img {
+  height: 200px;
+  width: 200px;
+  margin: 0 30px;
+}
+
+.shiba-spot {
+	margin-right: 40px;
+}
+
+header {
+	margin: 50px 100px 50px 175px;
+	padding-left: 50px;
+}
+
+.top-nav .links {
+	padding: 30px;
+}
+
+.top-nav .rental-container {
+	font-size: 1.6rem;
+}
+
+.rental-info {
+	align-content: center;
+}
+
+/* .body {
+	background-color: black;
+} */

src/App.js

@@ -1,21 +1,119 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
+import Library from './components/Library';
+import Search from './components/Search';
+import CustomerCollection from'./components/CustomerCollection';
+import { BrowserRouter as Router, Route, Link } from "react-router-dom";
+import Rental from './components/Rental';
+import Movie from './components/Movie';
+import axios from 'axios';
+import PropTypes from 'prop-types';
+import Status from './components/Status';
+
 
 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>
-    );
-  }
-}
-
-export default App;
+	static propTypes = {
+		updateStatusCallback: PropTypes.func,
+	}
+
+	constructor() {
+		super();
+
+		this.state = {
+			movieName: "None",
+			customerName: "None",
+			customerID: null,
+			status: {
+				message: `Welcome to such movie so wow`,
+				type: 'success'
+			}
+		}
+	}
+
+	updateStatus = (message, type) => {
+		this.setState({
+			status: {
+				message: message,
+				type: type
+			}
+		})
+	}
+
+	selectMovie = (title) => {
+		this.setState({
+			movieName: title
+		});
+	}
+
+	selectCustomer = (name, id) => {
+		this.setState({
+			customerName: name,
+			customerID: id
+		});
+	}
+
+
+	render() {
+		return (
+			<Router>
+				<div className="body">
+					<header>
+						<div className="navigation">
+							<div className="shiba-spot">
+								<Link to="/"><img className="shiba" src={require("./images/shiba.png")}/></Link>
+							</div>
+							<div className="top-nav">
+								<div className="links">
+									<Link to="/search"><img src={require("./images/search.png")}/></Link>
+
+									<Link to="/library"><img src={require("./images/video.png")}/></Link>
+
+									<Link to="/customers"><img src={require("./images/customers.png")}/></Link>
+								</div>
+
+							</div>
+							<div className="rental-info">
+								<Rental movieName={ this.state.movieName }
+									customerName={ this.state.customerName }
+									customerID={ this.state.customerID }
+									updateStatusCallback={ this.updateStatus }
+								/>
+							</div>
+						</div>
+
+
+
+					</header>
+					<section className="body">
+						<Status
+							message={ this.state.status.message }
+							type={ this.state.status.type }
+						/>
+					</section>
+
+
+					<Route
+						path="/search"
+						render={(props) => <Search {...props}
+							updateStatusCallback={ this.updateStatus }/>}
+						/>
+
+						<Route
+							path="/library"
+							render={(props) => <Library {...props} selectMovieCallback={ this.selectMovie }
+								updateStatusCallback={ this.updateStatus }
+							/> }
+						/>
+						<Route
+							path="/customers"
+							render={(props) => <CustomerCollection {...props} selectCustomerCallback={ this.selectCustomer }
+								updateStatusCallback={ this.updateStatus }/>}
+							/>
+
+						</div>
+					</Router>
+				);
+			}
+		}
+
+		export default App;