Laura and Jane video-store-consumer

package.json

@@ -3,14 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
-    "react-scripts": "1.1.4"
+    "axios": "^0.18.0",
+    "bootstrap": "^4.1.3",
+    "react": "^16.6.3",
+    "react-bootstrap": "^0.32.4",
+    "react-dom": "^16.6.3",
+    "react-router-dom": "^4.3.1",
+    "react-scripts": "1.1.4",
+    "reactstrap": "^6.5.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}

public/manifest.json

@@ -11,5 +11,5 @@
   "start_url": "./index.html",
   "display": "standalone",
   "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "background_color": "blue"
 }

src/App.css

@@ -26,3 +26,7 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+body {
+  background-color: blue;
+}

src/App.js

@@ -1,19 +1,13 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
+import VideoStore from './components/VideoStore';
 
 class App extends Component {
   render() {
     return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-      </div>
+      <main className="App">
+        <VideoStore/>
+      </main>
     );
   }
 }

src/components/Customer.css

@@ -0,0 +1,4 @@
+.customer-list-li {
+  border-bottom: 1px solid #6c757d;
+  padding-bottom: 1em;
+}

src/components/Customer.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import './Customer.css';
+
+class Customer extends Component {
+
+  render() {
+
+    return (
+      <div className="text-white bg-dark mb-3">
+      <h1>{this.props.name}</h1>
+      <p>{this.props.phone}</p>
+      <p>Postal Code: {this.props.postal_code}</p>
+      </div>
+    )
+  }
+}
+
+Customer.propTypes = {
+  name: PropTypes.string.isRequired,
+  phone: PropTypes.string.isRequired,
+  postal_code: PropTypes.string.isRequired,
+};
+
+export default Customer;

src/components/CustomerList.css

@@ -0,0 +1,3 @@
+ul {
+  list-style: none;
+}

src/components/CustomerList.js

@@ -0,0 +1,74 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Customer from './Customer';
+import axios from 'axios';
+import './CustomerList.css';
+
+class CustomerList extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      errorMessage: "",
+      customers: []
+    };
+  }
+
+  componentDidMount() {
+
+    axios.get("http://localhost:3000/customers")
+    .then((response) => {
+
+      const customers = response.data.map((customer) => {
+        const newCustomer = {
+          ...customer
+        }
+        return newCustomer
+      })
+
+      this.setState({
+        customers
+      })
+
+    })
+    .catch((error) => {
+      this.setState({
+        errorMessage: error.message
+      })
+    });
+  }
+
+
+
+  makeCustomerList = (customers) => {
+    const customerList = customers.map((customer) => {
+      return <li key={customer.id} className={"customer-list-li"}>
+      <Customer
+      name={customer.name}
+      phone={customer.phone}
+      postal_code={customer.postal_code}/>
+      <button
+      className={"btn btn-secondary btn-lg"}
+      onClick ={ () => {this.props.selectCustomerCallback(customer)}}
+      type="button">Select Customer</button>
+      </li>
+    });
+    return customerList
+  }
+
+
+  render() {
+
+    return (
+      <ul className="text-white bg-dark mb-3">
+      { this.state.customers !== [] && this.makeCustomerList(this.state.customers)}
+      </ul>
+    )
+  }
+}
+
+CustomerList.propTypes = {
+  selectCustomerCallback: PropTypes.func.isRequired,
+};
+
+export default CustomerList;

src/components/Movie.css

@@ -0,0 +1,9 @@
+.movie-component-container {
+  display: flex;
+  padding: 1em;
+}
+
+p {
+  padding-left: 1em;
+  padding-right: 1em;
+}

src/components/Movie.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import './Movie.css';
+
+class Movie extends Component {
+  render() {
+
+    return (
+      <div className="text-white bg-dark mb-3 movie-component-container">
+      <img src={this.props.image_url} alt={`${this.props.overview}`} />
+      <div>
+      <h1>{this.props.title}</h1>
+      <p>{this.props.overview}</p>
+      <p><em>Release Date: {this.props.release_date}</em></p>
+      </div>
+      </div>
+    )
+  }
+}
+
+Movie.propTypes = {
+  title: PropTypes.string.isRequired,
+  release_date: PropTypes.string,
+  overview: PropTypes.string.isRequired,
+  image_url: PropTypes.string.isRequired
+};
+
+export default Movie;

