water - Li & Marj

.gitignore

@@ -12,6 +12,7 @@
 /build
 
 # misc
+.env
 .DS_Store
 .env.local
 .env.development.local

package.json

@@ -3,15 +3,19 @@
   "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-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

@@ -1,3 +1,4 @@
+/* Original code */
 .App {
   text-align: center;
 }
@@ -26,3 +27,78 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+
+/* New code */
+main {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: 160px; /* Same as the width of the sidebar */
+  justify-content: center;
+  padding: 0px 10px;
+}
+
+nav li {
+  list-style: none;
+}
+
+nav ul {
+  margin: 0;
+  padding: 0;
+}
+
+.sidenav {
+  height: 100%; /* Full-height: remove this if you want "auto" height */
+  width: 160px; /* Set the width of the sidebar */
+  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
+  z-index: 1; /* Stay on top */
+  top: 0; /* Stay at the top */
+  left: 0;
+  background-color: #111; /* Black */
+  overflow-x: hidden; /* Disable horizontal scroll */
+  padding-top: 20px;
+  z-index: 2;
+}
+
+/* The navigation menu links */
+.sidenav a {
+  padding: 6px 8px 6px 16px;
+  text-decoration: none;
+  font-size: 25px;
+  color: #818181;
+  display: block;
+}
+
+/* When you mouse over the navigation links, change their color */
+.sidenav a:hover {
+  color: #f1f1f1;
+}
+
+/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
+@media screen and (max-height: 450px) {
+  .sidenav {padding-top: 15px;}
+  .sidenav a {font-size: 18px;}
+}
+
+.selected-container {
+  position: fixed;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+  background-color: white;
+  width: 100%;
+  height: 100px;
+  margin-bottom: 10px;
+  z-index: 1;
+}
+
+.lower {
+  margin-top: 120px;
+}
+
+.hide {
+  display: none;
+}
+
+.error-msg {
+  background-color: rgba(139, 0, 0, 0.6);
+  font-weight: bold;
+}

src/App.js

@@ -1,21 +1,202 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link
+} from 'react-router-dom';
+import Homepage from './components/Homepage'
+import Search from './components/Search'
+import Library from './components/Library'
+import CustomerList from './components/CustomerList'
 import './App.css';
+import CheckoutReturn from './components/CheckoutReturn';
 
