Roshni & Madeline

package.json

@@ -3,15 +3,17 @@
   "version": "0.1.1",
   "private": true,
   "dependencies": {
+    "axios": "^0.21.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/ApiSupport.js

@@ -0,0 +1,9 @@
+import axios from 'axios'
+
+const BASE_URL = 'http://localhost:3000';
+
+const API = axios.create({
+  baseURL: BASE_URL,
+});
+
+export default API;

src/App.css

@@ -22,6 +22,37 @@
   font-size: large;
 }
 
+.App-cart {
+  float: right;
+  width: 25%;
+  border: 1px solid black;
+  border-radius: 5px;
+  margin-bottom: 12px;
+  padding: 20px;
+}
+
+.Nav-bar {
+  list-style-type: none;
+  margin: 0;
+  overflow: hidden;
+  background-color: 000000;
+  display: block;
+  color: white;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+
+li {
+  float: left;
+  display: inline;
+  float: left;
+  width: 25.0%;
+  color: white;
+  font-size: large;
+
+}
+
 @keyframes App-logo-spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }

src/App.js

@@ -1,21 +1,112 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
+import React, { Component, useState, useEffect } from 'react';
 import './App.css';
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link
+} from 'react-router-dom';
+import Home from './components/Home';
+import Library from './components/Library';
+import Search from './components/Search';
+import CustomerList from './components/CustomerList';
+import Customer from './components/Customer';
+import API from './ApiSupport'
+import './components/Library.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>
-    );
+
+const App = () => {
+  const [selectedCustomer, setSelectedCustomer] = useState(null);
+  const [selectedVideo, setSelectedVideo] = useState(null);
+
+  const [errorMessage, setErrorMessage] = useState(null);
+
+
+  const handleCheckout = () => {
+    let todaysDate = new Date();
+    todaysDate.setDate(todaysDate.getDate() + 7);
+
+    API.post(`rentals/${selectedVideo.title}/check-out`, {
+      // eslint-disable-next-line camelcase
+      customer_id: selectedCustomer.id,
+      // eslint-disable-next-line camelcase
+      due_date: todaysDate,
+
+    })
+      .then((response) => {
+        alert(`${selectedVideo.title} successfully checked out to ${selectedCustomer.name}.`);
+        setSelectedVideo(null);
+        setSelectedCustomer(null);
+      })
+      .catch((error) => {
+        alert(`Error: ${selectedVideo.title} can't be checked out to ${selectedCustomer.name}.`);
+      });
   }
+// this could be moved to the search item level if we wanted
+  const addVideo = (video) => {
+    API.post(`videos`, video)
+      .then((response) => {
+        // next time we visit the videos page retrieves videos again, so we don't need to update 
+        // const updatedLibrary = [...videoList, response.data]
+        alert('Video successfully added');
+        // setVideoList(updatedLibrary);
+        setErrorMessage('');
+      })
+      .catch((error) => {
+        alert('Video could not be added');
+      });
+  }
+
+  return (
+    <Router>
+      <div>
+        <nav className="Nav-bar">
+          <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>
+
+        <span className="App-cart" >
+            {selectedCustomer && selectedVideo ? <button onClick={handleCheckout}>Check Out</button> : null}
+            {/* <button onClick={handleCheckout}>Check Out</button> */}
+            {selectedCustomer !== null ? selectedCustomer.name : 'Select a customer' }
+            {selectedVideo !== null ?   selectedVideo.title : ` \n Select a video`  }
+          </span>
+
+        {/* A <Switch> looks through its children <Route>s and
+        renders the first one that matches the current URL. */}
+        <Switch>
+          <Route path="/customers/:id" component={Customer}>
+            <Customer />
+          </Route>
+          <Route path="/customers" >
+            <CustomerList onCustomerSelected={setSelectedCustomer} />
+          </Route>
+          <Route path="/search">
+            <Search addVideoCallback={addVideo}/>
+          </Route>
+          <Route path="/library">
+            <Library onVideoSelected={setSelectedVideo} />
+          </Route>
+          <Route path="/">
+            <Home />
+          </Route>
+        </Switch>
+      </div>
+    </Router>
+  );
 }
 
+
 export default App;

src/components/Customer.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Customer = (props) => {
+    return (
+        <div>{props.name}</div>
+    )
+}
+
+export default Customer; 

src/components/CustomerList.js

