Branches - Angele and Erika

.gitignore

@@ -19,3 +19,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# skipping preflight check and setting port to 3001
+.env

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.css

@@ -1,5 +1,6 @@
 .App {
   text-align: center;
+  font-family: Arial, Helvetica, sans-serif;
 }
 
 .App-logo {
@@ -8,21 +9,72 @@
 }
 
 .App-header {
-  background-color: #222;
-  height: 150px;
+  display: grid;
+  grid-template-columns: 1fr 10fr;
+  background-color: white;
+  height: auto;
   padding: 20px;
   color: white;
 }
 
+.App-header nav ul {
+  display: flex;
+  padding-top: 60px;
+  list-style: none;
+}
+
+.App-header nav li {
+  display: inline;
+  padding: 14px 20px;
+}
+
+.App-header nav li:hover {
+  background-color: #00B295;
+  color: white;
+}
+
+.App-header nav li:hover a {
+  color: inherit;
+}
+
+
+.App-header nav li a {
+  color: darkgreen;
+  font-size: 1.5em;
+  text-decoration: none;
+}
+
 .App-title {
   font-size: 1.5em;
+  color: red;
 }
 
 .App-intro {
   font-size: large;
 }
 
+.navbar {
+  background-color: white;
+}
+
+.ul {
+  float: left;
+}
+
+.li {
+  list-style: none;
+  display: inline;
+}
+
+.nav-item {
+  padding: 1em;
+}
+
 @keyframes App-logo-spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+.App-header-logo {
+  width: 200px;
+}

src/App.js

@@ -1,21 +1,186 @@
 import React, { Component } from 'react';
+import axios from 'axios';
 import logo from './logo.svg';
+import 'bootstrap/dist/css/bootstrap.min.css';
 import './App.css';
+import Home from './components/Home';
+import Customers from './components/Customers';
+import Search from './components/Search';
+import Library from './components/Library';
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link
+} from "react-router-dom";
 
 class App extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      libraryMovies: [],
+      libraryCustomers: [],
+      selectedCustomer: undefined,
+      selectedMovie: undefined,
+      successMessage: '',
+      error: '',
+    };
+  }
+
+  componentDidMount () {
+    axios.get('http://localhost:3000/movies')
+    .then((response) => {
+      this.setState({
+        libraryMovies: response.data
+      })
+    })
+    .catch((error) => {
+      this.setState({
+        error: error
+      })
+    })
+
+    axios.get('http://localhost:3000/customers')
+    .then((response) => {
+      this.setState({
+        libraryCustomers: response.data
+      })
+    })
+    .catch((error) => {
+      this.setState({
+        error: error
+      })
+    })
+  }
+
+
+  selectMovie = (movie) => {
+    const { libraryMovies } = this.state;
+
+    const selectedMovie = libraryMovies.find((theMovie) => {
+      return theMovie.id === movie.id;
+    })
+
+    this.setState({
+      selectedMovie,
+    })
+  }
+
+  selectCustomer = (customerID) => {
+    const { libraryCustomers } = this.state;
+
+    const selectedCustomer = libraryCustomers.find((customer) => {
+      return customer.id === customerID;
+    })
+
+    this.setState({
+      selectedCustomer,
+    })
+  }
+
+  addToLibrary = (movie) => {
+    console.log('trying to add movie to library')
+    const libraryMovies = this.state.libraryMovies;
+    libraryMovies.push(movie);
+    this.setState({
+      libraryMovies,
+    })
+  }
+
+  callethUponThyAxios = () => {
+
+    console.log('customer id', this.state.selectedCustomer.id)
+    console.log('movie title', this.state.selectedMovie.title)
+
+    let dueDate = new Date();
+    dueDate.setDate(dueDate.getDate() + 7);
+    console.log('dueDate', dueDate)
+
+    axios.post(`http://localhost:3000/rentals/${this.state.selectedMovie.title}/check-out/`, {
+      customer_id: this.state.selectedCustomer.id,
+      due_date: dueDate,
+
+    })
+    .then((response) => {
+      console.log('Successfully checked out movie!', response)
+      this.setState({
+        selectedCustomer: "",
+        selectedMovie: "",
+        successMessage: "Successfully Checked Out!",
+      }
+      )
+    })
+    .catch((error) => {
+      console.log('There was an error, unable to checkout movie', error)
+    })
+  }
+
   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 className="App">
+          <header className="App-header">
+
+
+            <img className="App-header-logo" src="https://media.giphy.com/media/dPXxkfC3UKvbG/giphy.gif" />
+          <nav>
+            <ul>
+              <li>
+                <Link to="/Home">Home</Link>
+              </li>
+              <li className="nav-item">
+                <Link to="/library">Library</Link>
+              </li>
+              <li className="nav-item">
+                <Link to="/search">Search</Link>
+              </li>
+              <li className="nav-item">
+                <Link to="/customers">Customers</Link>
+              </li>
+            </ul>
+          </nav>
+          </header>
+        </div>
+
+        <div>
+          {this.state.selectedMovie ? <p>Selected Movie: {this.state.selectedMovie.title} </p> : "" }
+        </div>
+        <div>
+        {this.state.selectedCustomer ? <p>Selected Customer: {this.state.selectedCustomer.name} </p> : "" }
+        </div>
+        { this.state.selectedMovie && this.state.selectedCustomer ? 
+        <button onClick={this.callethUponThyAxios}>
+          Checkout
+        </button>
+        : ""
+        }
+
+      <Switch>
+        <Route path="/Home">
+          <Home />
+        </Route>
+        <Route path="/library">
+          <Library 
+            movies={this.state.libraryMovies} 
+            buttonText="Select for Checkout"
+            onMovieButtonClick={this.selectMovie}
+          />
+        </Route>
+        <Route path="/search">
+          <Search 
+            addMovie={this.addToLibrary}/>
+        </Route>
+        <Route path="/customers">
+          <Customers
+            customers={this.state.libraryCustomers}
+            selectCustomer={this.selectCustomer}
+          />
+        </Route>
+      </Switch>
+    </Router>
+    )}
   }
-}
 
 export default App;

src/components/Customer.css

@@ -0,0 +1,27 @@
+.customer-card {
+    display: inline-block;
+    color: white;
+    padding: .5em;
+    text-align:  center;
+    margin: 2em;
+  }
+
+.customer-card-header {
+  color: white;
+  background-color: #00B295;
+  text-align:  center;
+} 
+
+.customer-card-body {
+  color: darkgreen;
+  background-color: #FEFDFF;
+  padding: .5em;
+  text-align:  center;
+}
+
+.btn {
+  color: white;
+  background-color: #008C75;
+
+}
+

src/components/Customer.js

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import './Customer.css'
+
+const Customer = (props) => {
+
+  const { name, address, city, state, postalCode, phone, credit, buttonText, onButtonClick } = props;
+
+  return (
+    <div className="card customer-card">
+      <section className="card customer-card-header">
+        {name}
+      </section>
+      <section className="customer-card-body">
+        <p>{address}</p>
+        <p>{city} {state} {postalCode}</p>
+        <p>{phone}</p>
+        <p>{credit}</p>
+      </section>
+
+      <button className="btn btn-primary" onClick={onButtonClick} >
+        {buttonText}
+      </button>
+    </div>
+  )
+}
+export default Customer;

src/components/Customers.css

@@ -0,0 +1,6 @@
+.card-list {
+  display: inline-block;
+  width: 100%;
+  margin: 0;
+}
+