Charlotte and Vicki

package.json

@@ -1,16 +1,40 @@
 {
+  "homepage": "http://vwhwang.github.io/video-store-consumer",
   "name": "video-store-consumer",
   "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",
+    "moment": "^2.27.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-icons": "^3.10.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1"
   },
   "scripts": {
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build",
     "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"
+    ]
+  },
+  "devDependencies": {
+    "gh-pages": "^3.1.0"
   }
 }

src/App.css

@@ -2,27 +2,136 @@
   text-align: center;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
-
 .App-header {
   background-color: #222;
-  height: 150px;
   padding: 20px;
-  color: white;
+  color: pink;
+}
+
+/* remove bullets from li elements */
+.App-list-style {
+  display: inline-block;
+  list-style: none;
+  text-align: left;
+}
+
+.App-list-style {
+  list-style: none;
+  padding: 10px ;
+}
+
+.App-clear-selected {
+  padding: 5px;
+  margin-bottom: 5px;
+}
+
+.App-selected-customer-title {
+  margin-top: 5px;
+}
+
+.App-customer-detail-title {
+  padding-top: 25px;
+  padding-right: 25px;
+  padding-left: 25px;
+}
+
+.App-customer-detail {
+  font-weight: bold;
+}
+
+.CheckoutReturn {
+  background-color: plum;
+}
+
+.App-nav-link-container {
+  padding-right: 10px;
+  margin-right: 10px;
+  border-right: solid black 1px;
+  display: inline-block;
+}
+
+/* remove right border from Customers link on nav bar */
+.App-nav-link-container:last-of-type {
+  padding-right: 0;
+  border-right: none;
+  margin-right: 0;
+}
+
+.App-nav-link {
+  color: black;
+  text-decoration: none;
+  font-size: 20px;
+}
+
+.App-nav-link:not(.active):hover {
+  color: purple;
 }
 
