Dani and Mariya - Leaves

package.json

@@ -3,14 +3,30 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.19.0",
+    "bootstrap": "^4.4.1",
     "react": "^16.8.6",
+    "react-bootstrap": "^1.0.0-beta.16",
     "react-dom": "^16.8.6",
+    "react-router-dom": "^5.1.2",
     "react-scripts": "3.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

src/App.js

@@ -1,19 +1,13 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
+import Store from './components/Store.js'
+import 'bootstrap/dist/css/bootstrap.min.css';
+
 
 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>
+      <Store />
     );
   }
 }

src/components/Checkout.css

@@ -0,0 +1,8 @@
+h1 {
+  text-align: center;
+  font-family: 'Cinzel', serif;
+}
+
+.store_name {
+  padding: 15px;
+}

src/components/Checkout.js

@@ -0,0 +1,78 @@
+import React, { Component } from 'react'
+import axios from 'axios';
+import './Checkout.css';
+import propTypes from 'prop-types';
+
+export class Checkout extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      error: ''
+    }
+  };
+
+  checkOut = () => {
+
+    const title = this.props.selectedMovie.title;
+    const customer_id = this.props.selectedCustomer.id;
+    const due_date = "2020-02-03";
+    const checkoutURL = `http://localhost:3000/rentals/${title}/check-out`;
+
+    axios.post(checkoutURL, {
+      customer_id: customer_id, 
+      due_date: due_date }).then(
+        this.props.addRentalCallback()
+    ).catch((error) => {
+      this.setState({ error: error.message });    
+    });
+  }
+
+  render() {
+
+    const showCustomer = 
+      <p> Selected Customer: { this.props.selectedCustomer.name } </p>
+
+
+    const showMovie = 
+      <p> Selected Movies: { this.props.selectedMovie.title} </p>
+
+    const showButton = 
+        <input onClick ={this.checkOut} type="submit" value="Checkout"/>
+
+    if ( this.props.checkoutMovie + this.props.checkoutCustomer === 2) { 
+      return ( 
+      <div class="alert alert-success" role="alert">
+        <div>
+          <h2>You are ready for checkout!</h2>
+          { showCustomer } 
+          { showMovie }
+          { showButton }  
+        </div>  
+      </div>   
+      )} 
+    else if ( this.props.checkoutMovie + this.props.checkoutCustomer === 1 ) {
+      return ( 
+        <div class="alert alert-warning" role="alert">
+          <h2>Please select a movie and a customer to complete checkout. </h2>
+          { showCustomer } 
+          { showMovie }        
+        </div>  ) } 
+    else { 
+      return (
+        <header className="store_name"> 
+          <h1> Welcome to Dani's and Mariya's Video Store. </h1>      
+        </header>
+      ) 
+    }
+  }
+};
+
+Checkout.propTypes = {
+  checkoutMovie: propTypes.number.isRequired,
+  checkoutCustomer: propTypes.number.isRequired,
+  selectedCustomer: propTypes.object.isRequired,
+  selectedMovie: propTypes.object.isRequired
+}
+
+export default Checkout

src/components/Customer.css

@@ -0,0 +1,27 @@
+.customer {
+  background-color: lightsteelblue;
+
+  padding: 1em 0;
+  margin: 0.5rem;
+
+  max-height: fit-content;
+  flex-basis: 18%;
+
+  border-radius: 20px;
+
+  display: flex;
+  flex-direction: column;
+  align-content: center
+  ;
+}
+
+.customer h1 { 
+  text-align: center;  
+  font-family: Georgia, 'Times New Roman', Times, serif;
+}
+
+.customer p {
+  text-align: center;
+  font-size: small;
+  font-family: monospace;
+}

src/components/Customer.js

@@ -0,0 +1,59 @@
+import React, { Component } from 'react'
+import './Customer.css';
+
+export class Customer extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      selectedCustomer: {},
+    };
+  }
+
+  onSelect = () => {
+    const selectedCust = this.props.customer
+    this.setState({
+      selectedCustomer: selectedCust,
+    });
+
+    this.props.selectedCust(selectedCust)
+  }
+
+  unSelect = () => {
+
+    this.setState({
+      selectedCustomer: {},
+    });
+
+    this.props.unSelect()
+  }
+
+  showButton = () => {
+    if (this.state.selectedCustomer === this.props.customer) {
+      return <input onClick ={this.unSelect} type="submit" value="Select/Unselect" />
+    } else {
+      return <input onClick ={this.onSelect} type="submit" value="Select/Unselect" />
+    }
+  }
+
+  render() {
+    const {id, name, address, city, state, postal_code, phone, 
+      account_credit, movies_checked_out_count, key  } = this.props.customer
+    return (
+      <tr key={key}>
+          <td>{id}</td>
+          <td>{name}</td>
+          <td>{address}</td>
+          <td>{city}</td>
+          <td>{state}</td>
+          <td>{postal_code}</td>
+          <td>{phone}</td>
+          <td>{account_credit}</td>
+          <td>{movies_checked_out_count}</td>
+          <td>{this.showButton()}</td>
+      </tr>
+    )
+  }
+}
+
+export default Customer

src/components/Customers.css

@@ -0,0 +1,6 @@
+.customers {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+  background-color: white;
+}

src/components/Customers.js

@@ -0,0 +1,78 @@
+import React, { Component } from 'react';
+import axios from 'axios';
+import Customer from './Customer.js';
+import './Customers.css';
+import { Table } from 'react-bootstrap';
+
+export class Customers extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      customers: [],
+      selectedCustomer: {},
+      error: '',
+    };
+  }
+
+  selectCustomer = (selectedCust) => {
+    this.setState({
+      selectedCustomer: selectedCust
+    });  
+
+    this.props.selectedCust(selectedCust)
+  }
+
+  unSelect = () => {
+    this.setState({
+      selectedCustomer: {}
+    });  
+    this.props.unSelect()
+  }
+
+  componentDidMount() {
+    const customers = 'http://localhost:3000/customers'
+    axios.get(customers).then((response) => {
+      this.setState({
+        customers: response.data,
+      });
+    })
+    .catch((error) => {
+      this.setState({ error: error.message });    
+    });
+  }
+
+  render() {
+
+    const customerInfo = this.state.customers.map((customer, i) => {
+      return (
+        <Customer key={i} customer={customer} selectedCust={this.selectCustomer} unSelect={this.unSelect}/>
+      )
+    });
+
+    return (
+      <Table striped bordered hieght='300'>
+        <thead className="thead-dark">
+          <tr>
+            <th>ID</th>
+            <th>Name</th>
+            <th>Address</th>
+            <th>City</th>
+            <th>State</th>
+            <th>Postal Code</th>
+            <th>Phone</th>
+            <th>Account Credit</th>
+            <th>Movies Checked Out Count</th>
+            <th>Select Customer</th>
+          </tr>
+        </thead>
+        <tbody>
+        {customerInfo}
+
+        </tbody>
+      </Table>
+    )
+  }
+}
+
+export default Customers