Ada-C10 · elle-terch · Dec 18, 2018 · Dec 18, 2018 · Dec 18, 2018 · Dec 18, 2018
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,14 +3,23 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.18.0",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
-    "react-scripts": "1.1.4"
+    "react-router-dom": "^4.3.1",
+    "react-scripts": "^2.1.1",
+    "react-transition-group": "^2.5.2"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
-  }
-}
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/public/index.html b/public/index.html
@@ -10,6 +10,8 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link href="https://fonts.googleapis.com/css?family=Major+Mono+Display|Raleway:thin,thinitalic,extralight,regular,bold,bolditalic,black,blackitalic" rel="stylesheet">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -19,7 +21,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Be Kind, Rewind</title>
   </head>
   <body>
     <noscript>

diff --git a/src/App.css b/src/App.css
@@ -1,28 +1,39 @@
-.App {
-  text-align: center;
+
+.video-store {
+  color: #bdc3c7;
+}
+
+.video-store__header {
+  display: flex;
+  flex-direction: row;
+  background-image: linear-gradient(to bottom, rgba(14, 16, 17, 1), rgba(255,0,0,0));
+  width: 100vw;
+  height: 15vh;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+.video-store__header a {
+  text-decoration: none;
 }
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
+
+.video-store__header h1 {
+  font-size: 3vw;
+  color: rgba(243, 156, 18,1.0);
+  margin-left: 1em;
+  margin-right: 1em;
+  text-shadow:-24px -0px 10px rgba(255,255,255,.2), -10px -0px 8px rgba(255,255,255,.6);
+  transition: color 4s;
 }
 
-.App-title {
-  font-size: 1.5em;
+.video-store__header h1:hover {
+  color: rgba(245, 178, 55, 0);
+  text-shadow:-24px -0px 10px rgba(255,255,255,.2), -10px -0px 8px rgba(255,255,255,.6);
 }
 
-.App-intro {
-  font-size: large;
+h1, h2, h3 {
+  font-family: 'Major Mono Display', monospace;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+body {
+  font-family: 'Raleway', sans-serif;
 }
diff --git a/src/App.js b/src/App.js
@@ -1,18 +1,107 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+
+import { Route, Link } from 'react-router-dom'
+import axios from 'axios';
+import NewRental from './components/NewRental';
+import Nav from './components/Nav';
+import LibrarySection from './components/LibrarySection';
+import CustomerSection from './components/CustomerSection';
+import SearchSection from './components/SearchSection';
+import StatusBar from './components/StatusBar';
+
 import './App.css';
 
+const MOVIE_RENTALS = "http://localhost:3000/rentals/";
+
 class App extends Component {
+
+  constructor() {
+    super();
+
+    this.state = {
+      selectedCustomer: "",
+      selectedCustomerID: "",
+      selectedMovie: "",
+      returnDate: this.getReturnDay(),
+      status: {
+        statusClass: 'default',
+        statusMessage: ''
+      }
+    }
+  }
+
+  selectMovie = (movie) => {
+    this.changeStatus('success', `Selected ${movie.title}`)
+    this.setState({selectedMovie: movie.title })
+  }
+
+
+  selectCustomer = (customer) => {
+    this.changeStatus('success', `Selected ${customer.name}`)
+    this.setState({
+      selectedCustomer: customer.name,
+      selectedCustomerID: customer.id,
+    })
+  }
+
+  changeStatus = (style, message) => {
+    this.setState({
+      status: {
+        statusClass: style,
+        statusMessage: message
+      }
+    })
+  }
+
+  rentMovie = () => {
+    axios.post(MOVIE_RENTALS + this.state.selectedMovie + "/check-out?customer_id=" + this.state.selectedCustomerID + "&due_date=" + this.state.returnDate)
+    .then((response) => {
+      this.changeStatus('success', `${this.state.selectedCustomer} has checked out ${this.state.selectedMovie}`)
+      console.log(response.data)
+    })
+    .catch((error) => {
+      this.changeStatus('error', `${error.response.status}: ${error.response.statusText}`)
+      console.log(error.response)
+    });
+  }
+
+  checkInMovie = () => {
+    axios.post(MOVIE_RENTALS + this.state.selectedMovie + "/return?customer_id=" + this.state.selectedCustomerID)
+    .then((response) => {
+      this.changeStatus('success', `${this.state.selectedCustomer} has checked in ${this.state.selectedMovie}`)
+      console.log(response.data)
+    })
+    .catch((error) => {
+      this.changeStatus('error', `${error.response.status}: ${error.response.statusText}`)
+    });
+  }
+
+  getReturnDay = () => {
+
+    const date = new Date().getDate() + 5;
+    const month = new Date().getMonth() + 1;
+    const year = new Date().getFullYear();
+
+    return (year + '/' + month + '/' + date);
+  };
+
   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>
+      <div className="video-store">
+        <header className="video-store__header">
+          <Link to= "/"><h1>Be Kind, Rewind&lt;&lt;</h1></Link>
+          <Nav />
+          <NewRental selectedCustomer={this.state.selectedCustomer} selectedMovie={this.state.selectedMovie} rentMovieCallBack={this.rentMovie}
+              checkInMovieCallBack={this.checkInMovie}/>
         </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
+
+        <StatusBar statusClass={this.state.status.statusClass} statusMessage={this.state.status.statusMessage}/>
+        <Route path="/" exact="true" render={() => <SearchSection changeStatusCallback = {this.changeStatus} />} />
+        <Route path="/library" render={() => <LibrarySection selectMovieCallback = {this.selectMovie} changeStatusCallback = {this.changeStatus} currentSelected = {this.state.selectedMovie}/>} />
+        <Route path="/customers" render={() => <CustomerSection selectCustomerCallback = {this.selectCustomer} changeStatusCallback = {this.changeStatus} currentSelected = {this.state.selectedCustomer}/>} />
+        <Route path="/search" render={() => <SearchSection changeStatusCallback = {this.changeStatus} />} />
+
       </div>
     );
   }

diff --git a/src/components/.ComponentTemplate.js b/src/components/.ComponentTemplate.js
@@ -0,0 +1,25 @@
+import axios from 'axios';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+
+import './NewComponent.css';
+
+class NewComponent extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+
+    return (
+      <div>
+      </div>
+    )
+  }
+}
+
+NewComponent.propTypes = {
+
+};
+
+export default NewComponent;
diff --git a/src/components/.FunctionalComponent.js b/src/components/.FunctionalComponent.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './FunctionalComponentTemplate.css';
+
+
+const FunctionalComponent = (props) => {
+  return (
+    <div>
+    </div>
+  );
+}
+
+FunctionalComponent.propTypes = {
+
+};
+
+export default FunctionalComponent;
diff --git a/src/components/Customer.css b/src/components/Customer.css
@@ -0,0 +1,96 @@
+.customer-card {
+  background-color: rgba(14, 16, 17, 1);
+  margin: 3vh;
+  box-shadow: 5px 8px 15px rgba(14, 16, 17, .7);
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  width: 200px;
+  height: 275px;
+  transition: box-shadow 2s;
+}
+
+.customer-card-selected {
+  background-color: rgba(14, 16, 17, 1);
+  margin: 3vh;
+  box-shadow: 5px 8px 15px rgba(14, 16, 17, .7);
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  width: 200px;
+  height: 275px;
+  transition: box-shadow 2s;
+  box-shadow: 5px 8px 20px rgba(192, 57, 43,.4),-5px 8px 20px rgba(192, 57, 43,.4);
+}
+
+.customer-card:hover{
+  box-shadow: 5px 8px 20px rgba(129, 236, 236,.4),-5px 8px 20px rgba(129, 236, 236,.4);
+}
+
+.customer-card h3 {
+  font-family: "Raleway", sans-serif;
+  font-size: 22px;
+  font-weight: 700;
+  text-shadow: 1px 1px 1px rgba(250,250,250,.4);
+  margin: .3em;
+  margin-top:.8em;
+  transition: text-shadow 2s;
+}
+
+.customer-card-selected h3 {
+  font-family: "Raleway", sans-serif;
+  font-size: 22px;
+  font-weight: 700;
+  text-shadow: 2px 2px 2px rgba(192, 57, 43,1);
+  margin: .3em;
+  margin-top:.8em;
+  transition: text-shadow 2s;
+}
+
+.customer-card:hover h3 {
+  text-shadow: 2px 2px 2px rgba(129, 236, 236,.7);
+}
+
+.customer-card h3 small, .customer-card-selected h3 small{
+  font-family: "Major Mono Display", sans-serif;
+  font-style: italic;
+  font-size: 16px;
+}
+
+.customer-card button, .customer-card-selected button {
+  font-family: 'Raleway', sans-serif;
+  border-radius: 5px;
+  padding: 10px 20px;
+  font-size: 18px;
+  font-weight: 700;
+  text-decoration: none;
+  text-shadow: 1px 1px 1px rgba(250,250,250,.4);
+  margin: 20px;
+  position: relative;
+  display: inline-block;
+  background-color: rgba(253, 203, 110,1.0);
+  border:none;
+  box-shadow: none;
+  text-align: center;
+  transition: background-color 1s;
+}
+
+
+.customer-card button:hover, .customer-card-selected button:hover {
+  background-color: rgba(245, 178, 55, 1);
+}
+
+.customer-card button:active, .customer-card-selected button:active {
+  transform: translate(0px, 1px);
+  -webkit-transform: translate(0px, 1px);
+  box-shadow: inset -2px -2px 0px 0px rgba(245, 178, 55, 1);
+}
+
+.member-date {
+  opacity: 0;
+  transition: 2s;
+}
+
+.customer-card:hover .member-date, .customer-card-selected:hover .member-date {
+  opacity: 1;
+}
diff --git a/src/components/Customer.js b/src/components/Customer.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Customer.css';
+
+
+const Customer = ({name, phone, movies, selectCustomerCallback, memberDate, currentSelected}) => {
+
+  const currentRentals = movies > 0 ? `${movies} movie(s) checked out` : "";
+  const displayMemberDate = memberDate.slice(0,4);
+  const styling = name === currentSelected ? "customer-card-selected" : "customer-card";
+
+  return (
+      <div className={styling}>
+        <h3>{name}</h3>
+        <div>
+          <h3><small>{phone}</small></h3>
+          <p>{currentRentals}</p>
+        </div>
+        <div>
+          <button onClick={selectCustomerCallback}>Select</button>
+        </div>
+        <p className="member-date"><small>Member since {displayMemberDate}</small></p>
+      </div>
+  )
+}
+
+Customer.propTypes = {
+  name: PropTypes.string,
+  phone: PropTypes.string,
+  movies: PropTypes.int,
+  selectCustomerCallback: PropTypes.func,
+  memberDate: PropTypes.string,
+  currentSelected: PropTypes.string,
+};
+
+export default Customer;