Leaves - Emily and Raisah

package.json

@@ -3,14 +3,32 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "axios": "^0.19.0",
+    "bootstrap": "^4.4.1",
+    "react": "^16.12.0",
+    "react-bootstrap": "^1.0.0-beta.16",
+    "react-bootstrap-sidebar": "0.0.1",
+    "react-dom": "^16.12.0",
+    "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,55 @@
 .App {
   text-align: center;
+  background-color: rgb(58, 41, 58);
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+.sidenav {
+  height: 100%; 
+  width: 160px; 
+  position: fixed; 
+  z-index: 1; 
+  top: 0; 
+  left: 0;
+  background-color: rgb(99, 116, 192);
+  overflow-x: hidden; 
+  padding-top: 20px;
 }
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
+.sidenav a {
+  padding: 6px 8px 6px 8px;
+  text-decoration: none;
+  font-size: 25px;
   color: white;
+  display: block;
+}
+
+.sidenav ul {
+  margin: 0;
+  padding: 0;
 }
 
-.App-title {
-  font-size: 1.5em;
+.sidenav li{
+  list-style-type: none;
+
 }
 
-.App-intro {
-  font-size: large;
+.sidenav a:hover {
+  color: #b9b4b4;
+  text-decoration: none;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.main {
+  margin-left: 160px;
+  padding: 20px 10px;
 }
+
+.items-selected {
+  background-color: rgb(58, 173, 154);
+  color: rgb(56, 53, 53);
+  padding: 20px;
+  text-align: left;
+}
+
+.span{
+  font-weight: bold;
+}

src/App.js

@@ -1,19 +1,226 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link
+} from "react-router-dom";
+import Home from './components/Home';
+import CustomerList from './components/CustomerList';
+import MovieSearch from './components/MovieSearch';
+import MovieLib from './components/MovieLib';
+import axios from 'axios';
+import Button from 'react-bootstrap/Button';
+import Alert from 'react-bootstrap/Alert';
+
+const BASE_URL = 'http://localhost:3000'
 
 class App extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      movies: [],
+      selectedMovie: undefined,
+      customers: [],
+      selectedCustomer: undefined,
+      error: undefined,
+      alertText: undefined,
+      alertVariant: undefined,
+      detailsMovie: undefined,
+    };
+  } 
+
+  componentDidMount() {
+    axios.get(`${BASE_URL}/customers`)
+    .then((response) => {
+      const customers = response.data;
+      this.setState({ 
+        customers,
+        error: undefined
+      });
+    })
+    .catch((error) => {
+      this.setState({ error: error.message });
+    });
+
+    axios.get(`${BASE_URL}/movies`)
+    .then((response) => {
+      const movies = response.data;
+      this.setState({ 
+        movies,
+        error: undefined
+      });
+    })
+    .catch((error) => {
+      this.setState({ error: error.message });
+    });
+  }
+
+  addMovie = (movieToAdd) => {
+    if (!this.state.movies.find(movie => movie.external_id === movieToAdd.external_id)) {
+      axios.post(`${BASE_URL}/movies`, movieToAdd)
+      .then((response) => {
+        const { movies } = this.state;
+        movies.push(movieToAdd)
+        this.setState({
+          movies,
+          alertText: "Movie successfully added to your rental library",
+          alertVariant: "success"
+        });
+      })
+      .catch((error) => {
+        this.setState({ 
+          error: error.message,
+          alertText: `${error.message}`,
+          alertVariant: "danger" 
+        });
+      });
+    } else { 
+      this.setState({
+        alertText: "Movie already exists in library", 
+        alertVariant: "danger"
+      })
+    }
+  }
+
+  selectMovie = (movieId) => {
+    const { movies } = this.state;
+    const selectedMovie = movies.find((movie) => {
+      return movie.external_id === movieId;
+    })
+
+    this.setState({  selectedMovie })
+  }
+
+  selectCustomer(customerId) {
+    const { customers } = this.state;
+    const selectedCustomer = customers.find((customer) => {
+      return customer.id === customerId;
+    })
+
+    this.setState({ selectedCustomer })
+  }
+
+  createRental() {
+    if(this.state.selectedMovie) {
+      const movieTitle = this.state.selectedMovie.title
+      const customerId = this.state.selectedCustomer.id
+
+      // Sets due date to the day after rental is created
+      let dueDate = new Date()
+      dueDate.setDate(new Date().getDate() + 1);
+
+      const params = {
+        customer_id: customerId,
+        due_date: dueDate.toISOString(), 
+      }
+
+      axios.post(`${BASE_URL}/rentals/${movieTitle}/check-out`, params)
+      .then(() => {
+        this.setState({
+          selectedMovie: undefined,
+          selectedCustomer: undefined,
+          error: undefined,
+          alertText: "Movie successfully rented",
+          alertVariant: "success"
+        })
+      })
+      .catch((error) => {
+        this.setState({ 
+          error: error.message,
+          alertText: `An error occurred: ${error.message}`,
+          alertVariant: "danger"
+        });
+      });
+    }
+  }
+
+  detailsCallback(movieId) {    
+    const { movies, detailsMovie } = this.state;
+
+    if (detailsMovie && detailsMovie.external_id === movieId) {
+      this.setState({ detailsMovie: undefined })
+    } else {
+      const detailsMovie = movies.find((movie) => {
+        return movie.external_id === movieId;
+      })
+
+      this.setState({ detailsMovie })
+    }
+  }
+
+  selectedItemClass() {
+    return ((this.state.selectedCustomer || this.state.selectedMovie) ? "items-selected" : "no-items-selected" )
+  }
+
   render() {
+
+    const videoAlert = () => {
+      return(
+        <Alert 
+          variant={this.state.alertVariant}
+          onClose={() => this.setState({alertText: undefined, alertVariant: undefined})} 
+          dismissible
+        > 
+          {this.state.alertText} 
+        </Alert>
+      )
+    }
+
     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">
+          <div className="sidenav">
+
+            <ul>
+              <li>
+                <Link to="/">Home</Link>
+              </li>
+              <li>
+                <Link to="/customers">Customers</Link>
+              </li>
+              <li>
+                <Link to="/search">Movie Search</Link>
+              </li>
+              <li>
+                <Link to="/library">Library</Link>
+              </li>
+            </ul>
+
+            <div className={this.selectedItemClass()}>
+              {this.state.selectedMovie ? ("Selected Movie: \n" + this.state.selectedMovie.title) : "" }
+              <br />
+              {this.state.selectedCustomer ? ("Selected Customer: \n" + this.state.selectedCustomer.name) : "" }
+              <br />
+              {(this.state.selectedMovie && this.state.selectedCustomer )? <Button onClick={() => this.createRental()}>Create a Rental</Button> : ''}
+            </div>
+
+          </div>
+
+          <div className="main">
+
+            {this.state.alertText ? videoAlert() : "" }
+
+            <Switch>
+              <Route exact path="/">
+                <Home />
+              </Route>
+              <Route path="/customers">
+                <CustomerList customerList={this.state.customers} selectCustomer={(id) => this.selectCustomer(id)} />
+              </Route>
+              <Route path="/search">
+                <MovieSearch url={BASE_URL} selectMovie={(movie) => this.addMovie(movie)} detailsCallback={(id) => this.detailsCallback(id)} detailsMovie={this.state.detailsMovie} />
+              </Route>
+              <Route path="/library">
+                <MovieLib movieList={this.state.movies} selectMovie={(id) => this.selectMovie(id)} detailsCallback={(id) => this.detailsCallback(id)} detailsMovie={this.state.detailsMovie} />
+              </Route>
+            </Switch>
+
+          </div>
+        </div>
+      </Router>
     );
   }
 }

src/components/Customer.css

@@ -0,0 +1,41 @@
+.customer-card-container {
+  margin: 10px;
+}
+
+h3 {
+  color: black;
+}
+
+
+.customer-card {
+  margin: 10px;
+  display: grid;
+  grid-template-columns: 200px 1fr 100px; 
+  align-items: center;
+}
+
+.customer-name{
+  grid-column-start: 1;
+  text-align: left;
+  color: black;
+}
+
+.customer-name h3 {
+  color: black
+}
+
+
+.customer-info{
+  grid-column-start: 2;
+  text-align: left;
+}
+
+ul{
+  margin: 0;
+  padding: 0;
+}
+
+li{
+  list-style-type: none;
+}
+