Earth - Ana, Olga

package.json

@@ -3,15 +3,18 @@
   "version": "0.1.1",
   "private": true,
   "dependencies": {
+    "axios": "^0.21.1",
+    "moment": "^2.29.1",
     "react": "^17.0.1",
     "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.js

@@ -1,21 +1,98 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { useState } from 'react';
+// import './App/css';
+import Nav from './components/Nav';
+import Selected from './components/Selected';
+import Search from './components/Search';
+import axios from 'axios';
+import moment from 'moment';
 
-class App extends Component {
-  render() {
+import Library from './components/Library';
+
+import Home from './components/Home';
+import Customers from './components/Customers';
+import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
+
+const API_URL_BASE = 'http://localhost:3000/'
+
+const App = () => {
+
+
+  const [currentCustomer, setCurrentCustomer] = useState(null) 
+  const [selectedVideo, setSelectedVideo]= useState(null);
+  const [errorMessage, setErrorMessage] = useState(null);
+
+
+  // useEffect(() => {
+  //   axios.get(`${API_URL_BASE}customers`)
+  //   .then((response) => {
+  //     const apiCustomerList = response.data;
+  //     setCustomerList(apiCustomerList);
+  //   })
+  //   .catch((error) => {
+  //     setErrorMessage(error.message);
+  //   });
+  // }, []); 
+
+  const selectCustomer = (customer) => {
+    if (currentCustomer && customer.id === currentCustomer.id) {
+      setCurrentCustomer(null)
+    } else {
+      setCurrentCustomer(customer);
+    }
+  }
+  const selectVideo = (video) => {
+    if (selectedVideo && video.id === selectedVideo.id) {
+      setSelectedVideo(null);
+    } else {
+      setSelectedVideo(video);
+    }
+  }
+  const getDueDate = () => {
+    const date = new Date()
+    date.setDate(date.getDate() + 7)
+  return (moment(date).format('MMM, D YYYY'));
+  }
+
+  const checkoutVideo = () => {
+
+    // const date = new Date();
+    // date.setDate(date.getDate() + 7);
+
+    axios.post(API_URL_BASE + 'rentals/' + selectedVideo.title + '/check-out?customer_id=' + currentCustomer.id + '&due_date=' + getDueDate())
+
+    .then((response) => {
+      console.log(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)
+  }
+
+// add a callback function that reset the states to 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>
-      </div>
+      <Router>
+        <div className="App">
+          <Nav />
+          <Selected video={selectedVideo} customer={currentCustomer} onCheckout={checkoutVideo}/>
+          <Switch>
+            <Route path="/" exact component={Home} />
+            <Route path="/search" component={Search} />
+            <Route path="/library">
+              <Library 
+              onSelectVideo={selectVideo}/>
+            </Route>
+            <Route path="/customers">
+              <Customers
+              selectCustomerCallback={selectCustomer}/>
+            </Route>
+          </Switch>
+        </div>
+      </Router>
     );
   }
-}
 
 export default App;

src/components/Customer.css

@@ -0,0 +1,15 @@
+
+.customer {
+    padding: 1em 0;
+    margin: 0.5rem;
+
+    min-height: 130px;
+    min-width: 100px;
+    flex-basis: 10%;
+
+    border-radius: 5px;
+
+    display: grid;
+    grid-template-columns: 1fr 5fr 1fr;
+    align-items: center;
+  }

src/components/Customer.js

@@ -0,0 +1,22 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Customer.css'
+
+const Customer = (props) => {
+
+    // const {customer, callback} = props; 
+
+    return (
+
+        <div className="customer">
+        <button onClick={() => {props.onClickCallback(props.customer)}}>select</button>
+        <h3 className="customer__content">{props.customer.name}</h3>
+      </div>
+    )
+};
+
+Customer.propTypes = {
+    name: PropTypes.string.isRequired
+};
+export default Customer;

src/components/Customers.css

@@ -0,0 +1,14 @@
+.customers-list {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+}
+
+button {
+    border: none;
+    padding: 10px;
+    background-color: black;
+    color: white;
+    margin: 10px;
+    outline: none;
+  }
+

src/components/Customers.js

@@ -0,0 +1,50 @@
+import React,{useState, useEffect} from 'react';
+import axios from 'axios';
+import Customer from './Customer'
+import PropTypes from 'prop-types';
+import './Customers.css'
+
+const Customers = (props) => {
+
+    const allCustomersURL = 'http://localhost:3000/customers'
+
+    const [customers,setCustomersList] = useState([]);
+    const [errorMessage,setErrorMessage] = useState(null);
+
+    // this will get us a list of customers from API and update the state
+    useEffect(() => {
+        axios.get(allCustomersURL)
+        .then((response) => {
+            setCustomersList(
+                response.data
+            );
+        })
+        .catch((error) => {
+            setErrorMessage(error.message); // improve error messages 
+        });
+    }, []);
+
+        // taking customer obj and turning into customer component 
+    const CustomerComponents = customers.map((customer) => {
+        return (< Customer 
+            key={customer.id}
+            customer={customer}
+            onClickCallback={props.selectCustomerCallback}
+            />)
+        })
+
+    return (
+        <div className= 'Customers'>
+            <ul className= "customers-list" >
+            <h3> All Customers</h3>
+            {CustomerComponents}
+            { errorMessage ? <div><h2>{errorMessage}</h2></div> : ''}
+            </ul>
+        </div>
+        );
+    };
+
+Customers.propTypes = {
+    selectCustomerCallback: PropTypes.func.isRequired
+}
+export default Customers;

src/components/Home.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Home = () => {
+    return (
+        <h3>Home page</h3>
+        );
+    };
+
+export default Home;

src/components/Library.css

@@ -0,0 +1,12 @@
+.grid-columns {
+    column-count: 2;
+    display: flex;
+    flex-wrap: wrap;
+    width: auto;
+    text-align: center;
+    margin: auto;
+  }
+
+.body-header {
+  text-align: center;
+}

src/components/Library.js

@@ -0,0 +1,40 @@
+import axios from 'axios';
+import React, { useState,useEffect } from 'react';
+import './Library.css';
+import SelectableVideo from './SelectableVideo';
+
+const Library = (props) => {
+
+    const allVideosURL = 'http://localhost:3000/videos'
+
+    const [videos, setVideos] = useState([])
+    const [errorMessage, setErrorMessage] = useState(null)
+
+    useEffect(() => {
+        axios.get(allVideosURL)
+        .then((response) => {
+            setVideos(
+                response.data
+            );
+        })
+        .catch((error) => {
+            setErrorMessage(error.message);
+        });
+    }, []);
+
+    const movieComponents = videos.map((moviesInfo) => {
+        return (<SelectableVideo video={moviesInfo} key={moviesInfo.id} onSelectVideo={props.onSelectVideo}/>)
+    })
+
+    return (
+        <div className='Video-rental-library'>
+            <h1 className='body-header'>Video Rental Library</h1>
+            <section className= 'grid-columns'>
+            {movieComponents}
+            </section>
+        </div>
+
+        );
+    };
+
+export default Library;

src/components/Nav.css

@@ -0,0 +1,16 @@
+nav {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    min-height: 10vh;
+    background: lightblue;
+    color: white;
+    }
+
+.nav-links {
+    width: 40%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    list-style: none;
+    }

src/components/Nav.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import './Nav.css';
+import {Link} from 'react-router-dom';
+
+const Nav = () => {
+return (
+    <nav>
+    <h3>Video rental store</h3>
+        <ul className="nav-links">
+		<Link to="/search"> 
+			<li>Search</li>
+		</Link>
+		<Link to="/library">
+			<li>Library</li>
+		</Link>
+		<Link to="/customers">
+			<li>Customers</li>
+		</Link>
+		{/* <Link to="/checkout">
+			<li>Checkout</li>
+		</Link> */}
+        </ul> 
+    </nav>
+);
+};
+
+export default Nav;

src/components/Search.css

@@ -0,0 +1,17 @@
+.search {
+
+    margin: auto;
+    margin-top: 40px;
+    width: 90%
+}
+
+
+
+.search-form {
+    margin: auto;
+    width: 30%;
+}
+
+/* .form {
+    display: inline-block;
+}  */