Leaves - Hallie / Janice

package.json

@@ -3,14 +3,32 @@
   "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-delayed": "^0.2.3",
     "react-dom": "^16.8.6",
+    "react-paginate": "^6.3.2",
+    "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.css

@@ -1,21 +1,27 @@
+@import url('https://fonts.googleapis.com/css?family=Lakki+Reddy&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Bitter&display=swap');
+
 .App {
   text-align: center;
+  padding-bottom: 2.5rem;
 }
 
 .App-logo {
   animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+  height: 150px;
+  border-radius: 50%;
 }
 
 .App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
+  background-color: rgb(228, 98, 120);
+  height: 225px;
+  padding: 50px;
   color: white;
+  font-family: 'Lakki Reddy', cursive;
 }
 
 .App-title {
-  font-size: 1.5em;
+  font-size: 4em;
 }
 
 .App-intro {
@@ -26,3 +32,47 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+.shelves {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+}
+
+ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background-color: #333;
+}
+
+li {
+  float: left;
+}
+
+li a {
+  display: block;
+  color: white;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+  font-family: 'Bitter', serif;
+}
+
+/* Change the link color to #111 (black) on hover */
+li a:hover {
+  background-color: #111;
+  text-decoration: none;
+  color: darkgrey;
+}
+
+footer {
+  position: absolute;
+  margin-left: 10px;
+  color: #444444;
+  bottom: 0;
+  width: 100%;
+  height: 2.5rem;            /* Footer height */
+}

src/App.js

@@ -1,19 +1,125 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+import ape from './ape.jpeg';
+import shelves from './videoStoreShelves.jpg'
+import axios from 'axios';
 import './App.css';
+import Search from './components/Search';
+import Library from './components/Library';
+import Customers from './components/Customers';
+import Selection from './components/Selection';
+import CustDetail from './components/CustDetail';
+import Feedback from './components/Feedback';
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link
+} from "react-router-dom";
 
 class App extends Component {
+  constructor(props) {
+    super();
+
+    this.state = {
+      currentMovie: '',
+      currentCustomer: '',
+      detailCustomer: '',
+      customerPage: 1,
+      baseUrl: 'http://localhost:3000/',
+      message: '',
+    }
+  }
+
+  onSelect = (item, value) => {
+    this.setState({
+      [item]: value,
+    });
+  }
+
+  onClickAddRental = (movie, customer) => {
+    const today = new Date()
+
+    function addDays(date, days) {
+      let result = new Date(date);
+      result.setDate(result.getDate() + days);
+      return result;
+    }
+
+    const rental_due = addDays(today, 7)
+    const rental = {"customer_id": customer.id,
+    "title": movie.title,
+    "due_date": rental_due }
+
+    axios.post(`${this.state.baseUrl}rentals/${movie.title}/check-out`, rental)
+    .then((response) => {
+      console.log(response);
+      this.setState({
+        currentMovie: '',
+        currentCustomer: '',
+        message: 'Checkout successful!',
+      });
+    })
+    .catch((error) => {
+        console.log(error);
+    });
+}
+  onClickReturnRental = (movie, customer) => {
+    const rental = {
+    "title": movie.title,
+    "customer_id": customer.id
+    }
+    axios.post(`${this.state.baseUrl}rentals/${movie.title}/return`, (rental))
+    .then((response) => {
+      console.log(response);
+      this.setState({
+        currentMovie: '',
+        currentCustomer: '',
+        message: 'Return successful!'
+      });
+    })
+    .catch((error) => {
+        console.log(error);
+    });
+  }
+
   render() {
+    const BASE_URL = this.state.baseUrl;
+    const selectBox = (this.state.currentCustomer || this.state.currentMovie) ? <Selection customer={this.state.currentCustomer} movie={this.state.currentMovie} addRentalCallback={this.onClickAddRental} returnRentalCallback={this.onClickReturnRental}/> : <Feedback message={this.state.message} background='pink'/>
+
     return (
+      <main>
+      <Router>
       <div className="App">
+      <nav>
         <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
+           {selectBox}
+          <img src={ape} className="App-logo" alt="logo" />
+          <h1 className="App-title">Apey Eye Video Store</h1>
         </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
+          <ul>
+            <li><Link to="/search">Search</Link></li>
+            <li><Link to="/library">Library</Link></li>
+            <li><Link to="/customers">Customers</Link></li>
+          </ul>
+        </nav>
+        <Switch>
+          <Route path="/search">
+            <Search url={`${BASE_URL}movies`} />
+          </Route>
+          <Route path="/library">
+            <Library url={`${BASE_URL}movies`} onSelectCallback={this.onSelect} />
+          </Route>
+          <Route path="/customers">
+        { this.state.detailCustomer ? <CustDetail url={`${BASE_URL}rentals/cust_rentals`} customer={this.state.detailCustomer} onSelectCallback={this.onSelect}/> : <Customers url={`${BASE_URL}customers`} onSelectCallback={this.onSelect}/> }
+          </Route>
+          <Route path="">
+            <img src={shelves} alt="shelves background" className="shelves"/>
+          </Route>
+        </Switch>
       </div>
+      </Router>
+      <footer>&copy; 2019 Janice Huang and Hallie Johnson</footer>
+      </main>
     );
   }
 }