-.App-title {
-  font-size: 1.5em;
+
+
+.App-selections {
+  /* display: inline-block; */
+  border-top: dashed;
+  padding:50px;
+  /* margin-left: 25px; */
 }
 
-.App-intro {
-  font-size: large;
+.App-selected {
+  float: left;
+  width: 50%;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.logo img {
+  width: 850px;
+  padding:25px;
 }
+
+
+
+/* buttons  */
+.MainButton:focus {outline:0;}
+
+.MainButton {
+  margin:5px;
+  width:209px;
+	box-shadow:inset 0px 1px 0px 0px #e184f3;
+	background:linear-gradient(to bottom, #c123de 5%, #a20dbd 100%);
+	background-color:#c123de;
+	border-radius:6px;
+	border:1px solid #a511c0;
+	display:inline-block;
+	cursor:pointer;
+	color:#ffffff;
+	font-family:Arial;
+	font-size:15px;
+	font-weight:bold;
+	padding:6px 24px;
+	text-decoration:none;
+	text-shadow:0px 1px 0px #9b14b3;
+}
+.MainButton:hover {
+	background:linear-gradient(to bottom, #a20dbd 5%, #c123de 100%);
+	background-color:#a20dbd;
+}
+.MainButton:active {
+	position:relative;
+	top:1px;
+}
+
+.ShowSelected {
+  font-size: 20px;
+}
+
+#Hotpink {
+  box-shadow:inset 0px 1px 0px 0px hotpink;
+	background:linear-gradient(to bottom, hotpink 5%, rgb(236, 77, 156) 100%);
+	background-color:hotpink;
+	border-radius:6px;
+  border:1px solid hotpink;
+  text-shadow:0px 1px 0px #9b14b3;
+}
+
+#Hotpink:hover {
+	background:linear-gradient(to bottom, rgb(236, 77, 156) 5%, hotpink 100%);
+	background-color:#a20dbd;
+}

src/App.js

@@ -1,21 +1,145 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
+import React, { Component , useState } from 'react';
+import MovieList from './components/MovieList';
+import CustomerList from './components/CustomerList';
+import Search from './components/Search';
+import Checkout from './components/Checkout';
+import Return from './components/Return';
+import moment from 'moment';
 import './App.css';
+import charvic from "./images/char_vic_v2.jpg";
+
+import WithFlash from './components/WithFlash';
+
+import {MdLocalMovies,MdMovieFilter} from "react-icons/md";
+import { RiStarSmileLine } from "react-icons/ri";
+
+import {
+  HashRouter as Router,
+  Switch,
+  Route,
+  Link
+} from "react-router-dom";
+import SearchDetail from './components/SearchDetail';
 
 class App extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedMovie: {},
+      selectedCustomer: {},
+      displayMessage: null,
+    };
+  }
+
+  setSelectedMovie(movie){
+    this.setState({selectedMovie:movie})
+  }
+
+  setSelectedCustomer(customer){
+    this.setState({selectedCustomer:customer})
+  }
+
+  onClearSelection() {
+    this.setState({selectedMovie:{}})  
+    this.setState({selectedCustomer:{}})
+  }
+
+  setDisplayMessage(displayMessage) {
+    console.log("in setDisplayMessage\n"+displayMessage);
+    this.setState({displayMessage:displayMessage})
+  }
+
   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>
+          <h1 className="App-title">Movie Star Rentals</h1>
         </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
+
+        <Router>
+          <nav>
+            <ul>
+              <li className="App-nav-link-container">
+                <Link className="App-nav-link" to="/">Home</Link>
+              </li>
+              <li className="App-nav-link-container">
+                <Link className="App-nav-link"  to="/library">Library</Link>
+              </li>
+              <li className="App-nav-link-container">
+                <Link className="App-nav-link"  to="/search">Search</Link>
+              </li>
+              <li className="App-nav-link-container">
+                <Link className="App-nav-link"  to="/customers">Customers</Link>
+              </li>
+            </ul>
+          </nav>
+
+          < WithFlash displayMessage={this.state.displayMessage} />
+
+          <div className="CheckoutReturn">
+            <Checkout movie = {this.state.selectedMovie.title} customer = {this.state.selectedCustomer} setDisplayMessage={this.setDisplayMessage.bind(this)} />
+            <Return movie = {this.state.selectedMovie.title} customer = {this.state.selectedCustomer} setDisplayMessage={this.setDisplayMessage.bind(this)}/>
+            <button className="MainButton" onClick = {this.onClearSelection.bind(this)}>Clear Movie/Customer</button>
+            <p className = "ShowSelected">  <MdLocalMovies />  Movie: {this.state.selectedMovie.title}</p>
+            <p className = "ShowSelected"> <RiStarSmileLine/> Customer: {this.state.selectedCustomer.name}</p>
+          </div>
+
+
+          <Switch>
+
+          <Route exact path="/">
+            <div className="logo">
+              <img src={charvic} alt="girl in red and purple sunglasses"></img>
+            </div>
+          </Route>
+
+            <Route path="/library">
+              <MovieList setSelectedMovieCallBack = {this.setSelectedMovie.bind(this)} />
+            </Route>
+
+            <Route path="/search">
+              <Search setDisplayMessage={this.setDisplayMessage.bind(this)}/>
+            </Route>
+
+
+            <Route path="/customers">
+            <CustomerList setSelectedCustomerCallBack = {this.setSelectedCustomer.bind(this)} />
+            </Route>
+          </Switch>
+
+        </Router>
+
+        <div className = "App-selections">
+
+          <div className = "App-selected">
+            <SearchDetail movie={this.state.selectedMovie}/>
+          </div>
+
+          {this.state.selectedCustomer.name && (
+          <div className="App-selected-customer-container App-selected ">
+            <h3 className="App-customer-detail-title">Customer Details:</h3>
+            <p><span className="App-customer-detail">Name:</span> {this.state.selectedCustomer.name},  <span className="App-customer-detail">Registered At: </span> {moment(this.state.selectedCustomer.registered_at).format('LL') }</p>
+
+            <ul>
+              <li className="App-list-style"><span className="App-customer-detail">Address: </span> {this.state.selectedCustomer.address}</li>
+              <li className="App-list-style"><span className="App-customer-detail">City: </span> {this.state.selectedCustomer.city}</li>
+              <li className="App-list-style"><span className="App-customer-detail">State: </span> {this.state.selectedCustomer.state}</li>
+              <li className="App-list-style"><span className="App-customer-detail">Postal Code: </span> {this.state.selectedCustomer.postal_code}</li>
+              <li className="App-list-style"><span className="App-customer-detail">Phone: </span>Phone: {this.state.selectedCustomer.phone}</li>
+              <li className="App-list-style"><span className="App-customer-detail">Account Credit: </span> {this.state.selectedCustomer.account_credit}</li>
+              <li className="App-list-style"><span className="App-customer-detail">Movies Checked Out: </span> {this.state.selectedCustomer.movies_checked_out_count}</li>
+            </ul>
+          </div>) }
+
+        </div>
+
+
       </div>
     );
   }
-}
+};
+
+
 
 export default App;