diff --git a/package-lock.json b/package-lock.json index 79f52b34f..cdd05bc6b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -434,6 +434,15 @@ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.7.0.tgz", "integrity": "sha512-32NDda82rhwD9/JBCCkB+MRYDp0oSvlo2IL6rQWA10PQi7tDUM3eqMSltXmY+Oyl/7N3P3qNtAlv7X0d9bI28w==" }, + "axios": { + "version": "0.18.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz", + "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=", + "requires": { + "follow-redirects": "1.5.0", + "is-buffer": "1.1.6" + } + }, "axobject-query": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-0.1.0.tgz", @@ -4657,6 +4666,28 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz", "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=" }, + "history": { + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz", + "integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==", + "requires": { + "invariant": "2.2.4", + "loose-envify": "1.3.1", + "resolve-pathname": "2.2.0", + "value-equal": "0.4.0", + "warning": "3.0.0" + }, + "dependencies": { + "warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", + "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", + "requires": { + "loose-envify": "1.3.1" + } + } + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -4667,6 +4698,11 @@ "minimalistic-crypto-utils": "1.0.1" } }, + "hoist-non-react-statics": { + "version": "2.5.5", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz", + "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==" + }, "home-or-tmp": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz", @@ -8809,6 +8845,33 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-4.0.0.tgz", "integrity": "sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw==" }, + "react-router": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz", + "integrity": "sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==", + "requires": { + "history": "4.7.2", + "hoist-non-react-statics": "2.5.5", + "invariant": "2.2.4", + "loose-envify": "1.3.1", + "path-to-regexp": "1.7.0", + "prop-types": "15.6.1", + "warning": "4.0.1" + } + }, + "react-router-dom": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.3.1.tgz", + "integrity": "sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==", + "requires": { + "history": "4.7.2", + "invariant": "2.2.4", + "loose-envify": "1.3.1", + "prop-types": "15.6.1", + "react-router": "4.3.1", + "warning": "4.0.1" + } + }, "react-scripts": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-1.1.4.tgz", @@ -9231,6 +9294,11 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-1.0.1.tgz", "integrity": "sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY=" }, + "resolve-pathname": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz", + "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg==" + }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -10564,6 +10632,11 @@ "spdx-expression-parse": "3.0.0" } }, + "value-equal": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz", + "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw==" + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", @@ -10600,6 +10673,14 @@ "makeerror": "1.0.11" } }, + "warning": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.1.tgz", + "integrity": "sha512-rAVtTNZw+cQPjvGp1ox0XC5Q2IBFyqoqh+QII4J/oguyu83Bax1apbo2eqB8bHRS+fqYUBagys6lqUoVwKSmXQ==", + "requires": { + "loose-envify": "1.3.1" + } + }, "watch": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/watch/-/watch-0.10.0.tgz", diff --git a/package.json b/package.json index 951a38e2f..a7160dab9 100644 --- a/package.json +++ b/package.json @@ -3,8 +3,11 @@ "version": "0.1.0", "private": true, "dependencies": { + "axios": "^0.18.0", "react": "^16.4.1", "react-dom": "^16.4.1", + "react-router": "^4.3.1", + "react-router-dom": "^4.3.1", "react-scripts": "1.1.4" }, "scripts": { @@ -13,4 +16,4 @@ "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } -} \ No newline at end of file +} diff --git a/src/App.css b/src/App.css index c5c6e8a68..687db4fe2 100644 --- a/src/App.css +++ b/src/App.css @@ -2,27 +2,51 @@ text-align: center; } -.App-logo { - animation: App-logo-spin infinite 20s linear; - height: 80px; +header { + display: grid; + grid-template-columns: 1fr 1fr 1fr 2.5fr 2.5fr 150px; + grid-gap: 15px; + align-items: center; + padding: 10px; + background: #7d9174; } -.App-header { - background-color: #222; - height: 150px; - padding: 20px; - color: white; +.fixed-header { + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 99; +} + +.movie-selection { + margin-left: 50px; +} + +header p { + text-align: center; + font-size: 20px; + margin: 5px 10px; } -.App-title { - font-size: 1.5em; +.button, button { + text-align: center; + text-decoration: none; + font-size: 20px; + color: white; + background: #97c689; + border: none; + padding: 8px; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } -.App-intro { - font-size: large; +.button:hover, button:hover { + color: #24700d; } -@keyframes App-logo-spin { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } +.notification { + display: flex; + justify-content: center; + margin: 0px; + background: #ffcc5e; } diff --git a/src/App.js b/src/App.js index 203067e4d..3f89110de 100644 --- a/src/App.js +++ b/src/App.js @@ -1,21 +1,107 @@ import React, { Component } from 'react'; -import logo from './logo.svg'; +import { + BrowserRouter as Router, + Route, + Link +} from 'react-router-dom'; +import axios from 'axios'; + +import SearchMovie from './components/SearchMovie'; +import MovieCollection from './components/MovieCollection'; +import CustomerCollection from './components/CustomerCollection'; import './App.css'; +const URL = "http://localhost:3001/rentals/check-out" + class App extends Component { + constructor() { + super(); + + this.state = { + selectedMovie: "", + selectedCustomer: "", + selectedCustomerId: "", + } + } + + setSelectedMovie = (title) => { + this.setState({ + selectedMovie: title, + }); + } + + setSelectedCustomer = (name, id) => { + this.setState({ + selectedCustomer: name, + selectedCustomerId: id, + }); + } + + makeRental = () => { + axios.post(URL + `?customer_id=${this.state.selectedCustomerId}&title=${this.state.selectedMovie}`) + .then((response) => { + this.setState({ + notification: "Rental successfully added.", + selectedMovie: "", + selectedCustomer: "", + selectedCustomerId: "", + }) + }) + .catch((error) => { + this.setState({ + notification: error.message + }) + }) + } + + displayNotification = () => { + setTimeout(this.notificationTimer, 6000); + return this.state.notification + } + + notificationTimer = () => { + this.setState({ notification: ""}) + } + render() { return ( -
-
- logo -

Welcome to React

-
-

- To get started, edit src/App.js and save to reload. -

-
+ +
+
+
+ Search + Library + Customers +
+

Selected Movie

+

{this.state.selectedMovie}

+
+
+

Selected Customer

+

{this.state.selectedCustomer}

+
+ +
+

{this.displayNotification()}

+
+ +
+ + + } + /> + } + /> +
+
+ ); } + } export default App; diff --git a/src/components/Customer.css b/src/components/Customer.css new file mode 100644 index 000000000..e0965beb3 --- /dev/null +++ b/src/components/Customer.css @@ -0,0 +1,22 @@ +.customer-container { + background-color: #f4f9f2; + display: flex; + flex-direction: column; + align-items: center; + padding: 2em; + margin: 1em 1em 0em 1em; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +.customer-container > p { + padding: .5em; + margin: 0px; +} + +.card-header { + margin-top: 0px; +} + +.customer-container > button { + margin-top: 1em; +} diff --git a/src/components/Customer.js b/src/components/Customer.js new file mode 100644 index 000000000..c3ac8baa6 --- /dev/null +++ b/src/components/Customer.js @@ -0,0 +1,33 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import css from './Customer.css'; + +class Customer extends Component { + + static propTypes = { + name: PropTypes.string.isRequired, + phone: PropTypes.string.isRequired, + accountCredit: PropTypes.string.isRequired, + id: PropTypes.number, + checkedOutMoviesCount: PropTypes.number.isRequired, + selectedCustomerCallback: PropTypes.func.isRequired, + } + + selectedCustomerCallback = () => { + this.props.selectedCustomerCallback(this.props.name, this.props.id); + } + + render () { + return ( +
+

{this.props.name}

+

Phone: {this.props.phone}

+

Account Credit: ${this.props.accountCredit}

+

Checked Out Movies Count: {this.props.checkedOutMoviesCount}

+ +
+ ); + } +} + +export default Customer; diff --git a/src/components/CustomerCollection.css b/src/components/CustomerCollection.css new file mode 100644 index 000000000..973caa926 --- /dev/null +++ b/src/components/CustomerCollection.css @@ -0,0 +1,6 @@ +.collection { + display: flex; + flex-flow: row wrap; + justify-content: center; + margin-top: 100px; +} diff --git a/src/components/CustomerCollection.js b/src/components/CustomerCollection.js new file mode 100644 index 000000000..c0c22bc61 --- /dev/null +++ b/src/components/CustomerCollection.js @@ -0,0 +1,57 @@ +import React, { Component } from 'react'; +import axios from 'axios' +import Customer from './Customer.js' +import './CustomerCollection.css'; + +const URL = "http://localhost:3001/customers" + +class CustomerCollection extends Component { + constructor() { + super(); + + this.state = { + customers: [], + } + } + + componentDidMount = () => { + axios.get(URL) + .then((response) => { + this.setState({ + customers: response.data + }) + }) + .catch((error) => { + this.setState({ + notification: error.message + }) + }); + } + + renderCustomerList = () => { + const customerList = this.state.customers.map((customer) => { + return ( + + ); + }); + return customerList; + } + + render() { + return ( +
+ {this.renderCustomerList()} +
+ ); + } +} + +export default CustomerCollection; diff --git a/src/components/Movie.css b/src/components/Movie.css new file mode 100644 index 000000000..5b3bb2c66 --- /dev/null +++ b/src/components/Movie.css @@ -0,0 +1,22 @@ +.info { + display: flex; + margin-top: .75em; + justify-content: center; +} + +.movie-container { + max-width: 350px; + margin: 10px; + background-color: #f4f9f2; + padding: 10px; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +.overview, .details, .info { + padding-left: .5em; + padding-right: .5em; +} + +.overview p { + text-align: justify; +} diff --git a/src/components/Movie.js b/src/components/Movie.js new file mode 100644 index 000000000..e7a896c2f --- /dev/null +++ b/src/components/Movie.js @@ -0,0 +1,66 @@ +import React, { Component } from 'react'; +import axios from 'axios' +import PropTypes from 'prop-types'; +import './Movie.css' + +const URL = "http://localhost:3001/movies" + +class Movie extends Component { + + static propTypes = { + title: PropTypes.string.isRequired, + releaseDate: PropTypes.string.isRequired, + imageURL: PropTypes.string.isRequired, + overview: PropTypes.string.isRequired, + selectedMovieCallback: PropTypes.func.isRequired, + buttonName: PropTypes.string, + } + + selectedMovieCallback = () => { + this.props.selectedMovieCallback(this.props.title); + } + + addMovie = () => { + axios.post(URL + + `?title=${this.props.title}&release_date=${this.props.releaseDate}&image_url=${this.props.imageURL}&overview=${this.props.overview}`) + .then((response) => { + this.setState({ + notification: `Successfully added ${this.props.title}.` + }); + }) + .catch((error) => { + this.setState({ + notification: error.message, + }); + }); + } + + renderButton = () => { + if (this.props.buttonName === "Select This Movie") { + return + } else if (this.props.buttonName === "Add To Library") { + return + } + } + + render() { + return ( +
+
+ movie poster +
+

{this.props.title}

+

{this.props.releaseDate}

+ {this.renderButton()} +
+
+
+

{this.props.overview}

+
+
+ ); + } + +} + +export default Movie; diff --git a/src/components/MovieCollection.css b/src/components/MovieCollection.css new file mode 100644 index 000000000..302f3f429 --- /dev/null +++ b/src/components/MovieCollection.css @@ -0,0 +1,5 @@ +.collection { + display: flex; + flex-flow: row wrap; + margin-top: 100px; +} diff --git a/src/components/MovieCollection.js b/src/components/MovieCollection.js new file mode 100644 index 000000000..5bb9ede95 --- /dev/null +++ b/src/components/MovieCollection.js @@ -0,0 +1,57 @@ +import React, { Component } from 'react'; +import axios from 'axios' +import Movie from './Movie.js' +import './MovieCollection.css'; + +const URL = "http://localhost:3001/movies" + +class MovieCollection extends Component { + constructor(props) { + super(props); + + this.state = { + movies: [], + } + } + + componentDidMount = () => { + axios.get(URL) + .then((response) => { + this.setState({ + movies: response.data + }) + }) + .catch((error) => { + this.setState({ + notification: error.message + }) + }); + } + + renderMovieList = () => { + const movieList = this.state.movies.map((movie) => { + return ( + + ); + }); + return movieList; + } + + render() { + return ( +
+ {this.renderMovieList()} +
+ ); + } +} + +export default MovieCollection; diff --git a/src/components/SearchMovie.css b/src/components/SearchMovie.css new file mode 100644 index 000000000..851702768 --- /dev/null +++ b/src/components/SearchMovie.css @@ -0,0 +1,31 @@ +.search-container { + display: flex; + flex-flow: column nowrap; + align-items: center; + padding: 20px; + margin-top: 100px; +} + +form { + display: grid; + grid-template-columns: 1fr 2fr 1fr; + grid-gap: 10px; + align-items: center; +} + +label { + text-align: center; + font-weight: bold; + font-size: 1.2rem; +} + +input { + font-size: 1em; +} + +.search-collection { + display: flex; + justify-content: center; + flex-flow: row wrap; + margin-top: 50px; +} diff --git a/src/components/SearchMovie.js b/src/components/SearchMovie.js new file mode 100644 index 000000000..fb9671aff --- /dev/null +++ b/src/components/SearchMovie.js @@ -0,0 +1,80 @@ +import React, { Component } from 'react'; +import axios from 'axios'; +import Movie from './Movie.js'; +import './SearchMovie.css'; + +const URL = "http://localhost:3001/movies" + +class SearchMovies extends Component { + constructor () { + super (); + + this.state = { + title: "", + movies: [], + } + } + + onFieldChange = (event) => { + const fieldName = event.target.name; + const fieldValue = event.target.value; + const updateState = {}; + + updateState[fieldName] = fieldValue; + this.setState(updateState); + } + + onSubmit = (event) => { + event.preventDefault(); + axios.get(URL + `?query=${this.state.title}`) + .then((response) => { + this.setState({ + movies: response.data, + }) + }) + .catch((error) => { + this.setState({ + notification: error.message, + }) + }) + } + + renderMovieList = () => { + const movieList = this.state.movies.map((movie) => { + return ( + + ); + }); + return movieList; + } + + render() { + return ( +
+
+ + + +
+
+ {this.renderMovieList()} +
+
+ ) + } + +} + +export default SearchMovies;