Katrina-Sigrid-Pushpa-EDGES

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

@@ -10,6 +10,7 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.css

@@ -1,28 +1,19 @@
 .App {
   text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+  font-family: 'Oswald', sans-serif;
+  background-color: black;
 }
 
 .App-header {
-  background-color: #222;
-  height: 150px;
+  background-color: black;
+  height: 10vh;
   padding: 20px;
-  color: white;
+  color: red;
+  margin-bottom: 2rem;
 }
 
 .App-title {
-  font-size: 1.5em;
-}
-
-.App-intro {
-  font-size: large;
-}
-
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+  font-size: 3rem;
+  display: flex;
+  justify-content: center;
 }

src/App.js

@@ -1,18 +1,18 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
+import Dashboard from './components/Dashboard';
+
 
 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>
+          <h1 className="App-title">Videoflix</h1>
         </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
+        <main>
+          <Dashboard className="Dashboard"/>
+        </main>
       </div>
     );
   }

src/components/Customer.css

@@ -0,0 +1,56 @@
+.customer {
+    display: grid;
+    grid-template-columns: 4fr 1fr;
+}
+
+.item {
+    border: 1px solid #000;
+    border-radius: 1em;
+    overflow: hidden;
+    margin: 2em;
+    background-color: #e9e9e9;
+}
+
+.item__button {
+    background-color: #cfcfcf;
+    font-size: 18px;
+}
+
+.status-bar {
+    border: 1px solid #000;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+}
+
+.status-bar--success {
+    background-color: rgb(180,213,180);
+}
+
+.status-bar--hide {
+    display: none;
+}
+
+.status-bar__text {
+    margin: .4em;
+}
+
+.status-bar__button {
+    background-color: inherit;
+    border: none;
+    cursor: pointer;
+}
+
+p {
+    display: block;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+}
+
+.customer-container {
+  margin-left: 10rem;
+  margin-right: 10rem;
+}

src/components/Customer.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import "./Customer.css"
+
+const Customer = (props) => {
+  const { customerCallback } = props;
+  return (
+    <div className="customer-container">
+      <div className="customer item">
+        <div className="item__details">
+          <h2>{props.name}</h2>
+          <p></p>
+          <p>{`${props.movies_checked_out_count} movies checked out`}</p>
+        </div>
+          <button className="item__button" onClick={() => customerCallback()}>Select for Rental</button>
+      </div>
+    </div>
+
+  )
+}
+
+Customer.propTypes = {
+  name: PropTypes.string,
+  movies_checked_out_count: PropTypes.number,
+  customerCallback: PropTypes.func,
+};
+
+export default Customer;

src/components/Customers.css

@@ -0,0 +1 @@
+

src/components/Customers.js

@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import axios from 'axios';
+import Customer from './Customer';
+import './Customers.css';
+
+class Customers extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      customers: [],
+      message: 'Loading customers...',
+      showStatus: true,
+    }
+  }
+
+  componentDidMount() {
+      console.log("Component has mounted");
+      const CUSTOMERS = "http://localhost:3000/customers";
+
+      axios.get(CUSTOMERS)
+      .then((response) => {
+        this.setState({
+          customers: response.data,
+        });
+        this.props.customerCount(this.state.customers.length);
+      })
+      .catch((error) => {
+        this.setState({
+          error: error.message
+        });
+      });
+    }
+
+  render(){
+    const customerList = this.state.customers.map((customer, i) => {
+      return <Customer
+          key={i}
+          {...customer}
+          customerCallback={() => this.props.customerCallback(customer)}
+          />
+      });
+
+    return(
+      <div>
+        <div className="item-list_container">
+          {customerList}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Customers;

src/components/Dashboard.css

@@ -0,0 +1,55 @@
+a.dashboard-link {
+  text-decoration: none;
+  color: white;
+}
+
+.dashboard-item {
+  display: inline-block;
+  border-radius: 5px;
+  margin: 3px;
+  font-size: 20px;
+  background-color: red;
+  color: white;
+  border-color: red;
+}
+
+
+.label {
+  background-color: lightgray;
+  display: inline-block;
+}
+
+.movie-customer-label {
+  background-color: red;
+  display: inline-block;
+  font-size: 1rem;
+  padding: .1rem;
+  color: white;
+}
+
+.selected-movie-customer {
+  font-size: 1rem;
+  background-color: white;
+  height: 2rem;
+  color: black;
+  padding: 1rem;
+}
+
+.nav-list_container {
+  display: flex;
+  justify-content: center;
+}
+
+.container-selected-item {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+
+}
+
+.selected-container {
+  display: flex;
+  justify-content: space-between;
+  margin-left: 35%;
+  margin-right:  35%;
+  align-items: center
+}