FIRE - Pauline and Tram

.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+yarn.lock
+package-lock.json
+.env

package.json

@@ -3,15 +3,19 @@
   "version": "0.1.1",
   "private": true,
   "dependencies": {
+    "axios": "^0.21.1",
     "react": "^17.0.1",
+    "react-alert": "^7.0.2",
+    "react-alert-template-basic": "^1.0.0",
     "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

@@ -2,10 +2,10 @@
   text-align: center;
 }
 
-.App-logo {
+/* .App-logo {
   animation: App-logo-spin infinite 20s linear;
   height: 80px;
-}
+} */
 
 .App-header {
   background-color: #222;
@@ -26,3 +26,75 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+.validation-errors-display {
+  text-align: center;
+  margin-bottom: 2em;
+  background-color: #ffdbd9;
+}
+
+.validation-errors-display__list {
+  list-style-type: none;
+  padding: 0;
+}
+
+.navbar {
+  background-color: #333;
+  overflow: hidden;
+  padding: 20px;
+}
+
+.navbar a {
+  float: left;
+  color: #f2f2f2;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+  font-size: 17px;
+}
+
+.navbar a:hover {
+  background-color: #ddd;
+  color: black;
+}
+
+.navbar a.active {
+  background-color: #4CAF50;
+  color: white;
+}
+
+.checkout__select {
+  background-color: #4CAF50; 
+  border: none;
+  color: white;
+  padding: 0.5em;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+}
+
+.checkout__select:hover {
+  background-color: #3f3f3f; 
+}
+
+.checkout__bar {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  width: 100%;
+  background-color: #ededed;
+}
+
+/* .checkout__bar-rentals {
+  background-image: url('rentals-movie.png');
+  background-repeat: no-repeat;
+} */
+
+.footer {
+  background-color: #333;
+  overflow: hidden;
+  padding: 20px;
+  color: white;
+  text-align: center;
+}

src/App.js

@@ -1,21 +1,155 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-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>
+import React, {Component, useState, useEffect} from 'react';
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link,
+} from 'react-router-dom';
+import Customers from './Components/Customers'
+import Library from './Components/Library'
+import Search from './Components/Search'
+import Home from './Components/Home'
+import './App.css'
+import axios from 'axios';
+import { useAlert } from 'react-alert'
+
+export default function App() {
+  // BASE URL FOR API
+  const BASE_URL = 'http://localhost:3000/'
+  // error state
+  const [errorMessage, setErrorMessage] = useState('');
+  // errors 
+  const allErrors = (errorData) => {
+      const errors = [];
+
+      console.log(errorData)
+      for(const error of errorData) {
+      errors.push(<li>{error}</li>);
+      }
+
+      return errors;
+  }
+
+  const [vidAdded, setVidAdded] = useState(false); // used to update list without losing error messages
+
+  // state variables
+  const [videoList, setVideoList] = useState([]);
+  const alert = useAlert();
+
+  // get all videos 
+  useEffect(() => {
+    console.log(`${BASE_URL}videos`);
+      axios.get(`${BASE_URL}videos`)
+      .then((response) => {
+          setVideoList(response.data);
+          setErrorMessage(null);
+      })
+      .catch((error) => {
+          setErrorMessage([error.message, 'failed to retrieve videos in library.'])
+          console.log(error.message);
+      });
+  }, [vidAdded]);
+
+  // state for selected video
+  const [currentVideo, setVideo] = useState({id: NaN, title: '', imgUrl: 'favicon.ico'});
+  const getCurrentVideo = (curId, curTitle, curImg) => {
+    setVideo({id: curId, title: curTitle, imgUrl: curImg});
+  }
+
+  // state for selected customer
+  const [currentCustomer, setCurrentCustomer] = useState({id: NaN, name: ''})
+  const getCurrentCustomer = (custId, custName) => {
+    setCurrentCustomer({
+      id: custId,
+      name: custName
+    })
+  }
+
+  const onCheckOut = (event) => {
+    event.preventDefault();
+
+    console.log('checking out')
+    // axios post request goes here
+
+    const dueDate = new Date(new Date().getTime()+(7*24*60*60*1000));
+
+    axios.post(`${BASE_URL}rentals/${currentVideo.title}/check-out`, {
+      // eslint-disable-next-line camelcase
+      customer_id: currentCustomer.id,
+      // eslint-disable-next-line camelcase
+      due_date: dueDate
+    })
+    .then((response) => {
+      console.log(response);
+      alert.show(`${currentVideo.title} successfully checked out to ${currentCustomer.name}!`)
+    })
+    .catch((error) => {
+      console.log(error);
+      setErrorMessage([error.message.toLowerCase(), 'rental failed - please check inventory and that customer and video are valid']);
+      alert.show(`${errorMessage}`)
+    });
+
+    setVideo({id: NaN, title: '', imgUrl: 'favicon.ico'})
+    setCurrentCustomer({id: NaN, name: ''})
+
+  }
+
+  return (
+    <Router>
+      <div>
+        <header>
+          <nav className='navbar'>
+                <Link to="/">Home</Link>
+                <Link to="/search">Search</Link>
+                <Link to="/library">Video Library</Link>
+                <Link to="/customers">Customer List</Link>
+          </nav>
         </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
+        <section className='checkout__bar'> 
+          <article className='checkout__bar-rentals'>
+            <h1>Rentals</h1>
+            {currentCustomer.name && currentVideo.title ? <button onClick={onCheckOut} className='checkout__select'>Check-out</button> : null }
+          </article>
+          <article>
+            <h1>current customer</h1>
+            <h4>{currentCustomer.name ? currentCustomer.name : 'none selected'}</h4> 
+          </article>
+          <article>
+            <h1>current video</h1>
+            <h4>{currentVideo.title ? currentVideo.title : 'none selected'}</h4> 
+            <img src = {currentVideo.imgUrl} alt = {`Poster for ${currentVideo.title}`}/>         
+          </article>
+
+        </section>
+        <article className = 'validation-errors-display'>
+                <h3>{errorMessage ? 'errors detected!' : ''}</h3>
+                <ul className = 'validation-errors-display__list'>
+                    {errorMessage ? allErrors(errorMessage) : ''}
+                </ul>
+        </article> 
+        <Switch>
+          <Route path="/customers">
+            <Customers url = {BASE_URL} curCustomer = {getCurrentCustomer} />
+          </Route>
+          <Route path="/library">
+            <Library url = {`${BASE_URL}videos`} curVid = {getCurrentVideo} videoList = {videoList}/>
+          </Route>
+          <Route path="/search">
+            <Search curVid = {getCurrentVideo} setError = {setErrorMessage} videoList = {videoList} vidAdded = {vidAdded} setVidAdded = {setVidAdded}/>
+          </Route>
+          <Route path="/">
+            <Home />
+          </Route>
+        </Switch>
+
+        <footer className='footer'>
+          Copyrighted © by Pauline and Tram 2021
+        </footer>
+        {/* A <Switch> looks through its children <Route>s and
+            renders the first one that matches the current URL. */}
+
       </div>
-    );
-  }
+    </Router>
+  );
 }
 