src/components/CustDetail.css

@@ -0,0 +1,18 @@
+.cust-detail__table {
+  margin-left: 5%;
+  margin-right: 5%;
+}
+
+.cust-detail__info span {
+  font-weight: bold;
+}
+
+.cust-detail__table-overdue {
+  background-color: lightgoldenrodyellow;
+}
+
+h4 {
+  text-align: left;
+  margin-left: 5%;
+  margin-bottom: 10px;
+}

src/components/CustDetail.js

@@ -0,0 +1,101 @@
+import React, {Component} from 'react';
+import axios from 'axios';
+import './CustDetail.css';
+import Table from 'react-bootstrap/Table';
+import Button from 'react-bootstrap/Button';
+
+// future improvements: enable check-in from this page,
+// highlight whole row of overdue instead of just that box
+
+class CustDetail extends Component {
+  constructor(props) {
+    super();
+    this.state = {
+      rentals: [],
+      error: '',
+    };
+  }
+
+  componentDidMount() {
+    axios.get(`${this.props.url}`, {
+      params: {
+        "customer_id": this.props.customer.id
+      }})
+      .then((response) => {
+        this.setState({ rentals: response.data });
+        console.log(this.state.rentals)
+        console.log(`total rentals ${this.state.rentals.length}`)
+      })
+      .catch((error) => {
+        console.log(error)
+        this.setState({ error: error });
+      });
+  }
+
+  componentWillUnmount() {
+      this.props.onSelectCallback('detailCustomer', '');
+    }
+
+  render() {
+    const today = new Date()
+    const regDate = new Date(this.props.customer.registered_at).toUTCString().slice(0,16)
+  const getRentals = this.state.rentals.map((rental, i) => {
+    let dueClass = ''
+      if ((new Date(rental.due_date)) < today) {
+        dueClass='cust-detail__table-overdue'
+      }
+
+    return (
+      <tr key={i}>
+      <td>{i+1}</td>
+      <td>{rental.title}</td>
+      <td>{new Date(rental.checkout_date).toUTCString().slice(0,16)}</td>
+      <td className={dueClass}>{new Date(rental.due_date).toUTCString().slice(0,16)}</td>
+    </tr>
+    )
+  })
+
+  return (
+    <div >
+      <section className="cust-detail__info">
+        <h3>{this.props.customer.name}</h3>
+        <p><span>Address:</span>
+          <br />{this.props.customer.address}
+          <br />{this.props.customer.city}, {this.props.customer.state} {this.props.customer.postal_code}</p>
+        <p><span>Phone: </span>
+          <br />{this.props.customer.phone}</p>
+
+        <p><span>Registered:</span>
+          <br />{regDate}
+        </p>
+      </section>
+      <h4>Checked-Out Movies:</h4>
+      {(this.state.rentals.length > 0) ? (<section className="cust-detail__table">
+        <Table striped bordered hover>
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>Movie Title</th>
+              <th>Checkout Date</th>
+              <th>Due Date</th>
+            </tr>
+          </thead>
+          <tbody>
+            {getRentals}
+          </tbody>
+        </Table>
+      </section>) : ''}
+      <section className="cust-detail__back">
+        <p><Button variant="primary"
+          onClick={() => this.props.onSelectCallback('detailCustomer', '')}
+        >
+        Back
+        </Button>
+        </p>
+      </section>
+    </div>
+  )
+  }
+}
+
+export default CustDetail;