Lily & Phoebe - Ampers

package.json

@@ -3,14 +3,27 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.18.0",
+    "jest": "^23.1.0",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
+    "react-router-dom": "^4.3.1",
     "react-scripts": "1.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "devDependencies": {
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-to-json": "^3.3.4"
+  },
+  "jest": {
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ]
   }
-}
+}

src/App.css

@@ -1,28 +1,93 @@
+/* Basics */
 .App {
   text-align: center;
+  display: flex;
+    flex-direction: column;
+    min-height: 100vh;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+p {
+  font-size: 12px;
+}
+
+a {
+  text-decoration: none;
 }
 
 .App-header {
   background-color: #222;
-  height: 150px;
+  height: 50px;
   padding: 20px;
   color: white;
 }
 
 .App-title {
-  font-size: 1.5em;
+  color: white;
+}
+
+footer {
+  height: 100px;
+  margin-top: 25%;
+  position: relative;
+  bottom: 0;
+  width: 100%;
+}
+
+/* HOME */
+
+.navigation {
+  margin: 2em;
+}
+
+button {
+  padding-left: 2em;
+  padding-right: 2em;
+  padding-top: 1em;
+  padding-bottom: 1em;
+  margin-left: 1em;
+  margin-right: 1em;
 }
 
-.App-intro {
-  font-size: large;
+button:hover {
+  background-color: #5F4B66;
+  color: white;
+  cursor: pointer;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+
+/* Rental Form */
+.Rent-form {
+  margin: 2em;
+  margin-top: .5em;
+  padding: 1em;
+  border: dotted white 5px;
+  border-radius: 10px;
+  background-color: #FFD36D;
+  display: flex;
+  justify-content: space-around;
 }
+
+.Rent-form div {
+  padding-bottom: .5em;
+}
+
+.Rent-form div:last-of-type {
+  padding-bottom: 1em;
+}
+
+.Rent-form button:hover {
+  background-color: #893B63;
+}
+
+.chosen {
+  text-align: left;
+}
+
+/* Alert messages */
+.status {
+  color: red;
+}
+
+/* * {
+  border: black 1px solid;
+} */

src/App.js

@@ -1,19 +1,137 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+import axios from 'axios';
+import RentalList from './components/RentalList';
+import CustomerList from './components/CustomerList';
+import Tmbd from './components/Tmbd.js'
 import './App.css';
+import logo from './tmdb.png';
+
+import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
 
 class App extends Component {
+  constructor() {
+    super();
+    this.state = {
+      selectedMovie: '',
+      selectedCustomer: '',
+      customerId: '',
+      status: ''
+    };
+  }
+
+  pickMovieDetail = (title) => {
+    console.log(title);
+    this.setState({
+      selectedMovie: title
+    })
+  }
+
+  pickCustomerDetail = (id, name) => {
+    console.log(id);
+    this.setState({
+      selectedCustomer: name,
+      customerId: id
+    })
+  }
+
+  clearRentalForm = () => {
+    this.setState({
+      selectedMovie: '',
+      selectedCustomer: '',
+      customerId: '',
+    })
+  }
+
+  addRental = () => {
+    const movieTitle = this.state.selectedMovie;
+    const customerId = this.state.customerId;
+    const today = new Date()
+    const dueDate = (new Date(today.setDate(today.getDate() + 7))).toISOString().slice(0,10)
+
+    const url = 'http://localhost:3000/rentals/' + movieTitle + '/check-out?customer_id=' + customerId + '&due_date=' + dueDate
+
+    axios.post(url)
+    .then((response) => {
+      console.log(response);
+      this.setState({
+        status: 'Movie Rental Processed!'
+      });
+      this.setMessageStatus(this.state.status);
+      this.clearRentalForm()
+    })
+    .catch((error) => {
+      this.setState({
+        status: error.message
+      });
+      this.setMessageStatus(this.state.status);
+    })
+  }
+
+  statusMessage = () => {
+    if (this.state.status !== ''){
+      return <p className="status">{this.state.status}</p>
+    }
+  }
+
+  setMessageStatus = (status) => {
+    this.setState({
+      status: status
+    });
+    setTimeout(this.hideStatus, 2000);
+  }
+
+  hideStatus = () => {
+    this.setState({
+      status: ''
+    });
+  }
+
   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>
+      <Router>
+        <div className="App">
+          <header className="App-header">
+            <Link to="/"><h1 className="App-title">Ada Movies</h1></Link>
+          </header>
+
+          <div className="navigation">
+            <Link to="/movies" ><button>MOVIES</button></Link>
+            <Link to="/customers"><button>CUSTOMERS</button></Link>
+            <Link to="/search"><button>ADD TO LIBRARY</button></Link>
+          </div>
+
+          <div className="Rent-form">
+            <section className="chosen">
+              <div><strong>Chosen Movie: </strong> {this.state.selectedMovie}</div>
+              <div><strong>Chosen Customer: </strong> {this.state.selectedCustomer}</div>
+            </section>
+            <section><button onClick={this.addRental}>Process Rental</button>
+            </section>
+          </div>
+
+          <div>
+            {this.statusMessage()}
+          </div>
+
+          <section>
+            <div>
+              <Route path="/movies" render={(props) => <RentalList {...props}  pickMovieDetailCallback={this.pickMovieDetail}/>} />
+            </div>
+            <div>
+              <Route path="/customers" render={(props) => <CustomerList {...props}  pickCustomerDetailCallback={this.pickCustomerDetail}/>} />
+            </div>
+            <div>
+              <Route path="/search" render={(props) => <Tmbd {...props}
+                statusCallback = { this.setMessageStatus }/>} />
+            </div>
+          </section>
+
+          <footer>
+            <img src={logo} alt='The Movie Database logo'/>
+            <p>☞ Phoebe & Lily </p>
+          </footer>
+        </div>
+      </Router>
     );
   }
 }

src/App.test.js

@@ -1,9 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+// import { shallow } from 'enzyme';
 import App from './App';
 
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
+describe('App', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<App />, div);
+    ReactDOM.unmountComponentAtNode(div);
+  });
 });

