Ari & Luxi- Video Store Consumer- Octos

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"
   }
-}
+}

public/index.html

@@ -9,7 +9,7 @@
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/blockbuster.ico">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

public/manifest.json

@@ -3,7 +3,7 @@
   "name": "Create React App Sample",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "blockbuster.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     }

src/App.css

@@ -1,28 +1,58 @@
-.App {
+.menu {
+  border: 5px solid goldenrod;
+}
+.menu li {
+  border-right: 1px solid #bbb;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  color: goldenrod;
+  text-decoration: none;
+}
+
+.menu li:last-child {
+  border-right: none;
+}
+
+.menu li a {
+  display: block;
+  color:  rgb(255, 201, 9);
   text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+.menu li a:hover:not(.active) {
+  background-color: rgb(32, 61, 185);
 }
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
+.active {
+
+}
+.menu ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background-color: #1d1aad;
 }
 
-.App-title {
-  font-size: 1.5em;
+header#header-background {
+  background-image: url('blockbuster.jpg');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  padding: 150px;
+  text-align: center;
+  background-color: white;
 }
 
-.App-intro {
-  font-size: large;
+#body {
+  background-color: whitesmoke;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+#status {
+  color: rgb(233, 115, 29);
+  text-align: center;
 }

src/App.js

@@ -1,21 +1,41 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
+import React, {Component} from 'react';
+import RentalContainer from './components/RentalContainer';
+import Status from './components/Status';
 import './App.css';
 
 class App extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      status: {
+        message: '',
+        type: 'success'
+      }
+    }
+  }
+
+  updateStatus = (message, type) => {
+    this.setState({
+      status: {
+        message: message,
+        type: type
+      }
+    })
+  }
   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 id="body">
+        <header id="header-background">
         </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
+      <div id="status">
+        <Status message={this.state.status.message} type={this.state.status.type}/>
+      </div>
+      < RentalContainer
+      sendStatusCallback ={this.updateStatus} />
       </div>
     );
   }
 }
 
-export default App;
+export default App

src/components/Customer.css

@@ -0,0 +1,13 @@
+#customers {
+  display: inline-flex;
+  flex-flow: wrap column;
+  align-items: center;
+  padding: 10px;
+}
+
+button {
+  padding: 20px;
+  margin: auto;
+  font-size: 1em;
+  background-color: rgb(221, 219, 203);
+}

src/components/Customer.js

@@ -0,0 +1,43 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import Hamster from './hamster.svg';
+import Popcorn from './popcorn.svg';
+import Candy from './candy.svg';
+import Film from './film.svg';
+import Filming from './filming.svg';
+import Videotape from './videotape.svg';
+import Drink from './drink.svg';
+import './Customer.css';
+
+const myArray = [Hamster, Popcorn, Candy, Film, Filming, Videotape, Drink];
+
+class Customer extends Component {
+
+  customerInfo = (event) => {
+    this.props.rentalCustomerCallback(event.target);
+  }
+
+  rand() {
+    return myArray[Math.floor(Math.random() * myArray.length)];
+  }
+
+  render() {
+    return (
+      <section id="customers">
+        <img src={this.rand()} height='200px' width='200px' alt="Hamster profile"/>
+        <h3>{this.props.name}</h3>
+        <p>{this.props.movies_count} Movies checked out</p>
+        <button onClick={this.customerInfo} name={this.props.name} id={this.props.id}>Select for Rental</button>
+      </section>
+    )
+  }
+}
+
+Customer.propTypes = {
+  name: PropTypes.string,
+  movies_count: PropTypes.number,
+  rentalCustomerCallback: PropTypes.func,
+  id: PropTypes.number
+};
+
+export default Customer;

src/components/CustomerCollection.js

@@ -0,0 +1,63 @@
+import React, { Component } from 'react';
+import axios from 'axios';
+import PropTypes from 'prop-types';
+import Customer from './Customer';
+
+const BASE_URL = "http://localhost:3000/customers"
+
+class CustomerCollection extends Component {
+  static propTypes = {
+    getCustomerCallback: PropTypes.func,
+    updateStatusCallback: PropTypes.func
+  }
+  constructor() {
+    super();
+    this.state = {
+      customers: []
+    }
+  }
+
+  componentDidMount() {
+    this.props.updateStatusCallback('Loading...', 'success');
+    axios.get(BASE_URL)
+    .then((response) => {
+      this.props.updateStatusCallback('Successfully loaded all customers!', 'success');
+      const customers = response.data;
+      this.setState({ customers: customers });
+    })
+    .catch((error) => {
+      this.props.updateStatusCallback(error.message, 'error');
+    });
+  }
+
+  rentalForCustomer = (customer) => {
+    console.log(customer.name);
+    this.props.getCustomerCallback(customer);
+  }
+
+  render() {
+
+    const customers = this.state.customers.map((customer, index) => {
+      return <Customer
+      key={index}
+      id={customer.id}
+      name={customer.name}
+      movies_count={customer.movies_checked_out_count}
+      rentalCustomerCallback={this.rentalForCustomer}
+      />
+    });
+
+
+    return (
+      <section>
+
+        <h2>Customers</h2>
+        <div>{customers}</div>
+
+      </section>
+    );
+  }
+
+}
+
+export default CustomerCollection;

src/components/Home.css

@@ -0,0 +1,39 @@
+.gif {
+  width: 400px;
+  height: 240px;
+  position: absolute;
+  margin: auto;
+  left: 0;
+  right: 0;
+  border-radius: 10px;
+  border: 1px solid lightgrey;
+}
+
+#gif-one {
+  animation: img 3s linear forwards;
+  background: url(https://media.giphy.com/media/CBXzFQx2W1y7K/giphy.gif);
+}
+
+#gif-two {
+  animation: img2 3s linear forwards;
+  z-index: -1;
+}
+
+@keyframes img {
+  0%, 95% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes img2 {
+  0%, 99% {
+    background-image: none;
+  }
+  100%{
+    background: url(https://media.giphy.com/media/kL1KAdQYmKXle/giphy.gif);
+    align-content: center;
+  }
+}

src/components/Home.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import './Home.css';
+
+const Home = () => (
+  <div className="homepage-gif">
+    <div id="gif-one" className="gif"></div>
+    <div id="gif-two" className="gif"></div>
+  </div>
+)
+
+export default Home;

src/components/Library.css

@@ -0,0 +1,11 @@
+
+#list {
+  display: flex;
+  flex-flow: wrap;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
+  /* padding: 5px;
+  margin: 10px; */
+  color: rgb(39, 46, 69);
+}