Ada-C10 · valgidzi · 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,8 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.18.0",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
+    "react-router-dom": "^4.3.1",
     "react-scripts": "1.1.4"
   },
   "scripts": {
@@ -13,4 +15,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}
diff --git a/public/index.html b/public/index.html
@@ -19,7 +19,12 @@
       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>
+
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
+    integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
+    crossorigin="anonymous">
+
+    <title>Vambuster Video</title>
   </head>
   <body>
     <noscript>
@@ -36,5 +41,23 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script
+      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+      crossorigin="anonymous">
+    </script>
+
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
+      integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
+      crossorigin="anonymous">
+    </script>
+
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
+      integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
+      crossorigin="anonymous">
+    </script>
+
   </body>
 </html>
diff --git a/src/App.css b/src/App.css
@@ -1,28 +1,23 @@
-.App {
+.splash-container {
+  position: relative;
   text-align: center;
+  color: #333333;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+img {
+  max-height: 100%;
+  width: 100%;
 }
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
+.intro-heading {
+  position: absolute;
+  top: 5%;
+  background: #ffffff
 }
 
-.App-title {
-  font-size: 1.5em;
-}
-
-.App-intro {
-  font-size: large;
-}
-
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.intro-more {
+  position: absolute;
+  top: 20%;
+  right: 0%;
+  background: #ffffff
 }
diff --git a/src/App.js b/src/App.js
@@ -1,21 +1,63 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+import NavMenu from './components/NavMenu';
+import { Route } from 'react-router-dom';
+import MovieSearchForm from './components/MovieSearchForm';
+import Library from './components/Library';
+import Customers from './components/Customers';
 import './App.css';
+import PropTypes from 'prop-types';
 
 class App extends Component {
+  constructor() {
+    super();
+    this.state = {
+      selectedMovie: 'None',
+      selectedCustomer: 'None'
+    };
+  }
+
+  selectMovieForRental = (movieTitle) => {
+    this.setState({
+      selectedMovie: movieTitle
+    })
+  }
+
+  selectCustomerForRental = (customerObject) => {
+    this.setState({
+      selectedCustomer: customerObject
+    })
+  }
+
+
   render() {
+    let location = this.props.location.pathname
+
     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>
+        <NavMenu selectedMovie={this.state.selectedMovie} selectedCustomer={this.state.selectedCustomer}/>
+        <Route path="/search" component={MovieSearchForm} />
+        <Route exact path="/library" render={(props) => (
+          <Library selectedMovieCB={this.selectMovieForRental} />
+        )}/>
+      <Route exact path="/customers" render={(props) => (
+        <Customers selectedCustomerCB={this.selectCustomerForRental} />
+      )}/>
+
+    {location==='/' ? <div className="splash-container">
+    <img src="http://i65.tinypic.com/15yxd92.jpg" alt="woman with popcorn" />
+    <h1 className="intro-heading">Hello and welcome to Vambuster Video's internal app!</h1>
+    <h1 className="intro-more">You are a very valued employee.</h1>
+    </div> : ''}
       </div>
     );
   }
 }
 
+App.propTypes = {
+  selectedMovie: PropTypes.object,
+  selectedCustomer: PropTypes.string,
+  selectedMovieCB: PropTypes.func,
+  selectedCustomerCB: PropTypes.func,
+};
+
 export default App;
