Earth - Ting-Yi and Anya's Moo-vies

config/master.key

@@ -0,0 +1 @@
+cf39456e1796b52c853dcdabd740201d

package.json

@@ -3,15 +3,20 @@
   "version": "0.1.1",
   "private": true,
   "dependencies": {
+    "axios": "^0.21.1",
+    "bootstrap": "^4.6.0",
     "react": "^17.0.1",
+    "react-bootstrap": "^1.4.3",
     "react-dom": "^17.0.1",
+    "react-router-bootstrap": "^0.25.0",
+    "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",

public/index.html

@@ -10,6 +10,13 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+
+    <!-- Add BootstrapCDN -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" 
+integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" 
+crossorigin="anonymous">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet"> 
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.css

@@ -8,14 +8,15 @@
 }
 
 .App-header {
-  background-color: #222;
-  height: 150px;
+  background-color: #ffd700;
+  height: 200px;
   padding: 20px;
-  color: white;
+  color: black;
 }
 
 .App-title {
-  font-size: 1.5em;
+  font-size: 2em;
+  margin-top: 50px;
 }
 
 .App-intro {
@@ -26,3 +27,44 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+.Link {
+  color: center;
+}
+
+.btn {
+  margin-right: 10px
+}
+
+.selection {
+  color: blue;
+  margin-top: 18px;
+}
+
+.no-selection {
+  color: red;
+  margin-top: 18px;
+}
+
+.selection-statements {
+  text-align: right;
+}
+
+.cow {
+  padding-left: 50px;
+}
+
+.validation-errors-display, 
+.validation-errors-display__list {
+  font-size: 1em;
+}
+
+.visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

src/App.js

@@ -1,21 +1,214 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
+import React, { useState } from 'react';
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link
+} from 'react-router-dom';
+import axios from 'axios';
+import Search from './components/Search';
+import Library from './components/Library';
+import Customers from './components/Customers';
+import vhs from './VHS.jpg';
+import popcorn from './popcorn.png';
+import cow from './cow.png';
 import './App.css';
+import CheckOut from './components/CheckOut';
+import CheckIn from './components/CheckIn';
+import { Navbar, Nav, NavLink,Form, FormControl, Button, Image, Table } from 'react-bootstrap'
+import {LinkContainer} from 'react-router-bootstrap'
 
