Alice D & Aimee - Fire 🔥

package.json

@@ -3,15 +3,18 @@
   "version": "0.1.1",
   "private": true,
   "dependencies": {
+    "axios": "^0.21.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-scripts": "4.0.1"
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "4.0.1",
+    "react-select": "^3.2.0"
   },
   "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

@@ -8,14 +8,16 @@
 }
 
 .App-header {
-  background-color: #222;
-  height: 150px;
+  background-color: rgb(91, 184, 153);
+  height: 40px;
   padding: 20px;
-  color: white;
+  color: rgb(96, 84, 84);
 }
 
 .App-title {
   font-size: 1.5em;
+  color: whitesmoke;
+  font-weight: 2000;
 }
 
 .App-intro {
@@ -26,3 +28,35 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+.topnav {
+  overflow: hidden;
+  background-color: #333;
+}
+
+.topnav a {
+  float: left;
+  color: #f2f2f2;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+  font-size: 17px;
+}
+
+.topnav a:hover {
+  background-color: #ddd;
+  color: black;
+}
+
+.topnav a.active {
+  background-color: #4CAF50;
+  color: white;
+}
+
+li {
+  list-style: none;
+}
+
+.background {
+  background-color: skyblue;
+}

src/App.js

@@ -1,21 +1,123 @@
-import React, { Component } from 'react';
+import React, { Component, useState } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import Customers from './components/Customers'
+import Videos from './components/Videos'
+import Search from './components/Search'
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link
+} from 'react-router-dom';
+import axios from 'axios';
 
-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>
-    );
+export default function App() {
+  const BASE_URL = 'http://localhost:3000'
+  const VIDEO_URL = `${BASE_URL}/videos`
+  const [selectedVideo, setSelectedVideo] = useState(null)
+  const [selectedCustomer, setSelectedCustomer] = useState(null)
+  const [errorMessage, setErrorMessage] = useState(null)
+
+  // will receive information about which video was selected and set the state
+  const onVideoSelected = (video) => {
+    setSelectedVideo(video)
+  }
+
+  // will receive information about which customer was selected and set the state
+  const onCustomerSelected = (customer) => {
+    setSelectedCustomer(customer)
+  }
+
+
+  //  post "/rentals/:title/check-out", to: "rentals#check_out", as: "check_out"
+  // http://localhost:3000/rentals/North%20by%20Northwest/check-out?customer_id=2&due_date=2021-02-15
+
+  // date formatting link: https://forums.asp.net/t/2005199.aspx?Calculate+next+due+date+using+javascript+or+jquery+
+  Date.prototype.addDays = function (interval) {
+    this.setDate(this.getDate() + interval);
+    return this;
+  };
+
+  const Timestamp = () => {
+    const today = new Date();
+    const dueDate = today.addDays(7);
+    const dd = dueDate.getDate();
+    const mm = dueDate.getMonth() + 1;
+    const yyyy = dueDate.getFullYear();
+    const formattedDate = yyyy + '-' + mm + '-' + dd;
+    return formattedDate;
+  };
+
+  const checkout = () => {
+    console.log(Timestamp());
+    const CHECKOUT_URL = `${BASE_URL}/rentals/${selectedVideo.title}/check-out?customer_id=${selectedCustomer.id}&due_date=${Timestamp()}`
+    axios.post(CHECKOUT_URL)
+      .then((response) => {
+        // const data = response.data;
+        // console.log(data)
+
+        alert(`${selectedVideo.title} has been successfully checked out by ${selectedCustomer.name}.`)
+        // to reinitiate the video and customer
+        setSelectedCustomer(null)
+        setSelectedVideo(null)
+      })
+      .catch((error) => {
+        setErrorMessage(error.message);
+      });
   }
+
+  return (
+    <Router>
+      <div className="App-header">
+        <span className='App-title'>Video to Checkout: { selectedVideo ? selectedVideo.title : 'has not been selected'}{'; '}
+        Customer: { selectedCustomer ? selectedCustomer.name: 'has not been selected'}{' '}</span>
+
+        {selectedVideo && selectedCustomer && (
+          <button onClick={checkout}>
+            Checkout {selectedVideo.title} for {selectedCustomer.name}
+          </button>
+        )
+        }
+
+        <nav className='topnav'>
+          <ul>
+            <li>
+              <Link to="/">Home</Link>
+            </li>
+            <li>
+              <Link to="/search">Search</Link>
+            </li>
+            <li>
+              <Link to="/library">Library</Link>
+            </li>
+            <li>
+              <Link to="/customers">Customers</Link>
+            </li>
+          </ul>
+        </nav>
+
+        {/* A <Switch> looks through its children <Route>s and
+            renders the first one that matches the current URL. */}
+        <Switch>
+          <Route path="/customers">
+            <Customers onCustomerSelected={onCustomerSelected} />
+          </Route>
+          <Route path="/library">
+            {/* note that library and videos names don't match*/}
+            <Videos videoURL={VIDEO_URL} onVideoSelected={onVideoSelected} />
+          </Route>
+          <Route path="/search">
+            <Search videoURL={VIDEO_URL} />
+          </Route>
+          <Route path="/">
+            {/* <Home /> */}
+          </Route>
+        </Switch>
+      </div>
+    </Router>
+  );
 }
 
-export default App;
+
+

src/components/Search.css

@@ -0,0 +1,58 @@
+/* many thanks: https://codingislove.com/image-caption-hover-effect/ */
+#wrapper{
+  display: flex;
+  flex-wrap: wrap;
+  overflow:hidden;
+}
+
+.image-container{
+  float:left;
+  width:250px;
+  height:380px;
+  position:relative;
+  margin:10px;
+  cursor:pointer;
+}
+
+.image-container img{
+  width:250px;
+  height:380px; 
+  position:absolute;
+}
+
+.image-caption {
+  width:100%;
+  height:100%;
+  background:rgba(0, 0, 0, 0.7);
+  position:absolute; 
+  opacity:0; 
+  transition:all 300ms ease-in-out;
+ -webkit-transition:all 300ms ease-in-out;
+ -moz-transition:all 300ms ease-in-out;
+ -o-transition:all 300ms ease-in-out;
+ -ms-transition:all 300ms ease-in-out;
+}
+
+.image-caption h1{
+  padding:45px 0px 5px 0px;
+  text-align:center;
+  margin-left:150px;
+  /* margin-right: 25px; */
+  text-transform:uppercase;
+  font-family: 'Helvetica';
+  font-size:25px;
+  color:#00bfb6;
+}
+
+.image-caption p{
+  text-align:center; 
+  font-family: 'Overpass Mono', monospace;
+  color:#fff;
+}
+
+.image-container:hover .image-caption{
+  opacity:1;
+}
+
+.mydiv { display: inline; }
+.hidden{ display: none; }