Merge branch 'master' of https://github.com/kcforsman/video-store-con…

…sumer

src/components/Movie.js

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import './Movie.css';
+
+class Movie extends Component {
+
+    render() {
+    console.log('Rendering');
+    return (
+      <article className="movie-summary">
+      <p> {this.props.url}</p>
+      <h3> {this.props.title}</h3>
+      <p> {this.props.release_date}</p>
+      <p> {this.props.inventory}</p>
+      </article>
+    )
+  }
+}
+
+
+Movie.propTypes = {
+  title: PropTypes.string.isRequired,
+  // release_date: PropTypes.datetime.isRequired,
+  inventory: PropTypes.number.isRequired,
+  image_url: PropTypes.string.isRequired,
+  external_id: PropTypes.number.isRequired,
+}
+
+export default Movie;

src/components/RentalLibrary.css

@@ -0,0 +1 @@
+

src/components/RentalLibrary.js

@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import axios from 'axios';
+
+import './RentalLibrary.css';
+import Movie from './Movie';
+
+class RentalLibrary extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      movies: [],
+    }
+  }
+
+  componentDidMount = () => {
+    console.log('Component did mount was called');
+
+    axios.get('')
+    .then( (response) => {
+      console.log( response.data );
+      this.setState({
+        movies: response.data
+      });
+    } )
+    .catch( (error) => {
+      console.log("got to the error");
+      console.log(error);
+      this.setState({
+        error: error.message
+      });
+    } );
+  }
+
+  renderMovieList = () => {
+    console.log('Rendering Movie List');
+    const componentList = this.state.movie.map((movie, index) => {
+      return (
+        <Movie
+        key={index}
+        title={movie.title}
+        release_date={movie.release_date}
+        inventory={movie.inventory}
+        external_id={movie.external_id}
+        />
+      );
+    });
+
+    return componentList;
+  }
+
+  render() {
+    return (
+      <section>
+      <header>
+      {this.state.message ? this.state.message: ""  }
+      </header>
+      {this.renderMovieList()}
+      </section>
+    );
+  }
+}
+
+RentalLibrary.propTypes = {
+}
+
+export default RentalLibrary;