🌊 - Sophia & Kim

package.json

@@ -3,15 +3,25 @@
   "version": "0.1.1",
   "private": true,
   "dependencies": {
+    "axios": "^0.21.1",
+    "bootstrap": "^4.6.0",
+    "bootswatch": "^4.5.3",
+    "history": "^5.0.0",
+    "jquery": "^3.5.1",
+    "popper.js": "^1.16.1",
     "react": "^17.0.1",
+    "react-bootstrap": "^1.4.3",
     "react-dom": "^17.0.1",
+    "react-flash-message": "^1.0.5",
+    "react-router": "^5.2.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",

src/App.js

@@ -1,21 +1,102 @@
-import React, { Component } from 'react';
+import React, { Component, useState } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import {
+  BrowserRouter as Router,
+  Link,
+  Route,
+} from 'react-router-dom';
+import { Switch } from 'react-router';
+import Videos from './components/Videos';
+import DisplayVideoDetail from './components/DisplayVideoDetail';
+import Customers from './components/CustomerList';
+import DisplayCustomerDetail from './components/DisplayCustomerDetail';
+import Search from './components/Search';
+import Home from './components/Home';
+import Checkout from './components/Checkout';
+import Return from './components/Return';
 
-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>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
+const App = () => {
+  const [selectedCustomer, setSelectedCustomer] = useState();
+  const [selectedVideo, setSelectedVideo] = useState();
+
+  const setSelectedVideoCallBack = (video) => {
+    setSelectedVideo(video);
+  };
+
+  const setSelectedCustomerCallBack = (customer) => {
+    setSelectedCustomer(customer);
+  };
+
+  return (
+    <Router>
+      <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
+      <img src="https://fontmeme.com/permalink/210121/d12905ae2e494bd311c87be209dcc73f.png" alt="kim-sophia-netflix-font" border="0"></img>     
+       <h3>
+        <ul className="navbar-nav mr-auto">
+          <li className="nav-item">
+            <Link className="nav-link" to="/">Home</Link>
+          </li>
+          <li className="nav-item">
+            <Link className="nav-link" to="/search">Search</Link>
+          </li>
+          <li className="nav-item">
+            <Link className="nav-link" to="/customers">Customers</Link>
+          </li>
+          <li className="nav-item">
+            <Link className="nav-link" to="/videos">Videos</Link>
+          </li>
+        </ul>
+        </h3>
+      </nav>
+
+      <div className="p-3">
+        <div className="CheckoutReturn">
+          {selectedVideo && selectedCustomer && <Checkout video={selectedVideo.title} customer={selectedCustomer}/>}
+        </div>
+        <br></br>
+        <div className="CheckoutReturn">
+          {selectedVideo && selectedCustomer && <Return video={selectedVideo.title} customer={selectedCustomer}/>}
+        </div>
+        <br></br>
+
+        <Switch>
+          <Route path="/videos">
+            <Videos setSelectedVideoCallBack={setSelectedVideoCallBack}/>
+          </Route>
+          <Route path="/customers">
+            <Customers setSelectedCustomerCallBack={setSelectedCustomerCallBack}/>
+          </Route>
+          <Route path="/search">
+            <Search/>
+          </Route>
+          <Route path="/">
+            <Home/>
+          </Route>
+        </Switch>
+
+        {
+          (selectedCustomer || selectedVideo) &&
+          <div className="container pt-4">
+            <div className="row">
+              <div className="col">
+                {
+                  selectedCustomer &&
+                  <DisplayCustomerDetail customer={selectedCustomer}/>
+                }
+              </div>
+              <div className="col">
+                {
+                  selectedVideo &&
+                  <DisplayVideoDetail video={selectedVideo}/>
+                }
+              </div>
+            </div>
+          </div>
+        }
       </div>
-    );
-  }
-}
+    </Router>
+  );
+};
 
 export default App;

src/components/Checkout.js

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+// import FlashMessage from 'react-flash-message';
+const BASE_URL = 'http://localhost:3000/rentals';
+const axios = require('axios');
+
+
+const Checkout = (props) => {
+  const [checkoutMessage, setCheckoutMessage] = useState('');
+  const [isCheckingOut, setIsCheckingOut] = useState(false);
+
+  const checkoutVideo = () => {
+    if (!props.video) {
+      return;
+    }
+
+    let newDueDate = new Date();
+    newDueDate.setDate(newDueDate.getDate() + 7);
+    const formattedDueDate = newDueDate.toLocaleString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
+
+    axios.post(`${BASE_URL}/${props.video}/check-out`, {}, {
+      params: {
+        'customer_id': props.customer.id,
+        'due_date': formattedDueDate,
+      }
+    }).then((response) => {
+      setCheckoutMessage(props.customer.name + ' checked out: ' + props.video + '! Due Date: ' + formattedDueDate);
+      console.log('Successfully Checked Out Video' + props.video);
+    }).catch((error) => {
+      alert('Failed to check out video');
+      console.log('FAILED ON API CALL');
+    });
+  }
+
+  const onSubmitCheckout = (event) => {
+    event.preventDefault();
+    checkoutVideo();
+    setIsCheckingOut(true)
+    setTimeout(() => {
+      setIsCheckingOut(false)
+    }, 5000)
+  }
+
+  return(
+    <span>
+      <button className="btn btn-success" onClick={ onSubmitCheckout }>
+        Check Out Video
+      </button>
+      {
+        isCheckingOut &&
+        <div className="alert alert-info">
+          <p>{ checkoutMessage }</p>
+        </div>
+      }
+    </span>
+  );
+}
+
+export default Checkout;