-export default App;

src/App.test.js

@@ -1,9 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
+import { transitions, positions, Provider as AlertProvider } from 'react-alert'
+import AlertTemplate from 'react-alert-template-basic'
 
+// AlertProvider needs to wrap App in order to work; therefore must be included in test
 it('renders without crashing', () => {
   const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
+  console.log('ATTENTION!! This App uses react-alert, meaning App.test.js will look different to account for the implementation of this package.')
+  ReactDOM.render(  <AlertProvider template={AlertTemplate}>
+    <App />
+  </AlertProvider>, div);
   ReactDOM.unmountComponentAtNode(div);
 });

src/Components/Customer.css

@@ -0,0 +1,45 @@
+.customer {
+  background-color: #ededed;
+
+  padding: 1em 0;
+  margin: 0.5rem;
+
+  min-height: 250px;
+  min-width: 225px;
+  flex-basis: 18%;
+
+  border-radius: 5px;
+
+  display: grid;
+  grid-template-columns: 1fr 5fr 1fr;
+  align-items: center;
+}
+
+.customer__content {
+  grid-column-start: 2;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+
+  text-align: center;
+  font-weight: 100;
+  overflow: hidden;
+}
+
+.customer__select {
+  align-self: flex-start ;
+  font-family: 'Permanent Marker', Helvetica, sans-serif;
+  background-color: #4CAF50; 
+  border: none;
+  color: white;
+  padding: 0.5em;
+  text-align: center;
+  text-decoration: none;
+  /* display: inline-block; */
+  font-size: 16px;
+}
+
+.customer__select:hover {
+  background-color: #3f3f3f; 
+}

src/Components/Customer.js

@@ -0,0 +1,29 @@
+import React, { Component }  from 'react';
+import PropTypes from 'prop-types';
+import './Customer.css';
+
+const Customer = (props) => {
+
+    const onSelectCustomer = () => {
+        props.curCustomer(props.id, props.name)
+    }
+
+
+    return (
+        <div className='customer'>
+            <section className='customer__content'>
+                <h3>ID: {props.id}</h3>
+                <h4>{props.name}</h4>
+                <h4>Videos Checked Out: {props.videosCheckedOut}</h4>
+
+            </section>
+            <button className='customer__select' onClick={onSelectCustomer}>Select Customer</button>
+        </div>
+    )
+}
+
+Customer.propTypes = {
+
+};
+
+export default Customer;

src/Components/Customers.css

@@ -0,0 +1,4 @@
+.customers {
+  display: flex;
+  flex-wrap: wrap;
+}