@@ -0,0 +1,58 @@
+import React, { useState, useEffect } from 'react'; 
+// import axios from 'axios';
+import API from '../ApiSupport'
+import Customer from './Customer';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+const CustomerList = (props) => {
+   // initially empty but changes during component's life cycle when API is called
+    const [customerList, setCustomerList] = useState([]);
+    const [errorMessage, setErrorMessage] = useState(null);
+
+    useEffect(() => {
+        API.get(`customers`)
+          .then((response) => {
+            const apiCustomerList = response.data; 
+            setCustomerList(apiCustomerList);
+          })
+          .catch((error) => {
+            setErrorMessage('Could not retrieve customers');
+          });
+      }, []);
+
+      const customerComponents = customerList.map((customer) => {
+        return (
+          errorMessage == null ?
+          <Link onClick={() => props.onCustomerSelected(customer)}>
+            <Customer 
+              key={customer.id}
+              id={customer.id}
+              registeredAt={customer.registered_at}
+              address={customer.address}
+              state={customer.state}
+              postalCode={customer.postal_code}
+              phone={customer.phone}
+              accountCredit={customer.account_credit}
+              name={customer.name}
+              videosCheckedOutCount={customer.videos_checked_out_count}
+            />
+          </Link>
+          : errorMessage
+        )
+      })
+
+        return (
+          <div>
+            {customerComponents}
+          </div>
+        )
+}
+
+
+CustomerList.propTypes = {
+  onClickCustomer: PropTypes.func.isRequired,
+  name: PropTypes.string.isRequired,
+}
+
+export default CustomerList; 

src/components/Home.js

@@ -0,0 +1,8 @@
+import React from 'react'; 
+
+const Home = () => {
+    return <div><img src='https://dslv9ilpbe7p1.cloudfront.net/xF71XJm6LoG5LV4jPtYRwQ_store_banner_image.jpeg' />
+    </div>
+}
+
+export default Home; 

src/components/Library.css

@@ -0,0 +1,7 @@
+.Video-box {
+    width: 25%;
+    border: 1px solid black;
+    border-radius: 5px;
+    margin-bottom: 12px;
+    padding: 20px;
+}

src/components/Library.js

@@ -0,0 +1,48 @@
+import React, { useEffect, useState} from 'react'; 
+import Video from './Video'; 
+import API from '../ApiSupport'
+import { Link } from 'react-router-dom';
+
+const Library = (props) => {
+  const [videoList, setVideoList] = useState([]);
+  const [errorMessage, setErrorMessage] = useState(null);
+
+  useEffect(() => {
+    API.get(`videos`)
+      .then((response) => {
+        const apiVideoList = response.data; 
+        setVideoList(apiVideoList);
+      })
+      .catch((error) => {
+        setErrorMessage('Could not retrieve videos from library');
+        console.error(error);
+      });
+  }, []);
+
+
+
+  const videoComponents = videoList.map((video) => {
+    return (
+      errorMessage == null ?
+      <Link onClick={() => props.onVideoSelected(video)}>
+        <Video 
+            id={video.id}
+            key={video.id}
+            title={video.title}
+            overview={video.overview}
+            releaseDate={video.release_date} 
+            imageUrl={video.image_url}
+            externalId={video.external_id}
+            /> </Link>
+            : errorMessage
+        )
+  })
+
+    return (
+      <div>
+        {videoComponents}
+      </div>
+    )
+}
+
+export default Library; 

src/components/Search.js

@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from 'react';
+import API from '../ApiSupport'
+import SearchItem from './SearchItem';
+
+
+const Search = (props) => {
+  const [searchList, setSearchList] = useState([]);
+  const [errorMessage, setErrorMessage] = useState(null);
+
+  const search = (event) => {
+    let query = event.target.value;
+    API.get(`videos?query=${query}`)
+      .then((response) => {
+        const searchList = response.data;
+        setSearchList(searchList);
+      })
+      .catch((error) => {
+        setErrorMessage('Could not retrieve videos');
+      });;
+  }
+
+  return (
+    errorMessage == null ?
+
+      <div>
+        <h1>This is the search page.</h1>
+
+        <input
+          type="text"
+          onChange={search} />
+
+        {
+          searchList.map(item => {
+            return (
+              <SearchItem 
+                key={item.external_id}
+                video={item}
+                // id={item.external_id}
+                // title={item.title}
+                // overview={item.overview}
+                // release_date={item.release_date}
+                // image_url={item.image_url}
+                addVideoCallback={props.addVideoCallback}
+                />
+            )
+          })
+        }
+      </div>
+      : errorMessage
+  )
+}
+
+export default Search;