Elise customers

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "axios": "^0.19.0",
+    "bootstrap": "^4.3.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-router-dom": "^4.4.0-beta.8",

src/App.js

@@ -4,14 +4,29 @@ import './App.css';
 
 import Search from './components/Search';
 import MovieLibrary from './components/MovieLibrary';
-import Customer from './components/Customer';
 import Checkout from './components/Checkout';
+import CustomerList from './components/CustomerList';
+import Customer from './components/Customer';
 
 class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedCustomer: '',
+    }
+  }
+
+  selectCustomer = (customerName) => {
+    console.log(customerName);
+    this.setState({
+      selectedCustomer: customerName,
+    });
+  }
+
   render() {
     return (
       <div className="App">
-        <header className="App-header">
+
         <Router>
             <nav>
               <ul>
@@ -25,26 +40,20 @@ class App extends Component {
                   <Link to='/movielibrary'>Movie Library</Link>
                 </li>
                 <li>
-                  <Link to='/customers'>Customer List</Link>
-                </li>
-                <li>
-                  <Link to='/checkout'>Checkout</Link>
+                  <Link to='/customerlist'>Customer List</Link>
                 </li>
               </ul>
             </nav>
 
             <Route path="/search" component={Search} />
             <Route path="/movielibrary" component={MovieLibrary} />
-            <Route path="/customers" component={Customer} />
-            <Route path="/checkout" component={Checkout} />
+            <Route path="/customerlist" render={(props) => <CustomerList {...props} selectedCustomer={this.selectCustomer} />} />
 
           </Router>
-        </header>
-
-
-
 
-
+          <section>
+            <Checkout selectedCustomer={this.state.selectedCustomer}/>
+          </section>
       </div>
     );
   }

src/components/Checkout.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const Checkout = (props) => {
+  return(
+    <div>
+      <div>
+        Selected Customer: {props.selectedCustomer}
+      </div>
+      <div>
+        Movie
+      </div>
+    </div>
+  );
+}
+
+export default Checkout;

src/components/Customer.js

@@ -0,0 +1,27 @@
+import React, {Component} from 'react';
+
+class Customer extends Component {
+  constructor (props) {
+    super(props);
+  }
+
+  onChangeHandler = (event) => {
+    this.props.selectedCallback(event.target.value);
+  }
+
+  render () {
+    return(
+      <label>
+        <input 
+          type="radio" 
+          value={this.props.customerId} 
+          onChange={this.onChangeHandler}
+          checked={this.props.isSelected ===  this.props.name} 
+        />
+        {this.props.name}
+      </label>
+    );
+  }
+}
+
+export default Customer;

src/components/CustomerList.js

@@ -1,18 +1,82 @@
 import React, { Component } from 'react';
+import axios from 'axios';
+import Customer from './Customer';
+
+const URL_CUSTOMERS = 'http://localhost:4000/customers';
 
 class CustomerList extends Component {
   constructor() {
     super();
     this.state = {
+      allCustomers: [],
+      errorMessage: [],
+      selectedCustomer: '',
     }
   }
+
+  componentDidMount = () => {
+    const allCustomers = [];
+    axios.get(URL_CUSTOMERS)
+    .then((response) => {
+      response.data.forEach((element) => {
+        allCustomers.push(element);
+      })
+      this.setState({allCustomers, });
+    })
+    .catch((error) => {
+      const errorMessage = this.state.errorMessage;
+      const newError = error.response.data.errors.text;
+      newError.forEach((text) => {
+        errorMessage.push(text);
+      })
+      this.setState({errorMessage, });
+    })
+  }
+
+  updateSelected = (customerId) => {
+    this.state.allCustomers.forEach((customer) => {
+      if(customer.id === parseInt(customerId, 10)) {
+        this.setState({
+          selectedCustomer: customer.name,
+        })
+      }
+    })
+  }
+
+  onSaveButtonClick = (event) => {
+    event.preventDefault();
+    this.props.selectedCustomer(this.state.selectedCustomer);
+  }
+
+  displayCustomers = () => {
+    const displayedCustomers = this.state.allCustomers.map((customer) => {
+      return(
+        <div>
+          <Customer
+            key={customer.id}
+            customerId={customer.id}
+            name={customer.name}
+            selectedCallback={this.updateSelected}
+            isSelected={this.state.selectedCustomer}
+          />
+        </div>
+      )
+    })
+    return (
+      <form>
+        { displayedCustomers }
+        <button onClick={this.onSaveButtonClick}>Save</button>
+      </form>
+    );
+  }
+
   render() {
     return(
-      <div>
-        Customer List
-      </div>
+      <section>
+        <h3>All Customers</h3>
+        {this.displayCustomers()}
+      </section>
     )
-
   }
 }
 

src/index.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 ReactDOM.render(<App />, document.getElementById('root'));
 registerServiceWorker();