From af3b1f83827899ad5275e5130429fdffd04fbe27 Mon Sep 17 00:00:00 2001
From: Ryan McDermott <ryantmcdermott@gmail.com>
Date: Wed, 1 Mar 2017 21:04:23 -0800
Subject: [PATCH] Finish reusable bad

---
 .eslintignore               |   1 +
 src/2-reusable/bad/index.js | 110 +++++++++++++++++++++++++++++++++++-
 src/App.js                  |   2 +-
 3 files changed, 109 insertions(+), 4 deletions(-)
 create mode 100644 .eslintignore

diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..6be4796
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1 @@
+src/1-readable/bad/*.js
diff --git a/src/2-reusable/bad/index.js b/src/2-reusable/bad/index.js
index 864d94d..1b4f818 100644
--- a/src/2-reusable/bad/index.js
+++ b/src/2-reusable/bad/index.js
@@ -1,13 +1,117 @@
 import React, { Component } from 'react';
 
-class ReusableBad extends Component {
+class Inventory extends Component {
+  constructor() {
+    super();
+    this.state = {
+      localCurrency: 'usd',
+      inventory: [
+        {
+          product: 'Flashlight',
+          img: '/flashlight.jpg',
+          desc: 'A really great flashlight',
+          price: 100,
+          currency: 'usd',
+        },
+        {
+          product: 'Tin can',
+          img: '/tin_can.jpg',
+          desc: 'Pretty much what you would expect from a tin can',
+          price: 32,
+          currency: 'usd',
+        },
+        {
+          product: 'Cardboard Box',
+          img: '/cardboard_box.png',
+          desc: 'It holds things',
+          price: 5,
+          currency: 'usd',
+        },
+      ],
+    };
+  }
+
+  convertCurrency(amount, fromCurrency, toCurrency) {
+    let currencyConversions = {
+      usd: {
+        rupee: 66.78,
+        yuan: 6.87,
+        usd: 1,
+      },
+    };
+
+    let currencySymbols = {
+      usd: '$',
+      rupee: '₹',
+      yuan: '元',
+    };
+
+    return currencySymbols[toCurrency] + amount * currencyConversions[fromCurrency][toCurrency];
+  }
+
+  onSelectCurrency(e) {
+    this.setState({
+      localCurrency: e.target.value,
+    });
+  }
+
   render() {
     return (
       <div>
-        Reusable Bad
+        <label htmlFor="currencySelector">Currency:</label>
+        <select
+          className="u-full-width"
+          id="currencySelector"
+          onChange={this.onSelectCurrency.bind(this)}
+          value={this.state.localCurrency}
+        >
+          <option value="usd">USD</option>
+          <option value="rupee">Rupee</option>
+          <option value="yuan">Yuan</option>
+        </select>
+        <table style={{ width: '100%' }}>
+          <tbody>
+            <tr>
+              <th>
+                Product
+              </th>
+
+              <th>
+                Image
+              </th>
+
+              <th>
+                Description
+              </th>
+
+              <th>
+                Price
+              </th>
+            </tr>
+            {this.state.inventory.map((item, idx) => (
+              <tr key={idx}>
+                <td>
+                  {item.product}
+                </td>
+
+                <td>
+                  <img src={item.img} alt="" />
+                </td>
+
+                <td>
+                  {item.desc}
+                </td>
+
+                <td>
+                  {this.convertCurrency(item.price, item.currency, this.state.localCurrency)}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
       </div>
     );
   }
 }
 
-export default ReusableBad;
+export default Inventory;
diff --git a/src/App.js b/src/App.js
index 04efb03..d70eebb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -34,7 +34,7 @@ class App extends Component {
   constructor() {
     super();
     this.state = {
-      section: 'readable',
+      section: 'reusable',
       quality: 'bad',
     };
   }