Ada-C14 · r-spiel · Jan 19, 2021 · Jan 20, 2021 · Jan 20, 2021 · Jan 20, 2021
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,15 +3,21 @@
   "version": "0.1.1",
   "private": true,
   "dependencies": {
+    "axios": "^0.21.1",
+    "bootstrap": "^4.6.0",
+    "moment": "^2.29.1",
     "react": "^17.0.1",
+    "react-bootstrap": "^1.4.3",
     "react-dom": "^17.0.1",
+    "react-numeric-input": "^2.2.3",
+    "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",

diff --git a/public/index.html b/public/index.html
@@ -1,6 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <link
+rel="stylesheet"
+href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
+integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
+crossorigin="anonymous"
+/>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
@@ -36,5 +42,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin></script>
   </body>
 </html>
diff --git a/src/App.css b/src/App.css
@@ -1,28 +1,70 @@
-.App {
+@import url('https://fonts.googleapis.com/css2?family=Sofia&display=swap');
+
+* {
+  box-sizing: inherit;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+  background-color: #fffbee;
+}
+
+body {
+  height: 100%;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 125px auto 40px;
+}
+
+main {
+  padding: 15px 15px;
+}
+
+header {
+  background-color: rgb(175, 215, 255);
+  font-family: 'Sofia', cursive;
+}
+
+.title {
+  font-size: 60px;
   text-align: center;
+  color: #ff6d94;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+nav ul {
+  list-style-type: none;
+  text-align: center;
+  display: flex;
+  justify-content: space-around;
+  padding: 5px 10%;
 }
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
+nav li {
+  display: inline-block;
+  font-size: 1.3em;
 }
 
-.App-title {
-  font-size: 1.5em;
+nav a {
+  text-decoration: none;
 }
 
-.App-intro {
-  font-size: large;
+nav a:hover {
+  font-weight: bold;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.selected {
+  text-align: center;
+  display: flex;
+  justify-content: space-around;
+  padding: 5px 20px;
+  background-color: rgb(247, 197, 253);
 }
+
+.error-msg {
+  font-style: italic;
+  color: red;
+}
diff --git a/src/App.js b/src/App.js
@@ -1,21 +1,150 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
+import React, { useState } from 'react';
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link,
+  withRouter,
+} from 'react-router-dom';
+import axios from 'axios';
+import moment from 'moment';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import Container from 'react-bootstrap/Container';
+import {
+  Navbar,
+  Nav,
+  NavDropdown,
+  Form,
+  FormControl,
+  Button,
+  Card,
+ } from 'react-bootstrap';
+
+import Library from './components/Library'
+import Customers from './components/Customers'
+import Search from './components/Search'
 import './App.css';
 
-class App extends Component {
-  render() {
+const App = () => {
+  const [selectedCustomerID, setSelectedCustomerID] = useState(null);
+  const [selectedCustomerName, setSelectedCustomerName] = useState(null);
+  const [selectedVideo, setSelectedVideo] = useState(null);
+  const [errorMessage, setErrorMessage] = useState(null);
+  const [dueDate, setDueDate] = useState(null);
+
+  const localAPI = 'http://localhost:3000'
+
+  const selectCustomerName = (name) => {
+    setSelectedCustomerName(name);
+  };
+
+  const selectCustomerID = (id) => {
+    setSelectedCustomerID(id);
+  };
+
+  const selectVideo = (video) => {
+    setSelectedVideo(video);
+  };
+
+  const getDueDate = () => {
+    const date = new Date()
+    date.setDate(date.getDate() + 7)
+    return (moment(date).format('MMM D, YYYY'))
+  }
+
+  const checkOutVideo = () => {
+    const date = getDueDate()
+    // setDueDate(toString(date));
+    console.log(date)
+    // console.log(dueDate)
+
+    axios.post(`${localAPI}/rentals/${selectedVideo}/check-out?customer_id=${selectedCustomerID}&due_date=${date}`)
+    .then((response) => {
+      console.log(`Movie titled ${selectedVideo} checked out to cusomter: ${selectedCustomerName}`)
+      setErrorMessage(`Movie titled ${selectedVideo} checked out to cusomter: ${selectedCustomerName}`)
+    })
+    .catch((error) => {
+      setErrorMessage(`Unable to checkout movie titled ${selectedVideo} to Customer ID: ${selectedCustomerID}`);
+      console.log(`Unable to checkout movie titled ${selectedVideo} to Customer ID: ${selectedCustomerID}`)
+    });
+
+  };
+
+  const checkOutVideoBtn = () => {
     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>
-    );
+      <button onClick={ checkOutVideo } >Check Out</button>
+    )
   }
+
+  return (
+
+    <Router>
+      <body>
+        <header>
+
+          <nav> 
+            <ul>
+              <li><h1 className="title">Rose Video</h1></li>
+              <li>
+                <Link to="/">Home</Link>
+              </li>
+              <li>
+                <Link to="/library">Library</Link>
+              </li>
+              <li>
+                <Link to="/customers">Customers</Link>
+              </li>
+              <li>
+                <Link to="/search">Search</Link>
+              </li>
+            </ul>
+          </nav>
+        </header>
+
+        <span className="selected" >
+          <span>Selected Video: { selectedVideo } </span>
+          <span>Selected Customer:  { selectedCustomerName }</span>
+          <span>{ selectedVideo !== null && selectedCustomerID !== null ? checkOutVideoBtn() : null }</span>
+        </span>
+        <div className="selected error-msg">
+          { errorMessage }
+        </div>
+        <main>
+            {/* A <Switch> looks through its children <Route>s and
+            renders the first one that matches the current URL. */}
+          <Switch>
+            <Route path="/library">
+              <Library url={localAPI} setSelectedVideoCallback={selectVideo} />
+            </Route>
+            <Route path="/customers">
+              <Customers url={localAPI} setCustomerIDCallback={selectCustomerID} setCustomerNameCallback={selectCustomerName} />
+            </Route>
+            <Route path="/search"  >
+              <Search url={localAPI} />
+            </Route>
+            <Route path="/">
+              <Home />
+            </Route>
+          </Switch>
+        </main>
+
+      </body>
+    </Router>
+  );
+}
+
+function Home() {
+  return (<Container>
+    <Card >
+  <Card.Body>
+    <Card.Title>Welcome to R&R Video</Card.Title>
+    <Card.Text>
+      Be Kind, Rewind
+    </Card.Text>
+
+  </Card.Body>
+</Card>
+  </Container> )
 }
 
 export default App;
diff --git a/src/components/Customer.css b/src/components/Customer.css
diff --git a/src/components/Customer.js b/src/components/Customer.js
@@ -0,0 +1,19 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+
+const Customer = (props) => {
+  return (
+    <span>
+      {props.name} - {props.tel} - Videos out: {props.videosCheckedCount}
+    </span>
+  );
+}
+
+Customer.propTypes = {
+  name: PropTypes.string.isRequired,
+  tel: PropTypes.string.isRequired,
+  videosCheckedCount: PropTypes.number.isRequired
+
+};
+
+export default Customer;
diff --git a/src/components/Customers.css b/src/components/Customers.css
diff --git a/src/components/Customers.js b/src/components/Customers.js
@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+
+import Customer from './Customer';
+import './Customers.css'
+
+const Customers = (props) => {
+  const [customerList, setCustomerList] = useState([]);
+  const [errorMessage, setErrorMessage] = useState(null);
+
+  // initial API call to set state of customerList
+  useEffect(() => {
+    axios.get(`${props.url}/customers`)
+      .then((response) => {
+        const apiCustomerList = response.data;
+        setCustomerList(apiCustomerList);
+      })
+      .catch((error) => {
+        // Still need to handle errors
+        setErrorMessage(error.message);
+      });
+  }, []);
+
+  const onChangeValue = (event) => {
+
+    const customerID = Number(event.target.value)
+
+    const custObj = customerList.find((cust) => {
+      return (
+        cust.id === customerID
+      )
+    })
+
+    props.setCustomerIDCallback(customerID)
+    props.setCustomerNameCallback(custObj.name)
+  }
+
+  const customerComponents = customerList.map((cust) => {
+    return (
+      <div>
+        <input type='radio' id={cust.id} name='customer' value={cust.id} onChange={ onChangeValue } />
+        <label htmlFor={cust.name}><Customer key={cust.id} id={cust.id} name={cust.name} tel={cust.phone} videosCheckedCount={cust.videos_checked_out_count} /></label>
+      </div>
+    );
+  })
+
+
+  return (
+    <div>
+      <h1>Customer List:</h1>
+
+      {customerComponents}
+
+    </div>
+  )
+}
+
+Customers.propTypes = {
+  url: PropTypes.string,
+  setCustomerCallback: PropTypes.func
+};
+
+export default Customers;