From 3f053ad4c584cc4d48a1cd86436a98ef46e264d7 Mon Sep 17 00:00:00 2001 From: Cyndi Lopez Date: Mon, 24 Jun 2019 15:41:54 -0700 Subject: [PATCH 01/32] set up initial front end with react router and added search, library, and customer functional components --- package-lock.json | 134 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 14 +++++ src/.env | 0 src/App.js | 94 ++++++++++++++++++++++++++------ 4 files changed, 227 insertions(+), 15 deletions(-) create mode 100644 src/.env diff --git a/package-lock.json b/package-lock.json index 2207e63b9..9bc9f54a4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1902,6 +1902,38 @@ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz", "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==" }, + "axios": { + "version": "0.19.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz", + "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==", + "requires": { + "follow-redirects": "1.5.10", + "is-buffer": "^2.0.2" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "requires": { + "ms": "2.0.0" + } + }, + "follow-redirects": { + "version": "1.5.10", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz", + "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==", + "requires": { + "debug": "=3.1.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + } + } + }, "axobject-query": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz", @@ -5603,6 +5635,11 @@ "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz", "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=" }, + "gud": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz", + "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==" + }, "gzip-size": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.0.0.tgz", @@ -5777,6 +5814,19 @@ "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" }, + "history": { + "version": "4.9.0", + "resolved": "https://registry.npmjs.org/history/-/history-4.9.0.tgz", + "integrity": "sha512-H2DkjCjXf0Op9OAr6nJ56fcRkTSNrUiv41vNJ6IswJjif6wlpZK0BTfFbi7qK9dXLSYZxkq5lBsj3vUjlYBYZA==", + "requires": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^2.2.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^0.4.0" + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -5787,6 +5837,14 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "hoist-non-react-statics": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz", + "integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==", + "requires": { + "react-is": "^16.7.0" + } + }, "hosted-git-info": { "version": "2.7.1", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz", @@ -8134,6 +8192,16 @@ "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz", "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==" }, + "mini-create-react-context": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz", + "integrity": "sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw==", + "requires": { + "@babel/runtime": "^7.4.0", + "gud": "^1.0.0", + "tiny-warning": "^1.0.2" + } + }, "mini-css-extract-plugin": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz", @@ -10194,6 +10262,52 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz", "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==" }, + "react-router": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.0.1.tgz", + "integrity": "sha512-EM7suCPNKb1NxcTZ2LEOWFtQBQRQXecLxVpdsP4DW4PbbqYWeRiLyV/Tt1SdCrvT2jcyXAXmVTmzvSzrPR63Bg==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "mini-create-react-context": "^0.3.0", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + }, + "path-to-regexp": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz", + "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=", + "requires": { + "isarray": "0.0.1" + } + } + } + }, + "react-router-dom": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.0.1.tgz", + "integrity": "sha512-zaVHSy7NN0G91/Bz9GD4owex5+eop+KvgbxXsP/O+iW1/Ln+BrJ8QiIR5a6xNPtrdTvLkxqlDClx13QO1uB8CA==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.0.1", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + } + }, "react-scripts": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.0.1.tgz", @@ -10575,6 +10689,11 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz", "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=" }, + "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", @@ -11685,6 +11804,16 @@ "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" }, + "tiny-invariant": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.4.tgz", + "integrity": "sha512-lMhRd/djQJ3MoaHEBrw8e2/uM4rs9YMNk0iOr8rHQ0QdbM7D4l0gFl3szKdeixrlyfm9Zqi4dxHCM2qVG8ND5g==" + }, + "tiny-warning": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.2.tgz", + "integrity": "sha512-rru86D9CpQRLvsFG5XFdy0KdLAvjdQDyZCsRcuu60WtzFylDM3eAWSxEVz5kzL2Gp544XiUvPbVKtOA/txLi9Q==" + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", @@ -12122,6 +12251,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", diff --git a/package.json b/package.json index e7e4a7c62..eeff31f0a 100644 --- a/package.json +++ b/package.json @@ -3,8 +3,10 @@ "version": "0.1.0", "private": true, "dependencies": { + "axios": "^0.19.0", "react": "^16.8.6", "react-dom": "^16.8.6", + "react-router-dom": "^5.0.1", "react-scripts": "3.0.1" }, "scripts": { @@ -12,5 +14,17 @@ "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] } } diff --git a/src/.env b/src/.env new file mode 100644 index 000000000..e69de29bb diff --git a/src/App.js b/src/App.js index 203067e4d..292d5fad4 100644 --- a/src/App.js +++ b/src/App.js @@ -1,21 +1,85 @@ import React, { Component } from 'react'; -import logo from './logo.svg'; -import './App.css'; - -class App extends Component { - render() { - return ( -
-
- logo -

Welcome to React

-
-

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

+import { BrowserRouter as Router, Route, Link } from "react-router-dom"; +import axios from 'axios' +function App() { + return ( + +
+
+ + + + +
- ); + + ); +} + +function Home() { + return

Home

; +} + +function Search() { + return

Search

; +} + +function Library() { + return

Library

; +} + +// function Topic({ match }) { +// return

Requested Param: {match.params.id}

