Water - Christabel & Kayla

.gitignore

@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+graveyard

package.json

@@ -3,8 +3,13 @@
   "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": "^5.2.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1"
   },
   "devDependencies": {

src/App.css

@@ -1,28 +1,64 @@
 .App {
   text-align: center;
+  /* background-color: #22254b; */
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+.navbar{
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  min-height: 10vh;
+  background: rgb(73, 79, 82);
+  color: white;
+}
+
+.nav-link{
+  width: 60%;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  list-style: none;
 }
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
+.link{
   color: white;
+  text-decoration: none;
 }
 
-.App-title {
-  font-size: 1.5em;
+.link:hover{
+  color: white;
 }
 
-.App-intro {
-  font-size: large;
+.Home:hover {
+  color: #EC7063;
+  font-weight: bolder;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.Customer:hover {
+  color: yellow;
+  font-weight: bolder;
 }
+
+.VideoLibrary:hover {
+  color: #D35400;
+  font-weight: bolder;
+}
+
+.Search:hover {
+  color: #D4AC0D;
+  font-weight: bolder;
+}
+
+.router__div--selected-item {
+  background-color: rgb(165, 127, 255);
+  font-size: smaller;
+}
+
+.router__button--check-out {
+  /* color:cadetblue; */
+  background-color: rgb(77, 253, 253);
+}
+
+.overdue {
+  background-color: #FF727B;
+}

src/App.js

@@ -1,21 +1,188 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
+import React, {useState, useEffect} from 'react';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import axios from 'axios';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import { Button } from 'react-bootstrap';
+import Home from './components/Home';
+import Customer from './components/Customer';
+import CustomerList from './components/CustomerList';
+import Video from './components/Video';
+import VideoLibrary from './components/VideoLibrary';
+import Search from './components/Search';
+import Nav from './components/Nav';
+import Rental from './components/Rental'
 import './App.css';
 
-class App extends Component {
-  render() {
-    return (
+const BASE_URL = 'http://localhost:3000'
+
+function App() {
+  const [errorMessage, setErrorMessage] = useState(null);
+  const [customerList, setCustomerList] = useState([]);
+  const [videoLibrary, setVideoLibrary] = useState([]);
+
+  const [overdueRentals, setOverdueRentals] = useState([]);
+
+  const [searchResults, setSearchResults] = useState([]);
+
+  const [selectedVideoTitle, setSelectedVideoTitle] = useState('');
+  const [selectedCustomerId, setSelectedCustomerId] = useState('');
+  const [selectedCustomerName, setSelectedCustomerName] = useState('');
+
+  useEffect(() => {
+    axios.get(BASE_URL + '/videos')
+    .then((response) => {
+      const apiVideoLibrary = response.data;
+      setVideoLibrary(apiVideoLibrary);
+    })
+    .catch((error) => {
+      const message=`Video list did not load. ${error.message}.`;
+      setErrorMessage(message);
+      console.log(message);
+    })
+  }, []);
+
+  useEffect(()=> {
+    axios.get(`${BASE_URL}/customers`)
+      .then ((response) => {
+        const apiCustomerList = response.data
+        setCustomerList(apiCustomerList);
+      })
+      .catch((error) => {
+        const message=`Customer list did not load. ${error.message}.`;
+        setErrorMessage(message);
+        console.log(message);
+      })
+  }, []);
+
+  //overdue rentals
+  const loadOverdueRentals = () => {
+    axios.get(BASE_URL + '/rentals/overdue')
+      .then((response) =>{
+        if (response.data) {
+          setOverdueRentals(response.data);
+        }
+        console.log(`overdue rentals: ${overdueRentals.length}`)
+      })
+      .catch((error) => {
+        const message=`Overdue rentals not loaded. ${error.message}.`;
+        setErrorMessage(message);
+        console.log(message);
+      })
+  }
+  useEffect(() => {
+    loadOverdueRentals();
+  }, [])
+
+  //search results
+  const onSearchRequestCallback = (searchTerm) => {
+    axios.get(BASE_URL + '/videos?query=' + searchTerm)
+      .then((response) => {
+        const apiSearchResults = response.data;
+        setSearchResults(apiSearchResults);
+      })
+      .catch((error) => {
+        const message=`Search failed. ${error.message}.`;
+        setErrorMessage(message);
+        console.log(message);
+      })
+  }
+
+  const addToCollectionCallback = (result) => {
+    axios.post(BASE_URL + '/videos', result )
+    .then((response) => {
+      const message =`${result.title} Added to Collection!`; 
+      const newSearchResults = [...searchResults];
+      setSearchResults(newSearchResults);
+      console.log(message);
+    })
+    .catch((error) => {
+      const message=`Error. Video could not be added to collection. ${error.message}.`;
+      setErrorMessage(message);
+      console.log(message);
+    })
+  }
+
+  //load rental selections (ie if page refreshes??)
+  useEffect(() => {
+    const storedVideoTitle = sessionStorage.getItem('selectedVideoTitle');
+    const storedCustomerId = sessionStorage.getItem('selectedCustomerId');
+    const storedCustomerName = sessionStorage.getItem('selectedCustomerName');
+
+    setSelectedVideoTitle(storedVideoTitle);
+    setSelectedCustomerId(storedCustomerId);
+    setSelectedCustomerName(storedCustomerName);
+  }, [])
+
+  //rental checkout callback
+  const onRentalRequestCallback = (selectedCustomerId, selectedVideoTitle) => {
+    const rentalObject = {
+      // eslint-disable-next-line camelcase
+      customer_id: selectedCustomerId,
+      title: selectedVideoTitle,
+    }
+    axios.post(BASE_URL + '/rentals/'+ selectedVideoTitle + '/check-out', rentalObject )
+    .then((response) => {
+
+      setSelectedVideoTitle('');
+      setSelectedCustomerId('');
+      setSelectedCustomerName('');
+      sessionStorage.clear();
+
+      const message =`Checkout Complete!`; 
+      console.log(message)
+    })
+    .catch((error) => {
+      const message=`There was an error with your rental request. ${error.message}.`;
+      setErrorMessage(message);
+      console.log(message);
+    })
+  }
+
+  //video selection callback
+  const onSelectVideoForRentalCallback = (videoTitle) => {
+    sessionStorage.setItem('selectedVideoTitle', videoTitle);
+    setSelectedVideoTitle(videoTitle);
+    console.log(`${videoTitle} selected for rental`)
+  }
+
+  //user selection callback
+  const onSelectCustomerForRentalCallback = (customerId, customerName) => {
+    sessionStorage.setItem('selectedCustomerId', customerId)
+    sessionStorage.setItem('selectedCustomerName', customerName)
+    setSelectedCustomerId(customerId);
+    setSelectedCustomerName(customerName);
+    console.log(`${customerName}, id: ${customerId} selected for rental`)
+  }
+
+  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>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
+        <Nav />
+        <Rental onRentalRequest={onRentalRequestCallback} selectedVideoTitle={selectedVideoTitle} selectedCustomerId={selectedCustomerId} selectedCustomerName={selectedCustomerName} />
+
+        { errorMessage ? <h3 className='error-message'>{errorMessage}</h3> : 
+          <Switch>
+            <Route path="/" exact component={Home}/>
+            <Route path="/customers/:id" >
+              <Customer baseURL={BASE_URL} onSelectCustomerForRental={onSelectCustomerForRentalCallback} overdueRentals={overdueRentals} loadOverdueRentals={loadOverdueRentals} />
+            </Route>
+            <Route path="/customerlist">
+              <CustomerList customerList={customerList} />
+            </Route>
+            <Route path="/videos/:title">
+              <Video baseURL={BASE_URL} onSelectVideoForRental={onSelectVideoForRentalCallback}/>
+            </Route>
+            <Route path="/videolibrary">
+              <VideoLibrary videoLibrary={videoLibrary} overdueRentals={overdueRentals} loadOverdueRentals={loadOverdueRentals} />
+            </Route>
+            <Route path="/search">
+              <Search videoLibrary={videoLibrary} searchResults={searchResults} addToCollection={addToCollectionCallback} onSearchRequest={onSearchRequestCallback} />
+            </Route>
+          </Switch>
+        }
       </div>
-    );
-  }
+    </Router>
+  );
 }
 
 export default App;