Merge pull request #1 from aribray/rentallibrary

showMovies functionality

src/App.js

@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import './App.css';
 import { BrowserRouter as Router, Route, Link } from "react-router-dom";
-import CustomerList from './components/CustomerList'
+import CustomerList from './components/CustomerList';
+import RentalLibrary from './components/RentalLibrary';
 
 
 
@@ -12,8 +13,8 @@ class App extends Component {
       selectedMovie: "",
       selectedCustomer: "",
       allRentals: [],
-      showMovies: true,
-      showCustomers: true
+      showMovies: false,
+      showCustomers: false
     }
   }
 
@@ -31,25 +32,28 @@ class App extends Component {
 
   showCustomerToggle = () => {
     const status = !this.state.showCustomers;
-    this.setState({showCustomers: status});
+    this.setState({showCustomers: status,
+                  showMovies: !status
+    });
   }
 
   showMovieToggle = () => {
     const status = !this.state.showMovies;
-    this.setState({showMovies: status});
+    this.setState({showMovies: status,
+                    showCustomers: !status});
   }
 
   render() {
     return (
       <div>
         <header>
           {/* <Search /> */}
-          {/* <button onClick={this.showMovieToggle}>Show Movies</button> */}
+          <button onClick={this.showMovieToggle}>Show Movies</button>
           <button onClick={this.showCustomerToggle}>Show Customers</button>
         </header>
         <main>
           {this.state.showCustomers && <CustomerList />}
-          {/* {this.state.showMovies && <RentalLibrary />} */}
+          {this.state.showMovies && <RentalLibrary />}
         </main>
       </div>
     );

src/components/Customer.js

@@ -1,15 +1,36 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 const Customer = (props) => {
-  return (
-    <div>
-      <Customer/>
-    </div>
-  )
 
 
 
+  return (
+    <div className="customer">
+        <div className="content">
+          <ul>{props.name}</ul>
+            <li>{props.address}</li>
+            <li>{props.city}, {props.state}</li>
+            <div>{props.postal}</div>
 
+            <li>{props.phone}</li>
+            <li>${props.account_credit} account credit</li>
+        </div>
+    </div>
+
+  )
 }
+
+Customer.propTypes = {
+  id:PropTypes.number,
+  name:PropTypes.string,
+  address:PropTypes.string,
+  city:PropTypes.string,
+  state:PropTypes.string,
+  postal:PropTypes.string,
+  phone:PropTypes.string,
+  account_credit:PropTypes.number,
+  getCustomerNameCallback:PropTypes.func,
+};
+
 export default Customer;

src/components/CustomerList.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 import axios from 'axios';
 import Customer from './Customer'
+import PropTypes from 'prop-types'
 
 class CustomerList extends Component {
   constructor(props) {
@@ -17,7 +18,7 @@ class CustomerList extends Component {
     axios.get('http://localhost:3000/customers')
     .then((response) => {
       console.log(response.data);
-      this.setState( [{customerList: response.data}])
+      this.setState( {customerList: response.data})
       // const customers = response.data.map(customer => {
       //   return <li>
       //             Name: {customer.name}
@@ -29,20 +30,40 @@ class CustomerList extends Component {
     .catch((error) => {
       this.setState({
         errorMessage: error.message
-      })
-    })
+      });
+    });
 
   }
 
   render() {
+    const customers = this.state.customerList.map((customer) => {
+      return <Customer
+        key={customer.id}
+        id={customer.id}
+        name={customer.name}
+        address={customer.address}
+        city={customer.city}
+        state={customer.state}
+        postal_code={customer.phone}
+        account_credit={customer.account_credit}
+        getCustomerNameCallback={this.props.getCustomerNameCallback}
+      />
+    });
+
     return (
-      <div>{this.state.customerList}</div>
+      <div>
+        {customers}
+      </div>
     )
   }
 
 
 }
 
+CustomerList.propTypes = {
+  getCustomerNameCallback:PropTypes.func,
+}
+
 export default CustomerList;
 
 

src/components/Movie.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+
+const Movie = (props) => {
+
+  return (
+    <div className="movie">
+      <li>
+        <div className="movie__section">
+            <img className="image" src={props.image_url} alt="this is an image"/>
+            <div class="middle">
+              <div class="text">{props.overview}</div>
+            </div>
+          <div className="movie__info">
+            <span>
+            </span>
+            <h3 className="movie__title">{props.title}</h3>
+          </div>
+        </div>
+      </li>
+    </div>
+  )
+}
+
+
+Movie.propTypes = {
+  id:PropTypes.number,
+  title:PropTypes.string,
+  overview:PropTypes.string,
+  release_date:PropTypes.string,
+  image_url:PropTypes.string,
+  external_id:PropTypes.number,
+  buttonClassname:PropTypes.string,
+  getMovieTitleCallback:PropTypes.func,
+};
+
+export default Movie;

src/components/RentalLibrary.js

@@ -0,0 +1,63 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+import Movie from './Movie';
+
+class RentalLibrary extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      movies: [],
+      moreMovies: '',
+    };
+  }
+
+  componentDidMount() {
+    this.getMovies()
+  }
+
+  getMovies = () => {
+    axios.get('http://localhost:3000/movies')
+    .then((response) => {
+      this.setState({
+        movies: response.data,
+      });
+    })
+    .catch((error) => {
+      this.setState({ error: error.message });
+    });
+  }
+
+
+  render() {
+    const allRentals = this.state.movies.map((movie) => {
+      return <Movie
+        key={movie.id}
+        id={movie.id}
+        title={movie.title}
+        overview={movie.overview}
+        release_date={movie.release_date}
+        image_url={movie.image_url}
+        external_id={movie.external_id}
+        getMovieTitleCallback={this.props.getMovieTitleCallback}
+        />
+
+    });
+
+
+    return (
+      <div >
+        <div className="rentals">
+          {allRentals}
+        </div>
+      </div>
+    )
+  }
+}
+
+RentalLibrary.propTypes = {
+  getMovieTitleCallback:PropTypes.func,
+};
+
+export default RentalLibrary;