; +// } + +function Customer () { + return

props.customer.name

+} + +function Customers() { + + const generateCustomerList = () => { + const result = axios.get("http://localhost:3090/customers") + .then((response)=>{ + const customerList = response.data.map((customer) => { + return customer + }) + console.log(customerList) + return customerList + // return customerList.map((customer) => { + // return + // }) + }) + console.log(result) + return

{result}

+ } + return ( +
+

Hi check this

+

{generateCustomerList()}

+
+ ); +} + +function Header() { + return ( +
    +
  • + Home +
    • +
  • + Search +
    • +
  • + Library +
    • + +
  • + Customers +
    • +
+ ); } export default App; From e1027a0333fc320cb325285ca9fbb3a2328f77df Mon Sep 17 00:00:00 2001 From: Cyndi Lopez Date: Mon, 24 Jun 2019 16:04:12 -0700 Subject: [PATCH 02/32] changed customer from a functional to a classical component. followed the same process for Movie --- src/App.js | 88 ++++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 69 insertions(+), 19 deletions(-) diff --git a/src/App.js b/src/App.js index 292d5fad4..b2e5969cc 100644 --- a/src/App.js +++ b/src/App.js @@ -24,43 +24,93 @@ function Search() { return

Search

; } -function Library() { - return

Library

; +function Movie (props) { + return

{props.title}

} -// function Topic({ match }) { -// return

Requested Param: {match.params.id}

; -// } +class Library extends Component { + constructor() { + super(); + + this.state = { + movieList: [], + }; + } + + generateMovieList = () => { + return this.state.movieList.map((movie) => { + return () + }) + } + + componentDidMount() { + axios.get("http://localhost:3090/movies") + .then((response)=>{ + const movieList = response.data.map((movie) => { + return movie + }) + this.setState({movieList}) + }) + + } + + +render () { + return ( +
+

Library

+

{this.generateMovieList()}

+
+ ); + } +} -function Customer () { - return

props.customer.name

+function Customer (props) { + return

{props.name}

} -function Customers() { +class Customers extends Component { + constructor() { + super(); + + this.state = { + customerList: [], + }; + } + + generateCustomerList = () => { + return this.state.customerList.map((customer) => { + return () + }) + } - const generateCustomerList = () => { - const result = axios.get("http://localhost:3090/customers") + componentDidMount() { + axios.get("http://localhost:3090/customers") .then((response)=>{ const customerList = response.data.map((customer) => { return customer }) console.log(customerList) - return customerList - // return customerList.map((customer) => { - // return - // }) + this.setState({customerList}) + }) - console.log(result) - return

{result}

- } - return ( +} + + render () { + return (

Hi check this

-

{generateCustomerList()}

+

{this.generateCustomerList()}

); } +} function Header() { return ( From 5d6e11353e1c7ae5aa0b76b54cd66f01fd4bc580 Mon Sep 17 00:00:00 2001 From: Cyndi Lopez Date: Mon, 24 Jun 2019 16:14:56 -0700 Subject: [PATCH 03/32] added basics of form to search for movie --- src/App.js | 26 ++++++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index b2e5969cc..285e517a4 100644 --- a/src/App.js +++ b/src/App.js @@ -20,8 +20,25 @@ function Home() { return

Home

; } -function Search() { - return

Search

; +class Search extends Component { + constructor() { + super(); + this.state = { + title: "" + } + } + render () { + return ( +
+

Search

+
+ + + +
+
+ ); + } } function Movie (props) { @@ -30,7 +47,7 @@ function Movie (props) { class Library extends Component { constructor() { - super(); + super() this.state = { movieList: [], @@ -84,7 +101,8 @@ class Customers extends Component { generateCustomerList = () => { return this.state.customerList.map((customer) => { return () }) } From 66e38b545c7d4af37579ed6766253e2488944b10 Mon Sep 17 00:00:00 2001 From: Cyndi Lopez Date: Mon, 24 Jun 2019 17:02:12 -0700 Subject: [PATCH 04/32] onchange and onformsubmit functions added for search form --- src/App.js | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index 285e517a4..b5b6e7663 100644 --- a/src/App.js +++ b/src/App.js @@ -27,13 +27,30 @@ class Search extends Component { title: "" } } + + onChangeTitle = (event) => { + let title = this.state.title; + // const field = event.target.name; + const value = event.target.value; + title = value; + this.setState({title}) + + } + + onFormSubmit = () => { + axios.get('http://localhost:3090/movies/' + this.state.title.toString()) + .then((response) => { + console.log(response) + + }) + } render () { return (

Search

-
+ - +
@@ -113,7 +130,6 @@ class Customers extends Component { const customerList = response.data.map((customer) => { return customer }) - console.log(customerList) this.setState({customerList}) }) @@ -123,7 +139,6 @@ class Customers extends Component { render () { return (
-

Hi check this

{this.generateCustomerList()}

); From a83ba5ea88052263d7fc01f4ada2496d4cc343c0 Mon Sep 17 00:00:00 2001 From: Cyndi Lopez Date: Mon, 24 Jun 2019 17:03:02 -0700 Subject: [PATCH 05/32] this added to on form submit --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index b5b6e7663..538b7d95e 100644 --- a/src/App.js +++ b/src/App.js @@ -48,7 +48,7 @@ class Search extends Component { return (

Search

-
+ From aa1fe3a8c0d42b2bb7297b1a12caeeb5dbef690b Mon Sep 17 00:00:00 2001 From: Karla Guadron Date: Tue, 25 Jun 2019 12:33:00 -0700 Subject: [PATCH 06/32] Changed App to classical component to add state that keeps track of movie and cutomer in order to create a checkout --- src/App.js | 61 ++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 45 insertions(+), 16 deletions(-) diff --git a/src/App.js b/src/App.js index 538b7d95e..c7ba537b4 100644 --- a/src/App.js +++ b/src/App.js @@ -1,19 +1,43 @@ import React, { Component } from 'react'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; import axios from 'axios' -function App() { - return ( - -
-
+class App extends Component { + constructor() { + super(); + this.state = { + movieTitle: "", + customer: "" + } + } - - - - -
- - ); + onCheckoutClick = () => { + axios.post('https://localhost:3090/rentals/' + this.state.movieTitle + '/check-out', { + title: this.state.movieTitle, + customer_id: this.state.customer.id, + name: this.state.customer.name, + postal_code: this.state.customer.postal_code, + checkout_date: new Date(), + due_date: new Date() + 7 + }) + } + + render () { + return ( + +
+
+ + + + + + +
+ + ); + } } function Home() { @@ -37,8 +61,9 @@ class Search extends Component { } - onFormSubmit = () => { - axios.get('http://localhost:3090/movies/' + this.state.title.toString()) + onFormSubmit = (event) => { + event.preventDefault(); + axios.get('http://localhost:3090/movies?query=' + this.state.title.toString()) .then((response) => { console.log(response) @@ -59,7 +84,11 @@ class Search extends Component { } function Movie (props) { - return

{props.title}

+ const onTitleClick = () => { + + } + + return

{props.title}

} class Library extends Component { @@ -76,6 +105,7 @@ class Library extends Component { return () }) } @@ -88,7 +118,6 @@ class Library extends Component { }) this.setState({movieList}) }) - } From 9fa33c61c85d8bef7739e19e89274782b4aa95a1 Mon Sep 17 00:00:00 2001 From: Cyndi Lopez Date: Tue, 25 Jun 2019 13:42:07 -0700 Subject: [PATCH 07/32] added event prevent default to form for search --- src/App.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 538b7d95e..63e8edee4 100644 --- a/src/App.js +++ b/src/App.js @@ -37,7 +37,8 @@ class Search extends Component { } - onFormSubmit = () => { + onFormSubmit = (event) => { + event.preventDefault() axios.get('http://localhost:3090/movies/' + this.state.title.toString()) .then((response) => { console.log(response) From 8176e268c599d19a884e45d99dab1f4c94500e6c Mon Sep 17 00:00:00 2001 From: Cyndi Lopez Date: Tue, 25 Jun 2019 14:25:49 -0700 Subject: [PATCH 08/32] built callback chain and edited library app component to take callback function as a prop --- src/App.js | 31 ++++++++++++++++++++----------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/src/App.js b/src/App.js index 3eb38af6c..6657881b1 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; import axios from 'axios' + class App extends Component { constructor() { super(); @@ -21,15 +22,25 @@ class App extends Component { }) } + addMovieToRent = (title) => { + let movieTitle = this.state.movieTitle; + movieTitle = title; + this.setState({movieTitle}) + console.log("in callback ", title) + } + render () { + console.log(this.state) + return (
+

{this.state.movieTitle}

- - + ()} + /> @@ -96,7 +103,6 @@ class Search extends Component { function Movie (props) { const onTitleClick = () => { - // console.log(props) props.addMovieToRentCallback(props.title) } @@ -146,7 +152,10 @@ render () { } function Customer (props) { - return

{props.name}

+ const onCustomerClick = () => { + props.addCustomertoRentCallback(props.customer) + } + return

{props.customer.name}

} class Customers extends Component { @@ -162,7 +171,8 @@ class Customers extends Component { return this.state.customerList.map((customer) => { return () }) } @@ -173,6 +183,7 @@ class Customers extends Component { const customerList = response.data.map((customer) => { return customer }) + console.log(customerList) this.setState({customerList}) }) From 3ec11eb46fb6d82bdccc95b25e6a0d4c63323653 Mon Sep 17 00:00:00 2001 From: Karla Guadron Date: Tue, 25 Jun 2019 15:31:47 -0700 Subject: [PATCH 10/32] built out function with axios post to rental checkout --- src/App.js | 26 +++++++++++++++++++------- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/src/App.js b/src/App.js index be23b85f1..50a1472f1 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; import axios from 'axios' +import { thisExpression } from '@babel/types'; class App extends Component { constructor() { @@ -12,13 +13,24 @@ class App extends Component { } onCheckoutClick = () => { - axios.post('https://localhost:3090/rentals/' + this.state.movieTitle + '/check-out', { - title: this.state.movieTitle, - customer_id: this.state.customer.id, - name: this.state.customer.name, - postal_code: this.state.customer.postal_code, - checkout_date: new Date(), - due_date: new Date() + 7 + console.log('https://localhost:3090/rentals/' + this.state.movieTitle + '/check-out') + console.log(this.state.movieTitle) + console.log(this.state.customer.id) + console.log(new Date() + 7) + let today = new Date() + let newdate = new Date(); + newdate.setDate(today.getDate()+7); + axios.post('http://localhost:3090/rentals/' + this.state.movieTitle + '/check-out', + + { + title: this.state.movieTitle, + customer_id: this.state.customer.id, + due_date: newdate + } + ) + + .then((response) => { + console.log(response) }) } From 3cad74e6a934251aa79b817d3457a559b603bdde Mon Sep 17 00:00:00 2001 From: Cyndi Lopez Date: Tue, 25 Jun 2019 16:23:32 -0700 Subject: [PATCH 11/32] comment --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index be23b85f1..2ac19fd88 100644 --- a/src/App.js +++ b/src/App.js @@ -84,7 +84,7 @@ class Search extends Component { axios.get('http://localhost:3090/movies?query=' + this.state.title.toString()) .then((response) => { console.log(response) - + // be submitting post request to video store api from response? }) } render () { From e4540848fa62aa444d981e77539fbfeec23a4fed Mon Sep 17 00:00:00 2001 From: Karla Guadron Date: Tue, 25 Jun 2019 17:02:32 -0700 Subject: [PATCH 12/32] Display movie search list function that has a select link --- src/App.js | 39 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 37 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index 50a1472f1..dee67d536 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,6 @@ import React, { Component } from 'react'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; import axios from 'axios' -import { thisExpression } from '@babel/types'; class App extends Component { constructor() { @@ -78,7 +77,8 @@ class Search extends Component { constructor() { super(); this.state = { - title: "" + title: "", + searchList: [] } } @@ -94,11 +94,44 @@ class Search extends Component { onFormSubmit = (event) => { event.preventDefault(); axios.get('http://localhost:3090/movies?query=' + this.state.title.toString()) + .then((response) => { + console.log(response.data) + const searchList = response.data.map((movie) => { + return movie + }) + this.setState({searchList}) + console.log(searchList) + }) + } + + onMovieSelect = (movie) => { + return () => { + axios.post('http://localhost:3090/movies', + { + title: movie.title, + overview: movie.overview, + release_date: movie.release_date, + image_url: movie.image_url, + external_id: movie.external_id, + } + ) .then((response) => { console.log(response) + }) + console.log('inside on movie select')} + } + searchDisplay = () => { + return this.state.searchList.map((movie) => { + return ( +
+

{movie.title}

+

Select!

+
+ ) }) } + render () { return (
@@ -108,6 +141,8 @@ class Search extends Component { +

{this.searchDisplay()}

+
); } From c4f09de11e93a2b8b305f3bec002e59808443252 Mon Sep 17 00:00:00 2001 From: Cyndi Lopez Date: Tue, 25 Jun 2019 17:10:04 -0700 Subject: [PATCH 13/32] button class name made into state variable. it changes whether it displays based on whether both a customer and movie have been clicked on --- src/App.css | 27 +++++---------------------- src/App.js | 30 ++++++++++++++++++++++++------ 2 files changed, 29 insertions(+), 28 deletions(-) diff --git a/src/App.css b/src/App.css index c5c6e8a68..4dd45ab11 100644 --- a/src/App.css +++ b/src/App.css @@ -2,27 +2,10 @@ text-align: center; } -.App-logo { - animation: App-logo-spin infinite 20s linear; - height: 80px; +button.checkout-button { + display: none; } -.App-header { - background-color: #222; - height: 150px; - padding: 20px; - color: white; -} - -.App-title { - font-size: 1.5em; -} - -.App-intro { - font-size: large; -} - -@keyframes App-logo-spin { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } -} +button.checkout-button-display { + display: block; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 330de4c51..705598337 100644 --- a/src/App.js +++ b/src/App.js @@ -1,14 +1,15 @@ import React, { Component } from 'react'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; +import './App.css'; import axios from 'axios' -import { thisExpression } from '@babel/types'; class App extends Component { constructor() { super(); this.state = { movieTitle: "", - customer: "" + customer: "", + checkoutButtonClassName: "checkout-button", } } @@ -32,6 +33,13 @@ class App extends Component { .then((response) => { console.log(response) }) + + this.setState( + { + movieTitle: "", + customer: "", + checkoutButtonClassName: "checkout-button", + }) } addMovieToRent = (title) => { @@ -39,13 +47,22 @@ class App extends Component { movieTitle = title; this.setState({movieTitle}) console.log("in callback ", title) + if (this.state.customer.name) { + let checkoutButtonClassName = this.state.checkoutButtonClassName; + checkoutButtonClassName = "checkout-button-display" + this.setState({checkoutButtonClassName}) + } } addCustomerToRent = (customer) => { let newCustomer = this.state.customer; newCustomer = customer; this.setState({customer: newCustomer}) - + if (this.state.movieTitle.length>0) { + let checkoutButtonClassName = this.state.checkoutButtonClassName; + checkoutButtonClassName = "display" + this.setState({checkoutButtonClassName}) + } } render () { @@ -54,6 +71,9 @@ class App extends Component {

{this.state.movieTitle}

{this.state.customer.name}

+
@@ -61,9 +81,7 @@ class App extends Component { /> ()} /> - +
); From b053196cd8fbfaabc8397e405f3d4ea80e538c47 Mon Sep 17 00:00:00 2001 From: Karla Guadron Date: Wed, 26 Jun 2019 09:19:46 -0700 Subject: [PATCH 14/32] Working on showing user errors --- src/App.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index dee67d536..7d3322801 100644 --- a/src/App.js +++ b/src/App.js @@ -78,7 +78,9 @@ class Search extends Component { super(); this.state = { title: "", - searchList: [] + searchList: [], + error: "" + errorClass: "no-error" } } @@ -100,7 +102,9 @@ class Search extends Component { return movie }) this.setState({searchList}) - console.log(searchList) + }) + .catch((error)=>{ + this.setState({error: error.message}); }) } @@ -118,7 +122,10 @@ class Search extends Component { .then((response) => { console.log(response) }) - console.log('inside on movie select')} + let newState = this.state + newState.searchList = []; + this.setState({newState}); + } } searchDisplay = () => { From 03625258e64a058bff7e24de468feaffef28246c Mon Sep 17 00:00:00 2001 From: Karla Guadron Date: Wed, 26 Jun 2019 10:29:54 -0700 Subject: [PATCH 15/32] Added error display --- src/App.css | 8 ++++++++ src/App.js | 32 +++++++++++++++++++++++--------- 2 files changed, 31 insertions(+), 9 deletions(-) diff --git a/src/App.css b/src/App.css index c5c6e8a68..6d620fe9f 100644 --- a/src/App.css +++ b/src/App.css @@ -22,6 +22,14 @@ font-size: large; } +.display-error { + color: red; +} + +.no-error { + visibility: hidden; +} + @keyframes App-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } diff --git a/src/App.js b/src/App.js index 7d3322801..fde9c5655 100644 --- a/src/App.js +++ b/src/App.js @@ -7,8 +7,11 @@ class App extends Component { super(); this.state = { movieTitle: "", - customer: "" + customer: "", + error: "", + errorClass: "no-error", } + } onCheckoutClick = () => { @@ -31,8 +34,18 @@ class App extends Component { .then((response) => { console.log(response) }) + + .catch((error)=>{ + console.log(error.message) + this.setState({error: error.message, errorClass: 'display-error'}); + console.log(this.state.error) + console.log(this.state.errorClass) + + }) + // this.setState({error: "", errorClass: 'no-error'}); } + addMovieToRent = (title) => { let movieTitle = this.state.movieTitle; movieTitle = title; @@ -47,10 +60,15 @@ class App extends Component { } + onClickAnywhere = () => { + this.setState({error: "", errorClass: 'no-error'}); + } + render () { return ( -
+
+

{this.state.error}

{this.state.movieTitle}

{this.state.customer.name}

@@ -78,9 +96,7 @@ class Search extends Component { super(); this.state = { title: "", - searchList: [], - error: "" - errorClass: "no-error" + searchList: [] } } @@ -103,11 +119,10 @@ class Search extends Component { }) this.setState({searchList}) }) - .catch((error)=>{ - this.setState({error: error.message}); - }) + } + onMovieSelect = (movie) => { return () => { axios.post('http://localhost:3090/movies', @@ -149,7 +164,6 @@ class Search extends Component {

{this.searchDisplay()}

-
); } From 6b030309efef232f7a26b5c2c725c8e184bf96ca Mon Sep 17 00:00:00 2001 From: Karla Guadron Date: Wed, 26 Jun 2019 10:40:26 -0700 Subject: [PATCH 16/32] Resolved conflicts --- src/App.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/App.css b/src/App.css index 04b67ef21..a3e2b4b44 100644 --- a/src/App.css +++ b/src/App.css @@ -6,11 +6,9 @@ button.checkout-button { display: none; } -<<<<<<< HEAD button.checkout-button-display { display: block; } -======= .App-header { background-color: #222; height: 150px; @@ -38,4 +36,3 @@ button.checkout-button-display { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } ->>>>>>> karla From fdeebd84928f60da53ea94cfd95b380e15e8c849 Mon Sep 17 00:00:00 2001 From: Karla Guadron Date: Wed, 26 Jun 2019 11:02:10 -0700 Subject: [PATCH 17/32] Refactored code to be in different files for each component --- src/App.css | 1 + src/App.js | 222 +++--------------------------------- src/components/Customer.js | 10 ++ src/components/Customers.js | 47 ++++++++ src/components/Header.js | 24 ++++ src/components/Home.css | 0 src/components/Home.js | 8 ++ src/components/Library.js | 48 ++++++++ src/components/Movie.js | 12 ++ src/components/Search.js | 84 ++++++++++++++ 10 files changed, 249 insertions(+), 207 deletions(-) create mode 100644 src/components/Customer.js create mode 100644 src/components/Customers.js create mode 100644 src/components/Header.js create mode 100644 src/components/Home.css create mode 100644 src/components/Home.js create mode 100644 src/components/Library.js create mode 100644 src/components/Movie.js create mode 100644 src/components/Search.js diff --git a/src/App.css b/src/App.css index a3e2b4b44..ebc9e970a 100644 --- a/src/App.css +++ b/src/App.css @@ -9,6 +9,7 @@ button.checkout-button { button.checkout-button-display { display: block; } + .App-header { background-color: #222; height: 150px; diff --git a/src/App.js b/src/App.js index bc781cdf9..846e1636a 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,14 @@ import { BrowserRouter as Router, Route, Link } from "react-router-dom"; import './App.css'; import axios from 'axios' +import Search from './components/Search' +import Home from './components/Home' +import Header from './components/Header' +import Customers from './components/Customers' +import Customer from './components/Customer' +import Library from './components/Library' +import Movie from './components/Movie' + class App extends Component { constructor() { super(); @@ -35,14 +43,15 @@ class App extends Component { .then((response) => { console.log(response) + this.setState( + { + movieTitle: "", + customer: "", + checkoutButtonClassName: "checkout-button", + }) }) - this.setState( - { - movieTitle: "", - customer: "", - checkoutButtonClassName: "checkout-button", - }) + .catch((error)=>{ console.log(error.message) this.setState({error: error.message, errorClass: 'display-error'}); @@ -105,205 +114,4 @@ class App extends Component { } } -function Home() { - return

Home

; -} - -class Search extends Component { - constructor() { - super(); - this.state = { - title: "", - searchList: [] - } - } - - onChangeTitle = (event) => { - let title = this.state.title; - // const field = event.target.name; - const value = event.target.value; - title = value; - this.setState({title}) - - } - - onFormSubmit = (event) => { - event.preventDefault(); - axios.get('http://localhost:3090/movies?query=' + this.state.title.toString()) - .then((response) => { - console.log(response.data) - const searchList = response.data.map((movie) => { - return movie - }) - this.setState({searchList}) - }) - - } - - - onMovieSelect = (movie) => { - return () => { - axios.post('http://localhost:3090/movies', - { - title: movie.title, - overview: movie.overview, - release_date: movie.release_date, - image_url: movie.image_url, - external_id: movie.external_id, - } - ) - .then((response) => { - console.log(response) - // be submitting post request to video store api from response? - }) - let newState = this.state - newState.searchList = []; - this.setState({newState}); - } - } - - searchDisplay = () => { - return this.state.searchList.map((movie) => { - return ( -
-

{movie.title}

-

Select!

-
- ) - }) - } - - render () { - return ( -
-

Search

-
- - - -
-

{this.searchDisplay()}

-
- ); - } -} - -function Movie (props) { - const onTitleClick = () => { - props.addMovieToRentCallback(props.title) - } - - return

{props.title}

-} - -class Library extends Component { - constructor(props) { - super(props) - - this.state = { - movieList: [], - }; - } - - generateMovieList = () => { - console.log(this.props) - return this.state.movieList.map((movie) => { - return () - }) - } - - componentDidMount() { - axios.get("http://localhost:3090/movies") - .then((response)=>{ - const movieList = response.data.map((movie) => { - return movie - }) - this.setState({movieList}) - }) - } - - -render () { - return ( -
-

Library

-

{this.generateMovieList()}

-
- ); - } -} - -function Customer (props) { - const onCustomerClick = () => { - props.addCustomertoRentCallback(props.customer) - } - return

{props.customer.name}

-} - -class Customers extends Component { - constructor() { - super(); - - this.state = { - customerList: [], - }; - } - - generateCustomerList = () => { - return this.state.customerList.map((customer) => { - return () - }) - } - - componentDidMount() { - axios.get("http://localhost:3090/customers") - .then((response)=>{ - const customerList = response.data.map((customer) => { - return customer - }) - console.log(customerList) - this.setState({customerList}) - - }) - -} - - render () { - return ( -
-

{this.generateCustomerList()}

-
- ); -} -} - -function Header() { - return ( -
    -
  • - Home -
    • -
  • - Search -
    • -
  • - Library -
    • - -
  • - Customers -
    • -
- ); -} - export default App; diff --git a/src/components/Customer.js b/src/components/Customer.js new file mode 100644 index 000000000..f03588ede --- /dev/null +++ b/src/components/Customer.js @@ -0,0 +1,10 @@ +import React from 'react'; + +function Customer (props) { + const onCustomerClick = () => { + props.addCustomertoRentCallback(props.customer) + } + return

{props.customer.name}

+} + +export default Customer; \ No newline at end of file diff --git a/src/components/Customers.js b/src/components/Customers.js new file mode 100644 index 000000000..b227558c1 --- /dev/null +++ b/src/components/Customers.js @@ -0,0 +1,47 @@ +import React, { Component } from 'react'; +import axios from 'axios' + +import Customer from './Customer' + +class Customers extends Component { + constructor() { + super(); + + this.state = { + customerList: [], + }; + } + + generateCustomerList = () => { + return this.state.customerList.map((customer) => { + return () + }) + } + + componentDidMount() { + axios.get("http://localhost:3090/customers") + .then((response)=>{ + const customerList = response.data.map((customer) => { + return customer + }) + console.log(customerList) + this.setState({customerList}) + + }) + +} + + render () { + return ( +
+

{this.generateCustomerList()}

+
+ ); +} +} + +export default Customers; \ No newline at end of file diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 000000000..0bd6ab347 --- /dev/null +++ b/src/components/Header.js @@ -0,0 +1,24 @@ +import React from 'react'; +import { BrowserRouter as Router, Route, Link } from "react-router-dom"; + +function Header() { + return ( +
    +
  • + Home +
    • +
  • + Search +
    • +
  • + Library +
    • + +
  • + Customers +
    • +
+ ); +} + +export default Header; \ No newline at end of file diff --git a/src/components/Home.css b/src/components/Home.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Home.js b/src/components/Home.js new file mode 100644 index 000000000..c21393fc7 --- /dev/null +++ b/src/components/Home.js @@ -0,0 +1,8 @@ +import React from 'react'; +import './Home.css'; + +function Home() { + return

Home

; +} + +export default Home; \ No newline at end of file diff --git a/src/components/Library.js b/src/components/Library.js new file mode 100644 index 000000000..3e811a625 --- /dev/null +++ b/src/components/Library.js @@ -0,0 +1,48 @@ +import React, { Component } from 'react'; +import axios from 'axios' + +import Movie from './Movie' + +class Library extends Component { + constructor(props) { + super(props) + + this.state = { + movieList: [], + }; + } + + generateMovieList = () => { + console.log(this.props) + return this.state.movieList.map((movie) => { + return () + }) + } + + componentDidMount() { + axios.get("http://localhost:3090/movies") + .then((response)=>{ + const movieList = response.data.map((movie) => { + return movie + }) + this.setState({movieList}) + }) + } + + +render () { + return ( +
+

Library

+

{this.generateMovieList()}

+
+ ); + } +} + +export default Library; \ No newline at end of file diff --git a/src/components/Movie.js b/src/components/Movie.js new file mode 100644 index 000000000..691d456cc --- /dev/null +++ b/src/components/Movie.js @@ -0,0 +1,12 @@ +import React from 'react'; +// import './Home.css'; + +function Movie (props) { + const onTitleClick = () => { + props.addMovieToRentCallback(props.title) + } + + return

{props.title}

+} + +export default Movie; \ No newline at end of file diff --git a/src/components/Search.js b/src/components/Search.js new file mode 100644 index 000000000..6aeea0d64 --- /dev/null +++ b/src/components/Search.js @@ -0,0 +1,84 @@ +import React, { Component} from 'react'; +import axios from 'axios'; + + +class Search extends Component { + constructor() { + super(); + this.state = { + title: "", + searchList: [] + } + } + + onChangeTitle = (event) => { + let title = this.state.title; + // const field = event.target.name; + const value = event.target.value; + title = value; + this.setState({title}) + + } + + onFormSubmit = (event) => { + event.preventDefault(); + axios.get('http://localhost:3090/movies?query=' + this.state.title.toString()) + .then((response) => { + console.log(response.data) + const searchList = response.data.map((movie) => { + return movie + }) + this.setState({searchList}) + }) + + } + + + onMovieSelect = (movie) => { + return () => { + axios.post('http://localhost:3090/movies', + { + title: movie.title, + overview: movie.overview, + release_date: movie.release_date, + image_url: movie.image_url, + external_id: movie.external_id, + } + ) + .then((response) => { + console.log(response) + // be submitting post request to video store api from response? + }) + let newState = this.state + newState.searchList = []; + this.setState({newState}); + } + } + + searchDisplay = () => { + return this.state.searchList.map((movie) => { + return ( +
+

{movie.title}

+

Select!

+
+ ) + }) + } + + render () { + return ( +
+

Search

+
+ + + +
+

{this.searchDisplay()}

+
+ ); + } +} + +export default Search; \ No newline at end of file From fb8168ed85550be799fcb9fcd11470e1123da33f Mon Sep 17 00:00:00 2001 From: Karla Guadron Date: Wed, 26 Jun 2019 12:05:43 -0700 Subject: [PATCH 18/32] Styled Customers and Customer components --- package-lock.json | 5 +++++ package.json | 1 + src/App.js | 1 + src/components/Customer.css | 8 ++++++++ src/components/Customer.js | 14 +++++++++++++- src/components/Customers.js | 21 +++++++++++++++++---- 6 files changed, 45 insertions(+), 5 deletions(-) create mode 100644 src/components/Customer.css diff --git a/package-lock.json b/package-lock.json index 9bc9f54a4..4081138c2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2428,6 +2428,11 @@ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=" }, + "bootstrap": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz", + "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", diff --git a/package.json b/package.json index eeff31f0a..42e177ba0 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "axios": "^0.19.0", + "bootstrap": "^4.3.1", "react": "^16.8.6", "react-dom": "^16.8.6", "react-router-dom": "^5.0.1", diff --git a/src/App.js b/src/App.js index 846e1636a..cdbc85af8 100644 --- a/src/App.js +++ b/src/App.js @@ -101,6 +101,7 @@ class App extends Component { onClick={this.onCheckoutClick}> Checkout!
+ ()} diff --git a/src/components/Customer.css b/src/components/Customer.css new file mode 100644 index 000000000..3f965f066 --- /dev/null +++ b/src/components/Customer.css @@ -0,0 +1,8 @@ +.table-hover tbody tr:hover td { + background: lightgoldenrodyellow; +} + +img { + width: 200px; + height: 200px; +} \ No newline at end of file diff --git a/src/components/Customer.js b/src/components/Customer.js index f03588ede..633366257 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -1,10 +1,22 @@ import React from 'react'; +import 'bootstrap/dist/css/bootstrap.css'; +import './Customer.css'; function Customer (props) { const onCustomerClick = () => { props.addCustomertoRentCallback(props.customer) } - return

{props.customer.name}

+ return ( + + {props.customer.id} + {props.customer.name} + {props.customer.address}
+ {props.customer.city}, {props.customer.state} {props.customer.postal_code} + {props.customer.phone} + {props.customer.account_credit} + + + ) } export default Customer; \ No newline at end of file diff --git a/src/components/Customers.js b/src/components/Customers.js index b227558c1..00a51d160 100644 --- a/src/components/Customers.js +++ b/src/components/Customers.js @@ -1,6 +1,8 @@ import React, { Component } from 'react'; import axios from 'axios' +import 'bootstrap/dist/css/bootstrap.css'; + import Customer from './Customer' class Customers extends Component { @@ -30,15 +32,26 @@ class Customers extends Component { }) console.log(customerList) this.setState({customerList}) - }) - } - + render () { return (
-

{this.generateCustomerList()}

+ + + + + + + + + + + + {this.generateCustomerList()} + +
IDNameAddressPhoneAccount Credit
); } From d611920e79499adeffc7ef45348da188d9e0f01d Mon Sep 17 00:00:00 2001 From: Karla Guadron Date: Wed, 26 Jun 2019 13:57:28 -0700 Subject: [PATCH 19/32] Added styling to Movie and Library component --- src/components/Customer.js | 1 - src/components/Customers.js | 2 +- src/components/Library.js | 23 +++++++++++++++++++++-- src/components/Movie.js | 14 +++++++++++++- 4 files changed, 35 insertions(+), 5 deletions(-) diff --git a/src/components/Customer.js b/src/components/Customer.js index 633366257..b9ffae8a1 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -14,7 +14,6 @@ function Customer (props) { {props.customer.city}, {props.customer.state} {props.customer.postal_code} {props.customer.phone} {props.customer.account_credit} - ) } diff --git a/src/components/Customers.js b/src/components/Customers.js index 00a51d160..32887a34d 100644 --- a/src/components/Customers.js +++ b/src/components/Customers.js @@ -1,6 +1,5 @@ import React, { Component } from 'react'; import axios from 'axios' - import 'bootstrap/dist/css/bootstrap.css'; import Customer from './Customer' @@ -38,6 +37,7 @@ class Customers extends Component { render () { return (
+

Customers

diff --git a/src/components/Library.js b/src/components/Library.js index 3e811a625..1db6eb87f 100644 --- a/src/components/Library.js +++ b/src/components/Library.js @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import axios from 'axios' +import 'bootstrap/dist/css/bootstrap.css'; import Movie from './Movie' @@ -15,10 +16,14 @@ class Library extends Component { generateMovieList = () => { console.log(this.props) return this.state.movieList.map((movie) => { + console.log(movie) return () }) @@ -31,6 +36,7 @@ class Library extends Component { return movie }) this.setState({movieList}) + console.log(movieList) }) } @@ -38,8 +44,21 @@ class Library extends Component { render () { return (
-

Library

-

{this.generateMovieList()}

+

Library

+
+ + + + + + + + + + + {this.generateMovieList()} + +
IDIMGTitleOverviewRelease Date
); } diff --git a/src/components/Movie.js b/src/components/Movie.js index 691d456cc..0434abf51 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -1,4 +1,7 @@ import React from 'react'; +import 'bootstrap/dist/css/bootstrap.css'; +import './Customer.css'; + // import './Home.css'; function Movie (props) { @@ -6,7 +9,16 @@ function Movie (props) { props.addMovieToRentCallback(props.title) } - return

{props.title}

+ return ( + + + {props.id} + + {props.title} + {props.overview} + {props.release_date} + + ) } export default Movie; \ No newline at end of file From 7c72371bf412816b737d0d8ff6532dde29eba4f2 Mon Sep 17 00:00:00 2001 From: Cyndi Lopez Date: Wed, 26 Jun 2019 14:13:20 -0700 Subject: [PATCH 20/32] header formatting with bootstrap and css --- public/index.html | 1 + src/App.css | 9 +++++--- src/App.js | 4 +--- src/components/Header.css | 24 ++++++++++++++++++++ src/components/Header.js | 47 ++++++++++++++++++++++++++------------- src/index.js | 1 + 6 files changed, 65 insertions(+), 21 deletions(-) create mode 100644 src/components/Header.css diff --git a/public/index.html b/public/index.html index ed0ebafa1..654067641 100644 --- a/public/index.html +++ b/public/index.html @@ -10,6 +10,7 @@ --> +