diff --git a/src/components/Customer.css b/src/components/Customer.css
@@ -0,0 +1,13 @@
+.width {
+  width: 18rem;
+}
+
+.customer-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+/* img {
+  max-height: 426px;
+} */
diff --git a/src/components/Customer.js b/src/components/Customer.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import './Customer.css';
+
+const Customer = (props) => {
+  const {
+    id,
+    name,
+    registered_at,
+    address,
+    city,
+    state,
+    postal_code,
+    phone,
+    account_credit,
+    movies_checked_out_count,
+    buttonText,
+    customerCB
+  } = props.customer;
+
+  const onCustomerClick = () => {
+    customerCB(id)
+  }
+
+  return (
+    <div key={id} className="card customer-card width">
+      <div className="card-body">
+        <h3 className="card-title">{name}</h3>
+        <p className="card-text">{movies_checked_out_count} movies checked out</p>
+        <button
+          className="btn btn-secondary"
+          onClick={onCustomerClick}>
+          {buttonText}
+        </button>
+      </div>
+    </div>
+
+  );
+};
+
+
+export default Customer
diff --git a/src/components/Customers.css b/src/components/Customers.css
@@ -0,0 +1,5 @@
+.customers-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content:center;
+}
diff --git a/src/components/Customers.js b/src/components/Customers.js
@@ -0,0 +1,76 @@
+import React, { Component } from 'react';
+import Customer from './Customer';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+import './Customers.css'
+
+
+class Customers extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      customers: [],
+    };
+  }
+
+  componentDidMount() {
+    const GET_CUSTOMERS_URL = 'http://localhost:3000/customers';
+
+    axios.get(GET_CUSTOMERS_URL)
+    .then((response) => {
+      this.setState({
+        customers: response.data
+      });
+    })
+    .catch((error) => {
+      this.setState({
+        error: error.message
+      });
+    });
+  }
+
+  findCustomerForRental = (customerID) => {
+    const clickedCustomer = this.state.customers.find( customer => customer.id === customerID)
+    this.props.selectedCustomerCB(clickedCustomer)
+  }
+
+  render() {
+
+    let customers = this.state.customers
+
+    let customerList = customers.map((customer, i) => {
+
+      let formattedCustomer = {
+        key: i,
+        id: customer.id,
+        name: customer.name,
+        account_credit: customer.account_credit,
+        movies_checked_out_count: customer.movies_checked_out_count,
+        customerCB: this.findCustomerForRental,
+        buttonText: 'Select for Rental',
+      }
+
+      return <Customer customer={formattedCustomer} key={formattedCustomer.key}/>
+
+    });
+
+
+    return (
+      <section className="customers-container">
+        {customerList}
+      </section>
+    )
+  }
+}
+
+Customer.propTypes = {
+  id: PropTypes.number,
+  name: PropTypes.string,
+  account_credit: PropTypes.number,
+  movies_checked_out_count: PropTypes.number,
+  customerCB: PropTypes.func,
+  buttonText: PropTypes.string,
+};
+
+export default Customers;
diff --git a/src/components/Library.css b/src/components/Library.css
@@ -0,0 +1,5 @@
+.library-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content:center;
+}
diff --git a/src/components/Library.js b/src/components/Library.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import axios from 'axios';
+import Movie from './Movie';
+import './Library.css';
+
+class Library extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      movies: [],
+    };
+  }
+
+  componentDidMount() {
+    axios.get('http://localhost:3000/movies')
+    .then((response) => {
+      this.setState({movies: response.data})
+    })
+    .catch((error) => {
+      this.setState({error: error.message})
+    })
+  }
+
+  findMovieForRental = (movieId) => {
+    console.log(`In Library ${movieId}`);
+    const clickedMovie = this.state.movies.find( movie => movie.id === movieId)
+    this.props.selectedMovieCB(clickedMovie.title)
+  }
+
+  render() {
+    console.log(this.props)
+
+    const movieCollection = this.state.movies.map((movie) => {
+      return <Movie key={movie.id}
+        id={movie.id}
+        title={movie.title}
+        releaseDate={movie.release_date}
+        imageUrl={movie.image_url}
+        callback={this.findMovieForRental}
+        buttonText='Select for Rental' />
+    });
+    return (
+      <section className="library-container">
+        {movieCollection}
+      </section>
+    )
+  }
+
+}
+
+export default Library;
diff --git a/src/components/Movie.css b/src/components/Movie.css
@@ -0,0 +1,13 @@
+.width {
+  width: 18rem;
+}
+
+.movie-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+img.card-img-top {
+  max-height: 426px;
+}