-class App extends Component {
-  render() {
-    return (
+
+
+// base url depents on the link of rails server
+const BASE_URL = 'http://localhost:3000/'
+
+const App = () => {
+  const [selectedVideo, setSelectedVideo] = useState(null);
+  const [selectedCustomer, setSelectedCustomer] = useState(null);
+  const [errorMessage, setErrorMessage] = useState(null);
+
+  const chooseVideo = (videoData) => {
+    setSelectedVideo(videoData);
+    setErrorMessage(null);
+  }
+
+  const chooseCustomer = (id) => {
+    setSelectedCustomer(id.id);
+    setErrorMessage(null);
+  }
+
+  const checkOut = (rental) => {
+    // console.log(rental.dueDate)
+    // if (rental.video.availableInventory > 0) {
+      axios.post(`${BASE_URL}rentals/${rental.video.title}/check-out?customer_id=${rental.customer}&due_date=${rental.dueDate}`, rental)
+      .then((response) => {
+        setErrorMessage(`Successufully checked out ${rental.video.title}`);
+      })
+      .catch((error) => {
+        // setErrorMessage(error.message);
+        setErrorMessage(`Checkout unsuccessful`);
+      });
+    //   setSelectedVideo(null)
+    //   setSelectedCustomer(null)
+    // }
+    setSelectedVideo(null)
+    setSelectedCustomer(null)
+  }
+
+  const checkIn = (rental) => {
+    axios.post(`${BASE_URL}rentals/${rental.video.title}/return?customer_id=${rental.customer}&returned=true`, rental)
+    .then((response) => {
+      setErrorMessage('Return completed!');
+    })
+    .catch((error) => {
+      // setErrorMessage(error.message);
+      setErrorMessage(`Return unsuccessful: this customer didn't rent ${rental.video.title}`);
+    });
+
+    setSelectedVideo(null)
+    setSelectedCustomer(null)
+  }
+
+  const deselectedVideoSubmit = () => {
+    setSelectedVideo(null)
+  }
+  const deselectedCustomerSubmit = () => {
+    setSelectedCustomer(null)
+  }
+
+  return (
+    <Router>
       <div className="App">
         <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
+          <img src={vhs} className="App-logo" alt="logo" />
+
+          <h1 className="App-title">🐮 The Moo-vie Shop! 🐮</h1>
         </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
+
+        <Navbar bg="dark" variant="dark">
+          <Nav className="mr-auto">
+            <LinkContainer to='/'>
+              <Nav.Link>Home</Nav.Link>
+            </LinkContainer>
+            <LinkContainer to='/library'>
+              <Nav.Link>Videos</Nav.Link>
+            </LinkContainer>
+            <LinkContainer to='/customers'>
+              <Nav.Link>Customers</Nav.Link>
+            </LinkContainer>
+            <LinkContainer to='/search'>
+              <Nav.Link>Search</Nav.Link>
+            </LinkContainer>
+
+          </Nav>
+
+          <div class='btn'>
+            <CheckOut video={selectedVideo}
+                        customer={selectedCustomer}
+                        checkOutCallback={checkOut} />
+          </div>
+          <div class='btn'>
+            <CheckIn video={selectedVideo}
+                      customer={selectedCustomer}
+                      checkInCallback={checkIn} />
+          </div>
+{/* 
+          <div className='selection-statements'>
+            <div className={selectedVideo ? 'selection' : 'no-selection'}>
+              <p>{ selectedVideo ? `Video: ${selectedVideo.title }` : 'Video not selected'}</p>
+              {selectedVideo ? <button
+                  className="btn btn-outline-primary btn-sm"
+                  onClick={deselectedVideoSubmit}>
+                  Deselected Video
+                </button> : ''}
+            </div>
+            <div className={selectedCustomer ? 'selection' : 'no-selection'}>
+              <p>{ selectedCustomer ? `Customer ID: ${selectedCustomer}` : 'Customer not selected'}</p>
+              {selectedCustomer ? <button
+                  className="btn btn-outline-primary btn-sm"
+                  onClick={deselectedCustomerSubmit}>
+                  Deselected Customer
+                </button> : ''}
+            </div>
+          </div> */}
+
+
+        </Navbar>
+        <div className="text-lg-center">
+          <h4 className={errorMessage ? (errorMessage.includes('completed') ? 'text-success border border-success' : 'text-danger border border-danger') : ''}>       
+            {errorMessage ? `${errorMessage}` : ''}
+          </h4>
+        </div>
+
+        <table className="float-right text-left mt-4">
+            <tbody>
+              <tr>
+                  <td className={selectedVideo ? 'selection' : 'no-selection'}>
+                    <p>{ selectedVideo ? `Video: ${selectedVideo.title }` : 'Video not selected'}</p>
+                  </td>
+                  <td className="text-right">
+                    {selectedVideo ? <button
+                      className="btn btn-outline-primary btn-sm"
+                      onClick={deselectedVideoSubmit}>
+                      Deselect Video
+                      </button> : <button
+                      className="btn btn-outline-primary btn-sm disabled">
+                      Select a Video </button>}
+                  </td>
+                  <td className="visually-hidden">Video</td>
+              </tr>
+              <tr>
+                  <td className={selectedCustomer ? 'selection' : 'no-selection'}>
+                    <p>{ selectedCustomer ? `Customer ID: ${selectedCustomer}` : 'Customer not selected'}</p>
+                  </td>
+                  <td className="text-right">
+                    {selectedCustomer ? <button
+                    className="btn btn-outline-primary btn-sm"
+                    onClick={deselectedCustomerSubmit}>
+                    Deselect Customer
+                    </button> : <button
+                    className="btn btn-outline-primary btn-sm disabled">
+                    Select a Customer </button> }
+                  </td>
+              </tr>      
+            </tbody>
+          </table>
+
+        <Switch>
+          <Route path="/search" component={Search}>
+            <Search url={BASE_URL}
+                    focus='videos'/>
+          </Route>
+          <Route path="/library" component={Library}>
+            <Library url={BASE_URL}
+                       focus='videos/'
+                       selectVideoCallback={chooseVideo}
+                       selectedVideo={selectedVideo}/>
+          </Route>
+          <Route path="/customers" component={Customers}>
+            <Customers url={BASE_URL}
+                       focus='customers'
+                       selectCustomerCallback={chooseCustomer}/>
+          </Route>
+          <Route path="/">
+            <Home />
+          </Route>
+        </Switch>
       </div>
-    );
-  }
+    </Router>
+  );
 }
 
 export default App;
+
+
+function Home() {
+  return (
+    <div>
+      <img src={popcorn} alt="movie snacks" />
+      <img src={cow} alt="cow" className='cow'/>
+    </div>
+    )
+
+}

src/components/ApiVideo.css

@@ -0,0 +1,12 @@
+figure {
+    display: inline-block;
+    text-align: center;
+    border: 1px dotted gray;
+    margin: 5px; /* adjust as needed */
+  }
+  figure img {
+    vertical-align: top;
+  }
+  figure figcaption {
+    border: 1px dotted blue;
+  }

src/components/ApiVideo.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './ApiVideo.css';
+
+const ApiVideo = (props) => {
+  // event handlers
+  const onFormSubmit = (event) => {
+    event.preventDefault();
+    props.addVideoCallback({
+      externalId: props.externalId, 
+      title: props.title,
+      overview: props.overview,
+      releaseDate: props.releaseDate,
+      imageUrl: props.imageUrl,    
+      inventory: 10,
+    });
+  }
+
+  return (
+    <figure className="video">
+      <img src={props.imageUrl} alt={props.title} />
+      <figcaption>{props.title} 
+        <br/>{new Date(props.releaseDate).getFullYear()}
+        <br/> 
+          <button
+            className="btn btn-outline-primary btn-sm"
+            onClick={onFormSubmit}>
+            Add to Library
+          </button>
+      </figcaption>
+    </figure> 
+  )
+}
+
+ApiVideo.propTypes = {
+  title: PropTypes.string.isRequired,
+  overview: PropTypes.string.isRequired,
+  releaseDate: PropTypes.string.isRequired,
+  imageUrl: PropTypes.string.isRequired,
+  externalId: PropTypes.number.isRequired,
+  addVideoCallback: PropTypes.func.isRequired,
+};
+
+export default ApiVideo;