Ada-C9 · cmn53 · Jun 18, 2018 · Jun 18, 2018 · Jun 18, 2018 · Jun 18, 2018
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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"
   }
-}
+}
diff --git a/public/index.html b/public/index.html
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Flick&Chill</title>
   </head>
   <body>
     <noscript>

diff --git a/src/App.css b/src/App.css
@@ -1,3 +1,8 @@
+body {
+  background-color: #222;
+  color: #EDC023;
+}
+
 .App {
   text-align: center;
 }
@@ -26,3 +31,17 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+button, .button {
+  background-color: #222;
+  color: #EDC023;
+  font-weight: bold;
+  border-color: #EDC023;
+  padding: 1vw;
+  margin: 1vw;
+}
+
+button:hover, .button:hover {
+  background-color: #EDC023;
+  color: #222;
+}
diff --git a/src/App.js b/src/App.js
@@ -1,21 +1,74 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+import flick from './flick.svg';
+import popcorn from './popcorn.svg';
+import soda from './soda.svg';
 import './App.css';
 
+import Routes from './Components/Routes';
+import RentalForm from './Components/RentalForm';
+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>
-    );
-  }
+	constructor() {
+		super();
+		this.state = {
+			customer: {},
+			movie: {},
+			status: {}
+		}
+	}
+
+	updateMovie = (movieObj) => {
+		let updatedState = this.state;
+		updatedState["movie"] = movieObj;
+		this.setState(updatedState);
+	}
+
+	updateCustomer = (customerObj) => {
+		let updatedState = this.state;
+		updatedState["customer"] = customerObj;
+		this.setState(updatedState);
+	}
+
+	updateStatus = (message, type) => {
+		this.setState({status: {message: message, type: type}});
+	}
+
+	clearRental = () => {
+		this.setState({customer: {}, movie: {}});
+	}
+
+	render() {
+		return (
+			<div className="App">
+				<header className="App-header">
+					<img src={soda} className="App-logo" alt="logo" />
+					<img src={popcorn} className="App-logo" alt="logo" />
+					<img src={flick} className="App-logo" alt="logo" />
+					<img src={popcorn} className="App-logo" alt="logo" />
+					<img src={soda} className="App-logo" alt="logo" />
+				</header>
+
+				<Status
+					message={this.state.status.message}
+					type={this.state.status.type}
+					/>
+				<RentalForm
+					customer={this.state.customer}
+					movie={this.state.movie}
+					updateStatusCallback={this.updateStatus}
+					clearRentalCallback={this.clearRental}
+					/>
+				<Routes
+					customer={this.state.customer}
+					movie={this.state.movie}
+					onClickCallback={this.updateMovie}
+					onClickCustomer={this.updateCustomer}
+					updateStatusCallback={this.updateStatus}
+					/>
+			</div>
+		);
+	}
 }
 
 export default App;
diff --git a/src/Components/Customer.css b/src/Components/Customer.css
@@ -0,0 +1,4 @@
+.selected-customer {
+  background-color: #EDC023;
+  color: #222;
+}
diff --git a/src/Components/Customer.js b/src/Components/Customer.js
@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import './Customer.css';
+
+class Customer extends Component {
+  static propTypes = {
+    customerData: PropTypes.object,
+    onClickCallback: PropTypes.func,
+		selectedCustomer: PropTypes.object,
+  }
+
+  onCustomerClick = () => {
+		this.props.onClickCallback(this.props.customerData);
+	}
+
+	getClass = () => {
+		if (this.props.selectedCustomer.id === this.props.customerData.id) {
+			return "selected-customer";
+		}
+	}
+
+  render() {
+    return (
+      <div onClick={this.onCustomerClick} className={this.getClass()}>
+        <h3>{this.props.customerData.name}</h3>
+        <p>Registered at: {this.props.customerData.registration_date}</p>
+        <p>Address: {this.props.customerData.address} {this.props.customerData.city}, {this.props.customerData.state} {this.props.customerData.postal_code}</p>
+        <p>Phone: {this.props.customerData.phone}</p>
+        <p>Account credit: ${this.props.customerData.account_credit.toFixed(2)}</p>
+      </div>
+    );
+  }
+}
+
+export default Customer;
diff --git a/src/Components/Customers.js b/src/Components/Customers.js
@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+import Customer from './Customer';
+
+class Customers extends Component {
+  static propTypes = {
+    onClickCustomer: PropTypes.func,
+    updateStatusCallback: PropTypes.func,
+		customer: PropTypes.object
+  }
+
+  constructor(){
+		super();
+
+		this.state = {
+			customers: []
+		};
+	}
+
+	componentDidMount(){
+
+		axios.get('http://localhost:3000/customers')
+		.then((response) => {
+			this.setState({
+				customers: response.data
+			})
+      this.props.updateStatusCallback(`Loaded ${this.state.customers.length} customers`, "success")
+		})
+		.catch((error) => {
+			console.log(error);
+      this.props.updateStatusCallback("Failed to load customers", "failure")
+		});
+	}
+
+  render() {
+    const customers = this.state.customers.map((customer, index) => {
+      return <Customer
+				customerData={customer}
+				key={index}
+				onClickCallback={this.props.onClickCustomer}
+				selectedCustomer={this.props.customer}
+				/>
+    })
+    return (
+      <div className="list customers">
+        {customers}
+      </div>
+    );
+  }
+}
+
+export default Customers;
diff --git a/src/Components/Library.css b/src/Components/Library.css
@@ -0,0 +1,14 @@
+.list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  height: 80vh;
+  overflow-x: scroll;
+}
+
+.list > div {
+  border: dotted 1px #EDC023;
+  margin: 1vw;
+  padding: 1vw;
+  width: 250px;
+}