Leaves - Samantha & Nicky

package.json

@@ -3,14 +3,33 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.19.0",
+    "bootstrap": "^4.4.1",
+    "node-sass": "^4.13.0",
     "react": "^16.8.6",
+    "react-bootstrap": "^1.0.0-beta.16",
     "react-dom": "^16.8.6",
+    "react-flash-message": "^1.0.2",
+    "react-router": "^5.1.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,28 +1,45 @@
-.App {
+.app {
   text-align: center;
+  font-family: 'Courier New', Courier, monospace;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+.app-nav {
+  background-color: lightblue;
+  display: flex;
+  font-weight: bold;
+  justify-content: space-around;
+  border-style: ridge;
 }
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
+.app-header {
+  /* font-weight: bold; */
+  grid-area: header;
+  color: lightgoldenrodyellow;
+  background-color: grey;
+  padding: 15px;
 }
 
-.App-title {
-  font-size: 1.5em;
+.rental-details {
+  background-color: lightgoldenrodyellow;
+  font-weight: bold;
+  border-style: double;
+  border-color: lightslategray;
 }
 
-.App-intro {
-  font-size: large;
+.success{
+  color: white;
+  background-color: green;
+  font-size: 1.5rem;
+  text-align: center
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.error{
+  color: white;
+  background-color: red;
+  font-size: 1.5rem;
+  text-align: center
 }
+
+/* .search-results {
+  margin-top: 20%;
+} */

src/App.js

@@ -1,21 +1,202 @@
+import axios from 'axios';
 import React, { Component } from 'react';
-import logo from './logo.svg';
+import CustomerCollection from './components/CustomerCollection';
+import SearchBar from './components/SearchBar';
+import MovieList from './components/MovieList';
+import RentalDetails from './components/RentalDetails';
+import Homepage from './components/Homepage';
+import Alert from 'react-bootstrap/Alert';
+
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link
+} from "react-router-dom";
+
 import './App.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 class App extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      movieCollection: [],
+      customerCollection: [],
+      currentMovie: '',
+      currentCustomer: '',
+      searchMovie: undefined,
+      movieResults: [],
+      rentals: [],
+      alertText: '',
+      alertVariant: '',
+    };
+  }
+
+  componentDidMount() {
+    axios.get('http://localhost:3000/customers')
+      .then((response) => {
+        this.setState({ customerCollection: response.data });
+      })
+      .catch((error) => {
+        this.setState({ error: error.message });
+      });
+  }
+
+  selectMovie = (movieList, movieId) => {
+
+    const currentMovie = movieList.find((movie) => {
+      return movie.external_id === movieId;
+    });
+
+    this.setState({ currentMovie, });
+  }
+
+  selectCustomer = (customerId) => {
+    const { customerCollection } = this.state;
+
+    const currentCustomer = customerCollection.find((customer) => {
+      return customer.id === customerId;
+    });
+    this.setState({ currentCustomer, });
+  }
+
+  filterMovies = (searchMovie) => {
+    this.setState({
+      searchMovie,
+    });
+
+    if (searchMovie !== ''){
+        axios.get(`http://localhost:3000/movies?query=${searchMovie}`)
+
+      .then((response) => {
+        if (searchMovie === this.state.searchMovie) {
+          this.setState({ movieResults: response.data });
+        }
+      })
+      .catch((error) => {
+        this.setState({ error: error.message });
+      });
+
+    } else {
+      this.setState({ movieResults: [] })
+    }
+  }
+
+  addRental = (movie, customer) => {
+    let tenDaysLater = new Date(
+      new Date().getTime() + 10 * 24 * 60 * 60 * 1000
+    );
+
+    const queryParams = {
+      customer_id: customer.id,
+      due_date: tenDaysLater
+    };
+
+    axios
+      .post(
+        `http://localhost:3000/rentals/${movie.title}/check-out`,
+        queryParams
+      )
+      .then(response => {
+        console.log("Success!")
+        this.setState({ 
+          alertText: "Rental successfully created!",
+          alertVariant: "success" 
+        });
+      })
+      .catch(error => {
+        console.log("FAILED!")
+        this.setState({ 
+          error: error.message,
+          alertText: `An error occurred: ${error.message}`,
+          alertVariant: "danger" 
+        });
+      });
+
+    const newState = { currentCustomer: "", currentMovie: "" };
+    this.setState(newState);
+  };
+
   render() {
+    const videoAlert = () => {
+      return(
+        <Alert 
+          variant={this.state.alertVariant}
+          onClose={() => this.setState({alertText: undefined, alertVariant: undefined})} 
+          dismissible
+        > 
+          {this.state.alertText} 
+        </Alert>
+      )
+    }
+    // Returns the entire state
+    // console.log(this.state);
     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>
+
+    <main className="app">
+      <header className="app-header">
+        <h1>Cool Video Store</h1>
+      </header>
+
+      <section className="rental-details">
+      <RentalDetails 
+        currentCustomer={this.state.currentCustomer}
+        currentMovie={this.state.currentMovie}
+        addRentalCallback={this.addRental}
+        />
+      </section>
+
+      <Router>
+      {this.state.alertText ? videoAlert() : "" }
+        <div>
+          <section>
+          <nav className="app-nav">
+              <h5><strong><Link to="/">Home</Link></strong></h5>
+              <h5><strong><Link to="/customers">Customers</Link></strong></h5>
+              <h5><strong><Link to="/library">Library</Link></strong></h5>
+              <h5><strong><Link to="/search">Search</Link></strong></h5>
+          </nav>
+          </section>
+
+        <div className="main-routes">
+
+        <Switch>
+
+        <Route
+          path="/search">
+          <SearchBar
+            movies={this.state.movieResults}
+            searchChangeCallback={this.filterMovies}
+            searchMovie={this.state.searchMovie}
+          />
+        </Route>
+        <Route 
+          path="/library">           
+          <MovieList 
+
+            selectMovieCallback={this.selectMovie}
+          />
+        </Route>
+        <Route 
+          path="/customers">
+          <CustomerCollection
+            customers={this.state.customerCollection}
+            selectCustomerCallback={this.selectCustomer}
+          />
+        </Route>
+        <Route
+          path="/">
+            <Homepage/>
+        </Route>
+        </Switch>
+        </div>
       </div>
-    );
-  }
+    </Router>
+    </main>
+  );
+}
 }
 
 export default App;