src/components/Customer.css

@@ -0,0 +1,14 @@
+.customer {
+  margin: 2em;
+  padding: 5px;
+  width: 10em;
+  background-color: pink;
+}
+
+.customer img {
+  padding-top: 2em;
+}
+
+.customer img:hover {
+  cursor: pointer;
+}

src/components/Customer.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import profile from './profile.jpg'
+import './Customer.css'
+
+class Customer extends Component {
+
+  rentalDetail = () => {
+    this.props.customerCallback(this.props.id, this.props.name)
+  }
+
+  render() {
+    return (
+      <article className="customer">
+        <img src={profile} onClick={this.rentalDetail} alt='customer profile'/>
+        <h2>{this.props.name}</h2>
+        <p>{this.props.address}</p>
+        <p>{this.props.city}, {this.props.state} {this.props.postal_code}</p>
+        <p>{this.props.phone}</p>
+      </article>
+    )
+  }
+}
+
+export default Customer;
+
+Customer.propTypes = {
+  id: PropTypes.number,
+  name: PropTypes.string,
+  address: PropTypes.string,
+  city: PropTypes.string,
+  state: PropTypes.string,
+  postal_code: PropTypes.string,
+  phone: PropTypes.string,
+  customerCallback: PropTypes.func,
+}

src/components/Customer.test.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Customer from './Customer';
+
+describe('Board', () => {
+  test('snapshot', () => {
+    const wrapper = mount(
+      <Customer
+        id={0}
+        name=''
+        address=''
+        city=''
+        state=''
+        postal_code=''
+        phone=''
+        customerCallback={()=>{}}
+      />
+    );
+    expect(wrapper).toMatchSnapshot();
+    wrapper.unmount();
+  });
+});

src/components/CustomerList.css

@@ -0,0 +1,5 @@
+.customer-list {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+}