From 8c86a366ef3bcd0d4e4e8ca0739a119cf1c4704f Mon Sep 17 00:00:00 2001 From: Heather Izumi Date: Mon, 24 Jun 2019 16:09:27 -0700 Subject: [PATCH 01/37] added files for components and css --- package.json | 12 ++++++++++++ src/components/Customers.css | 0 src/components/Customers.js | 0 src/components/Library.css | 0 src/components/Library.js | 0 src/components/Search.css | 0 src/components/Search.js | 0 7 files changed, 12 insertions(+) create mode 100644 src/components/Customers.css create mode 100644 src/components/Customers.js create mode 100644 src/components/Library.css create mode 100644 src/components/Library.js create mode 100644 src/components/Search.css create mode 100644 src/components/Search.js diff --git a/package.json b/package.json index e7e4a7c62..b3eb42e1a 100644 --- a/package.json +++ b/package.json @@ -12,5 +12,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/components/Customers.css b/src/components/Customers.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Customers.js b/src/components/Customers.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Library.css b/src/components/Library.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Library.js b/src/components/Library.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Search.css b/src/components/Search.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Search.js b/src/components/Search.js new file mode 100644 index 000000000..e69de29bb From 2650aa13edb17c9f213ae595d001d445e7bc7b68 Mon Sep 17 00:00:00 2001 From: Heather Izumi Date: Mon, 24 Jun 2019 16:38:58 -0700 Subject: [PATCH 02/37] component did mount for rails api, populated allMovies --- package-lock.json | 32 ++++++++++++++++++++++++++++ package.json | 1 + src/App.js | 53 +++++++++++++++++++++++++++++++++++++++-------- 3 files changed, 77 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2207e63b9..47823f065 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", diff --git a/package.json b/package.json index b3eb42e1a..3aae7f405 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "axios": "^0.19.0", "react": "^16.8.6", "react-dom": "^16.8.6", "react-scripts": "3.0.1" diff --git a/src/App.js b/src/App.js index 203067e4d..2bdd6a2b4 100644 --- a/src/App.js +++ b/src/App.js @@ -1,18 +1,53 @@ import React, { Component } from 'react'; -import logo from './logo.svg'; +import axios from 'axios'; + import './App.css'; class App extends Component { + constructor(props) { + super(props); + + this.state = { + allCustomers: [], + allMovies: [], + tmdbId: null, + customerId: null, + movieId: null, + errorMessage: null + } + } + + componentDidMount() { + axios.get('http://localhost:3000/movies') + .then((response) => { + console.log('this is response.data', response.data); + + this.setState({ + allMovies: response.data + }) + console.log('im in component did mount', this.state.allMovies); + + }) + .catch((error) => { + this.setState({ + errorMessage: error.message + }) + }) + + } + render() { + + + + + + + return ( -
-
- logo -

Welcome to React

-
-

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