src/components/MovieList.css

@@ -0,0 +1,23 @@
+.movie-list {
+  list-style: none;
+}
+
+.movie-list-li-flex {
+  display: flex;
+  margin: 1em;
+  padding: 1em;
+  justify-content: center;
+  border-bottom: 1px solid #6c757d;
+}
+
+.rental-button-spacing {
+  margin: 1em;
+}
+
+.rental-button-container{
+  display: flex;
+}
+
+.rental-component-flex {
+  flex: 1;
+}

src/components/MovieList.js

@@ -0,0 +1,128 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Movie from './Movie';
+import Rental from './Rental';
+
+import axios from 'axios';
+import './MovieList.css';
+
+class MovieList extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      errorMessage: "",
+      movies: [],
+    };
+  }
+
+  componentDidMount() {
+    axios.get(this.props.URL)
+    .then((response) => {
+
+      const movies = response.data.map((movie) => {
+        const newMovie = {
+          ...movie
+        }
+        return newMovie
+      })
+
+      this.setState({
+        movies
+      })
+    })
+    .catch((error) => {
+      this.setState({
+        errorMessage: error.message
+      })
+    });
+  }
+
+  componentDidUpdate(prevProps) {
+    let movieIndex = null
+    if (this.props.movie !== prevProps.movie) {
+      const movies = this.state.movies.map((movie, index) => {
+        const newMovie = {
+          ...movie
+        }
+        if ( movie.image_url === this.props.movie.image_url){
+          movieIndex = index
+        }
+        return newMovie
+      })
+
+      if (movieIndex !== null){
+        movies.splice(movieIndex, 1)
+      }
+
+      this.setState({
+        movies
+      })
+    }
+  }
+
+  makeMovieList = (movies) => {
+    const moviesList = movies.map((movie, id) => {
+      if (movie.customer_id) {
+        const customer = {
+          name: movie.name,
+          id: movie.customer_id
+        }
+        return <li key={id} className={"movie-list-li-flex"} >
+        <div className={"rental-component-flex"}>
+        <Rental
+        title={movie.title}
+        name={movie.name}
+        due_date={movie.due_date}
+        image_url={movie.image_url}/>
+        </div>
+        <div className="rental-button-container">
+        <button
+        className={"btn btn-secondary btn-lg rental-button-spacing"}
+        onClick ={ () => {this.props.selectMovieCallback(movie)}}
+        type="button">Select Movie</button>
+        <button
+        className={"btn btn-secondary btn-lg rental-button-spacing"}
+        onClick ={ () => {this.props.selectCustomerCallback(customer)}}
+        type="button">Select Customer</button>
+        </div>
+        </li>
+      } else {
+        return <li key={id} className={"movie-list-li-flex"}>
+        <Movie
+        title={movie.title}
+        overview={movie.overview}
+        release_date={movie.release_date}
+        image_url={movie.image_url}/>
+        <button
+        className={"btn btn-secondary btn-lg"}
+        onClick ={ () => {this.props.selectMovieCallback(movie)}}
+        type="button">Select Movie</button>
+        </li>
+      }
+
+    });
+
+    return moviesList
+  }
+
+
+  render() {
+
+    return (
+      <ul className="text-white bg-dark mb-3 movie-list">
+      <h2>{this.state.errorMessage ? this.state.errorMessage: "" }</h2>
+
+      { this.state.movies !== [] && this.makeMovieList(this.state.movies)}
+      </ul>
+    )
+  }
+}
+
+MovieList.propTypes = {
+  URL: PropTypes.string.isRequired,
+  movie: PropTypes.string,
+  selectMovieCallback: PropTypes.func.isRequired,
+};
+
+export default MovieList;

src/components/Rental.css

@@ -0,0 +1,14 @@
+.rental-component-container {
+  display: flex;
+  padding: 1em;
+  justify-content: space-around;
+}
+
+p, h2 {
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+p {
+  font-size: 1.5em;
+}