-
- 
- Welcome to React
-
-
- To get started, edit src/App.js and save to reload.
-
+
+
+
+ -
+ Home
+
+ -
+ Rewind Movies
+
+ -
+ Search Movie Database
+
+ -
+ Customer Registry
+
+ -
+ Movie Rentals
+
+
+ {this.showRentalDetails()}
+
+
+ (this.showHomePage())}/> />
+
+
+ ()} />
+ (
+ )
+ } />
+
+
+
);
}
}
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/Route.js b/src/Route.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/Customer.css b/src/components/Customer.css
new file mode 100644
index 000000000..13d7982de
--- /dev/null
+++ b/src/components/Customer.css
@@ -0,0 +1,15 @@
+.width {
+ width: 18rem;
+}
+
+.card {
+ background-color:white;
+ border: solid black;
+ border-radius: 10px;
+ padding: 2% 2% 2% 2%;
+ margin: 2%;
+}
+
+.card:hover {
+ box-shadow: 20px 20px #BE1805;
+}
diff --git a/src/components/Customer.js b/src/components/Customer.js
new file mode 100644
index 000000000..85da5b96a
--- /dev/null
+++ b/src/components/Customer.js
@@ -0,0 +1,55 @@
+import React from 'react'
+import PropType from 'prop-types'
+import {Card, Button} from 'react-bootstrap'
+import './Customer.css'
+
+const Customer = (props) => {
+ const {
+ name, id, phone, address, city, state, postalCode,
+ moviesCheckedOutCount, accountCredit, selectCustCallback
+ } = props
+
+ const onSelectCustomer = (e) => {
+ e.preventDefault();
+ console.log('Selecting this customer')
+ selectCustCallback(id)
+ }
+
+ const checkedOutFormat = (count) => {
+ if (count === 1) {
+ return (`${count} movie currently checked out.`)
+ }
+ else {
+ return (`${count} movies currently checked out.`)
+ }
+ }
+ return (
+
+
+
+ {name}
+ {address}
+ {city}, {state}, {postalCode}
+ {phone}
+ ${accountCredit} account credit
+ {checkedOutFormat(moviesCheckedOutCount)}
+
+
+
+ )
+}
+
+Customer.propTypes = {
+ acountCredit: PropType.number,
+ address: PropType.string,
+ city: PropType.string,
+ moviesCheckedOutCount: PropType.number,
+ name: PropType.string,
+ postalCode: PropType.string,
+ phone: PropType.string,
+ state: PropType.string,
+};
+
+export default Customer;
diff --git a/src/components/CustomerList.css b/src/components/CustomerList.css
new file mode 100644
index 000000000..c7a66f345
--- /dev/null
+++ b/src/components/CustomerList.css
@@ -0,0 +1,7 @@
+.customer-list {
+ width:80%;
+ display: flex;
+ flex-flow: row wrap;
+ margin:auto;
+ justify-content:space-around;
+}
\ No newline at end of file
diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js
new file mode 100644
index 000000000..d75fd9d04
--- /dev/null
+++ b/src/components/CustomerList.js
@@ -0,0 +1,55 @@
+import React from 'react'
+import axios from 'axios';
+import Customer from './Customer'
+import './CustomerList.css'
+
+class CustomerList extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ customers: [],
+ errorMessage: null
+ };
+ }
+
+ componentDidMount() {
+ axios.get('http://localhost:3000/customers')
+ .then((response) => {
+ this.setState({customers: response.data})
+ })
+ .catch((error) => {
+ this.setState({error: error.message})
+ })
+ }
+
+ render() {
+ console.log(this.state.customers)
+ const customerList = this.state.customers.map((cust, i) => {
+ return
+ })
+ return (
+
+
+ Customer Registry
+
+ {customerList}
+
+
+
+ );
+ }
+}
+
+export default CustomerList;
\ No newline at end of file
diff --git a/src/components/Library.css b/src/components/Library.css
new file mode 100644
index 000000000..b242edf2b
--- /dev/null
+++ b/src/components/Library.css
@@ -0,0 +1,9 @@
+.library-container {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content:center;
+}
+
+main {
+ margin-left: 15%;
+}
\ No newline at end of file
diff --git a/src/components/Library.js b/src/components/Library.js
new file mode 100644
index 000000000..d73e47654
--- /dev/null
+++ b/src/components/Library.js
@@ -0,0 +1,55 @@
+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: [],
+ errorMessage: null,
+ };
+ }
+
+ componentDidMount() {
+ axios.get('http://localhost:3000/movies')
+ .then((response) => {
+ this.setState({movies: response.data})
+ console.log(this.state.movies)
+ })
+ .catch((error) => {
+ this.setState({errorMessage: error.message})
+ console.log(error.message)
+ })
+ }
+
+ render() {
+
+ const movieCollection = this.state.movies.map((movie) => {
+ return
+ });
+ return (
+
+ Rewind Movies Library
+
+ {this.state.errorMessage ? `An error has occurred: ${this.state.errorMessage}` : null }
+
+
+
+ )
+ }
+
+}
+
+export default Library;
diff --git a/src/components/Movie.css b/src/components/Movie.css
new file mode 100644
index 000000000..6d374a287
--- /dev/null
+++ 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;
+}
diff --git a/src/components/Movie.js b/src/components/Movie.js
new file mode 100644
index 000000000..7dc27d180
--- /dev/null
+++ b/src/components/Movie.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Movie.css'
+
+const Movie = (props) => {
+
+ const onMovieClick = () => {
+ props.callback(props.id)
+ }
+
+ return (
+
+
+
+
+
{props.title}
+ {props.overview}
+ {props.releaseDate}
+
+
Search for New Inventory
+
+
+
+
+
+ {searchResults}
+
+
+ );
+ }
+}
+
+export default MovieSearch;
diff --git a/src/components/Rentals.css b/src/components/Rentals.css
new file mode 100644
index 000000000..6c230b9e2
--- /dev/null
+++ b/src/components/Rentals.css
@@ -0,0 +1,27 @@
+table, td, th {
+ border: 1px solid black;
+}
+
+th {
+ background-color: #BE1805;
+ color:white;
+}
+
+tr:nth-child(even) {
+ background-color: #ECECEC;
+}
+
+table {
+ border-collapse: collapse;
+ width: 100%;
+ margin: 4%;
+ max-width: 90%;
+}
+
+th {
+ height: 50px;
+}
+
+main {
+ margin-left: 15%;
+}
\ No newline at end of file
diff --git a/src/components/Rentals.js b/src/components/Rentals.js
new file mode 100644
index 000000000..1b0087902
--- /dev/null
+++ b/src/components/Rentals.js
@@ -0,0 +1,82 @@
+import React, {Component} from 'react';
+import axios from 'axios';
+import './Rentals.css';
+// import Customer from './Customer'
+
+
+class Rentals extends Component {
+ constructor(props) {
+ super(props);
+
+ this.cleared = {
+ checkoutDate: null,
+ dueDate: null,
+ searchName: '',
+ customerID: null,
+ }
+
+ this.state = {
+ ...this.cleared,
+ rentalLibrary: [],
+ }
+ }
+
+ componentDidMount() {
+ axios.get('http://localhost:3000/movies')
+ .then((response) => {
+ this.setState({rentalLibrary: response.data})
+ console.log(response.data)
+ })
+ .catch((error) => {
+ this.setState({errorMessage: error.message})
+ console.log(error.message)
+ })
+ }
+
+ // TO DO: confirm this works
+ onButtonClick = (movieTitle, e) => {
+ e.preventDefault();
+ this.props.selectRentalCallback(movieTitle);
+ }
+
+ render() {
+ const rentalCollection = this.state.rentalLibrary.map((movie, i) => {
+ return(
+
+ | {movie.id} |
+ {movie.title} |
+ {movie.release_date} |
+ |
+
+ )
+ });
+
+ let makeReservation = true;
+ if(this.props.customerID && this.props.movie) {
+ makeReservation = false;
+ }
+
+ return (
+
+ Rewind Rentals
+
+
+
+
+ | Rental ID |
+ Title |
+ Release Date |
+ Reserve |
+
+
+
+ {rentalCollection}
+
+
+
+ )
+ }
+}
+
+
+export default Rentals
\ No newline at end of file
diff --git a/src/components/Selection.css b/src/components/Selection.css
new file mode 100644
index 000000000..bd2789ea7
--- /dev/null
+++ b/src/components/Selection.css
@@ -0,0 +1,22 @@
+/* .selection-box {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+span {
+ font-weight: bold;
+}
+
+.selection-items {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+}
+
+.one-selected-item {
+ display: inline-block;
+ border: 2px black solid;
+ padding: 2px;
+ margin: 5px;
+} */
diff --git a/src/components/Selection.js b/src/components/Selection.js
new file mode 100644
index 000000000..b32bd5dc2
--- /dev/null
+++ b/src/components/Selection.js
@@ -0,0 +1,50 @@
+// import React from 'react';
+// import axios from 'axios';
+// import './Selection.css';
+
+
+// const Selection = (props) => {
+
+// const title = props.selectedMovie
+// const customerId = props.selectedCustomer.id
+
+// const today = new Date();
+// today.setDate(today.getDate() +1 );
+// const day = today.getDate();
+// const month = today.getMonth() + 1;
+// const year = today.getFullYear();
+// const dueDate = `${year}-${month}-${day}`
+
+// const url = `http://localhost:3000/rentals/${title}/check-out?customer_id=${customerId}&due_date=${dueDate}`
+
+// const createNewRental = () => {
+// axios.post(url)
+// .then((response) => {
+// alert(`Successfully created new rental!`);
+// window.location.reload();
+// })
+// .catch((error) => {
+// alert(`There has been an error. ${error}: ${error.message}`);
+// });
+// }
+
+// return (
+//
+//
+//
+// Selected Movie:
+// {props.selectedMovie}
+//
+//
+// Selected Customer:
+// {props.selectedCustomer.name ? props.selectedCustomer.name : props.selectedCustomer}
+//
+//
Not found
+export default Notfound
\ No newline at end of file