Ampers: Nora Peters & Monalisa Chatterjee

package.json

@@ -3,14 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.18.0",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
-    "react-scripts": "1.1.4"
+    "react-marquee": "^1.0.0",
+    "react-marquee-double": "^0.1.8",
+    "react-meta-tags": "^0.4.1",
+    "react-router-dom": "^4.3.1",
+    "react-scripts": "1.1.4",
+    "react-text-marquee": "^1.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}

src/App.css

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

src/App.js

@@ -1,19 +1,11 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
+import VideoStore from './components/VideoStore'
 
 class App extends Component {
   render() {
     return (
-      <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>
+      <VideoStore url="http://localhost:3001"/>
     );
   }
 }

src/components/Customer.js

@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+import './Customer.css';
+
+const Customer = (props) => {
+  // {"id":1,"name":"Shelley Rocha","registered_at":"2015-04-29T14:54:14.000Z","address":"Ap #292-5216 Ipsum Rd.","city":"Hillsboro","state":"OR","postal_code":"24309","phone":"(322) 510-8695","account_credit":13.15,"movies_checked_out_count":0}
+  return (
+    <div>
+      <div>{props.customer.name} (Checked out: {props.customer.movies_checked_out_count})</div>
+      <div>{props.customer.address}</div>
+      <div>{props.customer.city} {props.customer.state} {props.customer.postal_code}</div>
+      <div>{props.customer.phone}</div>
+    </div>
+  );
+}
+
+export default Customer;

src/components/CustomerList.js

@@ -0,0 +1,59 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+
+import './CustomerList.css';
+import Customer from './Customer'
+
+class CustomerList extends Component {
+  constructor() {
+    super();
+    this.state = {
+      customers: [],
+    };
+  }
+
+  componentDidMount() {
+    this.props.setStatus('Loading customers...', 'pending');
+    axios.get(`${this.props.url}/customers`)
+    .then( (response) => {
+      console.log( response.data );
+      this.setState({
+        customers: response.data
+      });
+      this.props.setStatus(`Loaded ${response.data.length} customers`, 'success');
+    } )
+    .catch( (error) => {
+      this.props.setStatus(`Failed to load customers: ${error.message}`, 'error');
+      console.log("got to the error");
+      console.log(error);
+    } );
+  }
+
+  onClickSelect(e, customer) {
+    this.props.selectCustomerCallback(customer);
+  }
+
+  render () {
+    const customers = this.state.customers.map((customer, index) => {
+      return (
+        <div key={index}>
+        <Customer customer={customer}/>
+        <div><button onClick={ (e) => this.onClickSelect(e, customer) }>Select Customer</button></div>
+        </div>
+      )
+    })
+    return (
+      <div>
+      {customers}
+      </div>
+    );
+  }
+}
+
+CustomerList.propTypes = {
+  url: PropTypes.string.isRequired,
+  selectCustomerCallback: PropTypes.func.isRequired,
+};
+
+export default CustomerList;

src/components/FeaturedFilms.css

@@ -0,0 +1,19 @@
+h2 {
+  text-align: center;
+  margin-bottom: 50px;
+}
+
+.features-container {
+  display: grid;
+  /*grid-template-columns: 1fr 1fr 1fr;*/
+  /*grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));*/
+  grid-template-columns: repeat(auto-fit, 186px);
+  grid-template-rows: auto;
+  justify-items: center;
+  justify-content: space-evenly;
+}
+
+.grid-item {
+  justify-self: center;
+  align-items: center;
+}

src/components/FeaturedFilms.js

@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+import './FeaturedFilms.css';
+import Movie from './Movie'
+
+
+class FeaturedFilms extends Component {
+  constructor() {
+    super();
+    this.state = {
+      movies: [],
+    };
+  }
+
+  componentDidMount() {
+    axios.get(`${this.props.url}/movies`)
+    .then( (response) => {
+      console.log( response.data );
+      this.setState({
+        movies: response.data
+      });
+    } )
+    .catch( (error) => {
+      this.props.setStatus(`Failed to load movies: ${error.message}`, 'success');
+    });
+  }
+
+  onClickSelect(e, movie) {
+    this.props.selectMovieCallback(movie);
+    e.preventDefault();
+  }
+
+  render () {
+    let movies = this.state.movies.map((movie, index) => {
+      return (
+        <div className="grid-item" key={index}>
+          <div>
+            <button onClick={ (e) => this.onClickSelect(e, movie) }>Select This Movie
+            </button>
+          </div>
+          <Movie movie={movie}/>
+        </div>
+      )
+    })
+    movies = movies.sort(() => .5 - Math.random());
+    movies = movies.slice(0,3);
+    return (
+      <div className="features-container">
+        {movies}
+      </div>
+    );
+  }
+}
+
+FeaturedFilms.propTypes = {
+  // url: PropTypes.string.isRequired,
+  // selectMovieCallback: PropTypes.func.isRequired,
+};
+
+export default FeaturedFilms;