&& Mariko and Nicoleta

package.json

@@ -3,8 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.18.0",
+    "npm": "^6.1.0",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
+    "react-router-dom": "^4.3.1",
     "react-scripts": "1.1.4"
   },
   "scripts": {
@@ -13,4 +16,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}

src/App.css

@@ -1,3 +1,8 @@
+/* html {
+  height: 100%;
+  background-size: cover;
+}
+
 .App {
   text-align: center;
 }
@@ -25,4 +30,71 @@
 @keyframes App-logo-spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
+} */
+
+/* body {
+  background: #B5BEC6 ;
+}
+
+.header {
+  text-align: center;
+}
+
+.content */
+
+ul li {
+  list-style-type: none;
+
+}
+
+* {
+  font-family: 'Rubik', sans-serif;
+}
+
+body {
+  background-color: rgb(199, 219, 230);
+  padding: 20px;
+  margin: 0;
+}
+
+h1 {
+  text-align: center;
+  color: brown;
+  font-size: 5em;
+  font-family: 'Rubik', sans-serif;
+  font-style: bold;
+}
+ h2, p, ul, li {
+  font-family: 'Rubik', sans-serif;
+}
+ul.header li {
+  display: inline;
+  list-style-type: none;
+  margin: 0;
+}
+ul.header {
+  background-color:  rgba(54, 70, 82, .5);
+  padding: 0;
+}
+ul.header li a {
+  color: #FFF;
+  font-weight: bold;
+  text-decoration: none;
+  padding: 20px;
+  display: inline-block;
+}
+.content {
+  background-color: rgb(199, 219, 230);
+
+  padding: 20px;
+}
+.content h2 {
+  padding: 0;
+  margin: 0;
+}
+.content li {
+  margin-bottom: 10px;
+}
+.active {
+  background-color: #0099FF;
 }

src/App.js

@@ -1,19 +1,101 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
+import axios from 'axios';
+import {
+  BrowserRouter as Router,
+  Route,
+  Link
+} from 'react-router-dom';
 import './App.css';
