Time and Space- Mair H & Liv

package.json

@@ -3,14 +3,32 @@
   "version": "0.1.1",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.10.2",
+    "@material-ui/lab": "^4.0.0-alpha.56",
+    "axios": "^0.19.2",
+    "bootstrap": "^4.5.0",
     "react": "^16.13.1",
+    "react-bootstrap": "^1.0.1",
     "react-dom": "^16.13.1",
+    "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

@@ -1,17 +1,19 @@
-.App {
+Body {
   text-align: center;
+  background-image: url("./backgroundimages/backgroundimage2.jpg");
+  height: 100%;
+  background-repeat: repeat;
+  background-attachment: fixed;
 }
 
 .App-logo {
   animation: App-logo-spin infinite 20s linear;
   height: 80px;
 }
 
-.App-header {
-  background-color: #222;
-  height: 150px;
+.header {
   padding: 20px;
-  color: white;
+  background-color: rgb(245, 242, 236);
 }
 
 .App-title {
@@ -26,3 +28,91 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+* {
+  margin: 0;
+  padding: 0;
+  font-family: 'Times New Roman', Times, serif;
+  color: rgb(19, 15, 15)
+}
+
+h1 {
+  color:  rgb(245, 242, 236);
+  padding-top: 50px;
+  font-size: 70px;
+  font-weight: bold;
+  -webkit-text-stroke: .02px black;
+  font-family: herculanum;
+  background-color: rgb(248, 149, 138);
+  border: 10px dotted black;
+  padding: 15px;
+  margin: 25px 200px;
+  background-clip: padding-box;
+}
+
+.header-nav {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(245, 242, 236);
+  color: white;
+  font-size: 17px;
+}
+
+.header-first-row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.selected {
+  font-size: 17px;
+  font-family: 'Times New Roman', Times, serif;
+  font-weight: lighter;
+  text-align: left;
+  padding: 3px;
+}
+
+
+.links {
+  padding-top: 30px;
+  padding-left: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.nav-link {
+  font-family: Georgia, 'Times New Roman', Times, serif;
+  justify-content: space-between;
+  padding-right: 15px;
+  font-weight: bold;
+}
+
+.store-name {
+  font-family: ITC Machine;
+  font-weight: bold;
+  color: rgb(248, 149, 138);
+  font-size: 80px;
+  padding-left: 200px;
+}
+
+.checkout-button {
+  padding-left: 200px;
+}
+
+.status {
+  background-color: rgba(255, 192, 203, 0.637);
+  display: flex;
+  align-items: center;
+}
+
+.status-alert {
+  text-align: center;
+  font-size: 20px;
+  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+  color: rgb(94, 5, 80);
+  padding-right: 15px;
+  padding-left: 540px;
+}
+
+.dismiss-button {
+  font-size: 15px;
+}

src/App.js

@@ -1,21 +1,37 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { useState } from 'react';
+import Navbar from './components/Navbar';
+import Main from './components/Main';
+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>
-    );
-  }
-}
+const App = () => {
+  const [selectedCustomer, setSelectedCustomer] = useState("");
+  const [selectedMovie, setSelectedMovie] = useState("");
+  const [status, setStatus] = useState(null)
+
+  console.log(selectedCustomer);
+  console.log(selectedMovie);
+
+
+  return (
+    <div className='App'>
+      <Navbar
+        selectedCustomer={selectedCustomer}
+        selectedMovie={selectedMovie}
+        setStatusCallback={setStatus}
+      />
+
+      {status && <div className="status">
+        <div className="status-alert">{status}</div>
+        <button className="dismiss-button" onClick= {() => setStatus(null)}>Dismiss</button> 
+      </div>}
+
+      <Main
+        setSelectedCustomerCallBack={setSelectedCustomer}
+        setSelectedMovieCallBack={setSelectedMovie}
+        setStatusCallback={setStatus}
+      />
+    </div>
+  );
+};
 
 export default App;

src/components/CustomerDetails.css

@@ -0,0 +1,45 @@
+.table tr, th {
+  vertical-align: middle;
+  border-width: 1px;
+  font-size: 20px;
+}
+
+.table tr:hover {
+  background-color: #f5f5f5;
+}
+
+.table td {
+  vertical-align: middle;
+
+  border-top: 1px solid rgb(248, 149, 138);
+  border-bottom: 1px solid rgb(248, 149, 138);
+  font-size: 18px;
+}
+
+.table thead {
+  padding-left: 1rem;
+}
+
+.table th {
+  vertical-align: bottom;
+  border-bottom: 4px solid rgb(248, 149, 138);
+  font-weight: bold;
+  height: 50px;
+}
+
+.table th, td {
+  padding: 15px;
+  text-align: left;
+}
+
+.customers-container {
+  margin: 1rem;
+  background-color: rgb(245, 242, 236);
+}
+
+.select-user-button {
+  padding: 13px;
+  border: 2px solid  rgb(248, 149, 138);
+  font-weight: bold;
+  font-size: 15px;
+}

src/components/CustomerDetails.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import './CustomerDetails.css';
+
+const CustomerDetails = (props) => {
+  const onButtonClick = () => {
+    props.setSelectedCustomerCallBack(props);
+  };
+
+  return (
+    <div>
+      <section class="customers-container">
+        <table class="table">
+          <tr>
+            <td width="200">{props.name}</td>
+            <td width="250">{props.address}</td>
+            <td width="125">{props.city}</td>
+            <td width="75">{props.state}</td>
+            <td width="100">{props.postal_code}</td>
+            <td width="125">{props.phone}</td>
+            <td width="100">{props.account_credit}</td>
+            <td width="50">{props.movies_checked_out_count}</td>
+            <button className='select-user-button' onClick={onButtonClick}>
+              Select User
+            </button>
+          </tr>
+        </table>
+      </section>
+    </div>
+  );
+};
+
+export default CustomerDetails;

src/components/Customers.js

@@ -0,0 +1,64 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import CustomerDetails from '../components/CustomerDetails';
+import './CustomerDetails.css';
+
+const Customers = (props) => {
+  const [customers, setCustomers] = useState([]);
+  const [errorMessage, setErrorMessage] = useState(null);
+
+  useEffect(() => {
+    axios
+      .get('http://localhost:3000/customers')
+      .then((response) => {
+        const allCustomers = (response.data).sort(function (a, b) {
+          if(a.name.toLowerCase() < b.name.toLowerCase()) return -1;
+          if(a.name.toLowerCase() > b.name.toLowerCase()) return 1;
+          return 0;
+        });
+        setCustomers(allCustomers);
+      })
+      .catch((error) => {
+        setErrorMessage(error.message);
+      });
+  }, []);
+
+  const cutomersList = customers.map((customer) => {
+    return (
+      <CustomerDetails
+        key={customer.id}
+        id={customer.id}
+        name={customer.name}
+        registered_at={customer.registered_at}
+        address={customer.address}
+        city={customer.city}
+        state={customer.state}
+        postal_code={customer.postal_code}
+        phone={customer.phone}
+        account_credit={customer.account_credit}
+        movies_checked_out_count={customer.movies_checked_out_count}
+        setSelectedCustomerCallBack={props.setSelectedCustomerCallBack}
+      />
+    );
+  });
+
+  return (
+    <div>
+      <h1>Customers</h1>
+      <table className="table">
+        <thead>
+          <th width="200">Name</th>
+          <th width="250">Address</th>
+          <th width="125">City</th>
+          <th width="75">State</th>            
+          <th width="100">Postal Code</th>
+          <th width="125">Phone</th>
+          <th width="100">Account Credit</th>
+          <th width="50">Movies Checked Out</th>
+        </thead>
+      </table>
+      {cutomersList}
+    </div>
+  );
+};
+export default Customers;

src/components/Home.css

@@ -0,0 +1,5 @@
+.homepage-photo {
+  padding-top: 40px;
+  max-width: 60%;
+  height: auto;
+}

src/components/Home.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import "./Home.css";
+import movienight from '../backgroundimages/ultimate-movie-weekend.jpg';
+
+const Home = () => {
+  return (
+    <div>
+      <img className="homepage-photo" src={movienight} alt="movie-night"/>
+    </div>
+  );
+}
+
+export default Home;