Ada-C12 · kristyh32 · Dec 16, 2019 · Dec 16, 2019 · Dec 16, 2019 · Dec 17, 2019
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,14 +3,30 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.19.0",
+    "dotenv": "^8.2.0",
+    "lodash": "^4.17.15",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-scripts": "3.0.1"
+    "react-router-dom": "^5.1.2",
+    "react-scripts": "^3.3.0"
   },
   "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"
+    ]
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -1,15 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -19,6 +22,12 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
+      crossorigin="anonymous"
+    />
     <title>React App</title>
   </head>
   <body>

diff --git a/src/App.css b/src/App.css
@@ -22,6 +22,10 @@
   font-size: large;
 }
 
+.Overdue {
+  color: red;
+}
+
 @keyframes App-logo-spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }

diff --git a/src/App.js b/src/App.js
@@ -1,19 +1,188 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { Component } from "react";
+import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
+import Home from "./components/Home";
+import MovieLibrary from "./components/MovieLibrary.js";
+import MovieSearch from "./components/MovieSearch.js";
+import CustomerList from "./components/CustomerList.js";
+import Rental from "./components/Rental.js";
+import axios from "axios";
+import AlertMessage from "./components/AlertMessage";
 
 class App extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      currentMovie: undefined,
+      selectedCustomer: undefined,
+      activeItem: "home",
+      isCheckoutSuccessful: false
+    };
+  }
+
+  onSelectMovie = movie => {
+    this.setState({ currentMovie: movie, isCheckoutSuccessful: false });
+  };
+
+  handleSelectedCustomer = customer => {
+    this.setState({
+      selectedCustomer: customer,
+      isCheckoutSuccessful: false
+    });
+  };
+
+  handleNavClick = item => {
+    this.setState({
+      activeItem: item
+    });
+  };
+
+  checkoutMovieForCustomer = () => {
+    const { currentMovie, selectedCustomer } = this.state;
+    const movieTitle = currentMovie.title;
+    const customerId = selectedCustomer.id;
+    const url = `http://localhost:2999/rentals/${movieTitle}/check-out`;
+    let due_date = new Date();
+    due_date.setDate(new Date().getDate() + 7);
+    console.log(due_date);
+
+    const movieToRent = {
+      customer_id: customerId,
+      due_date: due_date
+    };
+
+    axios
+      .post(url, movieToRent)
+      .then(response => response.data)
+      .then(data => {
+        console.log(data);
+        this.setState({
+          isCheckoutSuccessful: true,
+          selectedCustomer: undefined,
+          currentMovie: undefined
+        });
+      })
+      .catch(error => {
+        console.log(error);
+        this.setState({
+          error: error.message
+        });
+      });
+  };
   render() {
+    const {
+      selectedCustomer,
+      activeItem,
+      isCheckoutSuccessful,
+      currentMovie
+    } = 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>
-      </div>
+      <Router>
+        <div>
+          <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
+            <ul className="navbar-nav">
+              <li
+                className={activeItem === "home" ? "active" : ""}
+                onClick={() => this.handleNavClick("home")}
+              >
+                <Link to="/" className="nav-link">
+                  Home
+                </Link>
+              </li>
+              <li className={activeItem === "search" ? "active" : ""}>
+                <Link
+                  to="/search"
+                  className="nav-link"
+                  onClick={() => this.handleNavClick("search")}
+                >
+                  Search Movies
+                </Link>
+              </li>
+              <li className={activeItem === "movie" ? "active" : ""}>
+                <Link
+                  to="/library"
+                  className="nav-link"
+                  onClick={() => this.handleNavClick("movie")}
+                >
+                  Movie Library
+                </Link>
+              </li>
+              <li className={activeItem === "customer" ? "active" : ""}>
+                <Link
+                  to="/customers"
+                  className="nav-link"
+                  onClick={() => this.handleNavClick("customer")}
+                >
+                  Customers
+                </Link>
+              </li>
+              <li className={activeItem === "rental" ? "active" : ""}>
+                <Link
+                  to="/rentals"
+                  className="nav-link"
+                  onClick={() => this.handleNavClick("rental")}
+                >
+                  Rentals
+                </Link>
+              </li>
+            </ul>
+          </nav>
+
+          {selectedCustomer && (
+            <AlertMessage title="Selected Customer" type="info">
+              <p>{selectedCustomer.name}</p>
+            </AlertMessage>
+          )}
+
+          {currentMovie && (
+            <AlertMessage title="Selected Movie" type="warning">
+              <div className="d-flex">
+                <div className="mr-auto">{currentMovie.title}</div>
+                {selectedCustomer && currentMovie && (
+                  <button
+                    className="btn btn-danger justify-content-end"
+                    onClick={this.checkoutMovieForCustomer}
+                  >
+                    Checkout
+                  </button>
+                )}
+              </div>
+            </AlertMessage>
+          )}
+
+          {isCheckoutSuccessful && (
+            <AlertMessage title="Selected Customer" type="success">
+              <p>Movie successfully checked out</p>
+            </AlertMessage>
+          )}
+
+          {/* A <Switch> looks through its children <Route>s and
+              renders the first one that matches the current URL. */}
+          <main className="container">
+            <Switch>
+              <Route path="/customers">
+                <CustomerList
+                  handleSelectedCustomer={this.handleSelectedCustomer}
+                  // customer={100}
+                />
+              </Route>
+              <Route path="/library">
+                <MovieLibrary onSelectMovie={this.onSelectMovie} />
+              </Route>
+              <Route path="/rentals">
+                <Rental />
+              </Route>
+              <Route path="/search">
+                <MovieSearch  />
+              </Route>
+              <Route path="/">
+                <Home />
+              </Route>
+            </Switch>
+          </main>
+        </div>
+      </Router>
     );
   }
 }

