Ktm

src/components/Customer.js

@@ -1,18 +1,18 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import './RentalCard.css';
 
 const Customer = ({ id, name, address, city, state, postalCode, phone, findCustomer }) => {
 
   return (
-  <div>
-    <section>
-      <p>{ id }</p>
-      <p>{ name }</p>
-      <p>{ address }</p>
-      <p>{ city }</p>
-      <p>{ state }</p>
-    </section>
-    <button onClick={() => {findCustomer(id)}} type="button">Select</button>
+  <div className="card-deck rental-card">
+    <div className="card bg-light">
+      <div className="card-body">
+        <p>{ name }</p>
+        <p>{ address }, { city }, { state }</p>
+        <button className="btn btn-primary" size="sm" onClick={() => {findCustomer(id)}} type="button">Select</button>
+      </div>
+    </div>
   </div>
   )
 }

src/components/Movie.css

@@ -1,3 +1,8 @@
+.movie-img {
+  width:  50%;
+  height: 50%;
+}
+
 .MovieCard {
   display: flex;
   border: solid 2px black;

src/components/Movie.js

@@ -1,31 +1,52 @@
 import React, { Component } from 'react';
 import './Movie.css';
 import PropTypes from 'prop-types';
+import './RentalCard.css';
+import './Movie.css';
 
 const Movie = (props) => {
-
+  
   return(
-    <section className='MovieCard'>
-      <div>
-      <img src={props.image} className='searchIcon' alt={`${props.title}`}/>
-      </div>
-      <div>
-      <button 
-        type='button'
-        className='button'
-        onClick={() => {props.findMovie(props.id)}}
-      >
-      Select</button>
-      <h3 className='searchMovieTitle'> {props.title} </h3>
-      <p className='searchDate'> {props.dateFormatting(props.releaseDate)} </p>
-      <p className='searchOverview'> {props.overview} </p>
-      <p className='inventory'> Inventory Available: {props.inventory} </p>
+    <div className="card-deck rental-card">
+      <div className="card bg-light">
+        <div className="card-body">
+          <img className="movie-img" src={props.image} alt={`${props.title}`}/>
+          <p>{props.title}</p>
+          <p>{props.overview}</p>
+          <p>{props.dateFormatting(props.releaseDate)}</p>
+          <p>Inventory Available: {props.inventory}</p>
+          <button 
+            className="btn btn-primary" size="sm" 
+            type='button'
+            onClick={() => {props.findMovie(props.id)}}>
+          Select</button>
+        </div>
       </div>
+    </div>
+  )
+
+  // return(
+  //   <section className='MovieCard'>
+  //     <div>
+  //     <img src={props.image} className='searchIcon' alt={`${props.title}`}/>
+  //     </div>
+  //     <div>
+  //     <button 
+  //       type='button'
+  //       className='button'
+  //       onClick={() => {props.findMovie(props.id)}}
+  //     >
+  //     Select</button>
+  //     <h3 className='searchMovieTitle'> {props.title} </h3>
+  //     <p className='searchDate'> {props.dateFormatting(props.releaseDate)} </p>
+  //     <p className='searchOverview'> {props.overview} </p>
+  //     <p className='inventory'> Inventory Available: {props.inventory} </p>
+  //     </div>
 
 
 
-    </section>
-  );
+  //   </section>
+  // );
 };
 
 Movie.propTypes = {

src/components/Rental.js

@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
 import axios from 'axios';
+import PropTypes from 'prop-types';
+import './RentalCard.css';
 
 let date = new Date();
 date.setDate(new Date().getDate() + 7);
@@ -18,7 +20,7 @@ class Rental extends React.Component {
     let params = {
       customer_id: customer.id,
       movie_id: movie.id,
-      due_date: dueDate.toISOString(),
+      due_date: date.toISOString(),
     }
 
     axios.post(`https://video-store-backend.herokuapp.com/rentals/${movie.title}/check-out`, params)
@@ -40,16 +42,18 @@ class Rental extends React.Component {
   }
 
   showRental = () => {
-    const showMovie = this.props.movie ? <p>{this.props.movie.title}</p> : "";
-    const showCustomer = this.props.customer ? <p>{this.props.customer.name}</p> : "";
+    const showMovie = this.props.movie ? <p>Title: {this.props.movie.title}</p> : "";
+    const showCustomer = this.props.customer ? <p>Customer: {this.props.customer.name}</p> : "";
     const showRental = this.state.rental ? <p>{this.state.rental}</p> : "";
     return (
-      <div>
-        <p>{showMovie}</p>
-        <p>{showCustomer}</p>
-        <p>{`${showRental}`}</p>
-        <p></p>
-        <button onClick={() => {this.createRental(this.props.movie, this.props.customer, this.state.dueDate)}}>Checkout Rental</button>
+      <div className="rental-card">
+        <div className="card card-body bg-light">
+          <p className="card-header">New Rental</p>
+          <span>{showMovie}</span>
+          <span>{showCustomer}</span>
+          <p>{`${showRental}`}</p>
+          <button className="btn btn-success" size="sm" onClick={() => {this.createRental(this.props.movie, this.props.customer, this.state.dueDate)}}>Checkout Rental</button>
+        </div>
       </div>
     )
   }
@@ -67,4 +71,10 @@ class Rental extends React.Component {
   }
 }
 
+Rental.propTypes = {
+  movie: PropTypes.string.isRequired,
+  customer: PropTypes.string.isRequired,
+};
+
+
 export default Rental;

src/components/RentalCard.css

@@ -1,19 +1,5 @@
-.RentalCard {
-  display: flex;
-  border: solid 2px black;
-  margin: 5px;
-  border-radius: 10px;
-}
-
-.button {
-  float: right;
-  width: 100px;
-  background: #0099FF;
-  border: 1px solid black;
-  padding: 10px;
-  font-weight: bold;
-  font-size: 1.1em;
-  color: white;
-  border-radius: 10px;
-  margin: 10px;
+.rental-card {
+ padding: 5%;
+ padding-left: 15%;
+ padding-right: 15%;
 }

src/components/RentalCard.js

@@ -1,19 +1,38 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import './RentalCard.css';
 
 const RentalCard = ({ rentalId, movieTitle, customerId, customerName, checkoutDate, dueDate, checkinRental }) => {
-
+  let date = new Date();
+  date = date.toISOString();
+  date = date.split('T')[0];
+
+  const overdueFormatting = dueDate < date ? <p className="badge badge-danger">OVERDUE</p> : "";
+
   return (
-  <div>
-    <section className="RentalCard">
-      <p>Title: { movieTitle }</p>
-      <p>Customer: { customerName }</p>
-      <p>Checkout date: { checkoutDate } </p>
-      <p>Due date: { dueDate }</p>
-    </section>
-    <button onClick={() => {checkinRental(customerId, movieTitle, rentalId)}} type="button">Check in Rental</button>
+  <div className="card-deck rental-card">
+    <div className="card bg-light">
+      <div className="card-body">
+        { overdueFormatting }
+        <p>Title: { movieTitle }</p>
+        <p>Customer: { customerName }</p>
+        <p>Checkout date: { checkoutDate } </p>
+        <p>Due date: { dueDate }</p>
+        <button className="btn btn-primary" size="sm" onClick={() => {checkinRental(customerId, movieTitle, rentalId)}} type="button">Check in Rental</button>       
+      </div>
+    </div>
   </div>
   )
 }
 
+RentalCard.propTypes = {
+  rentalId: PropTypes.number,
+  movieTitle: PropTypes.string.isRequired,
+  customerId: PropTypes.number,
+  customerName: PropTypes.string.isRequired,
+  checkoutDate: PropTypes.instanceOf(Date).isRequired,
+  dueDate: PropTypes.instanceOf(Date).isRequired,
+  checkinRental: PropTypes.func.isRequired,
+};
+
 export default RentalCard;

src/components/RentalsList.js

@@ -45,7 +45,7 @@ class RentalsList extends React.Component {
 
   makeOverdueList() {    
     if (this.state.overdueRentals === undefined ) {
-      return <p>NO OVERDUE RENTALS</p>;
+      return '';
     }
     else {
       const overdueList = this.state.overdueRentals.map((rental, i) => {

src/components/Search.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-// npm install bootstrap
 // import 'bootstrap/dist/css/bootstrap.min.css';
 import './Search.css';
 import axios from 'axios';

src/index.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
+import 'bootstrap/dist/css/bootstrap.css';
 
 ReactDOM.render(<App />, document.getElementById('root'));
 registerServiceWorker();