src/components/Customer.css

@@ -0,0 +1,8 @@
+.customer--header {
+  margin-top: 2%;
+  margin-bottom: 10%;
+  margin-left: 10%;
+  margin-right:10%;
+  border: double;
+  border-radius: 10%;
+}

src/components/Customer.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import 'bootstrap/dist/css/bootstrap.min.css';
+import '../components/Customer.css';
+
+const Customer = (props) => {
+  const { id, name, registered_at, address, city, state, postal_code, phone, account_credit, selectCustomerCallback } = props;
+
+  return(
+    <div className="customer-card">
+
+      <section className="customer--header">
+        <p><strong>{name}</strong></p>
+        <p>{registered_at}</p>
+        <p>{address}</p>
+        <p>{city}</p>
+        <p>{state}</p>
+        <p>{postal_code}</p>
+        <p>{phone}</p>
+        {/* <p>{account_credit}</p> */}
+
+        <button
+          className="btn btn-primary customer"
+          onClick={() => {selectCustomerCallback(id)}}>
+            Select Customer
+        </button>
+      </section>
+    </div>
+  );
+}
+
+Customer.propTypes = {
+  id: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  registered_at: PropTypes.string,
+  address: PropTypes.string,
+  city: PropTypes.string,
+  state: PropTypes.string,
+  postal_code: PropTypes.string,
+  phone: PropTypes.string,
+  account_credit: PropTypes.number,
+  selectCustomerCallback: PropTypes.func,
+}
+
+export default Customer;

src/components/CustomerCollection.css

@@ -0,0 +1,6 @@
+.card-group {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  width: 100%;
+  text-align: center;
+}