fire - Kalki and Noor

package.json

@@ -3,15 +3,19 @@
   "version": "0.1.1",
   "private": true,
   "dependencies": {
+    "axios": "^0.21.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-scripts": "4.0.1"
+    "react-flash-message": "^1.0.5",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "4.0.1",
+    "react-select": "^3.2.0"
   },
   "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,28 +1,104 @@
-.App {
+
+
+.checkout {
   text-align: center;
+  padding: 5px ;
+  font-size:15px;
+  background-color: pink;
+
+
+
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+.movie {
+  padding: 1px ;
+  font-size:25px;
+  background-color: pink;
+  display: inline-box;
+  font-family: 'Helvetica Neue', sans-serif;
+
+
 }
 
-.App-header {
-  background-color: #222;
-  height: 150px;
+.directions {
+  padding: 1px ;
+  font-size:20px;
+  background-color: pink;
+  display: inline-box;
+  font-family: 'Fantasy	', sans-serif;
+
+}
+
+
+.customer {
+  padding: 1px ;
+  font-size:25px;
+  display: inline-box;
+  font-family: 'Helvetica Neue', sans-serif;
+
+
+}
+
+.button {
+  font-size:20px;
+
+}
+
+.navbar {
+  color:#999;
+  /* background:rgba(247, 244, 244, 0.5); */
+  padding:20px;
+  font-size:20px;
+  text-decoration:none;
+  letter-spacing:2px;
+  text-transform:uppercase;
+  /* position: fixed; Set the navbar to fixed position */
+  top: 0; /* Position the navbar at the top of the page */
+  width: 100%; /* Full width */
+  text-align: center;
+    background-image: url("https://t4.ftcdn.net/jpg/02/52/89/41/240_F_252894144_hW1DLUX9zrCLh64ScJGbc2r3HhPFsGfQ.jpg");
+
+}
+
+.nav-link-list  {
+  display: inline-block;
+  list-style: none;
+  text-align: center;
+  padding: 10px ;
   padding: 20px;
-  color: white;
+  background-color: #f7a2f77a;  
 }
 
-.App-title {
-  font-size: 1.5em;
+a {
+  text-decoration: none;
 }
+.nav-link-list:hover{
+  border:none;
+  background:rgba(215, 153, 243, 0.479);
+  background:#fff;
+  padding:30px 30px;
+  color:#1b1b1b;
+  width: 100;
 
-.App-intro {
-  font-size: large;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+
+.App-main-div {
+  padding: 100px ;
+  /* background-color: purple; */
+
+
 }
+
+.welcome-banner {
+  padding: 50px;
+  font-size: 50px;
+  color: rgb(41, 38, 38); 
+  font-family: 'Helvetica Neue', sans-serif;
+  font-size: 100px; font-weight: bold; 
+  letter-spacing: -1px; 
+  line-height: 1; text-align: center; 
+  /* background-image: url("https://ak.picdn.net/shutterstock/videos/7018603/thumb/1.jpg"); */
+
+}
+

src/App.js

@@ -1,21 +1,139 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
 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>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-      </div>
-    );
+
+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';
+
+const App = () => {
+
+const CUSTOMERS_URL = 'http://localhost:3000/customers';
+const VIDEOS_URL = 'http://localhost:3000/videos';
+
+
+const [customersList, setCustomersList] = useState([])
+const [selectedCustomer, setSelectedCustomer] = useState(null)
+
+const [videosList, setVideosList] = useState([])
+const [selectedVideo, setSelectedVideo] = useState(null)
+
+const [errorMessage, setErrorMessage] = useState(null);
+const [successMessage, setSuccessMessage] = useState(null);
+
+const onSelectCustomerCallback = (customerId) => {
+  setSelectedCustomer(customersList.find((customer)=> customer.id == customerId))
+}
+
+const onSelectVideoCallback = (videoId) => {
+  setSelectedVideo(videosList.find((video)=> video.id == videoId))
+}
+
+useEffect(() => {
+  axios.get(CUSTOMERS_URL)
+    .then((response) => {
+      setCustomersList(response.data);
+    })
+    .catch((error) => {
+      setErrorMessage(error.message);
+    });
+}, []);
+
+useEffect(() => {
+  axios.get(VIDEOS_URL)
+    .then((response) => {
+      setVideosList(response.data);
+    })
+    .catch((error) => {
+      setErrorMessage(error.message);
+    });
+}, []);
+
+const onCheckout = () => {
+  if(selectedVideo != null && selectedCustomer != null){
+  setVideosList(videosList.filter((video) => video.id != selectedVideo.id))
+  setTimeout(() => {setSuccessMessage(null)},5000)
+  setSuccessMessage(`The Movie "${selectedVideo.title}" was successfully checked out for the customer "${selectedCustomer.name}`)
+  setSelectedVideo(null)
+  setSelectedCustomer(null)
   }
 }
 
-export default App;
+
+  return (
+
+    <Router className = 'App-main-div'>
+      <div >
+        <nav className= 'navbar'>
+          <ul >
+          <li className= 'nav-link-list'> <Link to="/">Home</Link> </li> 
+          <li className= 'nav-link-list'> <Link to="/search">Search </Link> </li>
+          <li className= 'nav-link-list'> <Link to="/library">Library </Link> </li>
+          <li className= 'nav-link-list'> <Link to="/customers">Customers </Link> </li>
+          </ul>
+        </nav>
+
+        <h1 className = 'welcome-banner'> BINGE</h1>
+
+        <div className = 'checkout' >
+          <p className = 'directions' >Please select one customer and one movie to checkout.</p>
+          <p className = 'movie'> Movie: {selectedVideo? selectedVideo.title : ''} </p>
+          <p className = 'customer'> Customer: {selectedCustomer ? selectedCustomer.name : ''} </p>
+            <button className = 'button' onClick={onCheckout}> Checkout </button>
+            <div>
+              <strong>{successMessage}</strong>
+            </div>
+        </div>
+
+      </div>
+        {/* A <Switch> looks through its children <Route>s and
+            renders the first one that matches the current URL. */}
+        <Switch>
+
+          <Route path="/search">
+            <Search />
+          </Route>
+
+          <Route path="/library">
+            <Library videosList = {videosList} onSelectVideoCallback ={onSelectVideoCallback}/>
+          </Route>
+
+          <Route path="/customers">
+            <Customers customersList={customersList} onSelectCustomerCallback ={onSelectCustomerCallback} />
+          </Route>
+
+          <Route path="/">
+            <Home />
+          </Route>
+
+        </Switch>
+    </Router>
+
+  );
+}
+
+function Home() {
+  return <h2></h2>;
+}
+
+function SearchVideo() {
+  return <h2></h2>;
+}
+
+function LibraryList() {
+  return <h2></h2>;
+}
+
+function CustomersList() {
+  return <h2></h2>;
+}
+
+export default App; 

src/components/Customer.css

@@ -0,0 +1,4 @@
+.default_image{
+    width: 30%;
+    height: 55%;
+}

src/components/Customer.js

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import './Customer.css'
+import PropTypes from 'prop-types';
+
+
+
+const Customer = (props) => {
+    const [showCustomerDetails, setShowCustomerDetails] = useState(false)
+    const onSelect = () => {
+        props.onSelectCustomerCallback(props.id);
+    }
+
+    return (
+        <div className="customer">
+        <h2>{props.name}</h2>
+        <img className='default_image' src='https://i.pinimg.com/originals/2a/e0/fb/2ae0fbcdb3a950b6153a5fcefc0c9fb7.jpg' alt='default image'
+        onMouseEnter={() => setShowCustomerDetails(true)}
+        onMouseLeave={() => setShowCustomerDetails(false)}/>
+        {showCustomerDetails && (
+            <ul>
+            <p>Address: {props.address}, {props.city}, {props.state}-{props.postal_code}  </p>
+            <p>Phone: {props.phone}</p>
+            <p>Account Credit: {props.account_credit}</p>
+            <p>Videos Checked Out: {props.videos_checked_out_count}</p>
+        </ul>
+        )}
+        <br/>
+        <button onClick={onSelect}> Select </button>
+        </div>
+    )
+}
+
+
+export default Customer; 

src/components/Customers.css

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

src/components/Customers.js

@@ -0,0 +1,33 @@
+import React from 'react';
+// import PropTypes from 'prop-types';
+import './Customers.css';
+import Customer from './Customer';
+
+
+const Customers = (props) => {
+    const sortedCustomersList = props.customersList.sort((a,b) => (a.name > b.name ? 1:-1));
+    const customersResponseData = sortedCustomersList.map((customer) => {
+        return ( < Customer
+            key = {customer.id}
+            id = {customer.id}
+            name = {customer.name}
+            address = {customer.address}
+            city = {customer.city}
+            state = {customer.state}
+            postal_code = {customer.postal_code}
+            phone = {customer.phone}
+            account_credit = {customer.account_credit}
+            videos_checked_out_count = {customer.videos_checked_out_count}
+            onSelectCustomerCallback = {props.onSelectCustomerCallback}
+            /> );
+    });
+
+
+    return (
+        <div className = 'customers'>
+            {customersResponseData}
+        </div>
+    )
+}
+
+export default Customers; 

src/components/Library.css

@@ -0,0 +1,5 @@
+
+.library {
+    display: flex;
+    flex-wrap: wrap;
+}