diff --git a/src/components/AlertMessage.js b/src/components/AlertMessage.js
@@ -0,0 +1,12 @@
+import React from "react";
+
+const AlertMessage = props => {
+  return (
+    <div className={`alert alert-${props.type}`}>
+      <h3>{props.title}</h3>
+      {props.children}
+    </div>
+  );
+};
+
+export default AlertMessage;
diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js
@@ -0,0 +1,85 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { Link } from "react-router-dom";
+import axios from "axios";
+
+class CustomerList extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      customers: [],
+      error: ""
+    };
+  }
+
+  componentDidMount() {
+    axios
+      .get("http://localhost:2999/customers")
+      .then(response => {
+        console.log(response.data);
+        const customers = response.data;
+        this.setState({ customers });
+      })
+
+      .catch(error => {
+        this.setState({ error: error.message });
+      });
+  }
+
+  handleClick = customer => {
+    console.log(customer);
+    this.props.handleSelectedCustomer(customer);
+  };
+
+  render() {
+    const { customers } = this.state;
+    console.log(customers);
+    return (
+      <div>
+        {/* {this.props.customer * 100} */}
+        <h1></h1>
+
+        <table className="table">
+          <thead className="thead-dark">
+            <tr>
+              <th>Id</th>
+              <th>Name</th>
+              <th>Address</th>
+              <th>City</th>
+              <th>Select</th>
+            </tr>
+          </thead>
+          <tbody>
+            {customers.map(customer => {
+              const { id, name, address, city } = customer;
+              return (
+                <tr key={id}>
+                  <td>{id} </td>
+                  <td>{name}</td>
+                  <td>{address}</td>
+                  <td>{city}</td>
+                  <td>
+                    <button
+                      className="btn btn-success"
+                      onClick={() => this.handleClick(customer)}
+                    >
+                      Select
+                    </button>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+}
+
+CustomerList.propTypes = {
+  handleSelectedCustomer: PropTypes.func.isRequired
+  // customer: PropTypes.number.isRequired
+};
+
+export default CustomerList;