+import SearchResults from './components/SearchResults';
+import Library from './components/Library';
+import Customers from './components/Customers';
+
+const URL = `http://localhost:3000/rentals/`;
 
 class App extends Component {
+  constructor() {
+    super();
+    this.state = {
+      selectedMovie: ' ',
+      selectedCustomer: '',
+      selectedCustomerId: '',
+    };
+  }
+
+  renderMessage = () => {
+    if (this.state.message) {
+      return (
+        <p>{this.state.message}</p>
+      );
+    }
+  };
+
+  setSelectedMovie = (title) => {
+    this.setState({
+      selectedMovie: title,
+    });
+  };
+
+  setSelectedCustomer = (name, id) => {
+    this.setState({
+      selectedCustomer: name,
+      selectedCustomerId: id,
+    });
+  };
+
+  createRental=() => {
+    let date = new Date();
+    date.setDate(date.getDate() + 7);
+    axios.post(URL + `${this.state.selectedMovie}/check-out?customer_id=${this.state.selectedCustomerId}&due_date=${date}`)
+    .then((response) => {
+      console.log(response);
+      this.setState({
+        message: `${this.state.selectedCustomer} succesfully rchekcout ${this.state.selectedMovie}!`,
+        selectedMovie: '',
+        selectedCustomer: '',
+        selectedCustomerId: '',
+      });
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+  };
+
   render() {
+
+    const home = () => {
+      return (<h1>Welcome!</h1>);
+    };
+
     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 >
+        <section className=''>
+          <ul className='header'>
+            <li><Link to="/">Home</Link></li>
+            <li><Link to="/search">SearchResults</Link></li>
+            <li><Link to="/customers">Customers</Link></li>
+            <li><Link to="/library">Library</Link></li>
+            <li>Selected Movie: {this.state.selectedMovie}</li>
+            <li>Selected Customer: {this.state.selectedCustomer}</li>
+            <button className="button" onClick={this.createRental}>Create Rental</button>
+          </ul>
+
+          {this.renderMessage()}
+          <section className='content'>
+            <Route exact path="/" component={home} />
+            <Route path="/search" component={SearchResults}/>
+            <Route path="/library"
+              render={(props) => <Library {...props} selectedMovieCallback={this.setSelectedMovie} />}
+              />
+            <Route path="/customers"
+              render={(props) => <Customers {...props} selectedCustomerCallback={this.setSelectedCustomer} />}
+              />
+          </section>
+        </section>
+      </Router>
+
     );
   }
 }

src/components/Customer.css

@@ -0,0 +1,16 @@
+.customer {
+  background-color: rgba(54, 70, 82, .3);
+
+  padding: 2em;
+  margin: 0.5rem;
+
+  min-height: 250px;
+  min-width: 225px;
+  flex-basis: 18%;
+
+  border-radius: 5px;
+
+  display: grid;
+  grid-template-columns: 1fr 5fr 1fr;
+  align-items: center;
+}

src/components/Customer.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+import './Customer.css';
+
+class Customer extends Component {
+
+  selectedCustomerCallback = () => {
+    console.log(this.props);
+    this.props.selectedCustomerCallback(this.props.name, this.props.id);
+  };
+
+  render() {
+    return (
+      <article className="customer">
+        <h3>{this.props.name}</h3>
+        <p>Phone: {this.props.phone}</p>
+        <p>Account Credit: ${this.props.accountCredit}</p>
+        <p>Checked Out Movies Count: {this.props.checkedOutMoviesCount}</p>
+        <br/>
+        <button onClick={this.selectedCustomerCallback} >Select This Customer</button>
+      </article>
+    );
+  }
+}
+
+export default Customer;
+
+Customer.propTypes = {
+  name: PropTypes.string.isRequired,
+  selectedCustomerCallback: PropTypes.func.isRequired,
+  checkedOutMoviesCount: PropTypes.func.isRequired,
+  id: PropTypes.number.isRequired,
+  phone: PropTypes.string.isRequired,
+  accountCredit: PropTypes.string.isRequired,
+};

src/components/Customers.css

@@ -0,0 +1,6 @@
+.customers {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: 2em;
+
+}

src/components/Customers.js

@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+import axios from 'axios';
+import PropTypes from 'prop-types';
+import Customer from './Customer.js'
+import './Customers.css';
+
+class Customers extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      customersList: [],
+    };
+  }
+
+  componentDidMount = () => {
+    console.log('Component did mount was called');
+    axios.get(`http://localhost:3000/customers/`)
+    .then((response) => {
+      console.log(response.data);
+      this.setState({ customersList: response.data });
+    })
+    .catch((error) => {
+      console.log(error);
+      this.setState({ message: error.message });
+    });
+  };
+
+  renderCustomersList = () => {
+    const customersList = this.state.customersList.map((customer) => {
+      return (
+        <Customer
+        key={customer.id}
+        id={customer.id}
+        name={customer.name}
+        phone={customer.phone}
+        accountCredit={customer.account_credit}
+        checkedOutMoviesCount={customer.movies_checked_out_count}
+        selectedCustomerCallback={this.props.selectedCustomerCallback}
+        />
+      );
+    });
+    return customersList;
+  };
+
+  render() {
+    return (
+      <section className="customers">
+      <h3>Customers List</h3>
+      <ul><li>{this.renderCustomersList()}</li></ul>
+      </section>
+    );
+  }
+}
+
+export default Customers;
+
+Customers.propTypes = {
+  checkedOutMoviesCount: PropTypes.func.isRequired,
+  selectedCustomerCallback: PropTypes.func.isRequired,
+
+};

src/components/Library.css

@@ -0,0 +1,5 @@
+.library {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: 2em;
+}