Anna & Mona - Fire

package.json

@@ -3,15 +3,18 @@
   "version": "0.1.1",
   "private": true,
   "dependencies": {
+    "axios": "^0.21.1",
+    "history": "^5.0.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-router-dom": "5.2.0",
     "react-scripts": "4.0.1"
   },
   "devDependencies": {
-    "gh-pages": "^3.1.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.3",
-    "@testing-library/user-event": "^12.6.0"
+    "@testing-library/user-event": "^12.6.0",
+    "gh-pages": "^3.1.0"
   },
   "scripts": {
     "start": "PORT=3001 react-scripts start",

src/App.css

@@ -1,28 +1,65 @@
-.App {
-  text-align: center;
+* {
+  background-color: #f6f7f2;
+  color: #277f86;
+  /* border: 2px solid black; */
+}
+
+a {
+  font-weight: 800;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+a:link {
+  text-decoration: none;
+  color: #277f86;
 }
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
+a:visited {
+  text-decoration: none;
+  color: #277f86;
 }
 
-.App-title {
-  font-size: 1.5em;
+a:hover {
+  color: #e28c59;
 }
 
-.App-intro {
-  font-size: large;
+.btn-container {
+  display: flex;
+  width: 100%;
+}
+
+.main-btn {
+  display: flex;
+  width: 100%;
+  height: 40px;
+  border: 2px solid #277f86;
+  font-size: larger;
+  text-align: center;
+  margin-right: 10%;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+  background-color: #bdeecf;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.main-btn a {
+  background-color: #bdeecf;
 }
+
+button {
+  border: 2px solid #277f86;
+  border-radius: 10px;
+  background-color: #bdeecf;
+  height: 40px;
+  font-weight: 800;
+}
+
+button:hover, .main-btn:hover {
+  border: 2px solid #C05B21;
+  color: #C05B21;
+  background-color: #F0C2A8;
+}
+
+.main-btn:hover a {
+  background-color: #F0C2A8;
+  color: #C05B21;
+}

src/App.js

@@ -1,21 +1,91 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
+import React, { useState } from 'react'
+import CustomerList from './components/CustomerList.js';
+import MovieLibrary from './components/MovieLibrary.js';
+import MovieSearchResults from './components/MovieSearchResults.js';
+import Homepage from './components/Homepage.js';
+import axios from 'axios';
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route
+} from 'react-router-dom';
 import './App.css';
 
-class App extends Component {
-  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>
-    );
+const BASE_API_URL = 'http://localhost:3000';
+
+export default function App() {
+  const [customer, setCustomer] = useState(null);
+  const [movie, setMovie] = useState(null);
+  const [message, setMessage] = useState(null);
+
+  const selectCustomer = (customer) => {
+    setCustomer(customer);
+  };
+
+  const selectMovie = (movie) => {
+    setMovie(movie);
+  };
+
+  const dueDate = () => {
+    const result = new Date();
+    result.setDate(result.getDate() + 14);
+    return result;
   }
-}
 
-export default App;
+  const rentMovie = () => {
+    const url = BASE_API_URL + '/rentals/' + movie.title + '/check-out?customer_id=' + customer.id + '&due_date=' + dueDate();
+
+    axios.post(url)
+      .then((response) => {
+        // setMessage('Movie Rented!');
+        // setTimeout(() => setMessage(''), 5000);
+        setTimeout(function(){ alert('Movie rented!') }, 3000);
+        setMovie(null);
+        setCustomer(null);
+      })
+      .catch((error) => {
+        // setMessage(error.message);
+        setTimeout(function(){ alert(error.message) }, 3000);
+      });
+  }
+
+  return (
+    <Router>
+      <div>
+        <Switch>
+          <Route path="/library">
+            <MovieLibrary 
+              selectMovieCallback={selectMovie} 
+              url={BASE_API_URL} 
+              customer={customer ? customer.name : ''} 
+              movie={movie ? movie.title : ''}
+              checkoutCallback={rentMovie}
+            />
+          </Route>
+          <Route path="/customers">
+            <CustomerList 
+              selectCustomerCallback={selectCustomer} 
+              url={BASE_API_URL} 
+              customer={customer ? customer.name : ''} 
+              movie={movie ? movie.title : ''}
+              checkoutCallback={rentMovie}
+            />
+          </Route>
+          <Route path='/results' render={props => <MovieSearchResults {...props} />}/>
+          <Route path="/">
+            <Homepage 
+              movie={movie} 
+              customer={customer} 
+              url={BASE_API_URL} 
+              setMovieCallback={setMovie}
+              setCustomerCallback={setCustomer}
+              rentMovieCallback={rentMovie}
+              rentedMessage={message}
+              checkoutCallback={rentMovie}
+            />
+          </Route>
+        </Switch>
+      </div>
+    </Router>
+  );
+}

src/components/CustomerList.css

@@ -0,0 +1,23 @@
+.list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.customer-id {
+  display: flex;
+  width: 300px;
+  margin-top: 30px;
+  margin-left: 100px;
+  list-style: none;   
+}
+
+.customer-list {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.customer-name {
+  margin-top: 0;
+  padding-left: 15px;
+}

src/components/CustomerList.js

@@ -0,0 +1,63 @@
+import React, { useState, useEffect } from 'react'
+import Navbar from './Navbar.js';
+import './CustomerList.css';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+
+const CustomerList = props => {
+  const [customers, setCustomers] = useState([]);
+  const [alert, setAlert] = useState(null);
+
+  const url = props.url + '/customers';
+
+  useEffect(() => {
+    axios.get(url)
+      .then((response) => {
+        setCustomers(response.data);
+      })
+      .catch((error) => {
+        setAlert(error.message);
+      });
+  }, []);
+
+  const addCustomerRental = rentalCustomer => {
+    props.selectCustomerCallback(rentalCustomer);
+    setAlert(`Selected ${rentalCustomer.name} for rental transaction.`);
+  };
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  return (
+    <div>
+      <Navbar customer={props.customer} movie={props.movie} checkoutCallback={props.checkoutCallback} />
+      <div className='list'>
+        { alert ? <div className='movie-library-alert'>{alert}</div> : '' }
+        <ul className='customer-list'>
+          { customers.map((customer) => 
+            <li key={customer.id} className='customer-id'>
+              { customer.name }
+              <button 
+                className='select-button' 
+                onClick={() => { addCustomerRental(customer); scrollToTop(); }}
+              >
+                select
+              </button>
+            </li>
+          )}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+CustomerList.propTypes = {
+  selectCustomerCallback: PropTypes.func.isRequired,
+  url: PropTypes.string.isRequired,
+  customer: PropTypes.string,
+  movie: PropTypes.string,
+  checkoutCallback: PropTypes.func
+};
+
+export default CustomerList;