Earth/Taylor& Beauttie

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/App.css

@@ -1,3 +1,6 @@
+@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Racing+Sans+One&display=swap');
+
 .App {
   text-align: center;
 }
@@ -8,10 +11,60 @@
 }
 
 .App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
+  height: 300px;
+  padding-top: 100px;
   color: white;
+  text-align: center;
+  font-size: large;
+  text-decoration: none;
+  background-image: url('./g2yfzfx.jpg');
+}
+
+.storename {
+  font-size: 70px;
+  font-family: 'Press Start 2P', cursive;
+  color: white;
+  outline-width: 1px;
+  outline-color: black;
+  text-shadow: 6px 0 0 #000, 0 -1px 0 #000, 0 6px 0 #000, -1px 0 0 #000;
+}
+
+.nav a {
+  text-shadow: 3px 0 0 #000, 0 -1px 0 #000, 0 3px 0 #000, -1px 0 0 #000;
+  color: #eb7cac;
+  text-decoration: none;
+  font-family: 'Racing Sans One', cursive;
+  font-size: 2rem;
+}
+
+.selected {
+  background-color: white;
+  width: 50%;
+  height: 4rem;
+  margin-left: auto;
+  margin-right: auto;
+  border: 0.15rem solid black;
+}
+
+.selected p {
+  color: #6cefeb;
+  font-family: 'Racing Sans One', cursive;
+  text-shadow: 2px 0 0 #000, 0 -1px 0 #000, 0 2px 0 #000, -1px 0 0 #000;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+
+li {
+  display: inline;
+  padding: 1rem;
+  padding-right: 30px;
+  text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
+  font-size: 15px;
+}
+
+body {
+  background-color: #fde35a;
+  font-family: 'Racing Sans One', cursive;
 }
 
 .App-title {
@@ -22,7 +75,8 @@
   font-size: large;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
+.welcome {
+  font-size: 4rem;
+  text-align: center;
+  padding-top: 2rem;
+}

src/App.js

@@ -1,21 +1,82 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
+import React, { useState } from 'react';
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link
+} from 'react-router-dom';
+import VideoSearch from './components/VideoSearch';
+import VideoLibrary from './components/VideoLibrary';
+import Customers from './components/Customers';
+import RentalForm from './components/RentalForm';
+
 import './App.css';
 
-class App extends Component {
-  render() {
-    return (
-      <div className="App">
+const App = () => {
+  const API_BASE_URL = 'http://localhost:3000';
+
+  const [selectedCustomer, setSelectedCustomer] = useState(null);
+  const [selectedVideo, setSelectedVideo] = useState(null);
+
+  const selectCustomer = (customer) => {
+    setSelectedCustomer(customer);
+  };
+
+  const selectVideo = (video) => {
+    setSelectedVideo(video);
+  };
+
+  return (
+    <Router>
+      <div>
         <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
+          <h1 className="storename">Video Store</h1>
+          <nav> 
+            <ul className="nav">
+              <li>
+                <Link to="/">Home</Link>
+              </li>
+              <li>
+                <Link to="/search">Video Search</Link>
+              </li>
+              <li>
+                <Link to="/library">Video Library</Link>
+              </li>
+              <li>
+                <Link to="/customers">Customers</Link>
+              </li>
+              <li>
+                <Link to="/checkout">Checkout</Link>
+              </li>
+            </ul>
+          </nav>
+          <div className={selectedCustomer || selectedVideo ? 'selected' : ''}>
+            {selectedCustomer ? <p>Selected Customer: {selectedCustomer.name}</p> : ''}
+            {selectedVideo ? <p>Selected Video: {selectedVideo.title}</p> : ''}
+          </div>
         </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
+        <body>
+        <Switch>
+          <Route path='/search'>
+            <VideoSearch url={API_BASE_URL} />
+          </Route>
+          <Route path='/library'>
+            <VideoLibrary url={API_BASE_URL} onClickCallback={selectVideo} />
+          </Route>
+          <Route path="/customers">
+            <Customers url={API_BASE_URL} onClickCallback={selectCustomer} />
+          </Route>
+          <Route path="/checkout">
+            <RentalForm url={API_BASE_URL} selectedCustomer={selectedCustomer} selectedVideo={selectedVideo} />
+          </Route>
+          <Route path="/">
+            <div className="welcome">Welcome to Beauttie & Taylor's Video Store! 🎉</div>
+          </Route>
+        </Switch>
+        </body>
       </div>
-    );
-  }
+    </Router>
+  );
 }
 
 export default App;

src/components/Customer.css

@@ -0,0 +1,3 @@
+.select-button {
+  border: none;
+}

src/components/Customer.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './Customer.css'
+
+const Customer = (props) => {
+    return (
+        <tr>
+            <td>{props.name}</td>
+            <td>{props.registeredAt.substr(0, 10)}</td>
+            <td>{props.videosCheckedOutCount}</td>
+            <td className="select-button"><button onClick={() => props.onClickCallback(props)}>Select</button></td>
+        </tr>
+    )
+}
+
+Customer.propTypes = {
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    registeredAt: PropTypes.string.isRequired,
+    address: PropTypes.string.isRequired,
+    city: PropTypes.string.isRequired,
+    state: PropTypes.string.isRequired,
+    postalCode: PropTypes.string.isRequired,
+    phone: PropTypes.string.isRequired,
+    accountCredit: PropTypes.string.isRequired,
+    videosCheckedOutCount: PropTypes.string.isRequired,
+    onClickCallback: PropTypes.func.isRequired,
+}
+
+export default Customer;

src/components/Customers.css

@@ -0,0 +1,18 @@
+.header, table {
+  text-align: center;
+}
+
+table {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+th, td {
+  border: 1px solid black;
+  padding: 1rem;
+}
+
+.select-header {
+  border: none;
+}
+

src/components/Customers.js

@@ -0,0 +1,61 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+import Customer from './Customer';
+
+import './Customers.css';
+
+const Customers = (props) => {
+  const [customerList, setCustomerList] = useState([]);
+  const [errorMessage, setErrorMessage] = useState('');
+
+  useEffect(() => {
+    axios.get(`${props.url}/customers`)
+    .then((response) => {
+      const apiCustomerList = response.data
+      setCustomerList(apiCustomerList);
+    })
+    .catch((error) => {
+      setErrorMessage(error.message);
+    });
+  }, []);
+
+  const customerComponents = customerList.map((customer) => {
+    return (<Customer 
+      id={customer.id}
+      name={customer.name}
+      onClickCallback={props.onClickCallback}
+      registeredAt={customer.registered_at}
+      phone={customer.phone}
+      key={customer.id} 
+      address={customer.address}
+      city={customer.city}
+      postalCode={customer.postal_code}
+      accountCredit={customer.account_credit}
+      videosCheckedOutCount={customer.videos_checked_out_count}
+    />);
+  });
+
+return (
+  <div>
+    <h2 className="header">Our Customers 📇</h2>
+    {errorMessage ? <p>{errorMessage}</p> : ''}
+    <table>
+      <tr>
+        <th>Name</th>
+        <th>Member Since</th>
+        <th># Videos Checked Out</th>
+        <th className="select-header"></th>
+      </tr>
+      {customerComponents}
+    </table>
+  </div>
+);
+};
+
+Customers.propTypes = {
+  url: PropTypes.string.isRequired,
+  onClickCallback: PropTypes.string.isRequired
+};
+
+export default Customers;

src/components/RentalForm.css

@@ -0,0 +1,34 @@
+@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
+
+@font-face {
+  font-family: 'Press Start 2P', cursive;
+  src: url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
+}
+
+.button {
+    size: 40px;
+    font-family: 'Press Start 2P', cursive;
+    height: 30px;
+    margin-left: 650px;
+}
+
+.cust_info {
+    padding-top: 10px;
+    margin: 2rem;
+}
+
+.error {
+    text-align: center;
+    padding-top: 30px;
+}
+
+h2 {
+    text-align: center;
+}
+
+.rental-form {
+    display: flex;
+    margin-left: auto;
+    margin-right: auto;
+    width: 50%;
+}