-class App extends Component {
-  render() {
+const API_URL_BASE = 'http://localhost:3000/'
+
+const App = () => {
+
+    const [errorMessage, setErrorMessage] = useState(null);
+    const [customerList, setCustomerList] = useState([]);
+    const [currentCustomer, setCurrentCustomer] = useState(null);
+    const [videoList, setVideoList] = useState([]);
+    const [selectedVideo, setSelectedVideo] = useState(null)
+    const [searchResult, setSearchResult] = useState([]);
+    const [overdue, setOverdue] = useState([])
+
+
+    useEffect(() => {
+      axios.get(`${API_URL_BASE}customers`)
+        .then((response) => {
+          const apiCustomerList = response.data;
+          setCustomerList(apiCustomerList);
+        })
+        .catch((error) => {
+          setErrorMessage(error.message);
+        });
+    }, []);
+
+    useEffect(() => {
+      axios.get(`${API_URL_BASE}videos`)
+        .then((response) => {
+          const apiVideoList = response.data;
+          setVideoList(apiVideoList);
+        })
+        .catch((error) => {
+          setErrorMessage(error.message);
+        });
+    }, []);
+
+    useEffect(() => {
+      axios.get(`${API_URL_BASE}rentals/overdue`)
+      .then((response) => {
+        const overdueList = response.data
+        setOverdue(overdueList)
+      })
+      .catch((error) => {
+        setErrorMessage(error.message);
+      });
+    }, []);
+
+    const selectedCustomer = (id) => {
+      if (currentCustomer && id === currentCustomer.id) {
+        setCurrentCustomer(null)
+      } else {
+        const customer = customerList.find((customer) => {
+          return customer.id === id;
+        });
+        setCurrentCustomer(customer);
+      }
+    };
+
+    const selectVideo = (id) => {
+        if (selectedVideo && id === selectedVideo.id) {
+        setSelectedVideo(null)
+      } else {
+        const video = videoList.find((video) => {
+          return video.id === id;
+        });
+        setSelectedVideo(video)
+      }
+    };
+
+
+ const searchVideo = (video) => {
+      axios.get(`${API_URL_BASE}videos?query=${video}`)
+      .then((response) => {
+        const results = response.data;
+        setSearchResult(results);
+      })
+      .catch((error) => {
+        setErrorMessage(error.message);
+      });
+    };
+
+    const addVideo = (video) => {
+      axios.post(API_URL_BASE+'videos', video)
+      .then( response => {
+        const newVideoList = [...videoList, response.data]
+        console.log(newVideoList)
+
+        setVideoList(newVideoList)
+      })
+      .catch( error => {
+        const errors = error.response.data.errors
+        setErrorMessage(errors)
+      }) 
+    };
+
+
+    const checkoutVideo = (params) => {
+      axios.post(`${API_URL_BASE}/rentals/${selectedVideo.title}/check-out`, params)
+      .then((response) => {
+        alert(`Successfully checked out ${selectedVideo.title}`)
+      })
+      .catch((error) => {
+        alert(`Sorry, we were unable to check out ${selectedVideo.title}`)
+        setErrorMessage(error.message);
+      });
+      setSelectedVideo(null)
+      setCurrentCustomer(null)
+    }
+
+    const returnVideo = (params) => {
+      axios.post(`${API_URL_BASE}/rentals/${selectedVideo.title}/return`, params)
+      .then((response) => {
+        alert(`Successfully returned ${selectedVideo.title}`)
+      })
+      .catch((error) => {
+        alert(`Sorry, we were unable to return ${selectedVideo.title}`)
+        setErrorMessage(error.message);
+      });
+      setSelectedVideo(null)
+      setCurrentCustomer(null)
+    }
+
     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>
+      <Router>
+      <div>
+        <nav className='sidenav'>
+          <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>
+        <main>
+          {errorMessage ? <div><h2 className="error-msg">{errorMessage}</h2></div> : ''}
+
+          <section className={`selected-container ${currentCustomer || selectedVideo ? '' : 'hide'}`}>
+            <CheckoutReturn 
+                currentCustomer={currentCustomer} 
+                selectedVideo={selectedVideo}
+                onCheckoutVideo={checkoutVideo}
+                onReturnVideo={returnVideo}
+            />
+          </section>
+          <section className={`${currentCustomer || selectedVideo ? 'lower' : ''}`}>
+            <Switch>
+              <Route path='/search'>
+                <Search 
+                searchVideoCallback={searchVideo} 
+                searchResult={searchResult} 
+                addVideoCallback={addVideo}
+                videos={videoList}/>
+              </Route>
+              <Route path='/library'>
+                <Library 
+                  videos={videoList} 
+                  selectedVideo={selectedVideo} 
+                  onSelectVideoCallback= {selectVideo}
+                />
+              </Route>
+              <Route path='/customers'>
+               <CustomerList 
+                customers={customerList} 
+                selectCustomerCallback={selectedCustomer} 
+                currentCustomer={currentCustomer}/>
+              </Route>
+              <Route path='/'>
+                <Homepage overdue={overdue}/>
+              </Route>
+            </Switch>
+          </section>
+
+        </main>
       </div>
+    </Router>
     );
-  }
+
 }
 
-export default App;
+export default App;

src/components/CheckoutReturn.css

@@ -0,0 +1,24 @@
+.main-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.movie {
+  display: flex;
+  align-items: center;
+}
+.thumbnail {
+  height: 80px;
+  margin: 0 5px;
+}
+
+.hide {
+  visibility: hidden;
+}
+
+.checkout-video, .return-video {
+  font-size: 20px;
+  border-radius: 12px;
+  padding: 10px 24px;
+}