+
+ +
); } From be77d6c691c95bda5e2ac385423a1d80135b1b13 Mon Sep 17 00:00:00 2001 From: Faiza Husain Date: Mon, 24 Jun 2019 21:21:49 -0700 Subject: [PATCH 03/37] List of movies displays in App --- src/App.js | 28 +++++++++++++++------------- src/components/Library.js | 15 +++++++++++++++ 2 files changed, 30 insertions(+), 13 deletions(-) diff --git a/src/App.js b/src/App.js index 2bdd6a2b4..6e842cca6 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import axios from 'axios'; - +import Library from './components/Library'; import './App.css'; class App extends Component { @@ -20,11 +20,13 @@ class App extends Component { componentDidMount() { axios.get('http://localhost:3000/movies') .then((response) => { + console.log('this is response.data', response.data); this.setState({ - allMovies: response.data - }) + allMovies: response.data, + }); + console.log('im in component did mount', this.state.allMovies); }) @@ -37,17 +39,17 @@ class App extends Component { } render() { - - - - - - - - return ( + const mappedMovies = this.state.allMovies.map((movie, i) => { + return + }); + + return(
- - +

All Movies

+ {mappedMovies}
); } diff --git a/src/components/Library.js b/src/components/Library.js index e69de29bb..62bb6efce 100644 --- a/src/components/Library.js +++ b/src/components/Library.js @@ -0,0 +1,15 @@ +import React from 'react'; + + +const Library = (props) => { + + return( +
+ +

{props.id}: {props.title}

+

{props.overview}

+
+ ); +} + +export default Library; \ No newline at end of file From bae67e4cb0787e48dff80538797bfac903b596d0 Mon Sep 17 00:00:00 2001 From: Heather Izumi Date: Tue, 25 Jun 2019 13:44:18 -0700 Subject: [PATCH 04/37] can get a list of customers from the api --- src/App.js | 44 ++++++++++++++++++++++++++++++++----- src/components/Customers.js | 32 +++++++++++++++++++++++++++ 2 files changed, 71 insertions(+), 5 deletions(-) diff --git a/src/App.js b/src/App.js index 6e842cca6..4314f83b2 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import axios from 'axios'; import Library from './components/Library'; +import Customers from './components/Customers'; import './App.css'; class App extends Component { @@ -21,8 +22,6 @@ class App extends Component { axios.get('http://localhost:3000/movies') .then((response) => { - console.log('this is response.data', response.data); - this.setState({ allMovies: response.data, }); @@ -35,21 +34,56 @@ class App extends Component { errorMessage: error.message }) }) + } + + listAllCustomers = () => { + axios.get('http://localhost:3000/customers') + .then((response) => { + + console.log('customer response.data', response.data); + + this.setState({ + allCustomers: response.data, + }); + + console.log('in listAllCustomers', this.state.allCustomers); + + }) + .catch((error) => { + this.setState({ + errorMessage: error.message + }) + }) } render() { - const mappedMovies = this.state.allMovies.map((movie, i) => { + const { allMovies, allCustomers } = this.state; + + const mappedMovies = allMovies.map((movie, i) => { return }); - return( + + + return (

All Movies

- {mappedMovies} +
+ {mappedMovies} + +
+ +
+ + +
+ +
); } diff --git a/src/components/Customers.js b/src/components/Customers.js index e69de29bb..590ef77c6 100644 --- a/src/components/Customers.js +++ b/src/components/Customers.js @@ -0,0 +1,32 @@ +import React, { Component } from 'react'; +import './Customers.css'; + +const Customers = (props) => { + + const onClickListCustomers = () => { + props.listAllCustomersCallback(); + } + + // const mappedCustomers = props.customers.map((customer, i) => { + // return ( + //
+ //
customer.name
+ + //
+ + // ) + // }); + + return ( + +
+ + + +
+ + ); + +} + +export default Customers; \ No newline at end of file From aedf61b6e4cc9d1049ba5701472981713b34deff Mon Sep 17 00:00:00 2001 From: Faiza Husain Date: Tue, 25 Jun 2019 14:09:46 -0700 Subject: [PATCH 05/37] Can display Movies with button --- package-lock.json | 102 ++++++++++++++++++++++++++++++++++++++ package.json | 1 + src/App.js | 27 ++++++---- src/components/Library.js | 24 +++++++-- 4 files changed, 141 insertions(+), 13 deletions(-) diff --git a/package-lock.json b/package-lock.json index 47823f065..9bc9f54a4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5635,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", @@ -5809,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", @@ -5819,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", @@ -8166,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", @@ -10226,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", @@ -10607,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", @@ -11717,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", @@ -12154,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 3aae7f405..eeff31f0a 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "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": { diff --git a/src/App.js b/src/App.js index 6e842cca6..ea831065d 100644 --- a/src/App.js +++ b/src/App.js @@ -1,8 +1,10 @@ import React, { Component } from 'react'; +import { Route, Link } from 'react-router-dom' import axios from 'axios'; import Library from './components/Library'; import './App.css'; + class App extends Component { constructor(props) { super(props); @@ -13,11 +15,13 @@ class App extends Component { tmdbId: null, customerId: null, movieId: null, - errorMessage: null + errorMessage: null, + displayStatus: false } } componentDidMount() { + console.log('I AM IN COMPONENT DID MOUNT') axios.get('http://localhost:3000/movies') .then((response) => { @@ -35,21 +39,24 @@ class App extends Component { errorMessage: error.message }) }) - } - render() { - const mappedMovies = this.state.allMovies.map((movie, i) => { - return + toggleDisplayStatus = () => { + console.log("I'm in toggleAllMovies Function!"); + this.setState({ + displayStatus: !this.state.displayStatus, }); + } + render() { return(
-

All Movies

- {mappedMovies} +
); } diff --git a/src/components/Library.js b/src/components/Library.js index 62bb6efce..9995cffbc 100644 --- a/src/components/Library.js +++ b/src/components/Library.js @@ -1,14 +1,32 @@ -import React from 'react'; +import React, { Component } from 'react'; +import { withRouter } from 'react-router-dom'; +import { Link } from 'react-router-dom'; +import { Router } from 'react-router-dom'; const Library = (props) => { + const mappedMovies = props.allMovies.map((movie, i) => { + return( +

{movie.title}

+ ); + }); + return(
+
+ +
+ + {props.displayStatus &&
+ {mappedMovies} + +
} -

{props.id}: {props.title}

-

{props.overview}

+ ); } From 3836c51fe073eed3c61c3fbf176fff66f0a5cc88 Mon Sep 17 00:00:00 2001 From: Faiza Husain Date: Tue, 25 Jun 2019 15:35:26 -0700 Subject: [PATCH 06/37] Added React Router to App component for Movies --- src/App.js | 44 ++++++++++++++++++++++++++++++++------- src/components/Library.js | 5 ++--- 2 files changed, 38 insertions(+), 11 deletions(-) diff --git a/src/App.js b/src/App.js index ea831065d..50a3d898d 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,8 @@ import React, { Component } from 'react'; -import { Route, Link } from 'react-router-dom' +import { BrowserRouter as Router, Route, Link } from "react-router-dom"; import axios from 'axios'; import Library from './components/Library'; +import Customers from './components/Customers'; import './App.css'; @@ -20,6 +21,7 @@ class App extends Component { } } + componentDidMount() { console.log('I AM IN COMPONENT DID MOUNT') axios.get('http://localhost:3000/movies') @@ -50,14 +52,40 @@ class App extends Component { render() { return( -
- +
+
    +
  • + Home +
    • + +
  • + Movies +
    • +
+ +
+ + + + + } + /> +
+ + + //
+ // -
+ // /> + //
); } } diff --git a/src/components/Library.js b/src/components/Library.js index 9995cffbc..2990da974 100644 --- a/src/components/Library.js +++ b/src/components/Library.js @@ -1,10 +1,9 @@ import React, { Component } from 'react'; -import { withRouter } from 'react-router-dom'; -import { Link } from 'react-router-dom'; -import { Router } from 'react-router-dom'; + const Library = (props) => { + const mappedMovies = props.allMovies.map((movie, i) => { return(

{movie.title}

From 04207be54ed1a7cc812d6fc6cbedbfc2d65d984a Mon Sep 17 00:00:00 2001 From: Heather Izumi Date: Tue, 25 Jun 2019 16:02:51 -0700 Subject: [PATCH 07/37] Can access array of all customers in Customers component --- src/App.js | 53 ++++++++++++++++++++++++------------- src/components/Customers.js | 53 ++++++++++++++++++++++++++++--------- 2 files changed, 74 insertions(+), 32 deletions(-) diff --git a/src/App.js b/src/App.js index 4314f83b2..cbc3bb906 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import axios from 'axios'; import Library from './components/Library'; import Customers from './components/Customers'; import './App.css'; +import { all } from 'q'; class App extends Component { constructor(props) { @@ -27,6 +28,7 @@ class App extends Component { }); console.log('im in component did mount', this.state.allMovies); + }) .catch((error) => { @@ -34,28 +36,36 @@ class App extends Component { errorMessage: error.message }) }) + + // console.log('what is this?', this); } - listAllCustomers = () => { - axios.get('http://localhost:3000/customers') - .then((response) => { + setAllCustomers = (customerArray) => { + this.setState({ + allCustomers: customerArray, + }) + console.log('hi', this.state.allCustomers); + } - console.log('customer response.data', response.data); + // listAllCustomers = () => { + // axios.get('http://localhost:3000/customers') + // .then((response) => { - this.setState({ - allCustomers: response.data, - }); + // console.log('customer response.data', response.data); - console.log('in listAllCustomers', this.state.allCustomers); + // this.setState({ + // allCustomers: response.data, + // }); - }) - .catch((error) => { - this.setState({ - errorMessage: error.message - }) - }) + // console.log('in listAllCustomers', this.state.allCustomers); - } + // }) + // .catch((error) => { + // this.setState({ + // errorMessage: error.message + // }) + // }) + // } render() { const { allMovies, allCustomers } = this.state; @@ -67,7 +77,8 @@ class App extends Component { /> }); - + + return (
@@ -78,12 +89,16 @@ class App extends Component {
- + +
- +
); } diff --git a/src/components/Customers.js b/src/components/Customers.js index 590ef77c6..ed5f366e0 100644 --- a/src/components/Customers.js +++ b/src/components/Customers.js @@ -1,32 +1,59 @@ import React, { Component } from 'react'; import './Customers.css'; +import axios from 'axios'; -const Customers = (props) => { +class Customers extends Component { + constructor(props) { + super(props); - const onClickListCustomers = () => { - props.listAllCustomersCallback(); } - // const mappedCustomers = props.customers.map((customer, i) => { + componentDidMount() { + console.log('what is this.props', this.props); + + axios.get('http://localhost:3000/customers') + .then((response) => { + + console.log('customer response.data', response.data); + + this.props.setAllCustomersCallback(response.data); + }) + + } + + + + onClickListCustomers = (props) => { + + console.log('This is in onClickListCustomers:', this.props.customers) + } + + // mappedCustomers = props.customers.map((customer, i) => { // return ( //
- //
customer.name
- + //
{customer.name}
//
- // ) // }); - return ( -
- - -
- ); + render() { + return ( + +
+
+ placeholder +
+ + +
+ + ); + + } } export default Customers; \ No newline at end of file From 25c1b90e6dbaf0299f8b0d79032b2371c1d70aaf Mon Sep 17 00:00:00 2001 From: Faiza Husain Date: Tue, 25 Jun 2019 16:22:51 -0700 Subject: [PATCH 08/37] Can save movie.id to movieId in state --- src/App.js | 24 ++++++++++++++++-------- src/components/Library.css | 3 +++ src/components/Library.js | 5 ++--- 3 files changed, 21 insertions(+), 11 deletions(-) diff --git a/src/App.js b/src/App.js index 50a3d898d..021cb1207 100644 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,7 @@ import axios from 'axios'; import Library from './components/Library'; import Customers from './components/Customers'; import './App.css'; +import { thisTypeAnnotation } from '@babel/types'; class App extends Component { @@ -27,14 +28,18 @@ class App extends Component { axios.get('http://localhost:3000/movies') .then((response) => { + console.log('this is response.data', response.data); + this.setState({ allMovies: response.data, + movieId: response.data.id, }); console.log('im in component did mount', this.state.allMovies); + }) .catch((error) => { this.setState({ @@ -50,7 +55,16 @@ class App extends Component { }); } + selectMovie = (id) => { + return () => { + this.setState({ + movieId: id, + }); + } + } + render() { + console.log(this.state.movieId); return(
@@ -62,6 +76,7 @@ class App extends Component {
  • Movies
    • +
    @@ -71,6 +86,7 @@ class App extends Component { render={(props) => } @@ -78,14 +94,6 @@ class App extends Component {
    - //
    - // - //
    ); } } diff --git a/src/components/Library.css b/src/components/Library.css index e69de29bb..b97c0456c 100644 --- a/src/components/Library.css +++ b/src/components/Library.css @@ -0,0 +1,3 @@ +.movie-button { + border: none; +} \ No newline at end of file diff --git a/src/components/Library.js b/src/components/Library.js index 2990da974..16302c0e8 100644 --- a/src/components/Library.js +++ b/src/components/Library.js @@ -1,12 +1,12 @@ import React, { Component } from 'react'; - +import './Library.css'; const Library = (props) => { const mappedMovies = props.allMovies.map((movie, i) => { return( -

    {movie.title}

    + ); }); @@ -21,7 +21,6 @@ const Library = (props) => { {props.displayStatus &&
    {mappedMovies} -
    } From e64aceeac815ee0b65d378f35ca08adb4467281c Mon Sep 17 00:00:00 2001 From: Heather Izumi Date: Tue, 25 Jun 2019 16:23:51 -0700 Subject: [PATCH 09/37] Can display list of customers when button is clicked --- src/components/Customers.js | 38 +++++++++++++++++++++---------------- 1 file changed, 22 insertions(+), 16 deletions(-) diff --git a/src/components/Customers.js b/src/components/Customers.js index ed5f366e0..994746ca7 100644 --- a/src/components/Customers.js +++ b/src/components/Customers.js @@ -6,6 +6,10 @@ class Customers extends Component { constructor(props) { super(props); + this.state = { + displayCustomerList: false + } + } componentDidMount() { @@ -18,34 +22,36 @@ class Customers extends Component { this.props.setAllCustomersCallback(response.data); }) - } - onClickListCustomers = (props) => { - - console.log('This is in onClickListCustomers:', this.props.customers) + this.setState({ + displayCustomerList: true + }) } + + + render() { - // mappedCustomers = props.customers.map((customer, i) => { - // return ( - //
    - //
    {customer.name}
    - //
    - // ) - // }); - + const {displayCustomerList} = this.state; + const {customers} = this.props; + const mappedCustomers = customers.map((customer, i) => { + return ( +
    +
    {customer.name}
    +
    + ) + }); - render() { return (
    -
    - placeholder -
    + {displayCustomerList &&
    + {mappedCustomers} +
    } From 5a7d7131d492271468648ec85445cf50e850f882 Mon Sep 17 00:00:00 2001 From: Faiza Husain Date: Tue, 25 Jun 2019 22:20:46 -0700 Subject: [PATCH 10/37] Moved componentDidMount from App to Movies --- src/App.js | 62 ++++++++++++++++++--------------- src/components/Library.js | 72 ++++++++++++++++++++++++++++----------- 2 files changed, 86 insertions(+), 48 deletions(-) diff --git a/src/App.js b/src/App.js index 6adb48385..eb5cc84f5 100644 --- a/src/App.js +++ b/src/App.js @@ -18,43 +18,42 @@ class App extends Component { customerId: null, movieId: null, errorMessage: null, - displayStatus: false + // displayStatus: false } } - componentDidMount() { - axios.get('http://localhost:3000/movies') - .then((response) => { + // componentDidMount() { + // axios.get('http://localhost:3000/movies') + // .then((response) => { - this.setState({ - allMovies: response.data, - }); + // this.setState({ + // allMovies: response.data, + // }); - }) - .catch((error) => { - this.setState({ - errorMessage: error.message - }) - }) + // }) + // .catch((error) => { + // this.setState({ + // errorMessage: error.message + // }) + // }) + // } - } - - setAllCustomers = (customerArray) => { - this.setState({ - allCustomers: customerArray, - }) - console.log('hi', this.state.allCustomers); - } - - toggleDisplayStatus = () => { - console.log("I'm in toggleAllMovies Function!"); + setAllMovies = (moviesArray) => { this.setState({ - displayStatus: !this.state.displayStatus, + allMovies: moviesArray, }); } - + + + // toggleDisplayMovieList = () => { + // console.log("I'm in toggleAllMovies Function!"); + // this.setState({ + // displayMovieList: !this.state.displayMovieList, + // }); + // } + selectMovie = (id) => { return () => { this.setState({ @@ -63,6 +62,12 @@ class App extends Component { } } + setAllCustomers = (customerArray) => { + this.setState({ + allCustomers: customerArray, + }) + console.log('hi', this.state.allCustomers); + } render() { @@ -94,9 +99,10 @@ class App extends Component { } /> diff --git a/src/components/Library.js b/src/components/Library.js index 16302c0e8..01c39ee2b 100644 --- a/src/components/Library.js +++ b/src/components/Library.js @@ -1,31 +1,63 @@ import React, { Component } from 'react'; import './Library.css'; +import axios from 'axios'; +class Library extends Component { + constructor(props){ + super(props); -const Library = (props) => { + this.state = { + displayMovieList: false + } + } - const mappedMovies = props.allMovies.map((movie, i) => { - return( - - ); - }); + componentDidMount() { + axios.get('http://localhost:3000/movies') + .then((response) => { + console.log('movie response.data', response.data); - return( -
    -
    - -
    - - {props.displayStatus &&
    - {mappedMovies} -
    } + this.props.setAllMoviesCallback(response.data); + }) + .catch((error) => { + this.setState({ + errorMessage: error.message + }) + }) + } + + toggleDisplayMovieList = (props) => { + console.log("I'm in toggleAllMovies Function!"); + this.setState({ + displayMovieList: !this.state.displayMovieList, + }); + } + + render() { + const {displayMovieList} = this.state; + const {movies, onSelectMovie} = this.props; -
    - - ); + const mappedMovies = movies.map((movie, i) => { + return( + + ); + }); + return( +
    +
    + +
    + + {displayMovieList &&
    + {mappedMovies} +
    } + +
    + + ); + } } export default Library; \ No newline at end of file From 2570a635e1cf77f12fe05a9af882be590bf05309 Mon Sep 17 00:00:00 2001 From: Faiza Husain Date: Tue, 25 Jun 2019 22:27:13 -0700 Subject: [PATCH 11/37] Fixed some indentation --- src/App.js | 41 +++++++-------------------------------- src/components/Library.js | 2 -- 2 files changed, 7 insertions(+), 36 deletions(-) diff --git a/src/App.js b/src/App.js index eb5cc84f5..f70de6c4b 100644 --- a/src/App.js +++ b/src/App.js @@ -18,42 +18,15 @@ class App extends Component { customerId: null, movieId: null, errorMessage: null, - // displayStatus: false } } - - // componentDidMount() { - // axios.get('http://localhost:3000/movies') - // .then((response) => { - - - // this.setState({ - // allMovies: response.data, - // }); - - // }) - // .catch((error) => { - // this.setState({ - // errorMessage: error.message - // }) - // }) - // } - setAllMovies = (moviesArray) => { this.setState({ allMovies: moviesArray, }); } - - // toggleDisplayMovieList = () => { - // console.log("I'm in toggleAllMovies Function!"); - // this.setState({ - // displayMovieList: !this.state.displayMovieList, - // }); - // } - selectMovie = (id) => { return () => { this.setState({ @@ -107,13 +80,13 @@ class App extends Component { } /> - - } + render={(props) => + + } />
    diff --git a/src/components/Library.js b/src/components/Library.js index 01c39ee2b..11eb29a5f 100644 --- a/src/components/Library.js +++ b/src/components/Library.js @@ -53,9 +53,7 @@ class Library extends Component { {displayMovieList &&
    {mappedMovies}
    } - - ); } } From 417cff81c4ce32dfb670e31bebc2df2301589a7e Mon Sep 17 00:00:00 2001 From: Faiza Husain Date: Tue, 25 Jun 2019 22:43:03 -0700 Subject: [PATCH 12/37] Created a link to the search component in the Nav Bar --- src/App.js | 13 ++++++++++++- src/components/Rental.css | 0 src/components/Rental.js | 0 3 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 src/components/Rental.css create mode 100644 src/components/Rental.js diff --git a/src/App.js b/src/App.js index f70de6c4b..28652b50e 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Link } from "react-router-dom"; import axios from 'axios'; import Library from './components/Library'; import Customers from './components/Customers'; +import Search from './components/Search'; import './App.css'; @@ -61,9 +62,12 @@ class App extends Component {
  • - Customers + Customers
    • +
  • + Search +
    • @@ -88,6 +92,13 @@ class App extends Component { /> } /> + + + } + /> diff --git a/src/components/Rental.css b/src/components/Rental.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Rental.js b/src/components/Rental.js new file mode 100644 index 000000000..e69de29bb From 7c041dc2399f587c5509953ce413714bca18d4f5 Mon Sep 17 00:00:00 2001 From: Faiza Husain Date: Tue, 25 Jun 2019 22:56:56 -0700 Subject: [PATCH 13/37] Added some styling --- src/App.css | 9 +++++++++ src/App.js | 2 +- src/components/Library.css | 9 +++++++++ src/components/Library.js | 6 +++--- 4 files changed, 22 insertions(+), 4 deletions(-) diff --git a/src/App.css b/src/App.css index c5c6e8a68..175620568 100644 --- a/src/App.css +++ b/src/App.css @@ -26,3 +26,12 @@ from { transform: rotate(0deg); } to { transform: rotate(360deg); } } + +.nav ul{ + list-style: none; + display: flex; +} + +.nav ul li{ + padding-left: 6em; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 28652b50e..f84ca2c3b 100644 --- a/src/App.js +++ b/src/App.js @@ -51,7 +51,7 @@ class App extends Component { return( -
    +
    • Home diff --git a/src/components/Library.css b/src/components/Library.css index b97c0456c..a126baf73 100644 --- a/src/components/Library.css +++ b/src/components/Library.css @@ -1,3 +1,12 @@ .movie-button { border: none; +} + +.movies { + display: flex; + flex-direction: column; +} + +.movie-list { + align-content: center; } \ No newline at end of file diff --git a/src/components/Library.js b/src/components/Library.js index 11eb29a5f..1b7a3dda7 100644 --- a/src/components/Library.js +++ b/src/components/Library.js @@ -44,13 +44,13 @@ class Library extends Component { }); return(
      -
      -
      - {displayMovieList &&
      + {displayMovieList &&
      {mappedMovies}
      }
      From 6e433887df1cbeed9988414a7bf6a16009c86fb2 Mon Sep 17 00:00:00 2001 From: Heather Izumi Date: Wed, 26 Jun 2019 08:50:37 -0700 Subject: [PATCH 14/37] working on selecting a customer --- src/App.js | 7 +++++++ src/components/Customers.js | 10 ++++++++-- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index 6adb48385..f3d901fbc 100644 --- a/src/App.js +++ b/src/App.js @@ -62,6 +62,12 @@ class App extends Component { }); } } + + selectCustomer = (customer) => { + this.setState({ + customerId: customer.id, + }) + } @@ -105,6 +111,7 @@ class App extends Component { } diff --git a/src/components/Customers.js b/src/components/Customers.js index 994746ca7..a1b4b1899 100644 --- a/src/components/Customers.js +++ b/src/components/Customers.js @@ -30,6 +30,12 @@ class Customers extends Component { displayCustomerList: true }) } + + onClickSelectCustomer = (event) => { + // this.props.selectCustomerCallback(customer); + + console.log('Customer ID is:', event.currentTarget) + } render() { @@ -39,8 +45,8 @@ class Customers extends Component { const mappedCustomers = customers.map((customer, i) => { return ( -
      -
      {customer.name}
      +
      +
      {customer.id}{customer.name}
      ) }); From ed5caa07c4b806f8cd088585bb724e4af5cde4a9 Mon Sep 17 00:00:00 2001 From: Heather Izumi Date: Wed, 26 Jun 2019 09:12:28 -0700 Subject: [PATCH 15/37] can select a customer --- src/App.js | 13 +++++++++---- src/components/Customers.js | 8 +------- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/App.js b/src/App.js index f3d901fbc..bc3dbf1ec 100644 --- a/src/App.js +++ b/src/App.js @@ -63,16 +63,21 @@ class App extends Component { } } - selectCustomer = (customer) => { - this.setState({ - customerId: customer.id, + selectCustomer = (id) => { + // console.log(id); + return () => { + this.setState({ + customerId: id, }) } +} render() { - console.log(this.state.movieId); + console.log('Movie id: ', this.state.movieId); + + console.log('Customer id: ', this.state.customerId); const {allCustomers, allMovies} = this.state; diff --git a/src/components/Customers.js b/src/components/Customers.js index a1b4b1899..d721b62aa 100644 --- a/src/components/Customers.js +++ b/src/components/Customers.js @@ -31,12 +31,6 @@ class Customers extends Component { }) } - onClickSelectCustomer = (event) => { - // this.props.selectCustomerCallback(customer); - - console.log('Customer ID is:', event.currentTarget) - } - render() { @@ -46,7 +40,7 @@ class Customers extends Component { const mappedCustomers = customers.map((customer, i) => { return (
      -
      {customer.id}{customer.name}
      +
      {customer.name}
      ) }); From 54aadbd540c40bc0ae2ab4a8ddca337726a53563 Mon Sep 17 00:00:00 2001 From: Heather Izumi Date: Wed, 26 Jun 2019 09:18:26 -0700 Subject: [PATCH 16/37] changed movie buttons to divs in Library --- src/components/Library.js | 44 ++++++++++++++++++++++----------------- 1 file changed, 25 insertions(+), 19 deletions(-) diff --git a/src/components/Library.js b/src/components/Library.js index 16302c0e8..0d1e03881 100644 --- a/src/components/Library.js +++ b/src/components/Library.js @@ -3,29 +3,35 @@ import './Library.css'; const Library = (props) => { - - const mappedMovies = props.allMovies.map((movie, i) => { - return( - + + const mappedMovies = props.allMovies.map((movie, i) => { + return ( + +
      +
      + {movie.title} +
      +
      + ); - }); + }); - return( -
      -
      - -
      - - {props.displayStatus &&
      - {mappedMovies} -
      } - -
      - - ); + + + {props.displayStatus &&
      + {mappedMovies} +
      } + +
      + + ); } export default Library; \ No newline at end of file From d551392a9fcf81058346fe8107758ca25e14c6ac Mon Sep 17 00:00:00 2001 From: Faiza Husain Date: Wed, 26 Jun 2019 09:28:17 -0700 Subject: [PATCH 17/37] Changed button select movie to a div --- src/App.js | 2 +- src/components/Library.js | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index f84ca2c3b..225b6d195 100644 --- a/src/App.js +++ b/src/App.js @@ -45,7 +45,7 @@ class App extends Component { render() { - console.log(this.state.movieId); + console.log('Movie id: ', this.state.movieId); const {allCustomers, allMovies} = this.state; diff --git a/src/components/Library.js b/src/components/Library.js index 1b7a3dda7..bc86b2a07 100644 --- a/src/components/Library.js +++ b/src/components/Library.js @@ -39,7 +39,12 @@ class Library extends Component { const mappedMovies = movies.map((movie, i) => { return( - +
      +
      + {movie.title} +
      +
      ); }); return( From 5ba36ccece73b1fc98c582d1bd04822ea8d02a92 Mon Sep 17 00:00:00 2001 From: Heather Izumi Date: Wed, 26 Jun 2019 09:41:44 -0700 Subject: [PATCH 18/37] merge conflicts --- src/components/Library.js | 34 ---------------------------------- 1 file changed, 34 deletions(-) diff --git a/src/components/Library.js b/src/components/Library.js index 022ca2161..bc86b2a07 100644 --- a/src/components/Library.js +++ b/src/components/Library.js @@ -6,7 +6,6 @@ class Library extends Component { constructor(props){ super(props); -<<<<<<< HEAD this.state = { displayMovieList: false } @@ -17,21 +16,6 @@ class Library extends Component { .then((response) => { console.log('movie response.data', response.data); -======= -const Library = (props) => { - - const mappedMovies = props.allMovies.map((movie, i) => { - return ( - -
      -
      - {movie.title} -
      -
      - - ); - }); ->>>>>>> hki-customers this.props.setAllMoviesCallback(response.data); }) @@ -42,7 +26,6 @@ const Library = (props) => { }) } -<<<<<<< HEAD toggleDisplayMovieList = (props) => { console.log("I'm in toggleAllMovies Function!"); this.setState({ @@ -78,23 +61,6 @@ const Library = (props) => {
    ); } -======= - return ( -
    -
    - -
    - - {props.displayStatus &&
    - {mappedMovies} -
    } - -
    - - ); ->>>>>>> hki-customers } export default Library; \ No newline at end of file From 05dc2f840ce3f966d1ab168d62e7c4dcc51f3e13 Mon Sep 17 00:00:00 2001 From: Heather Izumi Date: Wed, 26 Jun 2019 10:53:23 -0700 Subject: [PATCH 19/37] changed Library and Customers to pass back objects to App state rather than IDs --- src/App.js | 24 +++++++++++++++--------- src/components/Customers.js | 2 +- src/components/Library.js | 2 +- src/components/Rental.js | 24 ++++++++++++++++++++++++ 4 files changed, 41 insertions(+), 11 deletions(-) diff --git a/src/App.js b/src/App.js index c82d2b556..1fb33733b 100644 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,7 @@ import axios from 'axios'; import Library from './components/Library'; import Customers from './components/Customers'; import Search from './components/Search'; +import Rental from './components/Rental'; import './App.css'; @@ -16,9 +17,10 @@ class App extends Component { allCustomers: [], allMovies: [], tmdbId: null, - customerId: null, - movieId: null, + selectedCustomer: null, + selectedMovie: null, errorMessage: null, + rentalInProgress: false } } @@ -28,19 +30,19 @@ class App extends Component { }); } - selectMovie = (id) => { + selectMovie = (movie) => { return () => { this.setState({ - movieId: id, + selectedMovie: movie, }); } } - selectCustomer = (id) => { + selectCustomer = (customer) => { // console.log(id); return () => { this.setState({ - customerId: id, + selectedCustomer: customer, }) } } @@ -54,11 +56,11 @@ class App extends Component { render() { - console.log('Movie id: ', this.state.movieId); + console.log('Movie object: ', this.state.selectedMovie); - console.log('Customer id: ', this.state.customerId); + console.log('Customer object: ', this.state.selectedCustomer); - const {allCustomers, allMovies} = this.state; + const {allCustomers, allMovies, selectedCustomer, selectedMovie} = this.state; return( @@ -83,6 +85,10 @@ class App extends Component {
    +
    + diff --git a/src/components/Customers.js b/src/components/Customers.js index d721b62aa..5e087b3f2 100644 --- a/src/components/Customers.js +++ b/src/components/Customers.js @@ -40,7 +40,7 @@ class Customers extends Component { const mappedCustomers = customers.map((customer, i) => { return (
    -
    {customer.name}
    +
    {customer.name}
    ) }); diff --git a/src/components/Library.js b/src/components/Library.js index bc86b2a07..1b5cdd4f9 100644 --- a/src/components/Library.js +++ b/src/components/Library.js @@ -41,7 +41,7 @@ class Library extends Component { return(
    + onClick={onSelectMovie(movie)}> {movie.title}
    diff --git a/src/components/Rental.js b/src/components/Rental.js index e69de29bb..76013d976 100644 --- a/src/components/Rental.js +++ b/src/components/Rental.js @@ -0,0 +1,24 @@ +import React, { Component } from 'react'; +import './Rental.css'; +import axios from 'axios'; + + +class Rental extends Component { + constructor(props) { + super(props); + } + + + + componentDidMount(props) { + console.log('I mounted! Here are my props: ', props); + }; + + render() { + return ( +
    I'm in rental!!!!!!
    + ) + } +} + +export default Rental; \ No newline at end of file From 29414ec571c47a2dcbd50db908ca91cddc0c7c93 Mon Sep 17 00:00:00 2001 From: Heather Izumi Date: Wed, 26 Jun 2019 13:35:51 -0700 Subject: [PATCH 20/37] selected customer and movie persist and are viewable throughout the app --- src/components/Rental.js | 30 +++++++++++++++++++++++++----- 1 file changed, 25 insertions(+), 5 deletions(-) diff --git a/src/components/Rental.js b/src/components/Rental.js index 76013d976..0f01e2c80 100644 --- a/src/components/Rental.js +++ b/src/components/Rental.js @@ -7,16 +7,36 @@ class Rental extends Component { constructor(props) { super(props); } - + // componentDidMount(props) { + // console.log('I mounted! Here are my props: ', props); + // }; - componentDidMount(props) { - console.log('I mounted! Here are my props: ', props); - }; + + + addDays = (date, days) => { + let result = new Date(date); + result.setDate(result.getDate() + days); + return result; + } + // from https://stackoverflow.com/questions/563406/add-days-to-javascript-date + + + // rentMovie = (movie, customer) => { + + + // } render() { + const { rentalCustomer, rentalMovie } = this.props; + + console.log(this.addDays(Date.now(), 7)); + return ( -
    I'm in rental!!!!!!
    +
    + {rentalMovie &&
    {rentalMovie.title}
    } + {rentalCustomer &&
    {rentalCustomer.name}
    } +
    ) } } From 3e006bf398929e16c73564513878a6e6a5d9c780 Mon Sep 17 00:00:00 2001 From: Heather Izumi Date: Wed, 26 Jun 2019 13:54:52 -0700 Subject: [PATCH 21/37] post request in progress to rentals --- src/components/Rental.js | 30 ++++++++++++++++++++---------- 1 file changed, 20 insertions(+), 10 deletions(-) diff --git a/src/components/Rental.js b/src/components/Rental.js index 0f01e2c80..7213d5219 100644 --- a/src/components/Rental.js +++ b/src/components/Rental.js @@ -8,22 +8,26 @@ class Rental extends Component { super(props); } - // componentDidMount(props) { - // console.log('I mounted! Here are my props: ', props); - // }; - - - - addDays = (date, days) => { + + + + addDays = (date, days) => { let result = new Date(date); result.setDate(result.getDate() + days); return result; - } + } // from https://stackoverflow.com/questions/563406/add-days-to-javascript-date - - + + // rentMovie = (movie, customer) => { + // axios.post(`http://localhost:3000/rentals/${movie}/check-out`, movie, customer, this.addDays(Date.now(), 7)) + // .then((response) => { + // console.log(response.data); + + + // }) + // } @@ -34,8 +38,14 @@ class Rental extends Component { return (
    +
    Create a Rental
    + {rentalMovie &&
    {rentalMovie.title}
    } {rentalCustomer &&
    {rentalCustomer.name}
    } + +
    + +
    ) } From 137b56d59f654acdfc18db5590a8a51c8bcae5b6 Mon Sep 17 00:00:00 2001 From: Faiza Husain Date: Wed, 26 Jun 2019 13:55:49 -0700 Subject: [PATCH 22/37] Search movies GET request + select movie --- src/App.js | 7 ++- src/components/Library.css | 12 ---- src/components/Library.js | 1 - src/components/Search.js | 112 +++++++++++++++++++++++++++++++++++++ 4 files changed, 116 insertions(+), 16 deletions(-) diff --git a/src/App.js b/src/App.js index 225b6d195..18a7229f1 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,5 @@ import React, { Component } from 'react'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; -import axios from 'axios'; import Library from './components/Library'; import Customers from './components/Customers'; import Search from './components/Search'; @@ -18,6 +17,7 @@ class App extends Component { tmdbId: null, customerId: null, movieId: null, + selectedMovie: null,, errorMessage: null, } } @@ -42,7 +42,6 @@ class App extends Component { }) console.log('hi', this.state.allCustomers); } - render() { console.log('Movie id: ', this.state.movieId); @@ -95,7 +94,9 @@ class App extends Component { } /> diff --git a/src/components/Library.css b/src/components/Library.css index a126baf73..e69de29bb 100644 --- a/src/components/Library.css +++ b/src/components/Library.css @@ -1,12 +0,0 @@ -.movie-button { - border: none; -} - -.movies { - display: flex; - flex-direction: column; -} - -.movie-list { - align-content: center; -} \ No newline at end of file diff --git a/src/components/Library.js b/src/components/Library.js index bc86b2a07..5e61a730a 100644 --- a/src/components/Library.js +++ b/src/components/Library.js @@ -27,7 +27,6 @@ class Library extends Component { } toggleDisplayMovieList = (props) => { - console.log("I'm in toggleAllMovies Function!"); this.setState({ displayMovieList: !this.state.displayMovieList, }); diff --git a/src/components/Search.js b/src/components/Search.js index e69de29bb..25e453ec8 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -0,0 +1,112 @@ +import React, { Component } from 'react'; +import axios from 'axios'; + +const SEARCH_MOVIES = "http://localhost:3000/movies?query=" +const ADD_MOVIE = "http://localhost:3000/movies" + +class Search extends Component { + constructor(props){ + super(props); + + this.state = { + title: '', + searchResults: [], + error: null, + } + } + + onChangeHandler = (event) => { + this.setState({ + title: event.target.value, + }); + console.log(this.state.title); + } + + handleSubmit = (event) => { + event.preventDefault(); + + // call API request function here to pass in title + this.findMovies(this.state.title); + + // reset form + this.setState({ + title: '', + searchResults: [], + }); + } + + // NEEDS TO GET A GET REQUEST TO API + findMovies = (title) => { + console.log('Searching for: ', this.state.title) + + // NEED TO GET SEARCH TERM IN HERE FOR THE GET REQUEST + axios.get(SEARCH_MOVIES + this.state.title) + .then((response) => { + console.log('TMDB movie response data', response.data); + + // Loop through the response data and push it into the searchResults array + let searchedMovies = this.state.searchResults; + response.data.map((movie, i) => { + searchedMovies.push(movie); + }); + + this.setState({ + searchResults: searchedMovies, + }); + + console.log('searchReults: ', this.state.searchResults); + + }) // .then + .catch((error) => { + this.setState({ + errorMessage: error.message, + }) + }) + } + + // NEEDS TO MAKE A POST REQUEST FOR SELECTED MOVIE FROM SEARCH RESULTS TO BE ADDED TO LIBRARY! + addMovie = (movieId) => { + + } + + render(){ + const allResults = this.state.searchResults.map((movie, i) => { + return ( +
    +
    + {movie.title} +
    +
    + ); + }); + return( +
    +
    +

    Search for Movie

    +
    +
    + +
    + +
    + +
    +
    + +
    {allResults}
    +
    + ); + + + + } +} + +export default Search; \ No newline at end of file From a5fbb9c14e9feebbe02846a6c0847c48abee504d Mon Sep 17 00:00:00 2001 From: Heather Izumi Date: Wed, 26 Jun 2019 14:46:35 -0700 Subject: [PATCH 23/37] can checkout out a selected movie to a selected customer --- src/components/Rental.js | 25 ++++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/src/components/Rental.js b/src/components/Rental.js index 7213d5219..d9433a011 100644 --- a/src/components/Rental.js +++ b/src/components/Rental.js @@ -19,17 +19,28 @@ class Rental extends Component { // from https://stackoverflow.com/questions/563406/add-days-to-javascript-date - // rentMovie = (movie, customer) => { - // axios.post(`http://localhost:3000/rentals/${movie}/check-out`, movie, customer, this.addDays(Date.now(), 7)) - // .then((response) => { + checkoutMovie = () => { - // console.log(response.data); + const checkoutParams = { + customer_id: this.props.rentalCustomer.id, + due_date: this.addDays(Date.now(), 7) + }; + + console.log('Checkout date:', checkoutParams.due_date); + + + console.log('selected customer in rental:', checkoutParams.customer_id); + + axios.post(`http://localhost:3000/rentals/${this.props.rentalMovie.title}/check-out`, checkoutParams) + .then((response) => { + + console.log(response.data); - // }) + }) - // } + } render() { const { rentalCustomer, rentalMovie } = this.props; @@ -44,7 +55,7 @@ class Rental extends Component { {rentalCustomer &&
    {rentalCustomer.name}
    }
    - +
    ) From bb9c666edcf84775e4ef994a0b06fa07fd886731 Mon Sep 17 00:00:00 2001 From: Faiza Husain Date: Wed, 26 Jun 2019 16:17:37 -0700 Subject: [PATCH 24/37] Can post movies --- src/App.js | 20 +++++++++++++---- src/components/Search.js | 47 +++++++++++++++++++++++++++++++++++++--- 2 files changed, 60 insertions(+), 7 deletions(-) diff --git a/src/App.js b/src/App.js index b7d71b731..1eeedfce1 100644 --- a/src/App.js +++ b/src/App.js @@ -5,6 +5,7 @@ import Customers from './components/Customers'; import Search from './components/Search'; import Rental from './components/Rental'; import './App.css'; + @@ -18,6 +19,7 @@ class App extends Component { tmdbId: null, selectedCustomer: null, selectedMovie: null, + newMovie: null, errorMessage: null, rentalInProgress: false } @@ -37,6 +39,14 @@ class App extends Component { } } + selectNewMovieFromExternalLibrary = (movie) => { + return () => { + this.setState({ + newMovie: movie, + }); + } + } + selectCustomer = (customer) => { // console.log(id); return () => { @@ -54,9 +64,11 @@ class App extends Component { } render() { - console.log('Movie object: ', this.state.selectedMovie); + // console.log('Movie object: ', this.state.selectedMovie); - console.log('Customer object: ', this.state.selectedCustomer); + console.log('NEW Movie object: ', this.state.newMovie); + + // console.log('Customer object: ', this.state.selectedCustomer); const {allCustomers, allMovies, selectedCustomer, selectedMovie} = this.state; @@ -109,8 +121,8 @@ class App extends Component { } diff --git a/src/components/Search.js b/src/components/Search.js index 25e453ec8..8ebbe1006 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import axios from 'axios'; const SEARCH_MOVIES = "http://localhost:3000/movies?query=" -const ADD_MOVIE = "http://localhost:3000/movies" +// const ADD_MOVIE = "http://localhost:3000/movies/" class Search extends Component { constructor(props){ @@ -65,8 +65,30 @@ class Search extends Component { } // NEEDS TO MAKE A POST REQUEST FOR SELECTED MOVIE FROM SEARCH RESULTS TO BE ADDED TO LIBRARY! - addMovie = (movieId) => { - + addMovie = () => { + const newMovieData = { + title: this.props.newMovie.title, + overview: this.props.newMovie.overview, + release_date: this.props.newMovie.release_date, + image_url: this.props.newMovie.image_url, + external_id: this.props.newMovie.external_id, + }; + + console.log('NEW MOVIE DATA: ', newMovieData); + + axios.post("http://localhost:3000/movies/", newMovieData) + .then((response) => { + + console.log("This is what response.data looks like from the API on a successful response", response.data); + + + + }) + .catch((error) => { + this.setState({ + errorMessage: error.message, + }) + }) } render(){ @@ -79,6 +101,7 @@ class Search extends Component { ); }); + return(
    @@ -101,6 +124,24 @@ class Search extends Component {
    {allResults}
    + +
    + + + + {this.props.newMovie &&
    +
    Title: {this.props.newMovie.title}
    , +
    Overview: {this.props.newMovie.overview}
    +
    Release date: {this.props.newMovie.release_date}
    + +
    + +
    +
    } + + + +
    ); From 25bbd158cdb96991b9b3b6d0796bfddac64a36b3 Mon Sep 17 00:00:00 2001 From: Faiza Husain Date: Wed, 26 Jun 2019 16:40:31 -0700 Subject: [PATCH 25/37] Added conditional to prevent adding of duplicate movies --- src/components/Search.js | 32 +++++++++++++++++++++----------- 1 file changed, 21 insertions(+), 11 deletions(-) diff --git a/src/components/Search.js b/src/components/Search.js index 8ebbe1006..fb0d01163 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import axios from 'axios'; +import { thisExpression } from '@babel/types'; const SEARCH_MOVIES = "http://localhost:3000/movies?query=" // const ADD_MOVIE = "http://localhost:3000/movies/" @@ -76,19 +77,28 @@ class Search extends Component { console.log('NEW MOVIE DATA: ', newMovieData); - axios.post("http://localhost:3000/movies/", newMovieData) - .then((response) => { + const {allMovies} = this.props; - console.log("This is what response.data looks like from the API on a successful response", response.data); - - + for(let movie in allMovies){ + + if(movie.title !== this.props.newMovie.title){ + + axios.post("http://localhost:3000/movies/", newMovieData) + .then((response) => { + + console.log("This is what response.data looks like from the API on a successful response", response.data); + + }) + .catch((error) => { + this.setState({ + errorMessage: error.message, + }) + }) + } else { + console.log('Movie already exists'); + } + } - }) - .catch((error) => { - this.setState({ - errorMessage: error.message, - }) - }) } render(){ From dcd05444b09644e6f9cb5bee890b2206ff58fbd2 Mon Sep 17 00:00:00 2001 From: Faiza Husain Date: Wed, 26 Jun 2019 16:56:02 -0700 Subject: [PATCH 26/37] Added a break --- src/App.js | 4 ++-- src/components/Search.js | 7 ++++--- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/App.js b/src/App.js index 1eeedfce1..005c24ac8 100644 --- a/src/App.js +++ b/src/App.js @@ -64,9 +64,9 @@ class App extends Component { } render() { - // console.log('Movie object: ', this.state.selectedMovie); + console.log('Movie object: ', this.state.selectedMovie); - console.log('NEW Movie object: ', this.state.newMovie); + // console.log('NEW Movie object: ', this.state.newMovie); // console.log('Customer object: ', this.state.selectedCustomer); diff --git a/src/components/Search.js b/src/components/Search.js index fb0d01163..ea2995332 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -77,11 +77,11 @@ class Search extends Component { console.log('NEW MOVIE DATA: ', newMovieData); - const {allMovies} = this.props; + const {movies} = this.props; - for(let movie in allMovies){ + for(let movie in movies){ - if(movie.title !== this.props.newMovie.title){ + if(movie.title !== newMovieData.title){ axios.post("http://localhost:3000/movies/", newMovieData) .then((response) => { @@ -94,6 +94,7 @@ class Search extends Component { errorMessage: error.message, }) }) + break; } else { console.log('Movie already exists'); } From bb202e68004d581cdf0a55c4bc53b97b8b74d018 Mon Sep 17 00:00:00 2001 From: Heather Izumi Date: Wed, 26 Jun 2019 22:07:16 -0700 Subject: [PATCH 27/37] Selected Customer and Movie dissapear when creating rental, successful rental message --- src/App.js | 23 ++++++++++++++---- src/components/Customers.js | 14 +++++------ src/components/Rental.js | 48 +++++++++++++++++++++++++++---------- 3 files changed, 61 insertions(+), 24 deletions(-) diff --git a/src/App.js b/src/App.js index 005c24ac8..cf0ad0f9e 100644 --- a/src/App.js +++ b/src/App.js @@ -21,7 +21,7 @@ class App extends Component { selectedMovie: null, newMovie: null, errorMessage: null, - rentalInProgress: false + successMessage: null, } } @@ -35,6 +35,7 @@ class App extends Component { return () => { this.setState({ selectedMovie: movie, + successMessage: null, }); } } @@ -52,6 +53,7 @@ class App extends Component { return () => { this.setState({ selectedCustomer: customer, + successMessage: null, }) } } @@ -63,6 +65,16 @@ class App extends Component { console.log('hi', this.state.allCustomers); } + clearRentalDetails = () => { + // return () => { + this.setState({ + selectedCustomer: null, + selectedMovie: null, + successMessage: 'Successful rental!' + }) + } + // } + render() { console.log('Movie object: ', this.state.selectedMovie); @@ -70,7 +82,7 @@ class App extends Component { // console.log('Customer object: ', this.state.selectedCustomer); - const {allCustomers, allMovies, selectedCustomer, selectedMovie} = this.state; + const {allCustomers, allMovies, selectedCustomer, selectedMovie, successMessage } = this.state; return( @@ -95,9 +107,12 @@ class App extends Component {
    -
    {`${successMessage}`}
    } + + {(selectedCustomer || selectedMovie) &&
    + rentalMovie={selectedMovie} + clearRentalDetailsCallback={this.clearRentalDetails} />} { - this.setState({ - displayCustomerList: true - }) - } + // onClickListCustomers = (props) => { + // this.setState({ + // displayCustomerList: true + // }) + // } render() { @@ -53,7 +53,7 @@ class Customers extends Component { {mappedCustomers} } - + {/* */} diff --git a/src/components/Rental.js b/src/components/Rental.js index d9433a011..ff5ef63b8 100644 --- a/src/components/Rental.js +++ b/src/components/Rental.js @@ -8,17 +8,17 @@ class Rental extends Component { super(props); } - - - + + + addDays = (date, days) => { let result = new Date(date); result.setDate(result.getDate() + days); return result; } // from https://stackoverflow.com/questions/563406/add-days-to-javascript-date - - + + checkoutMovie = () => { const checkoutParams = { @@ -34,12 +34,14 @@ class Rental extends Component { axios.post(`http://localhost:3000/rentals/${this.props.rentalMovie.title}/check-out`, checkoutParams) .then((response) => { - console.log(response.data); - }) - + } + + wrapper = () => { + this.checkoutMovie(); + this.props.clearRentalDetailsCallback(); } render() { @@ -49,13 +51,33 @@ class Rental extends Component { return (
    -
    Create a Rental
    - - {rentalMovie &&
    {rentalMovie.title}
    } - {rentalCustomer &&
    {rentalCustomer.name}
    }
    - +

    Checkout A Movie

    + + + {rentalMovie &&
    +

    Movie

    + {`${rentalMovie.title}`} +
    Title: {rentalMovie.title}
    +
    Summary: {rentalMovie.overview}
    +
    Release Date: {rentalMovie.release_date}
    +
    } + + {rentalCustomer &&
    +

    Customer

    +
    ID #: {rentalCustomer.id}
    +
    Name: {rentalCustomer.name}
    +
    Phone: {rentalCustomer.phone}
    +
    Credit: ${rentalCustomer.account_credit}
    +
    Movies Checkout Out: {rentalCustomer.movies_checked_out_count}
    + +
    } + +
    + +
    +
    ) From dd68f7241a07e9cfdcca0d5f895fcd1783bf9af5 Mon Sep 17 00:00:00 2001 From: Faiza Husain Date: Thu, 27 Jun 2019 10:34:44 -0700 Subject: [PATCH 28/37] Can now show images for added movies --- src/App.js | 11 +++++++++++ src/components/Library.js | 16 ++++++++-------- src/components/Search.js | 13 ++++++++++--- 3 files changed, 29 insertions(+), 11 deletions(-) diff --git a/src/App.js b/src/App.js index cf0ad0f9e..9c306694b 100644 --- a/src/App.js +++ b/src/App.js @@ -22,6 +22,8 @@ class App extends Component { newMovie: null, errorMessage: null, successMessage: null, + newMovieAddedSuccessMessage: null, + newMovieNotAddedErrorMessage: null, } } @@ -48,6 +50,13 @@ class App extends Component { } } + clearNewMovieFromExternalLibraryDetails = (movie) => { + this.setState({ + newMovie: null, + newMovieAddedSuccessMessage: `${this.state.newMovie.title} was successfully added to the library!` + }); + } + selectCustomer = (customer) => { // console.log(id); return () => { @@ -133,12 +142,14 @@ class App extends Component { selectCustomerCallback={this.selectCustomer} isAuthed = {true} />}/> + } /> diff --git a/src/components/Library.js b/src/components/Library.js index f8264fcb7..2a5fe2a24 100644 --- a/src/components/Library.js +++ b/src/components/Library.js @@ -7,7 +7,7 @@ class Library extends Component { super(props); this.state = { - displayMovieList: false + displayMovieList: true } } @@ -26,11 +26,11 @@ class Library extends Component { }) } - toggleDisplayMovieList = (props) => { - this.setState({ - displayMovieList: !this.state.displayMovieList, - }); - } + // toggleDisplayMovieList = (props) => { + // this.setState({ + // displayMovieList: !this.state.displayMovieList, + // }); + // } render() { const {displayMovieList} = this.state; @@ -48,11 +48,11 @@ class Library extends Component { }); return(
    -
    + {/*
    -
    +
    */} {displayMovieList &&
    {mappedMovies} diff --git a/src/components/Search.js b/src/components/Search.js index ea2995332..32db8481c 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -71,7 +71,7 @@ class Search extends Component { title: this.props.newMovie.title, overview: this.props.newMovie.overview, release_date: this.props.newMovie.release_date, - image_url: this.props.newMovie.image_url, + image_url: this.props.newMovie.image_url.slice(31), external_id: this.props.newMovie.external_id, }; @@ -102,6 +102,11 @@ class Search extends Component { } + addMovieAndClearDetails = () => { + this.addMovie(); + this.props.clearNewMovieFromExternalLibraryDetailsCallback(); + } + render(){ const allResults = this.state.searchResults.map((movie, i) => { return ( @@ -141,12 +146,14 @@ class Search extends Component { {this.props.newMovie &&
    -
    Title: {this.props.newMovie.title}
    , + {`${this.props.newMovie.title}`} +
    {this.props.newMovie.image_url}
    +
    Title: {this.props.newMovie.title}
    Overview: {this.props.newMovie.overview}
    Release date: {this.props.newMovie.release_date}
    - +
    } From f3e79416fce5bbb5e151a3f1be99523654269f84 Mon Sep 17 00:00:00 2001 From: Heather Izumi Date: Thu, 27 Jun 2019 13:42:41 -0700 Subject: [PATCH 29/37] Updated Rental --- package-lock.json | 273 +++++++++++++++++++++++++++++++++++++++ package.json | 2 + src/components/Rental.js | 4 +- 3 files changed, 277 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9bc9f54a4..b5c580676 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1162,6 +1162,39 @@ "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz", "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==" }, + "@react-bootstrap/react-popper": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@react-bootstrap/react-popper/-/react-popper-1.2.1.tgz", + "integrity": "sha512-4l3q7LcZEhrSkI4d3Ie3g4CdrXqqTexXX4PFT45CB0z5z2JUbaxgRwKNq7r5j2bLdVpZm+uvUGqxJw8d9vgbJQ==", + "requires": { + "babel-runtime": "6.x.x", + "create-react-context": "^0.2.1", + "popper.js": "^1.14.4", + "prop-types": "^15.6.1", + "typed-styles": "^0.0.5", + "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.0.0" + } + } + } + }, + "@restart/context": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz", + "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==" + }, + "@restart/hooks": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.2.tgz", + "integrity": "sha512-gZF+r35a5R3sHhtoQi6YhtG2fRzwVuassZ+GvrlieHG531ocF2oJvwe0/gYtAd8bDr30MlET3ctFyJ/r6gJZfw==" + }, "@svgr/babel-plugin-add-jsx-attribute": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz", @@ -2428,6 +2461,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", @@ -3359,6 +3397,11 @@ } } }, + "classnames": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", + "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + }, "clean-css": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz", @@ -3709,6 +3752,15 @@ "sha.js": "^2.4.8" } }, + "create-react-context": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.3.tgz", + "integrity": "sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==", + "requires": { + "fbjs": "^0.8.0", + "gud": "^1.0.0" + } + }, "cross-spawn": { "version": "6.0.5", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", @@ -4266,6 +4318,14 @@ "utila": "~0.4" } }, + "dom-helpers": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz", + "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==", + "requires": { + "@babel/runtime": "^7.1.2" + } + }, "dom-serializer": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz", @@ -4392,6 +4452,14 @@ "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" }, + "encoding": { + "version": "0.1.12", + "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz", + "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=", + "requires": { + "iconv-lite": "~0.4.13" + } + }, "end-of-stream": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz", @@ -5232,6 +5300,35 @@ "bser": "^2.0.0" } }, + "fbjs": { + "version": "0.8.17", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz", + "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=", + "requires": { + "core-js": "^1.0.0", + "isomorphic-fetch": "^2.1.1", + "loose-envify": "^1.0.0", + "object-assign": "^4.1.0", + "promise": "^7.1.1", + "setimmediate": "^1.0.5", + "ua-parser-js": "^0.7.18" + }, + "dependencies": { + "core-js": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", + "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=" + }, + "promise": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", + "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "requires": { + "asap": "~2.0.3" + } + } + } + }, "figgy-pudding": { "version": "3.5.1", "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz", @@ -6436,6 +6533,15 @@ "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=" }, + "isomorphic-fetch": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz", + "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=", + "requires": { + "node-fetch": "^1.0.1", + "whatwg-fetch": ">=0.10.0" + } + }, "isstream": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", @@ -7759,6 +7865,11 @@ "array-includes": "^3.0.3" } }, + "keycode": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz", + "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ=" + }, "killable": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz", @@ -8398,6 +8509,15 @@ "lower-case": "^1.1.1" } }, + "node-fetch": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", + "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==", + "requires": { + "encoding": "^0.1.11", + "is-stream": "^1.0.1" + } + }, "node-forge": { "version": "0.7.5", "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz", @@ -9051,6 +9171,11 @@ "ts-pnp": "^1.0.0" } }, + "popper.js": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz", + "integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==" + }, "portfinder": { "version": "1.0.20", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz", @@ -9992,6 +10117,25 @@ "react-is": "^16.8.1" } }, + "prop-types-extra": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.0.tgz", + "integrity": "sha512-QFyuDxvMipmIVKD2TwxLVPzMnO4e5oOf1vr3tJIomL8E7d0lr6phTHd5nkPhFIzTD1idBLLEPeylL9g+rrTzRg==", + "requires": { + "react-is": "^16.3.2", + "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.0.0" + } + } + } + }, "property-information": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.1.0.tgz", @@ -10164,6 +10308,33 @@ "whatwg-fetch": "3.0.0" } }, + "react-bootstrap": { + "version": "1.0.0-beta.9", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.0.0-beta.9.tgz", + "integrity": "sha512-M0BYLuuUdMITJ16+DDDb1p4vWV87csEBi/uOxZYODuDZh7hvbrJVahfvPXcqeqq4eEpNL+PKSlqb9fNaY0HZyA==", + "requires": { + "@babel/runtime": "^7.4.2", + "@react-bootstrap/react-popper": "1.2.1", + "@restart/context": "^2.1.4", + "@restart/hooks": "^0.3.0", + "classnames": "^2.2.6", + "dom-helpers": "^3.4.0", + "invariant": "^2.2.4", + "keycode": "^2.2.0", + "popper.js": "^1.14.7", + "prop-types": "^15.7.2", + "prop-types-extra": "^1.1.0", + "react-overlays": "^1.2.0", + "react-transition-group": "^4.0.0", + "uncontrollable": "^6.1.0", + "warning": "^4.0.3" + } + }, + "react-context-toolbox": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/react-context-toolbox/-/react-context-toolbox-2.0.2.tgz", + "integrity": "sha512-tY4j0imkYC3n5ZlYSgFkaw7fmlCp3IoQQ6DxpqeNHzcD0hf+6V+/HeJxviLUZ1Rv1Yn3N3xyO2EhkkZwHn0m1A==" + }, "react-dev-utils": { "version": "9.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-9.0.1.tgz", @@ -10262,6 +10433,50 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz", "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==" }, + "react-overlays": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-1.2.0.tgz", + "integrity": "sha512-i/FCV8wR6aRaI+Kz/dpJhOdyx+ah2tN1RhT9InPrexyC4uzf3N4bNayFTGtUeQVacj57j1Mqh1CwV60/5153Iw==", + "requires": { + "classnames": "^2.2.6", + "dom-helpers": "^3.4.0", + "prop-types": "^15.6.2", + "prop-types-extra": "^1.1.0", + "react-context-toolbox": "^2.0.2", + "react-popper": "^1.3.2", + "uncontrollable": "^6.0.0", + "warning": "^4.0.2" + } + }, + "react-popper": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.3.tgz", + "integrity": "sha512-ynMZBPkXONPc5K4P5yFWgZx5JGAUIP3pGGLNs58cfAPgK67olx7fmLp+AdpZ0+GoQ+ieFDa/z4cdV6u7sioH6w==", + "requires": { + "@babel/runtime": "^7.1.2", + "create-react-context": "<=0.2.2", + "popper.js": "^1.14.4", + "prop-types": "^15.6.1", + "typed-styles": "^0.0.7", + "warning": "^4.0.2" + }, + "dependencies": { + "create-react-context": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.2.tgz", + "integrity": "sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==", + "requires": { + "fbjs": "^0.8.0", + "gud": "^1.0.0" + } + }, + "typed-styles": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz", + "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==" + } + } + }, "react-router": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.0.1.tgz", @@ -10368,6 +10583,27 @@ "workbox-webpack-plugin": "4.2.0" } }, + "react-transition-group": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.1.1.tgz", + "integrity": "sha512-K/N1wqJ2GRP2yj3WBqEUYa0KV5fiaAWpUfU9SpHOHefeKvyrO+VrnMBML21M19QZoVbDZKmuQFHZYoMMi1xuJA==", + "requires": { + "@babel/runtime": "^7.4.5", + "dom-helpers": "^3.4.0", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.4.5", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.5.tgz", + "integrity": "sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + } + } + }, "read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", @@ -11950,11 +12186,21 @@ "mime-types": "~2.1.24" } }, + "typed-styles": { + "version": "0.0.5", + "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.5.tgz", + "integrity": "sha512-ht+rEe5UsdEBAa3gr64+QjUOqjOLJfWLvl5HZR5Ev9uo/OnD3p43wPeFSB1hNFc13GXQF/JU1Bn0YHLUqBRIlw==" + }, "typedarray": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" }, + "ua-parser-js": { + "version": "0.7.20", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.20.tgz", + "integrity": "sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw==" + }, "uglify-js": { "version": "3.4.10", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz", @@ -11976,6 +12222,25 @@ } } }, + "uncontrollable": { + "version": "6.2.3", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-6.2.3.tgz", + "integrity": "sha512-VgOAoBU2ptCL2bfTG2Mra0I8i1u6Aq84AFonD5tmCAYSfs3hWvr2Rlw0q2ntoxXTHjcQOmZOh3FKaN+UZVyREQ==", + "requires": { + "@babel/runtime": "^7.4.5", + "invariant": "^2.2.4" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.4.5", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.5.tgz", + "integrity": "sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + } + } + }, "unicode-canonical-property-names-ecmascript": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz", @@ -12346,6 +12611,14 @@ "makeerror": "1.0.x" } }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watchpack": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz", diff --git a/package.json b/package.json index eeff31f0a..e092f2f8c 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,9 @@ "private": true, "dependencies": { "axios": "^0.19.0", + "bootstrap": "^4.3.1", "react": "^16.8.6", + "react-bootstrap": "^1.0.0-beta.9", "react-dom": "^16.8.6", "react-router-dom": "^5.0.1", "react-scripts": "3.0.1" diff --git a/src/components/Rental.js b/src/components/Rental.js index ff5ef63b8..c85d99477 100644 --- a/src/components/Rental.js +++ b/src/components/Rental.js @@ -38,7 +38,7 @@ class Rental extends Component { }) } - wrapper = () => { + wrapperCheckoutProcess = () => { this.checkoutMovie(); this.props.clearRentalDetailsCallback(); @@ -77,7 +77,7 @@ class Rental extends Component {
    - +
    ) From 0f371f4d36a002b723cef9c8a03f1e0408fbd7d5 Mon Sep 17 00:00:00 2001 From: Heather Izumi Date: Thu, 27 Jun 2019 16:28:18 -0700 Subject: [PATCH 30/37] Displaying movie library as cards, added css --- src/components/Library.css | 43 +++++++++++++++++++++++++++++++++++++ src/components/Library.js | 44 ++++++++++++++------------------------ 2 files changed, 59 insertions(+), 28 deletions(-) diff --git a/src/components/Library.css b/src/components/Library.css index e69de29bb..c6e534001 100644 --- a/src/components/Library.css +++ b/src/components/Library.css @@ -0,0 +1,43 @@ +@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap'); +@import url('https://fonts.googleapis.com/css?family=Monoton&display=swap'); + +.library-title { + text-align: center; + font-size: 30pt; + font-family: 'Monoton', cursive; +} + +.library-display-movies { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; +} + +.library-card { + border: solid lightslategray 1pt; + display: flex; + flex-direction: column; + margin-left: 35px; + margin-bottom: 35px; + width: 225px; + border-radius: 2px; + align-content: center; +background-color: #f4f2d6; +} + +.library-movie-title { + font-size: 14pt; + font-weight: bold; + text-align: center; +} + +.library-select-movie { + width: 125px; + background-color: #39ff14; + align-self: center; + margin-bottom: 10px; + font-family: 'Press Start 2P', cursive; + font-size: 8pt; +} + diff --git a/src/components/Library.js b/src/components/Library.js index 2a5fe2a24..06d8e55a4 100644 --- a/src/components/Library.js +++ b/src/components/Library.js @@ -3,14 +3,11 @@ import './Library.css'; import axios from 'axios'; class Library extends Component { - constructor(props){ + constructor(props) { super(props); - this.state = { - displayMovieList: true - } } - + componentDidMount() { axios.get('http://localhost:3000/movies') .then((response) => { @@ -26,37 +23,28 @@ class Library extends Component { }) } - // toggleDisplayMovieList = (props) => { - // this.setState({ - // displayMovieList: !this.state.displayMovieList, - // }); - // } - + render() { - const {displayMovieList} = this.state; - const {movies, onSelectMovie} = this.props; + const { movies, onSelectMovie } = this.props; const mappedMovies = movies.map((movie, i) => { - return( -
    -
    - {movie.title} -
    + return ( +
    + {movie.title} +

    {movie.title}

    + +
    + ); }); - return( + return (
    - {/*
    - -
    */} - - {displayMovieList &&
    +

    Browse the Rental Library

    + +
    {mappedMovies} -
    } +
    ); } From 1d3cdea083ad2e7329ddf55c64d6889cdbc6c47e Mon Sep 17 00:00:00 2001 From: Faiza Husain Date: Thu, 27 Jun 2019 16:32:21 -0700 Subject: [PATCH 31/37] Added lots of styling --- package-lock.json | 273 +++++++++++++++++++++++++++++++++++ package.json | 2 + public/index.html | 2 + src/App.css | 20 ++- src/App.js | 18 ++- src/components/Customers.css | 35 +++++ src/components/Customers.js | 17 ++- src/components/Home.css | 5 + src/components/Rental.js | 4 +- src/components/Search.css | 30 ++++ src/components/Search.js | 31 ++-- 11 files changed, 409 insertions(+), 28 deletions(-) create mode 100644 src/components/Home.css diff --git a/package-lock.json b/package-lock.json index 9bc9f54a4..b5c580676 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1162,6 +1162,39 @@ "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz", "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==" }, + "@react-bootstrap/react-popper": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@react-bootstrap/react-popper/-/react-popper-1.2.1.tgz", + "integrity": "sha512-4l3q7LcZEhrSkI4d3Ie3g4CdrXqqTexXX4PFT45CB0z5z2JUbaxgRwKNq7r5j2bLdVpZm+uvUGqxJw8d9vgbJQ==", + "requires": { + "babel-runtime": "6.x.x", + "create-react-context": "^0.2.1", + "popper.js": "^1.14.4", + "prop-types": "^15.6.1", + "typed-styles": "^0.0.5", + "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.0.0" + } + } + } + }, + "@restart/context": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz", + "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==" + }, + "@restart/hooks": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.2.tgz", + "integrity": "sha512-gZF+r35a5R3sHhtoQi6YhtG2fRzwVuassZ+GvrlieHG531ocF2oJvwe0/gYtAd8bDr30MlET3ctFyJ/r6gJZfw==" + }, "@svgr/babel-plugin-add-jsx-attribute": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz", @@ -2428,6 +2461,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", @@ -3359,6 +3397,11 @@ } } }, + "classnames": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", + "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + }, "clean-css": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz", @@ -3709,6 +3752,15 @@ "sha.js": "^2.4.8" } }, + "create-react-context": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.3.tgz", + "integrity": "sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==", + "requires": { + "fbjs": "^0.8.0", + "gud": "^1.0.0" + } + }, "cross-spawn": { "version": "6.0.5", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", @@ -4266,6 +4318,14 @@ "utila": "~0.4" } }, + "dom-helpers": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz", + "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==", + "requires": { + "@babel/runtime": "^7.1.2" + } + }, "dom-serializer": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz", @@ -4392,6 +4452,14 @@ "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" }, + "encoding": { + "version": "0.1.12", + "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz", + "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=", + "requires": { + "iconv-lite": "~0.4.13" + } + }, "end-of-stream": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz", @@ -5232,6 +5300,35 @@ "bser": "^2.0.0" } }, + "fbjs": { + "version": "0.8.17", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz", + "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=", + "requires": { + "core-js": "^1.0.0", + "isomorphic-fetch": "^2.1.1", + "loose-envify": "^1.0.0", + "object-assign": "^4.1.0", + "promise": "^7.1.1", + "setimmediate": "^1.0.5", + "ua-parser-js": "^0.7.18" + }, + "dependencies": { + "core-js": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", + "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=" + }, + "promise": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", + "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "requires": { + "asap": "~2.0.3" + } + } + } + }, "figgy-pudding": { "version": "3.5.1", "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz", @@ -6436,6 +6533,15 @@ "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=" }, + "isomorphic-fetch": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz", + "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=", + "requires": { + "node-fetch": "^1.0.1", + "whatwg-fetch": ">=0.10.0" + } + }, "isstream": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", @@ -7759,6 +7865,11 @@ "array-includes": "^3.0.3" } }, + "keycode": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz", + "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ=" + }, "killable": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz", @@ -8398,6 +8509,15 @@ "lower-case": "^1.1.1" } }, + "node-fetch": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", + "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==", + "requires": { + "encoding": "^0.1.11", + "is-stream": "^1.0.1" + } + }, "node-forge": { "version": "0.7.5", "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz", @@ -9051,6 +9171,11 @@ "ts-pnp": "^1.0.0" } }, + "popper.js": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz", + "integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==" + }, "portfinder": { "version": "1.0.20", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz", @@ -9992,6 +10117,25 @@ "react-is": "^16.8.1" } }, + "prop-types-extra": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.0.tgz", + "integrity": "sha512-QFyuDxvMipmIVKD2TwxLVPzMnO4e5oOf1vr3tJIomL8E7d0lr6phTHd5nkPhFIzTD1idBLLEPeylL9g+rrTzRg==", + "requires": { + "react-is": "^16.3.2", + "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.0.0" + } + } + } + }, "property-information": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.1.0.tgz", @@ -10164,6 +10308,33 @@ "whatwg-fetch": "3.0.0" } }, + "react-bootstrap": { + "version": "1.0.0-beta.9", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.0.0-beta.9.tgz", + "integrity": "sha512-M0BYLuuUdMITJ16+DDDb1p4vWV87csEBi/uOxZYODuDZh7hvbrJVahfvPXcqeqq4eEpNL+PKSlqb9fNaY0HZyA==", + "requires": { + "@babel/runtime": "^7.4.2", + "@react-bootstrap/react-popper": "1.2.1", + "@restart/context": "^2.1.4", + "@restart/hooks": "^0.3.0", + "classnames": "^2.2.6", + "dom-helpers": "^3.4.0", + "invariant": "^2.2.4", + "keycode": "^2.2.0", + "popper.js": "^1.14.7", + "prop-types": "^15.7.2", + "prop-types-extra": "^1.1.0", + "react-overlays": "^1.2.0", + "react-transition-group": "^4.0.0", + "uncontrollable": "^6.1.0", + "warning": "^4.0.3" + } + }, + "react-context-toolbox": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/react-context-toolbox/-/react-context-toolbox-2.0.2.tgz", + "integrity": "sha512-tY4j0imkYC3n5ZlYSgFkaw7fmlCp3IoQQ6DxpqeNHzcD0hf+6V+/HeJxviLUZ1Rv1Yn3N3xyO2EhkkZwHn0m1A==" + }, "react-dev-utils": { "version": "9.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-9.0.1.tgz", @@ -10262,6 +10433,50 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz", "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==" }, + "react-overlays": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-1.2.0.tgz", + "integrity": "sha512-i/FCV8wR6aRaI+Kz/dpJhOdyx+ah2tN1RhT9InPrexyC4uzf3N4bNayFTGtUeQVacj57j1Mqh1CwV60/5153Iw==", + "requires": { + "classnames": "^2.2.6", + "dom-helpers": "^3.4.0", + "prop-types": "^15.6.2", + "prop-types-extra": "^1.1.0", + "react-context-toolbox": "^2.0.2", + "react-popper": "^1.3.2", + "uncontrollable": "^6.0.0", + "warning": "^4.0.2" + } + }, + "react-popper": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.3.tgz", + "integrity": "sha512-ynMZBPkXONPc5K4P5yFWgZx5JGAUIP3pGGLNs58cfAPgK67olx7fmLp+AdpZ0+GoQ+ieFDa/z4cdV6u7sioH6w==", + "requires": { + "@babel/runtime": "^7.1.2", + "create-react-context": "<=0.2.2", + "popper.js": "^1.14.4", + "prop-types": "^15.6.1", + "typed-styles": "^0.0.7", + "warning": "^4.0.2" + }, + "dependencies": { + "create-react-context": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.2.tgz", + "integrity": "sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==", + "requires": { + "fbjs": "^0.8.0", + "gud": "^1.0.0" + } + }, + "typed-styles": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz", + "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==" + } + } + }, "react-router": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.0.1.tgz", @@ -10368,6 +10583,27 @@ "workbox-webpack-plugin": "4.2.0" } }, + "react-transition-group": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.1.1.tgz", + "integrity": "sha512-K/N1wqJ2GRP2yj3WBqEUYa0KV5fiaAWpUfU9SpHOHefeKvyrO+VrnMBML21M19QZoVbDZKmuQFHZYoMMi1xuJA==", + "requires": { + "@babel/runtime": "^7.4.5", + "dom-helpers": "^3.4.0", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.4.5", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.5.tgz", + "integrity": "sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + } + } + }, "read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", @@ -11950,11 +12186,21 @@ "mime-types": "~2.1.24" } }, + "typed-styles": { + "version": "0.0.5", + "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.5.tgz", + "integrity": "sha512-ht+rEe5UsdEBAa3gr64+QjUOqjOLJfWLvl5HZR5Ev9uo/OnD3p43wPeFSB1hNFc13GXQF/JU1Bn0YHLUqBRIlw==" + }, "typedarray": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" }, + "ua-parser-js": { + "version": "0.7.20", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.20.tgz", + "integrity": "sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw==" + }, "uglify-js": { "version": "3.4.10", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz", @@ -11976,6 +12222,25 @@ } } }, + "uncontrollable": { + "version": "6.2.3", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-6.2.3.tgz", + "integrity": "sha512-VgOAoBU2ptCL2bfTG2Mra0I8i1u6Aq84AFonD5tmCAYSfs3hWvr2Rlw0q2ntoxXTHjcQOmZOh3FKaN+UZVyREQ==", + "requires": { + "@babel/runtime": "^7.4.5", + "invariant": "^2.2.4" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.4.5", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.5.tgz", + "integrity": "sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + } + } + }, "unicode-canonical-property-names-ecmascript": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz", @@ -12346,6 +12611,14 @@ "makeerror": "1.0.x" } }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watchpack": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz", diff --git a/package.json b/package.json index eeff31f0a..e092f2f8c 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,9 @@ "private": true, "dependencies": { "axios": "^0.19.0", + "bootstrap": "^4.3.1", "react": "^16.8.6", + "react-bootstrap": "^1.0.0-beta.9", "react-dom": "^16.8.6", "react-router-dom": "^5.0.1", "react-scripts": "3.0.1" diff --git a/public/index.html b/public/index.html index ed0ebafa1..73a71c93e 100644 --- a/public/index.html +++ b/public/index.html @@ -25,7 +25,9 @@ +
    +