Alicia & Lak

.gitignore

@@ -19,3 +19,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.env

package.json

@@ -3,14 +3,32 @@
   "version": "0.1.1",
   "private": true,
   "dependencies": {
+    "axios": "^0.19.2",
+    "bootstrap": "^4.5.0",
+    "jquery": "^3.5.1",
+    "popper.js": "^1.16.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-notifications-component": "^2.4.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

src/App.css

@@ -26,3 +26,4 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+

src/App.js

@@ -1,21 +1,23 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
 
-class App extends Component {
-  render() {
+import React, { useEffect } from 'react';
+import Header from './components/Header';
+import Footer from './components/Footer';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import ReactNotification from 'react-notifications-component';
+import 'react-notifications-component/dist/theme.css';
+
+const App = () => {
+  useEffect(() => {
+    document.title = "LA Videos title"
+  }, []);
+
     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>
+      <section className="">
+        <ReactNotification />
+        <Header />
+        <Footer />
+      </section>
     );
-  }
 }
 
-export default App;
+export default App;

src/components/Customer.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Customer = (props) => {
+
+  const onButtonClick = () => {
+    const selected = {
+        id: props.id,
+        name: props.name
+    }
+    props.selectCustomerCallback(selected);
+  }
+
+  return (
+    <tr>
+      <td><p>{props.id}</p></td>
+      <td>
+        <button onClick={onButtonClick} className="btn btn-danger">
+          Select
+        </button>
+      </td>
+      <td><p>{props.name}</p></td>
+      <td><p>{props.address}<br/>{props.city}, {props.state} {props.postal_code}</p></td>
+      <td><p>{props.phone}</p></td>
+      <td><p>{new Intl.NumberFormat("en-us", {
+          style: "currency",
+          currency: "USD"
+        }).format(props.account_credit)}</p></td>
+      <td><p>{props.movies_checked_out_count}</p></td>
+      <td><p>{new Date(props.registered_at).toDateString()}</p></td>
+    </tr>
+  );
+}
+
+Customer.propTypes = {
+  id: PropTypes.number.isRequired,
+  name: PropTypes.string,
+  registered_at: PropTypes.string,
+  address: PropTypes.string,
+  city: PropTypes.string,
+  state: PropTypes.string,
+  postal_code: PropTypes.string,
+  phone: PropTypes.string,
+  account_credit: PropTypes.number,
+  movies_checked_out_count: PropTypes.number,
+  selectCustomerCallback: PropTypes.func.isRequired
+};
+
+export default Customer;

src/components/Customers.js

@@ -0,0 +1,82 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import PropTypes from 'prop-types';
+import Customer from './Customer';
+import { store } from 'react-notifications-component';
+
+
+const Customers = (props) => {
+  const [customersList, setCustomersList] = useState([]);
+
+  useEffect(() => {
+    axios.get(props.url)
+      .then( (response) => {
+        const customers = response.data;
+        setCustomersList(customers);
+      })
+      .catch((error) => {
+        store.addNotification({
+          title: "Error: ",
+          message: `${error.message}`,
+          type: "danger",
+          insert: "top",
+          container: "top-left",
+          animationIn: ["animated", "fadeIn"],
+          animationOut: ["animated", "fadeOut"],
+          dismiss: {
+            duration: 5000,
+            onScreen: true
+          }
+        });
+      });
+  },[props.url])
+
+  const customersComponents = customersList.map((customerObject) => {
+    return(
+      <Customer 
+        key={customerObject.id}
+        id={customerObject.id}
+        name={customerObject.name} 
+        registered_at={customerObject.registered_at}
+        address={customerObject.address} 
+        city={customerObject.city} 
+        state={customerObject.state} 
+        postal_code={customerObject.postal_code} 
+        phone={customerObject.phone} 
+        account_credit={customerObject.account_credit} 
+        movies_checked_out_count={customerObject.movies_checked_out_count} 
+        selectCustomerCallback={props.selectCustomerCallback}
+      />
+    )
+  })
+
+
+  return (
+      <div className="w-100 d-flex text-center flex-wrap justify-content-around">
+        <h2 className="text-center w-100 pt-3 pb-3">Customers</h2>
+        <table className="table table-hover table-light">
+          <thead className="thead-light text-center">
+            <tr>
+              <th>ID</th>
+              <th>Select</th>
+              <th>Name</th>
+              <th>Address</th>
+              <th>Phone Number</th>
+              <th>Account Credit</th>
+              <th>Current Rentals</th>
+              <th>Registered</th>
+            </tr>
+          </thead>
+          <tbody>
+            {customersComponents}
+          </tbody>
+        </table>
+        <div className="full-page"></div>
+      </div>
+  );
+}
+
+Customers.propTypes = {
+  url: PropTypes.string.isRequired
+};
+export default Customers;

src/components/Footer.js

@@ -0,0 +1,45 @@
+import React from 'react';
+
+const Footer = () => {
+  return (
+    <footer className="w-100 footer text-white pt-3">
+      <div className="container">
+        <div className="row">
+          <div className="d-flex col">
+            <div className="footer-logo text-left">
+              <a href="/"><img className="w-100" src="https://lh3.googleusercontent.com/pw/ACtC-3egOjtR1cwMLE4DWMqvjucZFIg_OgNhqZtie9V5whCbr-K9oWeSs_9zSXWVS3CMZLDZM_mxC68ZIV20qYpUwihwbMTCwSyWV_rpPl9OEr2xxQGxhq9aeOssSRHQnL2Zdw9VhKh_5W6EouKACuyRpCQC=w400-h173-no?authuser=0" alt = ""/></a>
+            </div>
+          </div>
+          <div className="container text-left col">
+            <h5 className="pb-1">About LA Videos</h5>
+            <a href="/"><p>Careers</p></a>
+            <a href="/"><p>Blog</p></a>
+            <a href="/"><p>News</p></a>
+            <a href="/"><p>Company Info</p></a>
+          </div>
+          <div className="container text-left col">
+            <h5 className="pb-1">Troubleshooting</h5>
+            <a href="/"><p>Customer Resolution</p></a>
+            <a href="/"><p>Employee Contract</p></a>
+            <a href="/"><p>Rentals Policy</p></a>
+            <a href="/"><p>Contact Us</p></a>
+          </div>
+          <div className="container text-left col">
+            <h5 className="pb-1">Community</h5>
+            <a href="/"><p>Announcements</p></a>
+            <a href="/"><p>Picnic Schedule</p></a>
+            <a href="/"><p>Employee of the Month</p></a>
+            <a href="/"><p>Videobook</p></a>
+          </div>
+
+          <div className="w-100"></div>
+          <div className="col text-center">
+            <p className="subtle-text px-2 small">© 2020 LA Videos, All Rights Reserved</p>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;