From ba7391b76637f6cc9d4f4970c3d3a6afaabe4a05 Mon Sep 17 00:00:00 2001 From: Maja Graonic Date: Mon, 18 Jun 2018 15:25:59 -0700 Subject: [PATCH 01/47] one route working --- package-lock.json | 72 +++++++++++++++++++++++++++++++++++++ package.json | 3 +- src/App.js | 28 ++++++++++++--- src/components/Customers.js | 5 +++ src/components/Movies.js | 12 +++++++ src/components/Search.js | 5 +++ 6 files changed, 119 insertions(+), 6 deletions(-) create mode 100644 src/components/Customers.js create mode 100644 src/components/Movies.js create mode 100644 src/components/Search.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..4cecc23db 100644 --- a/src/App.js +++ b/src/App.js @@ -1,18 +1,36 @@ import React, { Component } from 'react'; +import {BrowserRouter as Router, Route, Link } from 'react-router-dom'; +import Movies from './components/Movies'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { + return (
- logo -

Welcome to React

+

Welcome to Our Broke Ass App

-

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

+ +
+
    +
  • + Movies +
    • + +
  • + Customers +
    • + +
  • + Search +
    • + +
+ +
+
); } diff --git a/src/components/Customers.js b/src/components/Customers.js new file mode 100644 index 000000000..9b531add9 --- /dev/null +++ b/src/components/Customers.js @@ -0,0 +1,5 @@ +import React, { Component } from 'react'; +import {BrowserRouter as Router, Route, Link } from 'react-router-dom'; + + +export default Customers; diff --git a/src/components/Movies.js b/src/components/Movies.js new file mode 100644 index 000000000..7481f2599 --- /dev/null +++ b/src/components/Movies.js @@ -0,0 +1,12 @@ +import React, { Component } from 'react'; +import {BrowserRouter as Router, Route, Link } from 'react-router-dom'; + +class Movies extends Component { + render(){ + return( +

Your f**ing movies

+ ) + } +} + +export default Movies; diff --git a/src/components/Search.js b/src/components/Search.js new file mode 100644 index 000000000..010256a19 --- /dev/null +++ b/src/components/Search.js @@ -0,0 +1,5 @@ +import React, { Component } from 'react'; +import {BrowserRouter as Router, Route, Link } from 'react-router-dom'; + + +export default Search; From 4df37618346f150530c360114548071c27356f9b Mon Sep 17 00:00:00 2001 From: Maja Graonic Date: Mon, 18 Jun 2018 16:16:00 -0700 Subject: [PATCH 02/47] customer list and customer components created; can send get request and parse results --- package-lock.json | 9 +++++++ package.json | 1 + src/App.js | 4 +++ src/components/Customer.js | 16 +++++++++++ src/components/CustomerList.js | 49 ++++++++++++++++++++++++++++++++++ src/components/Customers.js | 5 ---- src/components/Search.js | 7 +++++ 7 files changed, 86 insertions(+), 5 deletions(-) create mode 100644 src/components/Customer.js create mode 100644 src/components/CustomerList.js delete mode 100644 src/components/Customers.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 4cecc23db..f45900600 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,8 @@ import React, { Component } from 'react'; import {BrowserRouter as Router, Route, Link } from 'react-router-dom'; import Movies from './components/Movies'; +import CustomerList from './components/CustomerList'; +import Search from './components/Search'; import logo from './logo.svg'; import './App.css'; @@ -29,6 +31,8 @@ class App extends Component { + + diff --git a/src/components/Customer.js b/src/components/Customer.js new file mode 100644 index 000000000..1a1f2895b --- /dev/null +++ b/src/components/Customer.js @@ -0,0 +1,16 @@ +import React, { Component } from 'react'; +import {BrowserRouter as Router, Route, Link } from 'react-router-dom'; + + +class Customer extends Component { + render(){ + return( +
  • + {this.props.id} + {this.props.customerName} +
    • + ); + } +} + +export default Customer; diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js new file mode 100644 index 000000000..f9fdae692 --- /dev/null +++ b/src/components/CustomerList.js @@ -0,0 +1,49 @@ +import React, { Component } from 'react'; +import {BrowserRouter as Router, Route, Link } from 'react-router-dom'; +import Customer from './Customer'; +import axios from 'axios'; + +const URL = "http://localhost:3300/customers" + +class Customers extends Component { + constructor(){ + super(); + + this.state = { + customers: [] + }; + } + + componentDidMount(){ + axios.get(URL) + .then((response)=>{ + this.setState({customers: response.data}); + }) + .catch((error)=>{ + console.log("there was an error"); + }); + }; + + + render(){ +// map response to customer list +console.log("Logging customer list state"); +console.log(this.state.customers); +const customers = this.state.customers.map((customer, index)=>{ + return +}); + + return( +
    +

    Hide your customers, hide your wife

    +
      + { customers } +
    + +
    + ); + } +} + + +export default Customers; diff --git a/src/components/Customers.js b/src/components/Customers.js deleted file mode 100644 index 9b531add9..000000000 --- a/src/components/Customers.js +++ /dev/null @@ -1,5 +0,0 @@ -import React, { Component } from 'react'; -import {BrowserRouter as Router, Route, Link } from 'react-router-dom'; - - -export default Customers; diff --git a/src/components/Search.js b/src/components/Search.js index 010256a19..edb7eabd3 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -1,5 +1,12 @@ import React, { Component } from 'react'; import {BrowserRouter as Router, Route, Link } from 'react-router-dom'; +class Search extends Component { + render(){ + return( +

    Look Angela, it is working!

    + ) + } +} export default Search; From 1f6259456cd055d0e6c9f19561018f76a3216971 Mon Sep 17 00:00:00 2001 From: knockknockhusthere Date: Mon, 18 Jun 2018 16:42:50 -0700 Subject: [PATCH 03/47] Created MovieLibrary and Movie component, wrote get call to rails API for library list --- src/App.js | 6 ++-- src/components/Customer.js | 2 -- src/components/CustomerList.js | 4 +-- src/components/{Movies.js => Movie.js} | 2 +- src/components/MovieLibrary.js | 42 ++++++++++++++++++++++++++ 5 files changed, 48 insertions(+), 8 deletions(-) rename src/components/{Movies.js => Movie.js} (84%) create mode 100644 src/components/MovieLibrary.js diff --git a/src/App.js b/src/App.js index f45900600..96df582f9 100644 --- a/src/App.js +++ b/src/App.js @@ -1,11 +1,11 @@ import React, { Component } from 'react'; import {BrowserRouter as Router, Route, Link } from 'react-router-dom'; -import Movies from './components/Movies'; +import MovieLibrary from './components/MovieLibrary'; import CustomerList from './components/CustomerList'; import Search from './components/Search'; -import logo from './logo.svg'; import './App.css'; + class App extends Component { render() { @@ -30,7 +30,7 @@ class App extends Component { - + diff --git a/src/components/Customer.js b/src/components/Customer.js index 1a1f2895b..b50a47535 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -1,6 +1,4 @@ import React, { Component } from 'react'; -import {BrowserRouter as Router, Route, Link } from 'react-router-dom'; - class Customer extends Component { render(){ diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index f9fdae692..2ac6d07bd 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -3,7 +3,7 @@ import {BrowserRouter as Router, Route, Link } from 'react-router-dom'; import Customer from './Customer'; import axios from 'axios'; -const URL = "http://localhost:3300/customers" +const CUST_URL = "http://localhost:3300/customers"; class Customers extends Component { constructor(){ @@ -15,7 +15,7 @@ class Customers extends Component { } componentDidMount(){ - axios.get(URL) + axios.get(CUST_URL) .then((response)=>{ this.setState({customers: response.data}); }) diff --git a/src/components/Movies.js b/src/components/Movie.js similarity index 84% rename from src/components/Movies.js rename to src/components/Movie.js index 7481f2599..4c96f6dc5 100644 --- a/src/components/Movies.js +++ b/src/components/Movie.js @@ -4,7 +4,7 @@ import {BrowserRouter as Router, Route, Link } from 'react-router-dom'; class Movies extends Component { render(){ return( -

    Your f**ing movies

    +
  • {this.props.movieTitle}
    • ) } } diff --git a/src/components/MovieLibrary.js b/src/components/MovieLibrary.js new file mode 100644 index 000000000..36997e93d --- /dev/null +++ b/src/components/MovieLibrary.js @@ -0,0 +1,42 @@ +import React, { Component } from 'react'; +import axios from 'axios'; +import Movie from './Movie'; + +const MOVIES_URL = "http://localhost:3300/movies"; +class MovieLibrary extends Component { + + constructor(){ + super(); + + this.state = { + movies: [] + }; + } + + componentDidMount(){ + axios.get(MOVIES_URL) + .then((response)=>{ + console.log(response.data); + this.setState({movies: response.data}); + }) + .catch((error)=>{ + console.log("there was an error"); + }); + }; + + render() { + + const movies = this.state.movies.map((movie,index)=>{ + return + }) + return( +
      + {movies} +
    + ); + } +} +export default MovieLibrary; From 855afb65a86dfaf04adf14e2b65517977a4ed20c Mon Sep 17 00:00:00 2001 From: knockknockhusthere Date: Mon, 18 Jun 2018 16:51:35 -0700 Subject: [PATCH 04/47] created a search bar form - not yet rendering --- src/components/SearchBar.js | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 src/components/SearchBar.js diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js new file mode 100644 index 000000000..1d751c2ff --- /dev/null +++ b/src/components/SearchBar.js @@ -0,0 +1,31 @@ +import React, { Component } from 'react'; +import axios from 'axios'; + +class SearchBar extends Component { + + constructor(){ + super(); + + this.state = { + query: "" + }; + } + + render() { + + return( +
    + + + +
    + ); + } +} + +export default SearchBar; From 20b1dd6f003ec45e251b95af4a2ea475e62f7eb2 Mon Sep 17 00:00:00 2001 From: knockknockhusthere Date: Tue, 19 Jun 2018 10:03:37 -0700 Subject: [PATCH 05/47] added search bar, changes state on input --- src/components/Search.js | 3 ++- src/components/SearchBar.js | 24 ++++++++++++++++++------ 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/src/components/Search.js b/src/components/Search.js index edb7eabd3..0d1215434 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -1,10 +1,11 @@ import React, { Component } from 'react'; import {BrowserRouter as Router, Route, Link } from 'react-router-dom'; +import SearchBar from './SearchBar'; class Search extends Component { render(){ return( -

    Look Angela, it is working!

    + ) } } diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js index 1d751c2ff..963751294 100644 --- a/src/components/SearchBar.js +++ b/src/components/SearchBar.js @@ -11,19 +11,31 @@ class SearchBar extends Component { }; } + onInputChange = (event) => { + this.setState({query: event.target.value}) + console.log(this.state); + } + + onFormSubmit = (event) => { + event.preventDefault(); + + } + render() { return( -
    + - + type='text' + name="query" + value={this.state.query} + onChange={this.onInputChange}/> +
    + ); } } From 05988180f0046cc2cef44e7b65207e50792a0c35 Mon Sep 17 00:00:00 2001 From: knockknockhusthere Date: Tue, 19 Jun 2018 10:28:23 -0700 Subject: [PATCH 06/47] added search bar functionality, movies load after query submitted --- src/components/MovieLibrary.js | 2 +- src/components/Search.js | 41 +++++++++++++++++++++++++++++++++- src/components/SearchBar.js | 7 +++++- 3 files changed, 47 insertions(+), 3 deletions(-) diff --git a/src/components/MovieLibrary.js b/src/components/MovieLibrary.js index 36997e93d..8782c2d2e 100644 --- a/src/components/MovieLibrary.js +++ b/src/components/MovieLibrary.js @@ -34,7 +34,7 @@ class MovieLibrary extends Component { }) return(
      - {movies} + {movies}
    ); } diff --git a/src/components/Search.js b/src/components/Search.js index 0d1215434..791ed8250 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -1,11 +1,50 @@ import React, { Component } from 'react'; import {BrowserRouter as Router, Route, Link } from 'react-router-dom'; import SearchBar from './SearchBar'; +import axios from 'axios'; +import Movie from './Movie'; + +const DB_URL = "http://localhost:3300/movies?query="; class Search extends Component { + constructor(){ + super(); + + this.state = { + dbMovies: [] + }; + } + + externalQuery = (query) => { + axios.get(DB_URL+query) + .then((response) => { + console.log("success query"); + console.log(response.data); + + this.setState({ + dbMovies: response.data + }) + }) + .catch((error) => { + console.log("error query"); + }); + } + render(){ + const dbMovies = this.state.dbMovies.map((movie, index)=>{ + return + }) + return( - +
    + +
      + {dbMovies} +
    +
    ) } } diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js index 963751294..7796ffba2 100644 --- a/src/components/SearchBar.js +++ b/src/components/SearchBar.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import axios from 'axios'; + class SearchBar extends Component { @@ -19,6 +19,11 @@ class SearchBar extends Component { onFormSubmit = (event) => { event.preventDefault(); + this.props.externalDBQueryCallback(this.state.query); + + this.setState( { + query: "" + }) } render() { From 9671f7427dae88cd780886d394d04775dfe1f1a7 Mon Sep 17 00:00:00 2001 From: knockknockhusthere Date: Tue, 19 Jun 2018 10:59:12 -0700 Subject: [PATCH 07/47] built out movie component, with button --- src/components/Movie.js | 8 +++++++- src/components/MovieLibrary.js | 1 + src/components/Search.js | 7 ++++--- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/components/Movie.js b/src/components/Movie.js index 4c96f6dc5..13b2416b3 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -4,7 +4,13 @@ import {BrowserRouter as Router, Route, Link } from 'react-router-dom'; class Movies extends Component { render(){ return( -
  • {this.props.movieTitle}
    • +
    + {`${this.props.movieTitle}\'s +

    {this.props.movieTitle}

    + +

    {this.props.overview}

    + +
    ) } } diff --git a/src/components/MovieLibrary.js b/src/components/MovieLibrary.js index 8782c2d2e..6790011d0 100644 --- a/src/components/MovieLibrary.js +++ b/src/components/MovieLibrary.js @@ -30,6 +30,7 @@ class MovieLibrary extends Component { return }) return( diff --git a/src/components/Search.js b/src/components/Search.js index 791ed8250..d7b083f53 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -35,15 +35,16 @@ class Search extends Component { return }) return(
    -
      - {dbMovies} -
    + + {dbMovies}
    ) } From 396592b1086553f5c60baa80863ad703f77f919d Mon Sep 17 00:00:00 2001 From: Maja Graonic Date: Tue, 19 Jun 2018 13:59:53 -0700 Subject: [PATCH 08/47] can add movie from search to api local db --- src/components/Movie.js | 15 ++++++++++++++- src/components/MovieLibrary.js | 1 + src/components/Search.js | 26 ++++++++++++++++++++++---- src/components/SearchBar.js | 1 - 4 files changed, 37 insertions(+), 6 deletions(-) diff --git a/src/components/Movie.js b/src/components/Movie.js index 13b2416b3..4f0935156 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -2,12 +2,25 @@ import React, { Component } from 'react'; import {BrowserRouter as Router, Route, Link } from 'react-router-dom'; class Movies extends Component { + + buttonClick = () => { + let movie = { + title: this.props.movieTitle, + overview: this.props.overview, + release_date: this.props.releaseDate, + image_url: this.props.image, + inventory: 10 + } + console.log(`movie button clicked ${movie}`); + + this.props.callBack(movie); + } render(){ return(
    {`${this.props.movieTitle}\'s

    {this.props.movieTitle}

    - +

    {this.props.overview}

    diff --git a/src/components/MovieLibrary.js b/src/components/MovieLibrary.js index 6790011d0..bd8ef01e2 100644 --- a/src/components/MovieLibrary.js +++ b/src/components/MovieLibrary.js @@ -30,6 +30,7 @@ class MovieLibrary extends Component { return }) diff --git a/src/components/Search.js b/src/components/Search.js index d7b083f53..ded0f64b8 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -5,6 +5,7 @@ import axios from 'axios'; import Movie from './Movie'; const DB_URL = "http://localhost:3300/movies?query="; +const API_URL = "http://localhost:3300/movies"; class Search extends Component { constructor(){ @@ -15,12 +16,26 @@ class Search extends Component { }; } + addToLibrary = (movie) => { + // grab movie from state (that exists becuse of search) + // create movie object + // pass to axios with POST URL + movie object we just made + console.log("add to library button clicked"); + console.log(movie); + + axios.post(API_URL, movie) + .then((response)=>{ + console.log(API_URL); + console.log(`successfully posted ${response.data}`); + }) + .catch((error)=>{ + console.log(`there was an error: ${error.message}`); + }); + } + externalQuery = (query) => { axios.get(DB_URL+query) .then((response) => { - console.log("success query"); - console.log(response.data); - this.setState({ dbMovies: response.data }) @@ -35,9 +50,12 @@ class Search extends Component { return + id={movie.external_id} + index={index} + callBack={this.addToLibrary} /> }) return( diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js index 7796ffba2..ceb2d17b6 100644 --- a/src/components/SearchBar.js +++ b/src/components/SearchBar.js @@ -13,7 +13,6 @@ class SearchBar extends Component { onInputChange = (event) => { this.setState({query: event.target.value}) - console.log(this.state); } onFormSubmit = (event) => { From 8d843e81fec3f848dbe0cc279797af0a7d55c658 Mon Sep 17 00:00:00 2001 From: Maja Graonic Date: Tue, 19 Jun 2018 14:32:43 -0700 Subject: [PATCH 09/47] started rental info component --- src/App.js | 3 +++ src/components/RentalInfo.js | 17 +++++++++++++++++ 2 files changed, 20 insertions(+) create mode 100644 src/components/RentalInfo.js diff --git a/src/App.js b/src/App.js index 96df582f9..2b4cc307b 100644 --- a/src/App.js +++ b/src/App.js @@ -28,6 +28,9 @@ class App extends Component {
  • Search
    • +
  • + +
    • diff --git a/src/components/RentalInfo.js b/src/components/RentalInfo.js new file mode 100644 index 000000000..18a9a8209 --- /dev/null +++ b/src/components/RentalInfo.js @@ -0,0 +1,17 @@ +import React, { Component } from 'react'; +import {BrowserRouter as Router, Route, Link } from 'react-router-dom'; +import axios from 'axios'; + +class RentalInfo extends Component { + render(){ + return( +
    +

    selected movie:

    +

    selected customer:

    +
    + ); + } +} + + +export default RentalInfo; From f8214ccbe036cdebd5bd577cd5b1c2cd574a8590 Mon Sep 17 00:00:00 2001 From: knockknockhusthere Date: Tue, 19 Jun 2018 14:45:52 -0700 Subject: [PATCH 10/47] html for rentalinfo component --- src/App.js | 1 + src/components/Movie.js | 18 ++++-------------- src/components/RentalInfo.js | 19 +++++++++++++++++-- 3 files changed, 22 insertions(+), 16 deletions(-) diff --git a/src/App.js b/src/App.js index 2b4cc307b..14e6b40c8 100644 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,7 @@ import MovieLibrary from './components/MovieLibrary'; import CustomerList from './components/CustomerList'; import Search from './components/Search'; import './App.css'; +import RentalInfo from "./components/RentalInfo"; class App extends Component { diff --git a/src/components/Movie.js b/src/components/Movie.js index 4f0935156..190654b38 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -2,28 +2,18 @@ import React, { Component } from 'react'; import {BrowserRouter as Router, Route, Link } from 'react-router-dom'; class Movies extends Component { - - buttonClick = () => { - let movie = { - title: this.props.movieTitle, - overview: this.props.overview, - release_date: this.props.releaseDate, - image_url: this.props.image, - inventory: 10 - } - console.log(`movie button clicked ${movie}`); - - this.props.callBack(movie); - } render(){ + return(
    {`${this.props.movieTitle}\'s

    {this.props.movieTitle}

    - +

    {this.props.overview}

    + ) } } diff --git a/src/components/RentalInfo.js b/src/components/RentalInfo.js index 18a9a8209..edc970e06 100644 --- a/src/components/RentalInfo.js +++ b/src/components/RentalInfo.js @@ -3,11 +3,26 @@ import {BrowserRouter as Router, Route, Link } from 'react-router-dom'; import axios from 'axios'; class RentalInfo extends Component { + constructor() { + super(); + + this.state = { + movie: { + title: "nothing" + + }, + customer: { + id: 213874614894, + name: "fake name" + } + } + } render(){ + console.log(this.state.movie); return(
    -

    selected movie:

    -

    selected customer:

    +

    selected movie: {this.state.movie.title}

    +

    selected customer: {this.state.customer.name}

    ); } From 93f4487bac5389e42cbe7323b46d601692e59046 Mon Sep 17 00:00:00 2001 From: Maja Graonic Date: Tue, 19 Jun 2018 14:48:20 -0700 Subject: [PATCH 11/47] testing if changes go up --- src/components/Movie.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Movie.js b/src/components/Movie.js index 4f0935156..e61e6a2b1 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import {BrowserRouter as Router, Route, Link } from 'react-router-dom'; class Movies extends Component { - +// this is a change buttonClick = () => { let movie = { title: this.props.movieTitle, From bb283500a304f2faa74e3e7076c424c64ddd4d34 Mon Sep 17 00:00:00 2001 From: Maja Graonic Date: Tue, 19 Jun 2018 14:53:33 -0700 Subject: [PATCH 12/47] recovering form a change --- src/components/Movie.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Movie.js b/src/components/Movie.js index 0b3cc59be..4224fee6d 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -21,8 +21,7 @@ class Movies extends Component {
    {`${this.props.movieTitle}\'s

    {this.props.movieTitle}

    - +

    {this.props.overview}

    From a5a2a98348caa325fc9a5c26a7b62afc9c7114aa Mon Sep 17 00:00:00 2001 From: knockknockhusthere Date: Tue, 19 Jun 2018 16:12:42 -0700 Subject: [PATCH 13/47] moved rentalinfo into app.js render components differently --- src/App.js | 39 +++++++++++++++++++++++++++++------- src/components/Movie.js | 1 + src/components/RentalInfo.js | 13 ------------ 3 files changed, 33 insertions(+), 20 deletions(-) diff --git a/src/App.js b/src/App.js index 14e6b40c8..4f43dc81a 100644 --- a/src/App.js +++ b/src/App.js @@ -4,10 +4,23 @@ import MovieLibrary from './components/MovieLibrary'; import CustomerList from './components/CustomerList'; import Search from './components/Search'; import './App.css'; -import RentalInfo from "./components/RentalInfo"; - class App extends Component { + + constructor() { + super(); + + this.state = { + movie: { + title: "nothing" + }, + customer: { + id: 213874614894, + name: "fake name" + } + } + } + render() { return ( @@ -18,6 +31,13 @@ class App extends Component {
      +
    • +
      +

      selected movie: {this.state.movie.title}

      +

      selected customer: {this.state.customer.name}

      +
      +
      • +
    • Movies
      • @@ -29,13 +49,18 @@ class App extends Component {
    • Search
      • -
    • - -
    - - + { + return () + }} /> + + { + return () + }} /> +
    diff --git a/src/components/Movie.js b/src/components/Movie.js index 4224fee6d..a0beefede 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -11,6 +11,7 @@ class Movies extends Component { image_url: this.props.image, inventory: 10 } + console.log(`movie button clicked ${movie}`); this.props.callBack(movie); diff --git a/src/components/RentalInfo.js b/src/components/RentalInfo.js index edc970e06..5dba0a394 100644 --- a/src/components/RentalInfo.js +++ b/src/components/RentalInfo.js @@ -3,20 +3,7 @@ import {BrowserRouter as Router, Route, Link } from 'react-router-dom'; import axios from 'axios'; class RentalInfo extends Component { - constructor() { - super(); - this.state = { - movie: { - title: "nothing" - - }, - customer: { - id: 213874614894, - name: "fake name" - } - } - } render(){ console.log(this.state.movie); return( From 4bd8707fe095102b92d11c206b2fd12b6723a245 Mon Sep 17 00:00:00 2001 From: Maja Graonic Date: Tue, 19 Jun 2018 18:37:00 -0700 Subject: [PATCH 14/47] function skeleton in app component --- src/App.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/App.js b/src/App.js index 4f43dc81a..b4f5a19a8 100644 --- a/src/App.js +++ b/src/App.js @@ -21,6 +21,15 @@ class App extends Component { } } + // function that changes state + updateMovie = () => { + + } + + updateCustomer = () => { + + } + render() { return ( From c240128890de5cb68a9d7e39538f2fec36295230 Mon Sep 17 00:00:00 2001 From: Maja Graonic Date: Tue, 19 Jun 2018 19:16:14 -0700 Subject: [PATCH 15/47] can update app state with movie name --- src/App.js | 83 ++++++++++++++++------------------ src/components/Movie.js | 2 - src/components/MovieLibrary.js | 4 +- 3 files changed, 42 insertions(+), 47 deletions(-) diff --git a/src/App.js b/src/App.js index b4f5a19a8..72976f498 100644 --- a/src/App.js +++ b/src/App.js @@ -11,23 +11,20 @@ class App extends Component { super(); this.state = { - movie: { - title: "nothing" - }, - customer: { - id: 213874614894, - name: "fake name" - } + title: "nothing", + customer_id: 0, } } // function that changes state - updateMovie = () => { - + updateMovie = (banana) => { + let updatedState = {}; + updatedState["title"] = banana.title; + this.setState(updatedState); } updateCustomer = () => { - + } render() { @@ -38,44 +35,44 @@ class App extends Component {

    Welcome to Our Broke Ass App

    -
    -
      -
    • -
      -

      selected movie: {this.state.movie.title}

      -

      selected customer: {this.state.customer.name}

      -
      -
      • +
      +
        +
      • +
        +

        selected movie: {this.state.title}

        +

        selected customer id: {this.state.customer_id}

        +
        +
        • -
      • - Movies -
        • +
      • + Movies +
        • -
      • - Customers -
        • +
      • + Customers +
        • -
      • - Search -
        • +
      • + Search +
        • -
      - { - return () - }} /> +
    + { + return () + }} /> - { - return () - }} /> + { + return () + }} /> - + +
    +     - - - ); - } -} + ); + } + } -export default App; + export default App; diff --git a/src/components/Movie.js b/src/components/Movie.js index a0beefede..308429717 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -12,8 +12,6 @@ class Movies extends Component { inventory: 10 } - console.log(`movie button clicked ${movie}`); - this.props.callBack(movie); } render(){ diff --git a/src/components/MovieLibrary.js b/src/components/MovieLibrary.js index bd8ef01e2..59a264e3b 100644 --- a/src/components/MovieLibrary.js +++ b/src/components/MovieLibrary.js @@ -16,7 +16,6 @@ class MovieLibrary extends Component { componentDidMount(){ axios.get(MOVIES_URL) .then((response)=>{ - console.log(response.data); this.setState({movies: response.data}); }) .catch((error)=>{ @@ -32,7 +31,8 @@ class MovieLibrary extends Component { overview={movie.overview} image={movie.image_url} buttonText="Select for Rental" - id={movie.id} /> + id={movie.id} + callBack={this.props.callBack} /> }) return(
      From c911e181139019b13c92468198ea6cef520064e7 Mon Sep 17 00:00:00 2001 From: knockknockhusthere Date: Tue, 19 Jun 2018 20:10:35 -0700 Subject: [PATCH 16/47] moved selected customer and movie into app.js --- src/App.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index 4f43dc81a..83511bf14 100644 --- a/src/App.js +++ b/src/App.js @@ -21,6 +21,11 @@ class App extends Component { } } + updateRentalState = (event) => { + console.log(event.target); + console.log("update rental state reached"); + } + render() { return ( @@ -32,10 +37,7 @@ class App extends Component {
      • -
        -

        selected movie: {this.state.movie.title}

        -

        selected customer: {this.state.customer.name}

        -
        +
      • @@ -53,12 +55,12 @@ class App extends Component {
      { - return () + return () }} /> { - return () + return () }} /> From 88b4090fa208bfdfe9901a46052f49e19bf95fcd Mon Sep 17 00:00:00 2001 From: Maja Graonic Date: Wed, 20 Jun 2018 12:28:48 -0700 Subject: [PATCH 17/47] can check out a rental --- src/App.js | 36 +++++++++++++++++++++++++++++++--- src/components/Customer.js | 9 +++++++++ src/components/CustomerList.js | 8 +++++--- src/components/MovieLibrary.js | 1 + 4 files changed, 48 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index 72976f498..a95ae4463 100644 --- a/src/App.js +++ b/src/App.js @@ -3,8 +3,12 @@ import {BrowserRouter as Router, Route, Link } from 'react-router-dom'; import MovieLibrary from './components/MovieLibrary'; import CustomerList from './components/CustomerList'; import Search from './components/Search'; +import axios from 'axios'; + import './App.css'; +const BASE_URL = "http://localhost:3300/rentals/" + class App extends Component { constructor() { @@ -12,18 +16,41 @@ class App extends Component { this.state = { title: "nothing", + customer_name: "test name", customer_id: 0, } } + createRental = () => { + let RENTAL_URL = BASE_URL + `${this.state.title}` + '/check-out' + console.log(RENTAL_URL); + + let date = new Date(); + date.setDate(date.getDate() + 7); + + let params = {title: this.state.title, customer_id: this.state.customer_id, due_date: date}; + + axios.post(RENTAL_URL, params) + .then((response)=>{ + console.log(`succeeded with response: ${response.data}`); + }) + .catch((error)=>{ + console.log(`failed with errors: ${error}`); + }); + } + // function that changes state updateMovie = (banana) => { - let updatedState = {}; + let updatedState = this.state; updatedState["title"] = banana.title; this.setState(updatedState); } - updateCustomer = () => { + updateCustomer = (cust_name, cust_id) => { + let updatedState = this.state; + updatedState["customer_name"] = cust_name; + updatedState["customer_id"] = cust_id; + this.setState(updatedState); } @@ -40,9 +67,12 @@ class App extends Component {

    • selected movie: {this.state.title}

      -

      selected customer id: {this.state.customer_id}

      +

      selected customer name: {this.state.customer_name}

      • +
    • + +
    • Movies diff --git a/src/components/Customer.js b/src/components/Customer.js index b50a47535..0e8c0e6b6 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -1,11 +1,20 @@ import React, { Component } from 'react'; class Customer extends Component { + buttonClick = () => { + let cust_name = this.props.customerName; + let cust_id = this.props.id; + this.props.callBack(cust_name, cust_id); + } render(){ return(
    • {this.props.id} {this.props.customerName} +
      • ); } diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index 2ac6d07bd..bc4b73ad1 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -27,10 +27,12 @@ class Customers extends Component { render(){ // map response to customer list -console.log("Logging customer list state"); -console.log(this.state.customers); const customers = this.state.customers.map((customer, index)=>{ - return + return }); return( diff --git a/src/components/MovieLibrary.js b/src/components/MovieLibrary.js index 59a264e3b..4150ac4a8 100644 --- a/src/components/MovieLibrary.js +++ b/src/components/MovieLibrary.js @@ -3,6 +3,7 @@ import axios from 'axios'; import Movie from './Movie'; const MOVIES_URL = "http://localhost:3300/movies"; + class MovieLibrary extends Component { constructor(){ From 61dfdaa5ff8d0f429a8c7b52b610371969a0e735 Mon Sep 17 00:00:00 2001 From: Maja Graonic Date: Wed, 20 Jun 2018 14:02:22 -0700 Subject: [PATCH 18/47] rental clean up --- src/components/Movie.js | 3 ++- src/components/MovieLibrary.js | 6 +++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/Movie.js b/src/components/Movie.js index 308429717..37ae66d16 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -9,9 +9,10 @@ class Movies extends Component { overview: this.props.overview, release_date: this.props.releaseDate, image_url: this.props.image, + external_id: this.props.extID, inventory: 10 } - + this.props.callBack(movie); } render(){ diff --git a/src/components/MovieLibrary.js b/src/components/MovieLibrary.js index 4150ac4a8..112ed2a23 100644 --- a/src/components/MovieLibrary.js +++ b/src/components/MovieLibrary.js @@ -27,14 +27,18 @@ class MovieLibrary extends Component { render() { const movies = this.state.movies.map((movie,index)=>{ - return }) + console.log(this.state.movies.length); return(
        {movies} From 6c67c67c5be468a1372d34dde59fb55f234f0fc3 Mon Sep 17 00:00:00 2001 From: knockknockhusthere Date: Wed, 20 Jun 2018 14:10:02 -0700 Subject: [PATCH 19/47] added background image --- src/App.css | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/App.css b/src/App.css index c5c6e8a68..1affc9894 100644 --- a/src/App.css +++ b/src/App.css @@ -1,14 +1,17 @@ .App { text-align: center; -} - -.App-logo { - animation: App-logo-spin infinite 20s linear; - height: 80px; + position: absolute; + background-image: url(https://images.unsplash.com/photo-1505775561242-727b7fba20f0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c246da92e7f2654da6c3326e1b35b287&auto=format&fit=crop&w=2850&q=80); + height: 100vh; + width: 100%; + color: white; + background-position: fixed; + background-repeat: no-repeat; + background-size: 100%; + /* background-attachment: scroll; */ } .App-header { - background-color: #222; height: 150px; padding: 20px; color: white; From c7ed4ba640b3313c8e7dbaced01ca9c99ab2966d Mon Sep 17 00:00:00 2001 From: knockknockhusthere Date: Wed, 20 Jun 2018 14:19:23 -0700 Subject: [PATCH 20/47] playing around with the ui --- src/App.css | 9 +++++---- src/App.js | 8 ++++++-- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/App.css b/src/App.css index 1affc9894..506ab0c30 100644 --- a/src/App.css +++ b/src/App.css @@ -8,7 +8,7 @@ background-position: fixed; background-repeat: no-repeat; background-size: 100%; - /* background-attachment: scroll; */ + background-attachment: fixed; } .App-header { @@ -25,7 +25,8 @@ font-size: large; } -@keyframes App-logo-spin { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } +main { + height: 600px; + background-color: transparent; + overflow: scroll; } diff --git a/src/App.js b/src/App.js index a95ae4463..3e6edb4e0 100644 --- a/src/App.js +++ b/src/App.js @@ -57,7 +57,7 @@ class App extends Component { render() { return ( -
        +

        Welcome to Our Broke Ass App

        @@ -87,6 +87,8 @@ class App extends Component {
      + +
      { return () @@ -98,9 +100,11 @@ class App extends Component { }} /> +
      - + + ); } } From c8725349191782c8ba4ce61d6ad5899215af77db Mon Sep 17 00:00:00 2001 From: knockknockhusthere Date: Wed, 20 Jun 2018 14:27:40 -0700 Subject: [PATCH 21/47] fixed css scroll --- src/App.css | 4 ++-- src/App.js | 21 ++++++--------------- 2 files changed, 8 insertions(+), 17 deletions(-) diff --git a/src/App.css b/src/App.css index 506ab0c30..56b7a08a1 100644 --- a/src/App.css +++ b/src/App.css @@ -12,7 +12,7 @@ } .App-header { - height: 150px; + height: 80px; padding: 20px; color: white; } @@ -26,7 +26,7 @@ } main { - height: 600px; + height: 400px; background-color: transparent; overflow: scroll; } diff --git a/src/App.js b/src/App.js index 3e6edb4e0..9d6d0e394 100644 --- a/src/App.js +++ b/src/App.js @@ -60,33 +60,24 @@ class App extends Component {

      Welcome to Our Broke Ass App

      -
      + -
      -
        -
      • -
        +
        + +

        selected movie: {this.state.title}

        selected customer name: {this.state.customer_name}

        -
        • -
      • + -
        • -
      • Movies -
        • -
      • Customers -
        • -
      • + Search -
        • -
      Date: Wed, 20 Jun 2018 14:40:52 -0700 Subject: [PATCH 22/47] moved html elements around for styling --- src/App.css | 10 +++++++++- src/App.js | 27 ++++++++++++--------------- 2 files changed, 21 insertions(+), 16 deletions(-) diff --git a/src/App.css b/src/App.css index 56b7a08a1..4b3358f25 100644 --- a/src/App.css +++ b/src/App.css @@ -12,13 +12,17 @@ } .App-header { - height: 80px; + height: 100px; padding: 20px; color: white; + display: grid; + columngrid-template-columns: 1fr 1fr 1fr 1fr; + } .App-title { font-size: 1.5em; + display: inline; } .App-intro { @@ -30,3 +34,7 @@ main { background-color: transparent; overflow: scroll; } + +Link { + color: white; +} diff --git a/src/App.js b/src/App.js index 9d6d0e394..62063562e 100644 --- a/src/App.js +++ b/src/App.js @@ -57,27 +57,24 @@ class App extends Component { render() { return ( - -
      -

      Welcome to Our Broke Ass App

      -
      + -
      + +
      +

      VIDEO STORE |

      -
      +

      selected movie: {this.state.title}

      selected customer name: {this.state.customer_name}

      -
      - - +
      + +
      Movies - Customers - - Search - +
      +
      -
      +       - + ); } } From 784a36739912f4b1db39acb7d647e74deff2596f Mon Sep 17 00:00:00 2001 From: Maja Graonic Date: Wed, 20 Jun 2018 14:41:40 -0700 Subject: [PATCH 23/47] merging --- src/App.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 9d6d0e394..64f7b8b95 100644 --- a/src/App.js +++ b/src/App.js @@ -60,7 +60,8 @@ class App extends Component {

      Welcome to Our Broke Ass App

      -
      + +
      From c4104fb062b9174b8299d0221311cf409a012a7b Mon Sep 17 00:00:00 2001 From: knockknockhusthere Date: Wed, 20 Jun 2018 14:44:23 -0700 Subject: [PATCH 24/47] resized for more flexibility --- src/App.css | 2 +- src/App.js | 45 ++++++++++++++++++++++----------------------- 2 files changed, 23 insertions(+), 24 deletions(-) diff --git a/src/App.css b/src/App.css index 4b3358f25..9b5d3a005 100644 --- a/src/App.css +++ b/src/App.css @@ -30,7 +30,7 @@ } main { - height: 400px; + height: 70vh; background-color: transparent; overflow: scroll; } diff --git a/src/App.js b/src/App.js index 62063562e..37927dbfe 100644 --- a/src/App.js +++ b/src/App.js @@ -51,32 +51,31 @@ class App extends Component { updatedState["customer_name"] = cust_name; updatedState["customer_id"] = cust_id; this.setState(updatedState); - } render() { return ( - - -
      -

      VIDEO STORE |

      - -
      -

      selected movie: {this.state.title}

      -

      selected customer name: {this.state.customer_name}

      -
      - - -
      - Movies - Customers - Search -
      -
      - -
      + + +
      +

      VIDEO STORE |

      + +
      +

      selected movie: {this.state.title}

      +

      selected customer name: {this.state.customer_name}

      +
      + + +
      + Movies + Customers + Search +
      +
      + +
      { return () @@ -88,9 +87,9 @@ class App extends Component { }} /> -
      - -       +
      + +       ); From 7a2e8eece164dfd642ac0c7c28ecd61f7c861d17 Mon Sep 17 00:00:00 2001 From: knockknockhusthere Date: Wed, 20 Jun 2018 14:47:05 -0700 Subject: [PATCH 25/47] fixed buttons or something --- src/App.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/App.css b/src/App.css index 9b5d3a005..b34ad0412 100644 --- a/src/App.css +++ b/src/App.css @@ -38,3 +38,7 @@ main { Link { color: white; } + +button { + width: 100px; +} From a1e98f7da2d255317124b810cf786a2f037f13ed Mon Sep 17 00:00:00 2001 From: knockknockhusthere Date: Wed, 20 Jun 2018 14:54:58 -0700 Subject: [PATCH 26/47] button styling --- src/App.css | 8 +++++--- src/App.js | 6 +++--- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/App.css b/src/App.css index b34ad0412..6e4fd6b8e 100644 --- a/src/App.css +++ b/src/App.css @@ -12,12 +12,11 @@ } .App-header { - height: 100px; + height: 150px; padding: 20px; color: white; display: grid; columngrid-template-columns: 1fr 1fr 1fr 1fr; - } .App-title { @@ -40,5 +39,8 @@ Link { } button { - width: 100px; + width: 120px; + background-color: transparent; + border: solid white 2px; + padding: 5px; } diff --git a/src/App.js b/src/App.js index 37927dbfe..28f29317c 100644 --- a/src/App.js +++ b/src/App.js @@ -69,9 +69,9 @@ class App extends Component {
      - Movies - Customers - Search + + +
      From 1656a76b822f6feb3b93fbcb3754008094578bf7 Mon Sep 17 00:00:00 2001 From: knockknockhusthere Date: Wed, 20 Jun 2018 15:18:26 -0700 Subject: [PATCH 27/47] nav bar styling --- src/App.css | 30 ++++++++++++++++++++++-------- src/App.js | 19 +++++++++++-------- 2 files changed, 33 insertions(+), 16 deletions(-) diff --git a/src/App.css b/src/App.css index 6e4fd6b8e..601b8f208 100644 --- a/src/App.css +++ b/src/App.css @@ -12,15 +12,20 @@ } .App-header { - height: 150px; + height: 100px; padding: 20px; color: white; display: grid; - columngrid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 2fr 1fr 1fr; } + +.header-part { + width: 150px; + display: inline-block; +} .App-title { - font-size: 1.5em; + font-size: 2em; display: inline; } @@ -28,19 +33,28 @@ font-size: large; } +.links { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + +} main { height: 70vh; background-color: transparent; overflow: scroll; } -Link { - color: white; -} - button { width: 120px; background-color: transparent; - border: solid white 2px; + /* border: solid transparent 2px; */ padding: 5px; + margin: 10px; + color: white; +} + +.page-link { + text-decoration: none; + color: white; + padding: 10px; } diff --git a/src/App.js b/src/App.js index 28f29317c..b3c7448a8 100644 --- a/src/App.js +++ b/src/App.js @@ -60,19 +60,22 @@ class App extends Component {
      -

      VIDEO STORE |

      +

      VIDEO STORE

      -
      +
      + Movies + Customers + Search +
      + +

      selected movie: {this.state.title}

      -

      selected customer name: {this.state.customer_name}

      +

      selected customer: {this.state.customer_name}

      + -
      - - - -
      +
      From 15772ccb4e4f2237cd9e3495279721d4844be042 Mon Sep 17 00:00:00 2001 From: Maja Graonic Date: Wed, 20 Jun 2018 15:18:36 -0700 Subject: [PATCH 28/47] aligned movie library --- src/App.js | 8 +++----- src/components/Movie.js | 11 +++++------ src/components/MovieLibrary.js | 5 +++-- 3 files changed, 11 insertions(+), 13 deletions(-) diff --git a/src/App.js b/src/App.js index 37927dbfe..fc3566bd4 100644 --- a/src/App.js +++ b/src/App.js @@ -86,12 +86,10 @@ class App extends Component { return () }} /> - +
      - -       - - + + ); } } diff --git a/src/components/Movie.js b/src/components/Movie.js index 37ae66d16..dd5429381 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import {BrowserRouter as Router, Route, Link } from 'react-router-dom'; +import './Movie.css'; class Movies extends Component { // this is a change @@ -18,12 +19,10 @@ class Movies extends Component { render(){ return( -
      - {`${this.props.movieTitle}\'s -

      {this.props.movieTitle}

      - -

      {this.props.overview}

      - +
      + {`${this.props.movieTitle}\'s +

      {this.props.movieTitle}

      +
      ) diff --git a/src/components/MovieLibrary.js b/src/components/MovieLibrary.js index 112ed2a23..20008d77b 100644 --- a/src/components/MovieLibrary.js +++ b/src/components/MovieLibrary.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import axios from 'axios'; import Movie from './Movie'; +import './MovieLibrary.css'; const MOVIES_URL = "http://localhost:3300/movies"; @@ -40,9 +41,9 @@ class MovieLibrary extends Component { }) console.log(this.state.movies.length); return( -
        +
        {movies} -
      + ); } } From 6d281d9bacbbf914ab986a52154cd8dbf7fac801 Mon Sep 17 00:00:00 2001 From: Maja Graonic Date: Wed, 20 Jun 2018 15:21:13 -0700 Subject: [PATCH 29/47] adding css files --- src/components/Movie.css | 32 ++++++++++++++++++++++++++++++++ src/components/MovieLibrary.css | 4 ++++ 2 files changed, 36 insertions(+) create mode 100644 src/components/Movie.css create mode 100644 src/components/MovieLibrary.css diff --git a/src/components/Movie.css b/src/components/Movie.css new file mode 100644 index 000000000..c4bff2cea --- /dev/null +++ b/src/components/Movie.css @@ -0,0 +1,32 @@ +.movie { + padding: 1em 0; + margin: 0.5rem; + min-height: 250px; + min-width: 225px; + flex-basis: 18%; + border-radius: 5px; + display: grid; + grid-template-columns: 1fr 5fr 1fr; + align-items: center; +} + +.movie h3 { + font-weight: bold; + font-size: 1.5em; + margin: 0.1em; +} + +.movie__content { + grid-column-start: 2; + display: flex; + flex-direction: column; + justify-content: space-around; + text-align: center; + font-weight: 100; + overflow: hidden; +} + +.movie-button { + align-self: center; + margin-left: 20px; +} \ No newline at end of file diff --git a/src/components/MovieLibrary.css b/src/components/MovieLibrary.css new file mode 100644 index 000000000..41177188d --- /dev/null +++ b/src/components/MovieLibrary.css @@ -0,0 +1,4 @@ +.movielibrary { + display: flex; + flex-wrap: wrap; +} \ No newline at end of file From 1b901a90be8f620eddfc8d14f622684ab042970b Mon Sep 17 00:00:00 2001 From: knockknockhusthere Date: Wed, 20 Jun 2018 15:43:02 -0700 Subject: [PATCH 30/47] formatted nav bar and added scroll bar fix --- src/App.css | 25 ++++++++++++++++++++++++- src/App.js | 4 +--- src/components/Movie.css | 5 +++-- 3 files changed, 28 insertions(+), 6 deletions(-) diff --git a/src/App.css b/src/App.css index 601b8f208..77ee48104 100644 --- a/src/App.css +++ b/src/App.css @@ -17,6 +17,7 @@ color: white; display: grid; grid-template-columns: 1fr 2fr 1fr 1fr; + align-items: center; } @@ -36,6 +37,7 @@ .links { display: grid; grid-template-columns: 1fr 1fr 1fr; + align-items: center; } main { @@ -46,15 +48,36 @@ main { button { width: 120px; + height: 50px; background-color: transparent; /* border: solid transparent 2px; */ padding: 5px; margin: 10px; color: white; + border: solid 2px; + border-radius: 3px; +} + +button:hover { + background-color: grey; } .page-link { text-decoration: none; color: white; - padding: 10px; + padding: 0px 30px 0px 30px; +} + +.page-link:hover { + color: grey; +} + +::-webkit-scrollbar { + -webkit-appearance: none; + width: 7px; +} +::-webkit-scrollbar-thumb { + border-radius: 4px; + background-color: rgba(0,0,0,.5); + -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); } diff --git a/src/App.js b/src/App.js index f700864c5..0e8a9aef1 100644 --- a/src/App.js +++ b/src/App.js @@ -68,14 +68,12 @@ class App extends Component { Search
      -
      +

      selected movie: {this.state.title}

      selected customer: {this.state.customer_name}

      - -
      diff --git a/src/components/Movie.css b/src/components/Movie.css index c4bff2cea..3242263f6 100644 --- a/src/components/Movie.css +++ b/src/components/Movie.css @@ -28,5 +28,6 @@ .movie-button { align-self: center; - margin-left: 20px; -} \ No newline at end of file + padding-left: 30px; + text-align: center; +} From fee38fc60ff63e6daaea37bacf37de7aa8214beb Mon Sep 17 00:00:00 2001 From: Maja Graonic Date: Wed, 20 Jun 2018 15:43:27 -0700 Subject: [PATCH 31/47] styling search page --- src/components/Movie.css | 19 ++++++++++++------- src/components/Movie.js | 2 +- src/components/Search.js | 6 ++++-- 3 files changed, 17 insertions(+), 10 deletions(-) diff --git a/src/components/Movie.css b/src/components/Movie.css index c4bff2cea..feb45df9c 100644 --- a/src/components/Movie.css +++ b/src/components/Movie.css @@ -6,7 +6,7 @@ flex-basis: 18%; border-radius: 5px; display: grid; - grid-template-columns: 1fr 5fr 1fr; + grid-template-columns: 1fr; align-items: center; } @@ -16,17 +16,22 @@ margin: 0.1em; } +.movie button { + width: 80%; + margin: 0; + text-align: center; +} + +.movie h3 { + width: 80%; +} + .movie__content { - grid-column-start: 2; + grid-column-start: 1; display: flex; flex-direction: column; justify-content: space-around; text-align: center; font-weight: 100; overflow: hidden; -} - -.movie-button { - align-self: center; - margin-left: 20px; } \ No newline at end of file diff --git a/src/components/Movie.js b/src/components/Movie.js index dd5429381..516925f22 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -22,7 +22,7 @@ class Movies extends Component {
      {`${this.props.movieTitle}\'s

      {this.props.movieTitle}

      - +
      ) diff --git a/src/components/Search.js b/src/components/Search.js index ded0f64b8..dbf92cdb3 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -3,6 +3,7 @@ import {BrowserRouter as Router, Route, Link } from 'react-router-dom'; import SearchBar from './SearchBar'; import axios from 'axios'; import Movie from './Movie'; +import './MovieLibrary.css'; const DB_URL = "http://localhost:3300/movies?query="; const API_URL = "http://localhost:3300/movies"; @@ -61,8 +62,9 @@ class Search extends Component { return(
      - - {dbMovies} +
      + {dbMovies} +
      ) } From fa37ae423067e6d704d5c388290d8f3d46075de7 Mon Sep 17 00:00:00 2001 From: Maja Graonic Date: Wed, 20 Jun 2018 15:52:30 -0700 Subject: [PATCH 32/47] styling header --- src/App.css | 21 +++++++++++++-------- src/App.js | 6 +++--- 2 files changed, 16 insertions(+), 11 deletions(-) diff --git a/src/App.css b/src/App.css index 77ee48104..bf47eccf9 100644 --- a/src/App.css +++ b/src/App.css @@ -20,11 +20,15 @@ align-items: center; } - .header-part { width: 150px; display: inline-block; } + +.selected-items { + border: white 2px solid; +} + .App-title { font-size: 2em; display: inline; @@ -38,8 +42,8 @@ display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; - } + main { height: 70vh; background-color: transparent; @@ -73,11 +77,12 @@ button:hover { } ::-webkit-scrollbar { - -webkit-appearance: none; - width: 7px; + -webkit-appearance: none; + width: 7px; } + ::-webkit-scrollbar-thumb { - border-radius: 4px; - background-color: rgba(0,0,0,.5); - -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); -} + border-radius: 4px; + background-color: rgba(0, 0, 0, .5); + -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5); +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 0e8a9aef1..cdefcdc7d 100644 --- a/src/App.js +++ b/src/App.js @@ -68,9 +68,9 @@ class App extends Component { Search
      -
      -

      selected movie: {this.state.title}

      -

      selected customer: {this.state.customer_name}

      +
      +

      Selected Movie: {this.state.title}

      +

      Selected Customer: {this.state.customer_name}

      From b0e66eaabff23797edbd5dd750832f54a25fe154 Mon Sep 17 00:00:00 2001 From: knockknockhusthere Date: Wed, 20 Jun 2018 15:52:59 -0700 Subject: [PATCH 33/47] added footer --- src/App.css | 4 ++-- src/App.js | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/App.css b/src/App.css index 77ee48104..6e730aec9 100644 --- a/src/App.css +++ b/src/App.css @@ -2,7 +2,7 @@ text-align: center; position: absolute; background-image: url(https://images.unsplash.com/photo-1505775561242-727b7fba20f0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c246da92e7f2654da6c3326e1b35b287&auto=format&fit=crop&w=2850&q=80); - height: 100vh; + height: 100%; width: 100%; color: white; background-position: fixed; @@ -12,7 +12,7 @@ } .App-header { - height: 100px; + height: 20%; padding: 20px; color: white; display: grid; diff --git a/src/App.js b/src/App.js index 0e8a9aef1..3ed2e152a 100644 --- a/src/App.js +++ b/src/App.js @@ -89,6 +89,7 @@ class App extends Component {
      +
      Maja & Angela © 2018
      ); From 4cfb74a00acacf138bada39410b88172d281c7a5 Mon Sep 17 00:00:00 2001 From: knockknockhusthere Date: Wed, 20 Jun 2018 16:45:15 -0700 Subject: [PATCH 34/47] added nav bar line styling --- src/App.css | 23 ++++++++++++----------- src/components/Movie.css | 2 +- 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/src/App.css b/src/App.css index 73b9975a8..43e0696e3 100644 --- a/src/App.css +++ b/src/App.css @@ -16,22 +16,15 @@ padding: 20px; color: white; display: grid; - grid-template-columns: 1fr 2fr 1fr 1fr; + grid-template-columns: 1fr 2.7fr 3fr 1fr; align-items: center; } -.header-part { - width: 150px; - display: inline-block; -} - -.selected-items { - border: white 2px solid; -} - .App-title { font-size: 2em; display: inline; + border-right: white 2px solid; + padding-right: 20px; } .App-intro { @@ -44,6 +37,14 @@ align-items: center; } +.selected-items { + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + border-left: white 2px solid; + padding: 3px 0; +} + main { height: 70vh; background-color: transparent; @@ -85,4 +86,4 @@ button:hover { border-radius: 4px; background-color: rgba(0, 0, 0, .5); -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5); -} \ No newline at end of file +} diff --git a/src/components/Movie.css b/src/components/Movie.css index feb45df9c..4af7c6d8b 100644 --- a/src/components/Movie.css +++ b/src/components/Movie.css @@ -34,4 +34,4 @@ text-align: center; font-weight: 100; overflow: hidden; -} \ No newline at end of file +} From e92d1fa2c08f8eb65831ffac8ec91161aa08397a Mon Sep 17 00:00:00 2001 From: Maja Graonic Date: Wed, 20 Jun 2018 16:45:56 -0700 Subject: [PATCH 35/47] merging base component styling with app styling --- src/components/Customer.css | 40 +++++++++++++++++++++++++++++++++ src/components/Customer.js | 8 +++---- src/components/CustomerList.css | 4 ++++ src/components/CustomerList.js | 9 +++----- src/components/Movie.js | 4 +++- src/index.css | 4 ++++ 6 files changed, 58 insertions(+), 11 deletions(-) create mode 100644 src/components/Customer.css create mode 100644 src/components/CustomerList.css diff --git a/src/components/Customer.css b/src/components/Customer.css new file mode 100644 index 000000000..10dc9630c --- /dev/null +++ b/src/components/Customer.css @@ -0,0 +1,40 @@ +.customer { + padding: 1em 0; + margin: 0.5rem; + min-height: 150px; + min-width: 225px; + flex-basis: 18%; + border-radius: 5px; + display: flex; + flex-direction: column; + grid-template-columns: 1fr; + align-items: center; + justify-content: center; +} + +.customer h3 { + font-weight: bold; + font-size: 1.5em; + padding: 0.25em; +} + +.customer button { + width: 50%; + margin: 0; + text-align: center; + padding: 0.5em; +} + +.customer h3 { + width: 80%; +} + +.customer_content { + grid-column-start: 1; + display: flex; + flex-direction: column; + justify-content: space-around; + text-align: center; + font-weight: 100; + overflow: hidden; +} \ No newline at end of file diff --git a/src/components/Customer.js b/src/components/Customer.js index 0e8c0e6b6..fd777fda3 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -1,4 +1,5 @@ import React, { Component } from 'react'; +import './Customer.css'; class Customer extends Component { buttonClick = () => { @@ -8,14 +9,13 @@ class Customer extends Component { } render(){ return( -
    • - {this.props.id} - {this.props.customerName} +
      +

      {this.props.customerName}

      -
      • +
      ); } } diff --git a/src/components/CustomerList.css b/src/components/CustomerList.css new file mode 100644 index 000000000..2b1633118 --- /dev/null +++ b/src/components/CustomerList.css @@ -0,0 +1,4 @@ +.customer-list { + display: flex; + flex-wrap: wrap; +} \ No newline at end of file diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index bc4b73ad1..76943fa29 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import {BrowserRouter as Router, Route, Link } from 'react-router-dom'; import Customer from './Customer'; import axios from 'axios'; +import './CustomerList.css' const CUST_URL = "http://localhost:3300/customers"; @@ -36,13 +37,9 @@ const customers = this.state.customers.map((customer, index)=>{ }); return( -
      -

      Hide your customers, hide your wife

      -
        +
        { customers } -
      - -
      + ); } } diff --git a/src/components/Movie.js b/src/components/Movie.js index 516925f22..4a70a344d 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -22,7 +22,9 @@ class Movies extends Component {
      {`${this.props.movieTitle}\'s

      {this.props.movieTitle}

      - +
      ) diff --git a/src/index.css b/src/index.css index b4cc7250b..6d5e91ee3 100644 --- a/src/index.css +++ b/src/index.css @@ -3,3 +3,7 @@ body { padding: 0; font-family: sans-serif; } + +ul { + list-style-type: none; +} \ No newline at end of file From 9b708b9bc56e2f3fdf0c3ceeacf7b3d91afed275 Mon Sep 17 00:00:00 2001 From: Maja Graonic Date: Wed, 20 Jun 2018 17:05:05 -0700 Subject: [PATCH 36/47] linting --- src/App.css | 13 +++++++------ src/App.js | 4 ++-- src/components/CustomerList.js | 4 ++-- src/components/Movie.js | 21 ++++++++++++++++----- src/components/MovieLibrary.js | 9 +++++++-- src/components/Search.js | 3 +-- 6 files changed, 35 insertions(+), 19 deletions(-) diff --git a/src/App.css b/src/App.css index 43e0696e3..41c1a3a9b 100644 --- a/src/App.css +++ b/src/App.css @@ -9,6 +9,7 @@ background-repeat: no-repeat; background-size: 100%; background-attachment: fixed; + background-size: cover; } .App-header { @@ -38,11 +39,11 @@ } .selected-items { - display: grid; - grid-template-columns: 1fr 1fr; - align-items: center; - border-left: white 2px solid; - padding: 3px 0; + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + border-left: white 2px solid; + padding: 3px 0; } main { @@ -86,4 +87,4 @@ button:hover { border-radius: 4px; background-color: rgba(0, 0, 0, .5); -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5); -} +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 9919287da..601a975c9 100644 --- a/src/App.js +++ b/src/App.js @@ -15,8 +15,8 @@ class App extends Component { super(); this.state = { - title: "nothing", - customer_name: "test name", + title: "", + customer_name: "", customer_id: 0, } } diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index 76943fa29..fac8a80cb 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -21,9 +21,9 @@ class Customers extends Component { this.setState({customers: response.data}); }) .catch((error)=>{ - console.log("there was an error"); + console.log(`There was an error: ${error}`); }); - }; + } render(){ diff --git a/src/components/Movie.js b/src/components/Movie.js index 4a70a344d..7917a13e0 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -1,8 +1,8 @@ import React, { Component } from 'react'; -import {BrowserRouter as Router, Route, Link } from 'react-router-dom'; -import './Movie.css'; +import PropTypes from 'prop-types'; + import './Movie.css'; -class Movies extends Component { +class Movie extends Component { // this is a change buttonClick = () => { let movie = { @@ -20,7 +20,7 @@ class Movies extends Component { return(
      - {`${this.props.movieTitle}\'s + {`${this.props.movieTitle}'s

      {this.props.movieTitle}

      From 45a0b2fcf29ffa0cd293a88b991fe382cadc6460 Mon Sep 17 00:00:00 2001 From: Maja Graonic Date: Thu, 21 Jun 2018 16:05:28 -0700 Subject: [PATCH 41/47] fixed image reconstruction issue --- src/components/Movie.css | 4 ++-- src/components/MovieLibrary.js | 2 +- src/components/Search.js | 1 + 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/Movie.css b/src/components/Movie.css index dbabf9a5c..77ac7051b 100644 --- a/src/components/Movie.css +++ b/src/components/Movie.css @@ -44,5 +44,5 @@ img.movie:hover { } * { - border: yellow dotted 1px; -} + /* border: yellow dotted 1px; */ +} \ No newline at end of file diff --git a/src/components/MovieLibrary.js b/src/components/MovieLibrary.js index 5cde73a8f..1c0e67a3c 100644 --- a/src/components/MovieLibrary.js +++ b/src/components/MovieLibrary.js @@ -20,6 +20,7 @@ class MovieLibrary extends Component { axios.get(MOVIES_URL) .then((response)=>{ this.setState({movies: response.data}); + console.log(response.data); }) .catch((error)=>{ console.log(`There was an error: ${error}`); @@ -36,7 +37,6 @@ class MovieLibrary extends Component { overview={movie.overview} image={movie.image_url} buttonText="Select for Rental" - extID={movie.id} extID={movie.external_id} callBack={this.props.callBack} /> }) diff --git a/src/components/Search.js b/src/components/Search.js index 833527f53..2d2ec3017 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -38,6 +38,7 @@ class Search extends Component { this.setState({ dbMovies: response.data }) + console.log(response.data); }) .catch((error) => { console.log(`There was an error: ${error}`); From 76f6463bc8527ac1de5316858c1f8eca2a39b567 Mon Sep 17 00:00:00 2001 From: Maja Graonic Date: Fri, 22 Jun 2018 10:46:44 -0700 Subject: [PATCH 42/47] changed logo color --- src/App.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/App.css b/src/App.css index 212cf0e0f..6b9896a9d 100644 --- a/src/App.css +++ b/src/App.css @@ -26,6 +26,7 @@ display: inline; border-right: white 2px solid; padding-right: 20px; + color: #e31222; } .App-intro { @@ -87,4 +88,4 @@ button:hover { border-radius: 4px; background-color: rgba(0, 0, 0, .5); -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5); -} +} \ No newline at end of file From 01d83e398ee9823ae0c7e6086f72bb8611d03eb7 Mon Sep 17 00:00:00 2001 From: knockknockhusthere Date: Fri, 22 Jun 2018 11:44:46 -0700 Subject: [PATCH 43/47] added status messages --- src/App.css | 4 +-- src/App.js | 47 +++++++++++++++++++++++++++++----- src/components/Customer.js | 1 + src/components/CustomerList.js | 4 ++- src/components/MovieLibrary.js | 7 +++-- src/components/Search.js | 9 +++++++ src/components/Status.js | 19 ++++++++++++++ 7 files changed, 79 insertions(+), 12 deletions(-) create mode 100644 src/components/Status.js diff --git a/src/App.css b/src/App.css index 6b9896a9d..aff85e29f 100644 --- a/src/App.css +++ b/src/App.css @@ -48,7 +48,7 @@ } main { - height: 70vh; + height: 67vh; background-color: transparent; overflow: scroll; } @@ -88,4 +88,4 @@ button:hover { border-radius: 4px; background-color: rgba(0, 0, 0, .5); -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5); -} \ No newline at end of file +} diff --git a/src/App.js b/src/App.js index 601a975c9..1d95f17f7 100644 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,7 @@ import MovieLibrary from './components/MovieLibrary'; import CustomerList from './components/CustomerList'; import Search from './components/Search'; import axios from 'axios'; +import Status from './components/Status'; import './App.css'; @@ -18,9 +19,22 @@ class App extends Component { title: "", customer_name: "", customer_id: 0, + status: { + message: 'loaded the page', + type: 'success' + } } } + updateStatus = (message, type) => { + this.setState({ + status: { + message: message, + type: type + } + }) +} + createRental = () => { let RENTAL_URL = BASE_URL + `${this.state.title}` + '/check-out' console.log(RENTAL_URL); @@ -33,6 +47,7 @@ class App extends Component { axios.post(RENTAL_URL, params) .then((response)=>{ console.log(`succeeded with response: ${response.data}`); + this.updateStatus(`Successfully rented ${this.state.title} to ${this.state.customer_name}`) }) .catch((error)=>{ console.log(`failed with errors: ${error}`); @@ -40,10 +55,11 @@ class App extends Component { } // function that changes state - updateMovie = (banana) => { + updateMovie = (movie) => { let updatedState = this.state; - updatedState["title"] = banana.title; + updatedState["title"] = movie.title; this.setState(updatedState); + this.updateStatus(`Successfully added ${this.state.title} to your rental!`); } updateCustomer = (cust_name, cust_id) => { @@ -51,6 +67,7 @@ class App extends Component { updatedState["customer_name"] = cust_name; updatedState["customer_id"] = cust_id; this.setState(updatedState); + this.updateStatus(`Successfully added ${this.state.customer_name} to your rental!`); } render() { @@ -76,18 +93,34 @@ class App extends Component { + +
      { - return () + return () }} /> { - return () - }} /> - - + return () + }} + /> + + { + return ( + ) + }} + />
      Maja & Angela © 2018
      diff --git a/src/components/Customer.js b/src/components/Customer.js index 6fe15ab2d..02b6eaa42 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -25,6 +25,7 @@ Customer.propTypes = { customerName: PropTypes.string.isRequired, id: PropTypes.string.isRequired, callBack: PropTypes.func.isRequired + }; export default Customer; diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index 0b48b6e61..aba7ccb6a 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -19,6 +19,7 @@ class CustomerList extends Component { axios.get(CUST_URL) .then((response)=>{ this.setState({customers: response.data}); + this.props.updateStatusCallback(`Successfully loaded ${response.data.length} customers!`); }) .catch((error)=>{ console.log(`There was an error: ${error}`); @@ -44,7 +45,8 @@ const customers = this.state.customers.map((customer, index)=>{ } CustomerList.propTypes = { - callBack: PropTypes.func.isRequired + callBack: PropTypes.func.isRequired, + updateStatusCallback: PropTypes.func }; export default CustomerList; diff --git a/src/components/MovieLibrary.js b/src/components/MovieLibrary.js index 1c0e67a3c..02a8aae32 100644 --- a/src/components/MovieLibrary.js +++ b/src/components/MovieLibrary.js @@ -21,6 +21,7 @@ class MovieLibrary extends Component { .then((response)=>{ this.setState({movies: response.data}); console.log(response.data); + this.props.updateStatusCallback(`Successfully loaded ${response.data.length} movies!`); }) .catch((error)=>{ console.log(`There was an error: ${error}`); @@ -38,7 +39,8 @@ class MovieLibrary extends Component { image={movie.image_url} buttonText="Select for Rental" extID={movie.external_id} - callBack={this.props.callBack} /> + callBack={this.props.callBack} + /> }) return(
      @@ -49,6 +51,7 @@ class MovieLibrary extends Component { } MovieLibrary.propTypes = { - callBack: PropTypes.func.isRequired + callBack: PropTypes.func.isRequired, + updateStatusCallback: PropTypes.func }; export default MovieLibrary; diff --git a/src/components/Search.js b/src/components/Search.js index 2d2ec3017..2df82ca78 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -3,6 +3,7 @@ import SearchBar from './SearchBar'; import axios from 'axios'; import Movie from './Movie'; import './MovieLibrary.css'; +import PropTypes from 'prop-types'; const DB_URL = "http://localhost:3300/movies?query="; const API_URL = "http://localhost:3300/movies"; @@ -26,9 +27,11 @@ class Search extends Component { .then((response)=>{ console.log(API_URL); console.log(`successfully posted ${response.data}`); + this.props.updateStatusCallback(`Successfully added ${movie.title} to your Movie Library!`) }) .catch((error)=>{ console.log(`there was an error: ${error.message}`); + this.props.updateStatusCallback(`Failed to add movie: ${error.message}`) }); } @@ -39,9 +42,11 @@ class Search extends Component { dbMovies: response.data }) console.log(response.data); + this.props.updateStatusCallback(`Found ${response.data.length} movie titles related to your search!`); }) .catch((error) => { console.log(`There was an error: ${error}`); + this.props.updateStatusCallback(`Failed to load movies: ${error.message}`); }); } @@ -69,4 +74,8 @@ class Search extends Component { } } +Search.propTypes = { + updateStatusCallback: PropTypes.func +}; + export default Search; diff --git a/src/components/Status.js b/src/components/Status.js new file mode 100644 index 000000000..9746b8b78 --- /dev/null +++ b/src/components/Status.js @@ -0,0 +1,19 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +class Status extends React.Component { + static propTypes = { + message: PropTypes.string, + type: PropTypes.strings + } + + render() { + return ( +
      + {this.props.message} +
      + ); + } +} + +export default Status; From 7f9037382eb47342039fbbe05f0871bd584d11e6 Mon Sep 17 00:00:00 2001 From: knockknockhusthere Date: Fri, 22 Jun 2018 12:01:02 -0700 Subject: [PATCH 44/47] updated status message text --- src/App.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/App.js b/src/App.js index 1d95f17f7..2ca61168c 100644 --- a/src/App.js +++ b/src/App.js @@ -20,17 +20,15 @@ class App extends Component { customer_name: "", customer_id: 0, status: { - message: 'loaded the page', - type: 'success' + message: 'Successfully loaded the page' } } } - updateStatus = (message, type) => { + updateStatus = (message) => { this.setState({ status: { - message: message, - type: type + message: message } }) } From 69d37a29b405a17db574455af073eb4d518e4e51 Mon Sep 17 00:00:00 2001 From: Maja Graonic Date: Fri, 22 Jun 2018 12:17:37 -0700 Subject: [PATCH 45/47] status messages clear --- src/App.js | 89 +++++++++++++++++++--------------- src/components/MovieLibrary.js | 1 - src/components/Search.js | 7 ++- 3 files changed, 56 insertions(+), 41 deletions(-) diff --git a/src/App.js b/src/App.js index 2ca61168c..74ab3bb99 100644 --- a/src/App.js +++ b/src/App.js @@ -20,18 +20,27 @@ class App extends Component { customer_name: "", customer_id: 0, status: { - message: 'Successfully loaded the page' + message: null } } } updateStatus = (message) => { - this.setState({ - status: { - message: message - } - }) -} + this.setState({ + status: { + message: message + } + }) + } + + clearStatus = () => { + console.log(`got into clear status on App.js`); + this.setState({ + status: { + message: null + } + }) + } createRental = () => { let RENTAL_URL = BASE_URL + `${this.state.title}` + '/check-out' @@ -78,9 +87,9 @@ class App extends Component {

      VIDEO STORE

      - Movies - Customers - Search + Movies + Customers + Search
      @@ -92,39 +101,41 @@ class App extends Component { + message={this.state.status.message} + type={this.state.status.type} + />
      { return () - }} /> - - { - return () - }} - /> - - { - return ( - ) + }} /> + + { + return () - }} - /> -
      -
      Maja & Angela © 2018
      - - - ); - } - } - - export default App; + }} + /> + + { + return ( + ) + }} + /> + +
      Maja & Angela © 2018
      + + + ); + } + } + + export default App; diff --git a/src/components/MovieLibrary.js b/src/components/MovieLibrary.js index 02a8aae32..e51aff8a3 100644 --- a/src/components/MovieLibrary.js +++ b/src/components/MovieLibrary.js @@ -20,7 +20,6 @@ class MovieLibrary extends Component { axios.get(MOVIES_URL) .then((response)=>{ this.setState({movies: response.data}); - console.log(response.data); this.props.updateStatusCallback(`Successfully loaded ${response.data.length} movies!`); }) .catch((error)=>{ diff --git a/src/components/Search.js b/src/components/Search.js index 2df82ca78..9e54ecd46 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -35,6 +35,10 @@ class Search extends Component { }); } + clickHandler = () => { + this.props.clearStatusCallback(); + } + externalQuery = (query) => { axios.get(DB_URL+query) .then((response) => { @@ -65,7 +69,8 @@ class Search extends Component { return(
      - +
      {dbMovies}
      From 36502edad9db4aa4576efaf84ae712a2fc72352f Mon Sep 17 00:00:00 2001 From: Maja Graonic Date: Fri, 22 Jun 2018 12:51:53 -0700 Subject: [PATCH 46/47] cleaned up props --- src/App.css | 4 +++- src/App.js | 15 +++++++++------ src/components/Customer.js | 2 +- src/components/Movie.js | 2 +- src/components/Status.js | 5 ++--- 5 files changed, 16 insertions(+), 12 deletions(-) diff --git a/src/App.css b/src/App.css index aff85e29f..eed00d195 100644 --- a/src/App.css +++ b/src/App.css @@ -26,6 +26,8 @@ display: inline; border-right: white 2px solid; padding-right: 20px; + text-decoration: none; + font-weight: bold; color: #e31222; } @@ -88,4 +90,4 @@ button:hover { border-radius: 4px; background-color: rgba(0, 0, 0, .5); -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5); -} +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 74ab3bb99..469b4252d 100644 --- a/src/App.js +++ b/src/App.js @@ -34,7 +34,6 @@ class App extends Component { } clearStatus = () => { - console.log(`got into clear status on App.js`); this.setState({ status: { message: null @@ -57,7 +56,8 @@ class App extends Component { this.updateStatus(`Successfully rented ${this.state.title} to ${this.state.customer_name}`) }) .catch((error)=>{ - console.log(`failed with errors: ${error}`); + console.log(`There was an error: ${error}`); + this.updateStatus(`You must select a movie and customer to create a rental`) }); } @@ -84,7 +84,7 @@ class App extends Component {
      -

      VIDEO STORE

      + VIDEO STORE
      Movies @@ -102,10 +102,10 @@ class App extends Component {
      + { return (
      Maja & Angela © 2018
      - - + + + + + ); } } diff --git a/src/components/Customer.js b/src/components/Customer.js index 02b6eaa42..ca48fb28a 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -23,7 +23,7 @@ class Customer extends Component { Customer.propTypes = { customerName: PropTypes.string.isRequired, - id: PropTypes.string.isRequired, + id: PropTypes.number.isRequired, callBack: PropTypes.func.isRequired }; diff --git a/src/components/Movie.js b/src/components/Movie.js index 24cb3f83e..ff90cd611 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -36,7 +36,7 @@ Movie.propTypes = { overview: PropTypes.string, releaseDate: PropTypes.string, image: PropTypes.string, - extID: PropTypes.number.isRequired, + extID: PropTypes.number, inventory: PropTypes.number, buttonText: PropTypes.string, callBack: PropTypes.func.isRequired diff --git a/src/components/Status.js b/src/components/Status.js index 9746b8b78..be143e5bc 100644 --- a/src/components/Status.js +++ b/src/components/Status.js @@ -3,13 +3,12 @@ import PropTypes from 'prop-types'; class Status extends React.Component { static propTypes = { - message: PropTypes.string, - type: PropTypes.strings + message: PropTypes.string } render() { return ( -
      +
      {this.props.message}
      ); From 9c45b2b4814c2627c0b52771d9f903e16da15f73 Mon Sep 17 00:00:00 2001 From: Maja Graonic Date: Fri, 22 Jun 2018 14:30:49 -0700 Subject: [PATCH 47/47] added console log styling --- package-lock.json | 13 ++++++++++--- package.json | 1 + src/App.js | 4 +--- src/components/CustomerList.js | 1 + src/components/MovieLibrary.js | 1 + src/components/Search.js | 2 +- 6 files changed, 15 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index cdd05bc6b..a98ee276c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1988,9 +1988,9 @@ } }, "colors": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz", - "integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM=" + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/colors/-/colors-1.3.0.tgz", + "integrity": "sha512-EDpX3a7wHMWFA7PUHWPHNWqOxIIRSJetuwl0AS5Oi/5FMV8kWm69RTlgm00GKjBO1xFHMtBbL49yRtMMdticBw==" }, "combined-stream": { "version": "1.0.6", @@ -10038,6 +10038,13 @@ "mkdirp": "0.5.1", "sax": "1.2.4", "whet.extend": "0.9.9" + }, + "dependencies": { + "colors": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz", + "integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM=" + } } }, "sw-precache": { diff --git a/package.json b/package.json index d170d92c8..6fb28c433 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "axios": "^0.18.0", + "colors": "^1.3.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 469b4252d..feee4256a 100644 --- a/src/App.js +++ b/src/App.js @@ -43,16 +43,14 @@ class App extends Component { createRental = () => { let RENTAL_URL = BASE_URL + `${this.state.title}` + '/check-out' - console.log(RENTAL_URL); let date = new Date(); date.setDate(date.getDate() + 7); let params = {title: this.state.title, customer_id: this.state.customer_id, due_date: date}; - axios.post(RENTAL_URL, params) .then((response)=>{ - console.log(`succeeded with response: ${response.data}`); + console.log(`%c Successfully submitted a rental!`, 'font-weight: bold; font-size: 50px;color: red; text-shadow: 3px 3px 0 rgb(217,31,38) , 6px 6px 0 rgb(226,91,14) , 9px 9px 0 rgb(245,221,8) , 12px 12px 0 rgb(5,148,68) , 15px 15px 0 rgb(2,135,206) , 18px 18px 0 rgb(4,77,145) , 21px 21px 0 rgb(42,21,113)'); this.updateStatus(`Successfully rented ${this.state.title} to ${this.state.customer_name}`) }) .catch((error)=>{ diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index aba7ccb6a..3913837ed 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -20,6 +20,7 @@ class CustomerList extends Component { .then((response)=>{ this.setState({customers: response.data}); this.props.updateStatusCallback(`Successfully loaded ${response.data.length} customers!`); + console.log(`%c Successfully loaded customers!`, 'font-weight: bold; font-size: 50px;color: red; text-shadow: 3px 3px 0 rgb(217,31,38) , 6px 6px 0 rgb(226,91,14) , 9px 9px 0 rgb(245,221,8) , 12px 12px 0 rgb(5,148,68) , 15px 15px 0 rgb(2,135,206) , 18px 18px 0 rgb(4,77,145) , 21px 21px 0 rgb(42,21,113)'); }) .catch((error)=>{ console.log(`There was an error: ${error}`); diff --git a/src/components/MovieLibrary.js b/src/components/MovieLibrary.js index e51aff8a3..1f92d1f91 100644 --- a/src/components/MovieLibrary.js +++ b/src/components/MovieLibrary.js @@ -20,6 +20,7 @@ class MovieLibrary extends Component { axios.get(MOVIES_URL) .then((response)=>{ this.setState({movies: response.data}); + console.log(`%c Successfully loaded movies!`, 'font-weight: bold; font-size: 50px;color: red; text-shadow: 3px 3px 0 rgb(217,31,38) , 6px 6px 0 rgb(226,91,14) , 9px 9px 0 rgb(245,221,8) , 12px 12px 0 rgb(5,148,68) , 15px 15px 0 rgb(2,135,206) , 18px 18px 0 rgb(4,77,145) , 21px 21px 0 rgb(42,21,113)'); this.props.updateStatusCallback(`Successfully loaded ${response.data.length} movies!`); }) .catch((error)=>{ diff --git a/src/components/Search.js b/src/components/Search.js index 9e54ecd46..a800a198f 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -26,7 +26,7 @@ class Search extends Component { axios.post(API_URL, movie) .then((response)=>{ console.log(API_URL); - console.log(`successfully posted ${response.data}`); + console.log(`%c Successfully performed a search!`, 'font-weight: bold; font-size: 50px;color: red; text-shadow: 3px 3px 0 rgb(217,31,38) , 6px 6px 0 rgb(226,91,14) , 9px 9px 0 rgb(245,221,8) , 12px 12px 0 rgb(5,148,68) , 15px 15px 0 rgb(2,135,206) , 18px 18px 0 rgb(4,77,145) , 21px 21px 0 rgb(42,21,113)'); this.props.updateStatusCallback(`Successfully added ${movie.title} to your Movie Library!`) }) .catch((error)=>{