src/components/CustomerButton.js

@@ -0,0 +1,16 @@
+import React, { useState } from 'react';
+
+const CustomerButton = (props) => {
+
+  const onCustomerButtonClick = () => {
+    props.onClickCallBack(props.customer);
+  }
+
+  return (
+    <button className="customer-button btn btn-primary m-1" onClick={ onCustomerButtonClick }>
+      { props.customer.name }
+    </button>
+  );
+}
+
+export default CustomerButton;

src/components/CustomerList.js

@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types'
+import CustomerButton from './CustomerButton';
+const BASE_URL = 'http://localhost:3000/customers';
+const axios = require('axios');
+
+const CustomerList = (props) => {
+  const [customers, setCustomers] = useState([]);
+
+  useEffect(() => {
+    axios.get(BASE_URL)
+
+    .then((response) => {
+      setCustomers(response.data);
+    });
+
+  }, []);
+
+  const generateCustomerButtons = customers.map((customer) => {
+    return <CustomerButton key={ customer.id } customer={ customer } onClickCallBack={ props.setSelectedCustomerCallBack } />
+  })
+
+  return (
+  <div className="CustomerList">
+    { generateCustomerButtons }
+  </div>);
+};
+
+CustomerList.propTypes = {
+  setSelectedCustomerCallBack: PropTypes.func.isRequired,
+};
+
+export default CustomerList;

src/components/Customers.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import CustomerList from './CustomerList';
+
+const Customers = ({ setSelectedCustomerCallBack }) => {
+  return (
+    <div className="customers">
+      <CustomerList setSelectedCustomerCallBack={ setSelectedCustomerCallBack } />
+    </div>
+  );
+};
+
+export default Customers;

src/components/DisplayCustomerDetail.js

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+const DisplayCustomerDetail = ({ customer }) => {
+  return(
+    <div className="video-container">
+      <h3>{ customer.name }</h3>
+        <p><span>Registered At: </span> { customer.registered_at }</p>
+
+        <ul>
+          <li><span>Address: </span> { customer.address }</li>
+          <li><span>City: </span> { customer.city }</li>
+          <li><span>State: </span> { customer.state }</li>
+          <li><span>Postal Code: </span> { customer.postal_code }</li>
+          <li><span>Phone: </span>Phone: { customer.phone }</li>
+        </ul>
+    </div>
+  );
+};
+
+DisplayCustomerDetail.propTypes = {
+  customer: PropTypes.object,
+};
+
+export default DisplayCustomerDetail;

src/components/DisplayVideoDetail.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const DisplayVideoDetail = ({ addToLibraryCallback, video }) => {
+
+  if (!video.title) return null; 
+
+  return <div className="video-container">
+    <h3>
+      <span className="video-details"></span>{video.title}
+    </h3>
+    <p>
+      <span className="video-details">Release Date: </span>{video.release_date},
+      <span className="video-details">Overview: </span>{video.overview}
+    </p>
+    <img src={ video.image_url } alt={ `${video.title} image` } />
+    <br></br>
+    {
+      addToLibraryCallback &&
+      <button className='btn btn-primary' onClick={ () => { addToLibraryCallback(video) } }>
+        Add To Library
+      </button>
+    }
+  </div>
+};
+
+DisplayVideoDetail.propTypes = {
+  selectedVideo: PropTypes.object,
+};
+
+export default DisplayVideoDetail;

src/components/Home.css

@@ -0,0 +1,11 @@
+div.home {
+    border-radius: 30px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+}
+
+img {
+    padding: 10px;
+}

src/components/Home.js

@@ -0,0 +1,29 @@
+import React, { useState, useEffect } from 'react';
+import './Home.css';
+const BASE_URL = 'http://localhost:3000/videos';
+const axios = require('axios');
+
+const Home = () => {
+  const [videos, setVideos] = useState([]);
+
+  useEffect(() => {
+    axios.get(BASE_URL)
+
+    .then((response) => {
+      setVideos(response.data);
+    });
+
+  }, []);
+
+  return (
+
+    <div className="home">
+      {
+        videos.map((video) => <img src={ video.image_url } alt={ `${video.title}` } />)
+      }
+    </div>
+
+  )
+};
+
+export default Home;