Chantelle & Anibel (Chanibel) - Video Store Consumer - Edges

package.json

@@ -3,14 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.18.0",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
-    "react-scripts": "1.1.4"
+    "react-router-dom": "^4.3.1",
+    "react-scripts": "1.1.4",
+    "surge": "^0.20.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}

src/App.css

@@ -1,28 +1,134 @@
 .App {
   text-align: center;
+  background-color: #595959;
+  font-family: sans-serif;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
 }
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
+button:hover {
+  color: magenta;
+  background: #CFCFE5;
+  font-weight: bold;
 }
 
-.App-title {
-  font-size: 1.5em;
+button {
+  background-color: #cfcfcf;
+  font-size: 1.25rem;
 }
 
-.App-intro {
-  font-size: large;
+a {
+  text-decoration: none;
+  color: black;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.top-bar {
+  border-bottom: 1px solid black;
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+}
+
+.nav-links {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  justify-items: center;
+}
+
+.rentalDisplay {
+  display: flex;
+  justify-content: space-around;
+}
+
+.nav-links li {
+  max-width: 80px;
+}
+
+.nav-links li, .rentalDisplay div{
+  color: #000;
+  text-decoration: none;
+  background-color: #e9e9e9;
+  align-items: center;
+  font-size: 12px;
+  border: .5em solid #7bf96c;
+  border-radius: 1em;
+  flex-direction: column;
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+}
+
+.rentalDisplay div button{
+  width: 100%;
+  min-height: 100%;
+  border-radius: 0.75em;
+  font: 400 11px system-ui;
+}
+
+.rentalDisplay div:nth-child(3) {
+  width: 4rem;
+}
+
+.rentalDisplay div {
+
+  width: 12em;
+  margin: 0 .5em;
+}
+
+.navbar__icon {
+  width: 4rem;
+  height: 4rem;
+}
+
+p.rental-selection__label {
+  margin: 0;
+}
+
+.rental-selection__label {
+  border-bottom: 2px solid #595959;
+  border-top-left-radius: .8em;
+  border-top-right-radius: .8em;
+  background-color: #cfcfcf;
+  padding: .3em;
+  font-size: 12px;
+}
+
+.nav-links li p {
+  margin: 0;
+}
+
+.status-bar div {
+  background-color: #7bf96c;
+  padding: 0.25rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.status-bar button{
+  background-color: inherit;
+  border: none;
+  cursor: pointer;
+  font: 400 11px system-ui;
+}
+
+label {
+  padding: 0.25rem;
+}
+
+p.rental-selection__name {
+  margin: 0;
+  font-size: 20px;
+  padding: .3em;
+  overflow: hidden;
+  max-height: 2.5em;
+}
+
+.search-bar-form {
+  border-bottom: 1px solid black;
+  padding-bottom: 1.5rem;
 }

src/App.js

@@ -1,21 +1,161 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
+import { HashRouter as Router, Route, Link } from 'react-router-dom';
+import Customers from './Components/Customers';
+import Library from './Components/Library';
+import Search from './Components/Search';
+import StatusBar from './Components/StatusBar';
+import axios from 'axios';
+
 
 class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = this.resetState()
+  }
+
+  resetState = () => {
+    return {
+      selectedCustomer: undefined,
+      selectedMovie: undefined
+    }
+  };
+
+  url = "https://chanibel-video-store-api.herokuapp.com/";
+
+  selectMovie = (movie) => {
+    this.setState({
+      selectedMovie: movie
+    });
+    this.setStatusMessage(`Selected movie ${movie.title}.`);
+    window.scrollTo(0, 0);
+  };
+
+  selectCustomer = (customer) => {
+
+    this.setState({
+      selectedCustomer: customer
+    });
+    this.setStatusMessage(`Selected customer ${customer.name}.`);
+    window.scrollTo(0, 0);
+  };
+
+  addMovie = (movie) => {
+
+    const addMovieURL = this.url + 'movies';
+
+    axios.post(addMovieURL, {id: movie.external_id})
+    .then(() => {
+      this.setStatusMessage(`Successfully added ${movie.title} to rental library`);
+    })
+    .catch((error) => {
+      this.setStatusMessage(`${error}. Cound not add ${movie.title} to rental library.`);
+    })
+    window.scrollTo(0, 0);
+  };
+
+  setStatusMessage = (message) => {
+    this.setState({status: message});
+  }
+
+  clearStatusMessage = () => {
+    this.setState({status: undefined});
+  }
+
+  checkoutMovie = () => {
+    if (this.state.selectedMovie && this.state.selectedCustomer) {
+      const rentalUrl = this.state.selectedMovie ?
+      `${this.url}rentals/${this.state.selectedMovie.title}/check-out?` :
+      `${this.url}rentals/:title/check-out`;
+
+      const customerId = this.state.selectedCustomer ?
+      this.state.selectedCustomer.id : 0;
+
+      const dueDate = new Date();
+      dueDate.setDate(dueDate.getDate() + 7);
+
+      const movie = this.state.selectedMovie.title;
+      const customer = this.state.selectedCustomer.name;
+
+      axios.post(rentalUrl, {customer_id: customerId, due_date: dueDate})
+      .then(() => {
+        this.setStatusMessage(`Successfully checked out ${movie} to ${customer}`);
+        this.setState(
+          this.resetState(),
+        )
+      })
+      .catch((error) => {
+        this.setStatusMessage(`Unable to check out ${movie} to ${customer}. ${error}`);
+      })
+    } else {
+      this.setStatusMessage(`Need to select a movie and customer.`);
+    }
+  };
+
   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>
-    );
-  }
-}
+        <Router>
+          <div>
+            <div className='top-bar'>
+              <ul className='nav-links'>
+                <li>
+                  <Link to="/search"><img className="navbar__icon" alt="maginifying glass icon" src=
+                    "https://adagold.github.io/video-store-consumer/static/media/magnifying-glass-search.6c42d201.svg"/>
+                  <p>Search</p></Link>
+                </li>
+                <li>
+
+                  <Link to="/library"><img className="navbar__icon" alt="film reel icon"
+                    src="https://adagold.github.io/video-store-consumer/static/media/film-reel.6794d2f3.svg"/>
+                  <p>Library</p></Link>
+                </li>
+                <li>
+                  <Link to="/customers"><img className="navbar__icon" alt="person icon"
+                    src="https://adagold.github.io/video-store-consumer/static/media/people.2aa64ca8.svg"/>
+                  <p>Customers</p></Link>
+                </li>
+              </ul>
+              <section className="rentalDisplay">
+                <div>
+                  <p className="rental-selection__label">Selected Movie</p>
+                  {this.state.selectedMovie &&
+                    <p className="rental-selection__name">{this.state.selectedMovie.title}</p>}
+                </div>
+                <div>
+                  <p className="rental-selection__label">Selected Customer</p>
+                  {this.state.selectedCustomer &&
+                    <p className="rental-selection__name">{this.state.selectedCustomer.name}</p>}
+                </div>
+                <div>
+                  <button onClick={this.checkoutMovie}>Check Out New Rental</button>
+                </div>
+              </section>
+            </div>
+            <div className="status-bar">
+              {this.state.status &&
+                <StatusBar message={this.state.status} clearMessageCallback={this.clearStatusMessage} />}
+                </div>
+                <Route path="/search"
+                  render={() => <Search baseUrl={this.url}
+                  addMovieCallback={this.addMovie}
+                  setStatusMessageCallback={this.setStatusMessage} />}
+                  />
+                <Route
+                  path="/library"
+                  render={() => <Library selectMovieCallback={this.selectMovie}
+                  baseUrl={this.url} setStatusMessageCallback={this.setStatusMessage}/>}
+                  />
+                <Route
+                  path="/customers"
+                  render={() => <Customers selectCustomerCallback={this.selectCustomer}
+                  baseUrl={this.url} setStatusMessageCallback={this.setStatusMessage}/>}
+                  />
+              </div>
+            </Router>
+          </div>
+        );
+      }
+    }
 
-export default App;
+    export default App;

src/Components/Customer.css

@@ -0,0 +1,46 @@
+li {
+  list-style: none;
+}
+
+.customer.item {
+  display: grid;
+      grid-template-columns: 4fr 1fr
+}
+
+.item {
+    border: 1px solid #000;
+    border-radius: 1em;
+    overflow: hidden;
+    margin: 2em;
+    background-color: #e9e9e9;
+}
+
+.item__details {
+    padding: 0 1.5em;
+    border-left: 2px solid #595959;
+    border-right: 2px solid #595959;
+}
+
+h2 {
+    display: block;
+    font-size: 1.5rem;
+    margin-block-start: 0.83em;
+    margin-block-end: 0.83em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: bold;
+}
+
+p {
+    display: block;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-size: 1rem;
+}
+
+/* .item__button {
+    background-color: #cfcfcf;
+    font-size: 1rem;
+} */