From 22b8a21f14758a689d6b468734144ee06c440f73 Mon Sep 17 00:00:00 2001 From: Monalisa Chatterjee Date: Mon, 18 Jun 2018 16:03:15 -0700 Subject: [PATCH 01/21] app return VideoStore component --- package-lock.json | 72 ++++++++++++++++++++++++++++++++++++ package.json | 3 +- src/App.js | 11 +----- src/components/VideoStore.js | 0 4 files changed, 76 insertions(+), 10 deletions(-) create mode 100644 src/components/VideoStore.js diff --git a/package-lock.json b/package-lock.json index 79f52b34f..c2251cd4f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4657,6 +4657,28 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz", "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=" }, + "history": { + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz", + "integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==", + "requires": { + "invariant": "2.2.4", + "loose-envify": "1.3.1", + "resolve-pathname": "2.2.0", + "value-equal": "0.4.0", + "warning": "3.0.0" + }, + "dependencies": { + "warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", + "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", + "requires": { + "loose-envify": "1.3.1" + } + } + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -4667,6 +4689,11 @@ "minimalistic-crypto-utils": "1.0.1" } }, + "hoist-non-react-statics": { + "version": "2.5.5", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz", + "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==" + }, "home-or-tmp": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz", @@ -8809,6 +8836,33 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-4.0.0.tgz", "integrity": "sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw==" }, + "react-router": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz", + "integrity": "sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==", + "requires": { + "history": "4.7.2", + "hoist-non-react-statics": "2.5.5", + "invariant": "2.2.4", + "loose-envify": "1.3.1", + "path-to-regexp": "1.7.0", + "prop-types": "15.6.1", + "warning": "4.0.1" + } + }, + "react-router-dom": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.3.1.tgz", + "integrity": "sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==", + "requires": { + "history": "4.7.2", + "invariant": "2.2.4", + "loose-envify": "1.3.1", + "prop-types": "15.6.1", + "react-router": "4.3.1", + "warning": "4.0.1" + } + }, "react-scripts": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-1.1.4.tgz", @@ -9231,6 +9285,11 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-1.0.1.tgz", "integrity": "sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY=" }, + "resolve-pathname": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz", + "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg==" + }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -10564,6 +10623,11 @@ "spdx-expression-parse": "3.0.0" } }, + "value-equal": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz", + "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw==" + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", @@ -10600,6 +10664,14 @@ "makeerror": "1.0.11" } }, + "warning": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.1.tgz", + "integrity": "sha512-rAVtTNZw+cQPjvGp1ox0XC5Q2IBFyqoqh+QII4J/oguyu83Bax1apbo2eqB8bHRS+fqYUBagys6lqUoVwKSmXQ==", + "requires": { + "loose-envify": "1.3.1" + } + }, "watch": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/watch/-/watch-0.10.0.tgz", diff --git a/package.json b/package.json index 951a38e2f..647359386 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "dependencies": { "react": "^16.4.1", "react-dom": "^16.4.1", + "react-router-dom": "^4.3.1", "react-scripts": "1.1.4" }, "scripts": { @@ -13,4 +14,4 @@ "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } -} \ No newline at end of file +} diff --git a/src/App.js b/src/App.js index 203067e4d..2c3518ba2 100644 --- a/src/App.js +++ b/src/App.js @@ -1,19 +1,12 @@ import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; +import VideoStore from './components/VideoStore' class App extends Component { render() { return ( -
-
- logo -

Welcome to React

-
-

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

-
+ ); } } diff --git a/src/components/VideoStore.js b/src/components/VideoStore.js new file mode 100644 index 000000000..e69de29bb From 00779d136dd756a2bb5e47faf7d361df49dc234d Mon Sep 17 00:00:00 2001 From: Nora Peters Date: Mon, 18 Jun 2018 16:09:50 -0700 Subject: [PATCH 02/21] initial setup --- package-lock.json | 72 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 3 +- 2 files changed, 74 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 79f52b34f..c2251cd4f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4657,6 +4657,28 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz", "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=" }, + "history": { + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz", + "integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==", + "requires": { + "invariant": "2.2.4", + "loose-envify": "1.3.1", + "resolve-pathname": "2.2.0", + "value-equal": "0.4.0", + "warning": "3.0.0" + }, + "dependencies": { + "warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", + "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", + "requires": { + "loose-envify": "1.3.1" + } + } + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -4667,6 +4689,11 @@ "minimalistic-crypto-utils": "1.0.1" } }, + "hoist-non-react-statics": { + "version": "2.5.5", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz", + "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==" + }, "home-or-tmp": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz", @@ -8809,6 +8836,33 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-4.0.0.tgz", "integrity": "sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw==" }, + "react-router": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz", + "integrity": "sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==", + "requires": { + "history": "4.7.2", + "hoist-non-react-statics": "2.5.5", + "invariant": "2.2.4", + "loose-envify": "1.3.1", + "path-to-regexp": "1.7.0", + "prop-types": "15.6.1", + "warning": "4.0.1" + } + }, + "react-router-dom": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.3.1.tgz", + "integrity": "sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==", + "requires": { + "history": "4.7.2", + "invariant": "2.2.4", + "loose-envify": "1.3.1", + "prop-types": "15.6.1", + "react-router": "4.3.1", + "warning": "4.0.1" + } + }, "react-scripts": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-1.1.4.tgz", @@ -9231,6 +9285,11 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-1.0.1.tgz", "integrity": "sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY=" }, + "resolve-pathname": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz", + "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg==" + }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -10564,6 +10623,11 @@ "spdx-expression-parse": "3.0.0" } }, + "value-equal": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz", + "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw==" + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", @@ -10600,6 +10664,14 @@ "makeerror": "1.0.11" } }, + "warning": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.1.tgz", + "integrity": "sha512-rAVtTNZw+cQPjvGp1ox0XC5Q2IBFyqoqh+QII4J/oguyu83Bax1apbo2eqB8bHRS+fqYUBagys6lqUoVwKSmXQ==", + "requires": { + "loose-envify": "1.3.1" + } + }, "watch": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/watch/-/watch-0.10.0.tgz", diff --git a/package.json b/package.json index 951a38e2f..647359386 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "dependencies": { "react": "^16.4.1", "react-dom": "^16.4.1", + "react-router-dom": "^4.3.1", "react-scripts": "1.1.4" }, "scripts": { @@ -13,4 +14,4 @@ "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } -} \ No newline at end of file +} From 0d2560b00bc289ce0119a1aadf193e76989adbd2 Mon Sep 17 00:00:00 2001 From: Monalisa Chatterjee Date: Mon, 18 Jun 2018 16:20:10 -0700 Subject: [PATCH 03/21] Used react router to display nav --- src/components/VideoStore.js | 60 ++++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) diff --git a/src/components/VideoStore.js b/src/components/VideoStore.js index e69de29bb..0963267c2 100644 --- a/src/components/VideoStore.js +++ b/src/components/VideoStore.js @@ -0,0 +1,60 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { BrowserRouter as Router, Route, Link } from "react-router-dom"; + + + +class VideoStore extends Component { + render() { + const Home = () => ( +
+

Home

+
+); +const Search = () => ( +
+

search

+
+); +const Library = () => ( +
+

library

+
+); +const Customers = () => ( +
+

customers

+
+); + return ( + +
+
    +
  • + Home +
    • +
  • + Search +
    • +
  • + Library +
    • +
  • + Customers +
    • + +
+ +
+ + + + + +
+ + ); + } +} + +export default VideoStore; From 3f264556e0bdaecc781836c20aadc8e0007712fb Mon Sep 17 00:00:00 2001 From: Nora Peters Date: Mon, 18 Jun 2018 16:22:45 -0700 Subject: [PATCH 04/21] add search component and css --- src/components/Search.css | 0 src/components/Search.js | 0 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/components/Search.css create mode 100644 src/components/Search.js 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 82400bba3af5d3e9d1538182152e0bb31e2408e2 Mon Sep 17 00:00:00 2001 From: Monalisa Chatterjee Date: Mon, 18 Jun 2018 21:59:41 -0700 Subject: [PATCH 05/21] add constructor, state and callbacks for selection --- src/components/VideoStore.js | 115 +++++++++++++++++++++-------------- 1 file changed, 70 insertions(+), 45 deletions(-) diff --git a/src/components/VideoStore.js b/src/components/VideoStore.js index 0963267c2..c0da1f099 100644 --- a/src/components/VideoStore.js +++ b/src/components/VideoStore.js @@ -1,57 +1,82 @@ import React, { Component } from 'react'; -import PropTypes from 'prop-types'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; +class VideoStore extends Component { + constructor () { + super (); + this.state = { + selectedMovie: null, + selectedCustomer: null, + } + } + selectCustomer = (customer) => { + console.log("selecting customer " + customer.name); + const movie = this.state.selectedMovie; + this.setState({ + selectedMovie: movie, + selectedCustomer: customer, + }); + console.log("current state: " + this.state); + } + + selectMovie = (movie) => { + console.log("selecting movie " + movie.name); + const customer = this.state.selectCustomer; + this.setState({ + selectedMovie: movie, + selectedCustomer: customer, + }); + console.log("current state: " + this.state); + } -class VideoStore extends Component { render() { const Home = () => ( -
-

Home

-
-); -const Search = () => ( -
-

search

-
-); -const Library = () => ( -
-

library

-
-); -const Customers = () => ( -
-

customers

-
-); +
+

Home

+
+ ); + const Search = () => ( +
+

search

+
+ ); + const Library = () => ( +
+

library

+
+ ); + const Customers = () => ( +
+

library

+
+ ); return ( -
-
    -
  • - Home -
    • -
  • - Search -
    • -
  • - Library -
    • -
  • - Customers -
    • - -
- -
- - - - - -
+
+
    +
  • + Home +
    • +
  • + Search +
    • +
  • + Library +
    • +
  • + Customers +
    • + +
+ +
+ + + + + +
); } From 32ca8f05b522a3144a34119e1a391c1cb2c0464f Mon Sep 17 00:00:00 2001 From: Monalisa Chatterjee Date: Tue, 19 Jun 2018 10:33:13 -0700 Subject: [PATCH 06/21] Added customer and customerList component --- package-lock.json | 9 +++++ package.json | 1 + src/App.js | 3 +- src/components/Customer.css | 0 src/components/Customer.js | 16 +++++++++ src/components/CustomerList.css | 0 src/components/CustomerList.js | 60 +++++++++++++++++++++++++++++++++ src/components/VideoStore.js | 41 ++++++++++++++++------ 8 files changed, 118 insertions(+), 12 deletions(-) create mode 100644 src/components/Customer.css create mode 100644 src/components/Customer.js create mode 100644 src/components/CustomerList.css create mode 100644 src/components/CustomerList.js diff --git a/package-lock.json b/package-lock.json index c2251cd4f..cdd05bc6b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -434,6 +434,15 @@ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.7.0.tgz", "integrity": "sha512-32NDda82rhwD9/JBCCkB+MRYDp0oSvlo2IL6rQWA10PQi7tDUM3eqMSltXmY+Oyl/7N3P3qNtAlv7X0d9bI28w==" }, + "axios": { + "version": "0.18.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz", + "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=", + "requires": { + "follow-redirects": "1.5.0", + "is-buffer": "1.1.6" + } + }, "axobject-query": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-0.1.0.tgz", diff --git a/package.json b/package.json index 647359386..d170d92c8 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "axios": "^0.18.0", "react": "^16.4.1", "react-dom": "^16.4.1", "react-router-dom": "^4.3.1", diff --git a/src/App.js b/src/App.js index 2c3518ba2..06236fa97 100644 --- a/src/App.js +++ b/src/App.js @@ -1,12 +1,11 @@ import React, { Component } from 'react'; -import logo from './logo.svg'; import './App.css'; import VideoStore from './components/VideoStore' class App extends Component { render() { return ( - + ); } } diff --git a/src/components/Customer.css b/src/components/Customer.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Customer.js b/src/components/Customer.js new file mode 100644 index 000000000..1c0b334d5 --- /dev/null +++ b/src/components/Customer.js @@ -0,0 +1,16 @@ +import React, { Component } from 'react'; +import './Customer.css'; + +const Customer = (props) => { + // {"id":1,"name":"Shelley Rocha","registered_at":"2015-04-29T14:54:14.000Z","address":"Ap #292-5216 Ipsum Rd.","city":"Hillsboro","state":"OR","postal_code":"24309","phone":"(322) 510-8695","account_credit":13.15,"movies_checked_out_count":0} + return ( +
+
{props.customer.name} (Checked out: {props.customer.movies_checked_out_count})
+
{props.customer.address}
+
{props.customer.city} {props.customer.state} {props.customer.postal_code}
+
{props.customer.phone}
+
+ ); +} + +export default Customer; diff --git a/src/components/CustomerList.css b/src/components/CustomerList.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js new file mode 100644 index 000000000..7170fcd98 --- /dev/null +++ b/src/components/CustomerList.js @@ -0,0 +1,60 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import axios from 'axios'; + +import './CustomerList.css'; +import Customer from './Customer' + +class CustomerList extends Component { + constructor() { + super(); + this.state = { + customers: [], + }; + } + + componentDidMount() { + axios.get(`${this.props.url}/customers`) + .then( (response) => { + console.log( response.data ); + this.setState({ + customers: response.data + }); + } ) + .catch( (error) => { + console.log("got to the error"); + console.log(error); + this.setState({ + error: error.message + }); + } ); + } + + onClickSelect(e, customer) { + this.props.selectCustomerCallback(customer); + e.preventDefault(); + } + + render () { + const customers = this.state.customers.map((customer, index) => { + return ( +
+ +
+
+ ) + }) + return ( +
+ {customers} +
+ ); + } +} + +CustomerList.propTypes = { + url: PropTypes.string.isRequired, + selectCustomerCallback: PropTypes.func.isRequired, +}; + +export default CustomerList; diff --git a/src/components/VideoStore.js b/src/components/VideoStore.js index c0da1f099..ebf249ca2 100644 --- a/src/components/VideoStore.js +++ b/src/components/VideoStore.js @@ -1,5 +1,7 @@ import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; +import CustomerList from './CustomerList' class VideoStore extends Component { constructor () { @@ -17,17 +19,23 @@ class VideoStore extends Component { selectedMovie: movie, selectedCustomer: customer, }); - console.log("current state: " + this.state); } selectMovie = (movie) => { - console.log("selecting movie " + movie.name); - const customer = this.state.selectCustomer; + console.log("selecting movie " + movie.title); + const customer = this.state.selectedCustomer; this.setState({ selectedMovie: movie, selectedCustomer: customer, }); - console.log("current state: " + this.state); + } + + resetSelection = () => { + console.log("resetting select data"); + this.setState({ + selectedMovie: null, + selectedCustomer: null, + }); } render() { @@ -47,10 +55,9 @@ class VideoStore extends Component { ); const Customers = () => ( -
-

library

-
+ ); + return (
@@ -67,11 +74,11 @@ class VideoStore extends Component {
  • Customers
    • - -
    - + +
    +
    @@ -82,4 +89,18 @@ class VideoStore extends Component { } } +const Selections = (props) => { + const customer = props.customer ? props.customer.name : "None"; + const movie = props.movie ? props.movie.title : "None"; + return ( +
    +
    Selected Customer: {customer} | Selected Movie: {movie}
    +
    + ); +} + +VideoStore.propTypes = { + url: PropTypes.string.isRequired, +} + export default VideoStore; From 7782c88595ab1ac5e4169007ea583ce504c30176 Mon Sep 17 00:00:00 2001 From: Nora Peters Date: Tue, 19 Jun 2018 10:59:49 -0700 Subject: [PATCH 07/21] adds Customer component and stylesheet --- src/components/Customer.css | 0 src/components/Customer.js | 28 ++++++++++++++++++++++++++++ 2 files changed, 28 insertions(+) create mode 100644 src/components/Customer.css create mode 100644 src/components/Customer.js diff --git a/src/components/Customer.css b/src/components/Customer.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Customer.js b/src/components/Customer.js new file mode 100644 index 000000000..af5df0e43 --- /dev/null +++ b/src/components/Customer.js @@ -0,0 +1,28 @@ +import React, { Component } from 'react'; +import './Customer.css'; +import PropTypes from 'prop-types'; + + +class Customer extends Component { + + // onDeleteClick = (event) => { + // console.log(event.target.id); + // event.preventDefault(); + // this.props.removeCustomer(event.target.id); + // } + + render() { + + return ( +
    + {this.props.name} +
    + ) + } +} + +// Customer.propTypes = { +// +// }; + +export default Customer; From c7f8162e9b0d756fc00f22d53b1db5863f0e26bc Mon Sep 17 00:00:00 2001 From: Nora Peters Date: Tue, 19 Jun 2018 11:24:20 -0700 Subject: [PATCH 08/21] adds SearchForm component with callback on submit --- src/components/SearchForm.css | 0 src/components/SearchForm.js | 48 +++++++++++++++++++++++++++++++++++ 2 files changed, 48 insertions(+) create mode 100644 src/components/SearchForm.css create mode 100644 src/components/SearchForm.js diff --git a/src/components/SearchForm.css b/src/components/SearchForm.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/SearchForm.js b/src/components/SearchForm.js new file mode 100644 index 000000000..999a5aa02 --- /dev/null +++ b/src/components/SearchForm.js @@ -0,0 +1,48 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import './SearchForm.css'; + +class SearchForm extends Component { + constructor() { + super(); + this.state = { + title: '', + }; + } + + onFieldChange = (event) => { + const fieldName = event.target.name; + const fieldValue = event.target.value + const updateState = {}; + updateState[fieldName] = fieldValue; + this.setState(updateState); + } + + onFormSubmit = (event) => { + event.preventDefault(); + this.props.getVideosCallback(this.state.title); + // this.clearForm(); + } + + render() { + return ( +
    +
    +
    + + +
    + +
    +
    + ); + } +} + +export default SearchForm; From 9c5de36f251fb5517a4a3f80a72ff44b04de2049 Mon Sep 17 00:00:00 2001 From: Monalisa Chatterjee Date: Tue, 19 Jun 2018 11:24:33 -0700 Subject: [PATCH 09/21] Fixed bug related to select customer --- src/components/CustomerList.js | 1 - src/components/VideoStore.js | 20 +++++++++++++------- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index 7170fcd98..3188cdb56 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -32,7 +32,6 @@ class CustomerList extends Component { onClickSelect(e, customer) { this.props.selectCustomerCallback(customer); - e.preventDefault(); } render () { diff --git a/src/components/VideoStore.js b/src/components/VideoStore.js index ebf249ca2..dcfa029ab 100644 --- a/src/components/VideoStore.js +++ b/src/components/VideoStore.js @@ -14,9 +14,7 @@ class VideoStore extends Component { selectCustomer = (customer) => { console.log("selecting customer " + customer.name); - const movie = this.state.selectedMovie; this.setState({ - selectedMovie: movie, selectedCustomer: customer, }); } @@ -61,6 +59,8 @@ class VideoStore extends Component { return (
    + ( +
    • Home @@ -77,12 +77,18 @@ class VideoStore extends Component {
    -
    +
    + +
    - - - - +
    + )} /> + + + +
    ); From 78f0ffa5707a01b0f26eed77de936551cdfd12e7 Mon Sep 17 00:00:00 2001 From: Nora Peters Date: Tue, 19 Jun 2018 11:25:00 -0700 Subject: [PATCH 10/21] adds Video component --- src/components/Video.css | 0 src/components/Video.js | 28 ++++++++++++++++++++++++++++ 2 files changed, 28 insertions(+) create mode 100644 src/components/Video.css create mode 100644 src/components/Video.js diff --git a/src/components/Video.css b/src/components/Video.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Video.js b/src/components/Video.js new file mode 100644 index 000000000..2e269509f --- /dev/null +++ b/src/components/Video.js @@ -0,0 +1,28 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + +import './Video.css'; + +class Video extends Component { + + // onDeleteClick = (event) => { + // console.log(event.target.id); + // event.preventDefault(); + // this.props.removeVideo(event.target.id); + // } + + render() { + + return ( +
    + {this.props.title} +
    + ) + } +} + +// Video.propTypes = { +// +// }; + +export default Video; From a149084a0144444693642b8a9bb1d68512ad5752 Mon Sep 17 00:00:00 2001 From: Nora Peters Date: Tue, 19 Jun 2018 11:25:30 -0700 Subject: [PATCH 11/21] removes Search component and stylesheet, updates package json --- package-lock.json | 9 +++ package.json | 1 + src/components/Search.css | 0 src/components/Search.js | 0 src/components/VideoStore.js | 152 ++++++++++++++++++++++++++--------- 5 files changed, 125 insertions(+), 37 deletions(-) delete mode 100644 src/components/Search.css delete mode 100644 src/components/Search.js diff --git a/package-lock.json b/package-lock.json index c2251cd4f..cdd05bc6b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -434,6 +434,15 @@ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.7.0.tgz", "integrity": "sha512-32NDda82rhwD9/JBCCkB+MRYDp0oSvlo2IL6rQWA10PQi7tDUM3eqMSltXmY+Oyl/7N3P3qNtAlv7X0d9bI28w==" }, + "axios": { + "version": "0.18.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz", + "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=", + "requires": { + "follow-redirects": "1.5.0", + "is-buffer": "1.1.6" + } + }, "axobject-query": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-0.1.0.tgz", diff --git a/package.json b/package.json index 647359386..d170d92c8 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "axios": "^0.18.0", "react": "^16.4.1", "react-dom": "^16.4.1", "react-router-dom": "^4.3.1", diff --git a/src/components/Search.css b/src/components/Search.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/components/Search.js b/src/components/Search.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/components/VideoStore.js b/src/components/VideoStore.js index 0963267c2..82a2994ad 100644 --- a/src/components/VideoStore.js +++ b/src/components/VideoStore.js @@ -1,54 +1,132 @@ import React, { Component } from 'react'; -import PropTypes from 'prop-types'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; - +import PropTypes from 'prop-types'; +import axios from 'axios'; +import Video from './Video' +import SearchForm from './SearchForm' +import Customer from './Customer' class VideoStore extends Component { + + constructor() { + super(); + + this.state = { + videos: [], + customers: [], + searchResults: [], + }; + } + + componentDidMount = () => { + console.log("Component did mount was called"); + axios.get('http://localhost:3001/movies') + .then((response) => { + console.log(response.data); + this.setState({videos: response.data}); + }) + .catch((error) => { + this.setState({error: error.message}); + }); + axios.get('http://localhost:3001/customers') + .then((response) => { + console.log(response.data); + this.setState({customers: response.data}); + }) + .catch((error) => { + this.setState({error: error.message}); + }); + } + + renderVideoList = () => { + const videoList = this.state.videos.map((item, index) => { + console.log(item); + return ( +
  • +
    • + ); + }); + return videoList; + } + + renderCustomerList = () => { + const customerList = this.state.customers.map((item, index) => { + console.log(item); + return ( +
  • + +
    • + ); + }); + return customerList; + } + + getVideosFromSearch = (searchTerm) => { + axios.get('http://localhost:3001/movies?query=' + searchTerm) + .then((response) => { + console.log(response.data); + this.setState({searchResults: response.data}); + }) + .catch((error) => { + this.setState({error: error.message}); + }); + } + + renderSearchResults = () => { + const results = this.state.searchResults.map((item, index) => { + console.log(item); + return ( +
  • +
    • + ); + }); + return results; + } + render() { + const Home = () => ( -
    -

    Home

    -
    -); -const Search = () => ( -
    -

    search

    -
    -); -const Library = () => ( -
    -

    library

    -
    -); -const Customers = () => ( -
    -

    customers

    -
    -); +
    +

    Home

    +
    + ); + const Search = () => ( +
    +

    Search

    + +
      + {this.renderSearchResults()} +
    +
    + ); + const Library = () => ( +
      + {this.renderVideoList()} +
    + ); + const Customers = () => ( +
      + {this.renderCustomerList()} +
    + ); + return (
      -
    • - Home -
      • -
    • - Search -
      • -
    • - Library -
      • -
    • - Customers -
      • - +
    • Home
      • +
    • Search
      • +
    • Library
      • +
    • Customers
    -
    - - +
    From e48c9ae88ded72a39a6525ed265aa8803defb0e7 Mon Sep 17 00:00:00 2001 From: Monalisa Chatterjee Date: Tue, 19 Jun 2018 11:33:05 -0700 Subject: [PATCH 12/21] Added selection component --- src/components/Selections.css | 0 src/components/Selections.js | 16 ++++++++++++++++ 2 files changed, 16 insertions(+) create mode 100644 src/components/Selections.css create mode 100644 src/components/Selections.js diff --git a/src/components/Selections.css b/src/components/Selections.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Selections.js b/src/components/Selections.js new file mode 100644 index 000000000..f7d1f7e86 --- /dev/null +++ b/src/components/Selections.js @@ -0,0 +1,16 @@ +import React, { Component } from 'react'; +import './Selections.css'; + + +const Selections = (props) => { + const customer = props.customer ? props.customer.name : "None"; + const movie = props.movie ? props.movie.title : "None"; + return ( +
    +
    Selected Customer: {customer} | Selected Movie: {movie}
    +
    + ); +} + + +export default Selections; From 39297cb646b96c26bafbaa6e7d9eb50b7b751f4c Mon Sep 17 00:00:00 2001 From: Monalisa Chatterjee Date: Tue, 19 Jun 2018 14:11:04 -0700 Subject: [PATCH 13/21] Add Rental Library and movie component --- src/components/{Search.css => Movie.css} | 0 src/components/Movie.js | 17 ++++++ .../{Search.js => RentalLibrary.css} | 0 src/components/RentalLibrary.js | 60 +++++++++++++++++++ src/components/VideoStore.css | 6 ++ src/components/VideoStore.js | 22 +++---- 6 files changed, 90 insertions(+), 15 deletions(-) rename src/components/{Search.css => Movie.css} (100%) create mode 100644 src/components/Movie.js rename src/components/{Search.js => RentalLibrary.css} (100%) create mode 100644 src/components/RentalLibrary.js create mode 100644 src/components/VideoStore.css diff --git a/src/components/Search.css b/src/components/Movie.css similarity index 100% rename from src/components/Search.css rename to src/components/Movie.css diff --git a/src/components/Movie.js b/src/components/Movie.js new file mode 100644 index 000000000..a15605063 --- /dev/null +++ b/src/components/Movie.js @@ -0,0 +1,17 @@ +import React, { Component } from 'react'; +import './Movie.css'; + +const Movie = (props) => { + // {"id":1,"title":"Psycho","overview":"When larcenous real estate clerk Marion Crane goes on the lam with a wad of cash and hopes of starting a new life, she ends up at the notorious Bates Motel, where manager Norman Bates cares for his housebound mother. The place seems quirky, but fine… until Marion decides to take a shower.","release_date":"1960-06-16","image_url":"https://image.tmdb.org/t/p/w185/81d8oyEFgj7FlxJqSDXWr8JH8kV.jpg","external_id":539} + + return ( +
    +
    {props.movie.title}
    +
    {props.movie.overview}
    +
    {props.movie.release_date}
    +
    {props.movie.title}/
    +
    + ); +} + +export default Movie; diff --git a/src/components/Search.js b/src/components/RentalLibrary.css similarity index 100% rename from src/components/Search.js rename to src/components/RentalLibrary.css diff --git a/src/components/RentalLibrary.js b/src/components/RentalLibrary.js new file mode 100644 index 000000000..75ef4e22f --- /dev/null +++ b/src/components/RentalLibrary.js @@ -0,0 +1,60 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import axios from 'axios'; + +import './RentalLibrary.css'; +import Movie from './Movie' + +class RentalLibrary extends Component { + constructor() { + super(); + this.state = { + movies: [], + }; + } + + componentDidMount() { + axios.get(`${this.props.url}/movies`) + .then( (response) => { + console.log( response.data ); + this.setState({ + movies: response.data + }); + } ) + .catch( (error) => { + console.log("got to the error"); + console.log(error); + this.setState({ + error: error.message + }); + } ); + } + + onClickSelect(e, movie) { + this.props.selectMovieCallback(movie); + e.preventDefault(); + } + + render () { + const movies = this.state.movies.map((movie, index) => { + return ( +
    + +
    +
    + ) + }) + return ( +
    + {movies} +
    + ); + } +} + +RentalLibrary.propTypes = { + url: PropTypes.string.isRequired, + selectMovieCallback: PropTypes.func.isRequired, +}; + +export default RentalLibrary; diff --git a/src/components/VideoStore.css b/src/components/VideoStore.css new file mode 100644 index 000000000..e1b6f4de8 --- /dev/null +++ b/src/components/VideoStore.css @@ -0,0 +1,6 @@ +li { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} diff --git a/src/components/VideoStore.js b/src/components/VideoStore.js index dcfa029ab..fe1d28746 100644 --- a/src/components/VideoStore.js +++ b/src/components/VideoStore.js @@ -2,6 +2,11 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; import CustomerList from './CustomerList' +import Selections from './Selections' +import RentalLibrary from './RentalLibrary' +import './VideoStore.css'; + + class VideoStore extends Component { constructor () { @@ -24,7 +29,6 @@ class VideoStore extends Component { const customer = this.state.selectedCustomer; this.setState({ selectedMovie: movie, - selectedCustomer: customer, }); } @@ -44,13 +48,11 @@ class VideoStore extends Component { ); const Search = () => (
    -

    search

    +
    ); const Library = () => ( -
    -

    library

    -
    + ); const Customers = () => ( @@ -95,16 +97,6 @@ class VideoStore extends Component { } } -const Selections = (props) => { - const customer = props.customer ? props.customer.name : "None"; - const movie = props.movie ? props.movie.title : "None"; - return ( -
    -
    Selected Customer: {customer} | Selected Movie: {movie}
    -
    - ); -} - VideoStore.propTypes = { url: PropTypes.string.isRequired, } From a566ed164e8dee34e066285d84b5e165b73fe97e Mon Sep 17 00:00:00 2001 From: Nora Peters Date: Tue, 19 Jun 2018 14:55:17 -0700 Subject: [PATCH 14/21] refactors VideoStore to hold selectedmovie & customer instead of collections. creates SearchResults with function to do post request to add video to API inventory --- src/components/Customer.js | 32 ++---- src/components/CustomerList.css | 0 src/components/CustomerList.js | 59 +++++++++++ src/components/SearchForm.js | 22 +++- src/components/SearchResults.css | 0 src/components/SearchResults.js | 58 +++++++++++ src/components/Selections.js | 16 +++ src/components/Video.js | 2 +- src/components/VideoStore.js | 168 +++++++++++++------------------ 9 files changed, 236 insertions(+), 121 deletions(-) create mode 100644 src/components/CustomerList.css create mode 100644 src/components/CustomerList.js create mode 100644 src/components/SearchResults.css create mode 100644 src/components/SearchResults.js create mode 100644 src/components/Selections.js diff --git a/src/components/Customer.js b/src/components/Customer.js index af5df0e43..1c0b334d5 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -1,28 +1,16 @@ import React, { Component } from 'react'; import './Customer.css'; -import PropTypes from 'prop-types'; - -class Customer extends Component { - - // onDeleteClick = (event) => { - // console.log(event.target.id); - // event.preventDefault(); - // this.props.removeCustomer(event.target.id); - // } - - render() { - - return ( -
    - {this.props.name} -
    - ) - } +const Customer = (props) => { + // {"id":1,"name":"Shelley Rocha","registered_at":"2015-04-29T14:54:14.000Z","address":"Ap #292-5216 Ipsum Rd.","city":"Hillsboro","state":"OR","postal_code":"24309","phone":"(322) 510-8695","account_credit":13.15,"movies_checked_out_count":0} + return ( +
    +
    {props.customer.name} (Checked out: {props.customer.movies_checked_out_count})
    +
    {props.customer.address}
    +
    {props.customer.city} {props.customer.state} {props.customer.postal_code}
    +
    {props.customer.phone}
    +
    + ); } -// Customer.propTypes = { -// -// }; - export default Customer; diff --git a/src/components/CustomerList.css b/src/components/CustomerList.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js new file mode 100644 index 000000000..3188cdb56 --- /dev/null +++ b/src/components/CustomerList.js @@ -0,0 +1,59 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import axios from 'axios'; + +import './CustomerList.css'; +import Customer from './Customer' + +class CustomerList extends Component { + constructor() { + super(); + this.state = { + customers: [], + }; + } + + componentDidMount() { + axios.get(`${this.props.url}/customers`) + .then( (response) => { + console.log( response.data ); + this.setState({ + customers: response.data + }); + } ) + .catch( (error) => { + console.log("got to the error"); + console.log(error); + this.setState({ + error: error.message + }); + } ); + } + + onClickSelect(e, customer) { + this.props.selectCustomerCallback(customer); + } + + render () { + const customers = this.state.customers.map((customer, index) => { + return ( +
    + +
    +
    + ) + }) + return ( +
    + {customers} +
    + ); + } +} + +CustomerList.propTypes = { + url: PropTypes.string.isRequired, + selectCustomerCallback: PropTypes.func.isRequired, +}; + +export default CustomerList; diff --git a/src/components/SearchForm.js b/src/components/SearchForm.js index 999a5aa02..43d45ea6b 100644 --- a/src/components/SearchForm.js +++ b/src/components/SearchForm.js @@ -1,12 +1,16 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import axios from 'axios'; import './SearchForm.css'; +import SearchResults from './SearchResults' + class SearchForm extends Component { constructor() { super(); this.state = { title: '', + results: [], }; } @@ -20,8 +24,14 @@ class SearchForm extends Component { onFormSubmit = (event) => { event.preventDefault(); - this.props.getVideosCallback(this.state.title); - // this.clearForm(); + axios.get(`${this.props.url}/movies?query=${this.state.title}`) + .then((response) => { + console.log(response.data); + this.setState({results: response.data}); + }) + .catch((error) => { + this.setState({error: error.message}); + }); } render() { @@ -40,9 +50,17 @@ class SearchForm extends Component {
    + ); } } +SearchForm.propTypes = { + url: PropTypes.string.isRequired, +} + export default SearchForm; diff --git a/src/components/SearchResults.css b/src/components/SearchResults.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js new file mode 100644 index 000000000..8b629093d --- /dev/null +++ b/src/components/SearchResults.js @@ -0,0 +1,58 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import axios from 'axios'; + +import './SearchResults.css'; +import Video from './Video' + +class SearchResults extends Component { + + onClickSelect(e, video) { + console.log(e); + console.log(video); + axios.post(`${this.props.url}/movies`, video) + .then((response) => { + console.log(response); + // video.id = response.data.card.id; + // cards.push({card: card}); + // this.setState({ + // cards, + // message: `Successfully added card` + // }); + // alert( `Successfully added card`) + // }) + // .catch((error) => { + // this.setState({ + // message: error.message, + // }); + }); + } + + render () { + console.log(results); + const results = this.props.results.map((video, index) => { + return ( +
    +
    + ) + }) + return ( +
    + {results} +
    + ); + } +} + +SearchResults.propTypes = { + results: PropTypes.array.isRequired, +}; + +export default SearchResults; diff --git a/src/components/Selections.js b/src/components/Selections.js new file mode 100644 index 000000000..f7d1f7e86 --- /dev/null +++ b/src/components/Selections.js @@ -0,0 +1,16 @@ +import React, { Component } from 'react'; +import './Selections.css'; + + +const Selections = (props) => { + const customer = props.customer ? props.customer.name : "None"; + const movie = props.movie ? props.movie.title : "None"; + return ( +
    +
    Selected Customer: {customer} | Selected Movie: {movie}
    +
    + ); +} + + +export default Selections; diff --git a/src/components/Video.js b/src/components/Video.js index 2e269509f..798423f1c 100644 --- a/src/components/Video.js +++ b/src/components/Video.js @@ -25,4 +25,4 @@ class Video extends Component { // // }; -export default Video; +export default Video;'' diff --git a/src/components/VideoStore.js b/src/components/VideoStore.js index 82a2994ad..8eab68966 100644 --- a/src/components/VideoStore.js +++ b/src/components/VideoStore.js @@ -1,138 +1,114 @@ import React, { Component } from 'react'; -import { BrowserRouter as Router, Route, Link } from "react-router-dom"; import PropTypes from 'prop-types'; -import axios from 'axios'; -import Video from './Video' +import { BrowserRouter as Router, Route, Link } from "react-router-dom"; +import CustomerList from './CustomerList' import SearchForm from './SearchForm' -import Customer from './Customer' class VideoStore extends Component { - - constructor() { - super(); - + constructor () { + super (); this.state = { - videos: [], - customers: [], - searchResults: [], - }; - } - - componentDidMount = () => { - console.log("Component did mount was called"); - axios.get('http://localhost:3001/movies') - .then((response) => { - console.log(response.data); - this.setState({videos: response.data}); - }) - .catch((error) => { - this.setState({error: error.message}); - }); - axios.get('http://localhost:3001/customers') - .then((response) => { - console.log(response.data); - this.setState({customers: response.data}); - }) - .catch((error) => { - this.setState({error: error.message}); - }); + selectedMovie: null, + selectedCustomer: null, + } } - renderVideoList = () => { - const videoList = this.state.videos.map((item, index) => { - console.log(item); - return ( -
  • -
    • - ); + selectCustomer = (customer) => { + console.log("selecting customer " + customer.name); + this.setState({ + selectedCustomer: customer, }); - return videoList; } - renderCustomerList = () => { - const customerList = this.state.customers.map((item, index) => { - console.log(item); - return ( -
  • - -
    • - ); + selectMovie = (movie) => { + console.log("selecting movie " + movie.title); + this.setState({ + selectedMovie: movie, }); - return customerList; } - getVideosFromSearch = (searchTerm) => { - axios.get('http://localhost:3001/movies?query=' + searchTerm) - .then((response) => { - console.log(response.data); - this.setState({searchResults: response.data}); - }) - .catch((error) => { - this.setState({error: error.message}); + resetSelection = () => { + console.log("resetting select data"); + this.setState({ + selectedMovie: null, + selectedCustomer: null, }); } - renderSearchResults = () => { - const results = this.state.searchResults.map((item, index) => { - console.log(item); - return ( -
  • -
    • - ); - }); - return results; - } - render() { - const Home = () => (
    -

    Home

    +

    Home

    ); const Search = () => (
    -

    Search

    -
      - {this.renderSearchResults()} -
    ); const Library = () => ( -
      - {this.renderVideoList()} -
    +
    +

    library

    +
    ); const Customers = () => ( -
      - {this.renderCustomerList()} -
    + ); return ( -
    -
      -
    • Home
      • -
    • Search
      • -
    • Library
      • -
    • Customers
      • -
    -
    - - - - -
    +
    + ( +
    +
      +
    • + Home +
      • +
    • + Search +
      • +
    • + Library +
      • +
    • + Customers +
      • +
    +
    + +
    + +
    +
    +
    + )} /> + + + + +
    ); } } +const Selections = (props) => { + const customer = props.customer ? props.customer.name : "None"; + const movie = props.movie ? props.movie.title : "None"; + return ( +
    +
    Selected Customer: {customer} | Selected Movie: {movie}
    +
    + ); +} + +VideoStore.propTypes = { + url: PropTypes.string.isRequired, +} + export default VideoStore; From e47923fce2aaf3c243686d8b99f14a9f4a4d70cb Mon Sep 17 00:00:00 2001 From: Monalisa Chatterjee Date: Tue, 19 Jun 2018 22:05:16 -0700 Subject: [PATCH 15/21] using the same movie component --- src/components/SearchResults.js | 7 +++---- src/components/Video.css | 0 src/components/Video.js | 28 ---------------------------- 3 files changed, 3 insertions(+), 32 deletions(-) delete mode 100644 src/components/Video.css delete mode 100644 src/components/Video.js diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js index 8b629093d..ac8b2f72a 100644 --- a/src/components/SearchResults.js +++ b/src/components/SearchResults.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import axios from 'axios'; import './SearchResults.css'; -import Video from './Video' +import Movie from './Movie' class SearchResults extends Component { @@ -33,9 +33,8 @@ class SearchResults extends Component { const results = this.props.results.map((video, index) => { return (
    -
    ) }) return (
    - {results} + {results}
    ); } From 0df74ffcf14aa86f25c6479996f19bd4a706875a Mon Sep 17 00:00:00 2001 From: Monalisa Chatterjee Date: Wed, 20 Jun 2018 14:05:36 -0700 Subject: [PATCH 17/21] add checkout feature --- src/components/VideoStore.js | 143 ++++++++++++++++++++--------------- 1 file changed, 83 insertions(+), 60 deletions(-) diff --git a/src/components/VideoStore.js b/src/components/VideoStore.js index 07a921f98..95e3786b3 100644 --- a/src/components/VideoStore.js +++ b/src/components/VideoStore.js @@ -6,6 +6,7 @@ import Selections from './Selections' import RentalLibrary from './RentalLibrary' import './VideoStore.css'; import SearchForm from './SearchForm' +import axios from 'axios'; class VideoStore extends Component { @@ -31,7 +32,7 @@ class VideoStore extends Component { }); } - resetSelection = () => { + resetSelection = (e) => { console.log("resetting select data"); this.setState({ selectedMovie: null, @@ -39,74 +40,96 @@ class VideoStore extends Component { }); } - render() { - const Home = () => ( -
    + checkoutSelection = (e) => { + if ( this.state.selectedCustomer!=null && this.state.selectedMovie!=null ) { + let dueDate = new Date(); + dueDate.setDate(dueDate.getDate() + 7); + axios.post(`${this.props.url}/rentals/${this.state.selectedMovie.title}/check-out?customer_id=${this.state.selectedCustomer.id}&due_date=${dueDate}`) + .then( + (response) => { + console.log(response); + }) + .catch((error)=> { + console.log(error); + this.setState({ + message: error.message + }); + }); + } + } + + render() { + const Home = () => ( +

    Home

    -
    - ); +
    + ); - const Search = () => ( -
    + const Search = () => ( +
    -
    - ); +
    + ); - const Library = () => ( -
    + const Library = () => ( +
    -
    - ); +
    + ); - const Customers = () => ( -
    + const Customers = () => ( +
    -
    - ); +
    + ); + + return ( + +
    + ( +
    +
      +
    • + Home +
      • +
    • + Search +
      • +
    • + Library +
      • +
    • + Customers +
      • +
    +
    + +
    + + - return ( - -
    - ( -
    -
      -
    • - Home -
      • -
    • - Search -
      • -
    • - Library -
      • -
    • - Customers -
      • -
    -
    - -
    - -
    -
    -
    - )} /> - - - - -
    -     - ); +
    +
    +
    + )} /> + + + + +
    +     + ); + } } -} -VideoStore.propTypes = { - url: PropTypes.string.isRequired, -} + VideoStore.propTypes = { + url: PropTypes.string.isRequired, + } -export default VideoStore; + export default VideoStore; From f0c3e384b0c94876af62d6021b687b1d406b4865 Mon Sep 17 00:00:00 2001 From: Nora Peters Date: Wed, 20 Jun 2018 14:16:26 -0700 Subject: [PATCH 18/21] refactors SearchResults to have movie instead of video sub components --- src/components/SearchResults.js | 39 +++++++++++++++------------------ 1 file changed, 18 insertions(+), 21 deletions(-) diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js index 8b629093d..732cf3f07 100644 --- a/src/components/SearchResults.js +++ b/src/components/SearchResults.js @@ -3,41 +3,38 @@ import PropTypes from 'prop-types'; import axios from 'axios'; import './SearchResults.css'; -import Video from './Video' +import Movie from './Movie' class SearchResults extends Component { - onClickSelect(e, video) { + onClickSelect(e, movie) { console.log(e); - console.log(video); - axios.post(`${this.props.url}/movies`, video) + console.log(movie); + axios.post(`${this.props.url}/movies`, movie) .then((response) => { console.log(response); - // video.id = response.data.card.id; - // cards.push({card: card}); - // this.setState({ - // cards, - // message: `Successfully added card` - // }); - // alert( `Successfully added card`) - // }) - // .catch((error) => { - // this.setState({ - // message: error.message, - // }); + this.setState({ + message: `Successfully added movie to Library` + }); + alert( `Successfully added ${movie.title} to Library`) + }) + .catch((error) => { + this.setState({ + message: error.message, + }); }); } render () { console.log(results); - const results = this.props.results.map((video, index) => { + const results = this.props.results.map((movie, index) => { return (
    -
    From 36372eb3dc5865df7b9b33502db456a413f25fe3 Mon Sep 17 00:00:00 2001 From: Nora Peters Date: Wed, 20 Jun 2018 22:37:30 -0700 Subject: [PATCH 19/21] implements StatusBar component, touching related subcomponents --- src/components/CustomerList.js | 6 +- src/components/RentalLibrary.js | 8 +-- src/components/SearchForm.js | 6 +- src/components/SearchResults.js | 12 ++-- src/components/StatusBar.css | 33 +++++++++ src/components/StatusBar.js | 38 +++++++++++ src/components/VideoStore.css | 10 +++ src/components/VideoStore.js | 115 +++++++++++++++++++------------- 8 files changed, 165 insertions(+), 63 deletions(-) create mode 100644 src/components/StatusBar.css create mode 100644 src/components/StatusBar.js diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index 3188cdb56..be985432a 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -14,19 +14,19 @@ class CustomerList extends Component { } componentDidMount() { + this.props.setStatus('Loading customers...', 'pending'); axios.get(`${this.props.url}/customers`) .then( (response) => { console.log( response.data ); this.setState({ customers: response.data }); + this.props.setStatus(`Loaded ${response.data.length} customers`, 'success'); } ) .catch( (error) => { + this.props.setStatus(`Failed to load customers: ${error.message}`, 'error'); console.log("got to the error"); console.log(error); - this.setState({ - error: error.message - }); } ); } diff --git a/src/components/RentalLibrary.js b/src/components/RentalLibrary.js index 75ef4e22f..6c0cc2a6b 100644 --- a/src/components/RentalLibrary.js +++ b/src/components/RentalLibrary.js @@ -14,20 +14,20 @@ class RentalLibrary extends Component { } componentDidMount() { + this.props.setStatus('Loading library...', 'pending'); axios.get(`${this.props.url}/movies`) .then( (response) => { + this.props.setStatus(`Successfully loaded ${response.data.length} movies from the rental library`, 'success'); console.log( response.data ); this.setState({ movies: response.data }); } ) .catch( (error) => { + this.props.setStatus(`Failed to load movies: ${error.message}`, 'success'); console.log("got to the error"); console.log(error); - this.setState({ - error: error.message - }); - } ); + }); } onClickSelect(e, movie) { diff --git a/src/components/SearchForm.js b/src/components/SearchForm.js index 43d45ea6b..c8d7f2dae 100644 --- a/src/components/SearchForm.js +++ b/src/components/SearchForm.js @@ -24,13 +24,16 @@ class SearchForm extends Component { onFormSubmit = (event) => { event.preventDefault(); + this.props.setStatus(`Searching for "${this.state.title}"...`, 'pending'); + console.log(`searching for ${this.state.title}`); axios.get(`${this.props.url}/movies?query=${this.state.title}`) .then((response) => { + this.props.setStatus(`Found ${response.data.length} results for ${this.state.title}`, 'success'); console.log(response.data); this.setState({results: response.data}); }) .catch((error) => { - this.setState({error: error.message}); + this.props.setStatus(`Could not search for "${this.state.title}": ${error.message}`, 'error'); }); } @@ -53,6 +56,7 @@ class SearchForm extends Component { ); diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js index b1903cae8..ba4ca8904 100644 --- a/src/components/SearchResults.js +++ b/src/components/SearchResults.js @@ -10,19 +10,17 @@ class SearchResults extends Component { onClickSelect(e, movie) { console.log(e); console.log(movie); + this.props.setStatus(`Adding movie "${movie.title}" to library...`, 'pending'); axios.post(`${this.props.url}/movies`, movie) .then((response) => { console.log(response); - this.setState({ - message: `Successfully added movie to Library` - }); - alert( `Successfully added ${movie.title} to Library`) + this.props.setStatus(`Successfully added "${movie.title}" to library`, 'success'); + alert(`Successfully added ${movie.title} to Library`) }) .catch((error) => { - this.setState({ - message: error.message, + this.props.setStatus( + `Could not add "${movie.title}" to library: ${error.message}`, 'error'); }); - }); } render () { diff --git a/src/components/StatusBar.css b/src/components/StatusBar.css new file mode 100644 index 000000000..b643ba02c --- /dev/null +++ b/src/components/StatusBar.css @@ -0,0 +1,33 @@ +.status-bar { + border: 1px solid black; + display: -ms-flexbox; + display: flex; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.status-bar--hide { + display: none; +} + +.status-bar--error { + background-color: rgb(245, 160, 160); +} + +.status-bar--success { + background-color: rgb(123, 249, 108); +} + +.status-bar--pending { + background-color: rgb(147, 255, 255) +} + +.status-bar__text { + margin: .4em; +} + +.status-bar__button { + background-color: inherit; + border: none; + cursor: pointer; +} diff --git a/src/components/StatusBar.js b/src/components/StatusBar.js new file mode 100644 index 000000000..9352fb074 --- /dev/null +++ b/src/components/StatusBar.js @@ -0,0 +1,38 @@ +import PropTypes from 'prop-types'; +import React from 'react'; + +import './StatusBar.css'; + +class StatusBar extends React.Component { + static propTypes = { + message: PropTypes.string.isRequired, + type: PropTypes.oneOf(['error', 'success', 'pending']), + clearStatus: PropTypes.func.isRequired, + } + + + + render() { + let className = "status-bar " + if (this.props.message.length === 0) { + className += "status-bar--hide" + } else { + className += `status-bar--${this.props.type}`; + } + return( +
    +

    + {this.props.message} +

    + +
    + ); + } +} + +export default StatusBar; diff --git a/src/components/VideoStore.css b/src/components/VideoStore.css index e1b6f4de8..a45aaf82f 100644 --- a/src/components/VideoStore.css +++ b/src/components/VideoStore.css @@ -4,3 +4,13 @@ li { justify-content: center; align-items: center; } + +.validation-errors-display { + text-align: center; + margin-bottom: 2em; +} + +.validation-errors-display__list { + list-style-type: none; + padding: 0; +} diff --git a/src/components/VideoStore.js b/src/components/VideoStore.js index 95e3786b3..a07a7603f 100644 --- a/src/components/VideoStore.js +++ b/src/components/VideoStore.js @@ -6,6 +6,7 @@ import Selections from './Selections' import RentalLibrary from './RentalLibrary' import './VideoStore.css'; import SearchForm from './SearchForm' +import StatusBar from './StatusBar' import axios from 'axios'; @@ -15,6 +16,9 @@ class VideoStore extends Component { this.state = { selectedMovie: null, selectedCustomer: null, + status: { + message: '', + } } } @@ -32,7 +36,17 @@ class VideoStore extends Component { }); } - resetSelection = (e) => { + setStatus = (message, type) => { + this.setState({ + status: { message, type } + }); + } + + clearStatus = () => { + this.setState({ status: { message: '' }}) + } + + resetSelection = () => { console.log("resetting select data"); this.setState({ selectedMovie: null, @@ -45,15 +59,16 @@ class VideoStore extends Component { let dueDate = new Date(); dueDate.setDate(dueDate.getDate() + 7); axios.post(`${this.props.url}/rentals/${this.state.selectedMovie.title}/check-out?customer_id=${this.state.selectedCustomer.id}&due_date=${dueDate}`) - .then( - (response) => { - console.log(response); + .then( (response) => { + this.setStatus( + `Successfully checked out ${this.state.selectedMovie.title} to ${this.state.selectedCustomer.name}`, + 'success'); }) .catch((error)=> { - console.log(error); - this.setState({ - message: error.message - }); + this.setStatus( + `Could not check out ${this.state.selectedMovie.title} to ${this.state.selectedCustomer.name}: ${error.message}`, + 'error'); + // console.log(error); }); } } @@ -61,68 +76,72 @@ class VideoStore extends Component { render() { const Home = () => (
    -

    Home

    +

    Home

    ); const Search = () => (
    - +
    ); const Library = () => (
    - +
    ); const Customers = () => (
    - +
    ); return ( -
    - ( -
    -
      -
    • - Home -
      • -
    • - Search -
      • -
    • - Library -
      • -
    • - Customers -
      • -
    -
    -
    - - - -
    -
    + ( +
    +
      +
    • Home
      • +
    • Search
      • +
    • Library
      • +
    • Customers
      • +
    +
    + +
    + + +
    +
    + +
    + )} /> + + + +
    - )} /> - - - - -
    ); } From 73262c94c4743338044797139d9ea54a77dc2c7a Mon Sep 17 00:00:00 2001 From: Nora Peters Date: Thu, 21 Jun 2018 23:38:58 -0700 Subject: [PATCH 20/21] implements FeaturedFilms component. Not ideal - duplication from RentalLibrary component --- src/components/CustomerList.js | 2 +- src/components/FeaturedFilms.css | 19 ++++++++++ src/components/FeaturedFilms.js | 61 ++++++++++++++++++++++++++++++++ src/components/Movie.js | 2 +- src/components/RentalLibrary.css | 18 ++++++++++ src/components/RentalLibrary.js | 17 +++++---- src/components/VideoStore.css | 9 +++++ src/components/VideoStore.js | 26 +++++++++----- 8 files changed, 136 insertions(+), 18 deletions(-) create mode 100644 src/components/FeaturedFilms.css create mode 100644 src/components/FeaturedFilms.js diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index be985432a..e89c15263 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -39,7 +39,7 @@ class CustomerList extends Component { return (
    -
    +
    ) }) diff --git a/src/components/FeaturedFilms.css b/src/components/FeaturedFilms.css new file mode 100644 index 000000000..cb75e5590 --- /dev/null +++ b/src/components/FeaturedFilms.css @@ -0,0 +1,19 @@ +h2 { + text-align: center; + margin-bottom: 50px; +} + +.features-container { + display: grid; + /*grid-template-columns: 1fr 1fr 1fr;*/ + /*grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));*/ + grid-template-columns: repeat(auto-fit, 186px); + grid-template-rows: auto; + justify-items: center; + justify-content: space-evenly; +} + +.grid-item { + justify-self: center; + align-items: center; +} diff --git a/src/components/FeaturedFilms.js b/src/components/FeaturedFilms.js new file mode 100644 index 000000000..a9d18d3a2 --- /dev/null +++ b/src/components/FeaturedFilms.js @@ -0,0 +1,61 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import axios from 'axios'; +import './FeaturedFilms.css'; +import Movie from './Movie' + + +class FeaturedFilms extends Component { + constructor() { + super(); + this.state = { + movies: [], + }; + } + + componentDidMount() { + axios.get(`${this.props.url}/movies`) + .then( (response) => { + console.log( response.data ); + this.setState({ + movies: response.data + }); + } ) + .catch( (error) => { + this.props.setStatus(`Failed to load movies: ${error.message}`, 'success'); + }); + } + + onClickSelect(e, movie) { + this.props.selectMovieCallback(movie); + e.preventDefault(); + } + + render () { + let movies = this.state.movies.map((movie, index) => { + return ( +
    +
    + +
    + +
    + ) + }) + movies = movies.sort(() => .5 - Math.random()); + movies = movies.slice(0,3); + return ( +
    + {movies} +
    + ); + } +} + +FeaturedFilms.propTypes = { + // url: PropTypes.string.isRequired, + // selectMovieCallback: PropTypes.func.isRequired, +}; + +export default FeaturedFilms; diff --git a/src/components/Movie.js b/src/components/Movie.js index a15605063..b97c322bb 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -6,10 +6,10 @@ const Movie = (props) => { return (
    +
    {props.movie.title}/
    {props.movie.title}
    {props.movie.overview}
    {props.movie.release_date}
    -
    {props.movie.title}/
    ); } diff --git a/src/components/RentalLibrary.css b/src/components/RentalLibrary.css index e69de29bb..5b409abba 100644 --- a/src/components/RentalLibrary.css +++ b/src/components/RentalLibrary.css @@ -0,0 +1,18 @@ +button { + padding: 5px; + margin: 5px; +} + +.grid-container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); + /*grid-template-columns: 1fr 1fr 1fr (auto-fit, 186px);*/ + /*grid-template-columns: repeat(auto-fit, 186px);*/ + grid-column-gap: 25px; + grid-row-gap: 25px; +} + +.grid-item { + justify-self: center; + align-items: center; +} diff --git a/src/components/RentalLibrary.js b/src/components/RentalLibrary.js index 6c0cc2a6b..d905cdea6 100644 --- a/src/components/RentalLibrary.js +++ b/src/components/RentalLibrary.js @@ -36,18 +36,21 @@ class RentalLibrary extends Component { } render () { - const movies = this.state.movies.map((movie, index) => { + let movies = this.state.movies.map((movie, index) => { return ( -
    - -
    +
    +
    + +
    +
    ) }) return ( -
    - {movies} -
    +
    + {movies} +
    ); } } diff --git a/src/components/VideoStore.css b/src/components/VideoStore.css index a45aaf82f..0f1d4abb5 100644 --- a/src/components/VideoStore.css +++ b/src/components/VideoStore.css @@ -14,3 +14,12 @@ li { list-style-type: none; padding: 0; } + +.grid-container { + display: grid; + /*grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));*/ + grid-template-columns: 1fr 1fr 1fr 1fr (auto-fit, 186px); + /*grid-template-columns: repeat(auto-fit, 186px);*/ + grid-column-gap: 25px; + grid-row-gap: 25px; +} diff --git a/src/components/VideoStore.js b/src/components/VideoStore.js index a07a7603f..f740a28f4 100644 --- a/src/components/VideoStore.js +++ b/src/components/VideoStore.js @@ -1,12 +1,13 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; -import CustomerList from './CustomerList' -import Selections from './Selections' -import RentalLibrary from './RentalLibrary' +import CustomerList from './CustomerList'; +import Selections from './Selections'; +import RentalLibrary from './RentalLibrary'; import './VideoStore.css'; -import SearchForm from './SearchForm' -import StatusBar from './StatusBar' +import SearchForm from './SearchForm'; +import StatusBar from './StatusBar'; +import FeaturedFilms from './FeaturedFilms'; import axios from 'axios'; @@ -75,9 +76,15 @@ class VideoStore extends Component { render() { const Home = () => ( -
    -

    Home

    -
    +
    +

    Featured Films

    + +
    ); const Search = () => ( @@ -124,7 +131,7 @@ class VideoStore extends Component {
    ); From 44b93be155858f916b82a8022e5502382ba96f5e Mon Sep 17 00:00:00 2001 From: Nora Peters Date: Fri, 22 Jun 2018 14:48:02 -0700 Subject: [PATCH 21/21] super cool styling --- package-lock.json | 33 ++++++++++++++++++++++++++++++ package.json | 6 +++++- src/App.css | 4 ++++ src/components/VideoStore.css | 38 +++++++++++++++++++++++++++++++++++ src/components/VideoStore.js | 28 ++++++++++++++++++++------ 5 files changed, 102 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index cdd05bc6b..140e58626 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8845,6 +8845,31 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-4.0.0.tgz", "integrity": "sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw==" }, + "react-marquee": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/react-marquee/-/react-marquee-1.0.0.tgz", + "integrity": "sha512-AXHGGWdK+BBhKln/ysXD1CLV6pdv9LDm0beoyQ+RYI8FO2PzqwGqDYrS6ssH3TvYytiLCxY0pIxUGGXNn1f/gg==", + "requires": { + "prop-types": "15.6.1" + } + }, + "react-marquee-double": { + "version": "0.1.8", + "resolved": "https://registry.npmjs.org/react-marquee-double/-/react-marquee-double-0.1.8.tgz", + "integrity": "sha512-qRdZ8q6EZg6y8GI50bshjcTTD5J7omvNnkxF6HwJK1CGkNBvNLchQUjA1MQ7c37GUv1Oh6ACwoDJ4o++rvBrsg==", + "requires": { + "prop-types": "15.6.1" + } + }, + "react-meta-tags": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/react-meta-tags/-/react-meta-tags-0.4.1.tgz", + "integrity": "sha512-bY5PcuFsoAc4HHYOMcMIOgQgPG7gXBg/5pDrPsPQozYQrFqOCpQId5UUTrq9BK2jvKWDgD30Du3AgWnSKa2jSA==", + "requires": { + "babel-runtime": "6.26.0", + "prop-types": "15.6.1" + } + }, "react-router": { "version": "4.3.1", "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz", @@ -8933,6 +8958,14 @@ } } }, + "react-text-marquee": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/react-text-marquee/-/react-text-marquee-1.0.1.tgz", + "integrity": "sha1-b6wWpozu67iylAMIjkVBzdbtfhM=", + "requires": { + "prop-types": "15.6.1" + } + }, "read-pkg": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz", diff --git a/package.json b/package.json index d170d92c8..22b56aa71 100644 --- a/package.json +++ b/package.json @@ -6,8 +6,12 @@ "axios": "^0.18.0", "react": "^16.4.1", "react-dom": "^16.4.1", + "react-marquee": "^1.0.0", + "react-marquee-double": "^0.1.8", + "react-meta-tags": "^0.4.1", "react-router-dom": "^4.3.1", - "react-scripts": "1.1.4" + "react-scripts": "1.1.4", + "react-text-marquee": "^1.0.1" }, "scripts": { "start": "react-scripts start", diff --git a/src/App.css b/src/App.css index c5c6e8a68..d2112b91f 100644 --- a/src/App.css +++ b/src/App.css @@ -26,3 +26,7 @@ from { transform: rotate(0deg); } to { transform: rotate(360deg); } } + +body { + background-color: #2067B2; +} diff --git a/src/components/VideoStore.css b/src/components/VideoStore.css index 0f1d4abb5..056a7a3b7 100644 --- a/src/components/VideoStore.css +++ b/src/components/VideoStore.css @@ -1,3 +1,6 @@ +@import url('https://fonts.googleapis.com/css?family=Monoton'); +@import url('https://fonts.googleapis.com/css?family=Press+Start+2P'); + li { display: flex; flex-direction: row; @@ -23,3 +26,38 @@ li { grid-column-gap: 25px; grid-row-gap: 25px; } + +.flex-container { + display: flex; + justify-content: space-between; +} + +.flex-container h1 { + font-family: 'Monoton', cursive; + margin-bottom: 0; +} + +.marquee { + font-family: 'Press Start 2P', cursive; +} + +/*img, ul, li { + display: flex; +}*/ + +.nav-links { + color: #CBE9EB; + text-shadow: orange 0.1em 0.1em 0.2em; + font-weight: bold; +} + +ul { + display: flex; + flex-direction: column; + padding-left: 0; +} + +li { + padding: 5px; + justify-content: center; +} diff --git a/src/components/VideoStore.js b/src/components/VideoStore.js index f740a28f4..3440abbf6 100644 --- a/src/components/VideoStore.js +++ b/src/components/VideoStore.js @@ -9,6 +9,7 @@ import SearchForm from './SearchForm'; import StatusBar from './StatusBar'; import FeaturedFilms from './FeaturedFilms'; import axios from 'axios'; +import MarqueeDouble from 'react-marquee-double'; class VideoStore extends Component { @@ -121,12 +122,27 @@ class VideoStore extends Component {
    (
    -
      -
    • Home
      • -
    • Search
      • -
    • Library
      • -
    • Customers
      • -
    + {this.marquee = ref}} + step={1} interval={20} + autoStart={true} + direction={'left'} + delay={1000} + onStart={()=>{this.marquee.delay()}}> +

    _______________________________Welcome Online_______________________________

    +     +
    + +
      +

    • Video King

      • +

    • Video rentals on the World Wide Web

      • +
    • Home
      • +
    • Search
      • +
    • Library
      • +
    • Customers
      • +
    + +