From da2401cf98162db534c5133458b2b20bbb73d818 Mon Sep 17 00:00:00 2001
From: Cory House <housecor@gmail.com>
Date: Wed, 2 Mar 2016 05:58:13 -0600
Subject: [PATCH] Adding FuelSavingsForm.js which was accidentally removed.

---
 src/components/FuelSavingsForm.js | 69 +++++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 src/components/FuelSavingsForm.js

diff --git a/src/components/FuelSavingsForm.js b/src/components/FuelSavingsForm.js
new file mode 100644
index 000000000..f3a121c9b
--- /dev/null
+++ b/src/components/FuelSavingsForm.js
@@ -0,0 +1,69 @@
+import React, {PropTypes} from 'react';
+import FuelSavingsResults from './FuelSavingsResults';
+import FuelSavingsTextInput from './FuelSavingsTextInput';
+
+// Destrucuring props for brevity below.
+const FuelSavingsForm = ({saveFuelSavings, calculateFuelSavings, appState}) => {
+  const onTimeframeChange = function (e) {
+    calculateFuelSavings(appState, 'milesDrivenTimeframe', e.target.value);
+  };
+
+  const fuelSavingsKeypress = function (name, value) {
+    calculateFuelSavings(appState, name, value);
+  };
+
+  return (
+    <div>
+      <h2>Fuel Savings Analysis</h2>
+      <table>
+        <tbody>
+        <tr>
+          <td><label htmlFor="newMpg">New Vehicle MPG</label></td>
+          <td><FuelSavingsTextInput onChange={fuelSavingsKeypress} name="newMpg" value={appState.newMpg}/></td>
+        </tr>
+        <tr>
+          <td><label htmlFor="tradeMpg">Trade-in MPG</label></td>
+          <td><FuelSavingsTextInput onChange={fuelSavingsKeypress} name="tradeMpg" value={appState.tradeMpg}/></td>
+        </tr>
+        <tr>
+          <td><label htmlFor="newPpg">New Vehicle price per gallon</label></td>
+          <td><FuelSavingsTextInput onChange={fuelSavingsKeypress} name="newPpg" value={appState.newPpg}/></td>
+        </tr>
+        <tr>
+          <td><label htmlFor="tradePpg">Trade-in price per gallon</label></td>
+          <td><FuelSavingsTextInput onChange={fuelSavingsKeypress} name="tradePpg" value={appState.tradePpg}/></td>
+        </tr>
+        <tr>
+          <td><label htmlFor="milesDriven">Miles Driven</label></td>
+          <td>
+            <FuelSavingsTextInput onChange={fuelSavingsKeypress} name="milesDriven" value={appState.milesDriven}/> miles
+            per
+            <select name="milesDrivenTimeframe" onChange={onTimeframeChange} value={appState.milesDrivenTimeframe}>
+              <option value="week">Week</option>
+              <option value="month">Month</option>
+              <option value="year">Year</option>
+            </select>
+          </td>
+        </tr>
+        <tr>
+          <td><label>Date Modified</label></td>
+          <td>{appState.dateModified}</td>
+        </tr>
+        </tbody>
+      </table>
+
+      <hr/>
+
+      {appState.necessaryDataIsProvidedToCalculateSavings && <FuelSavingsResults savings={appState.savings}/>}
+      <input type="submit" value="Save" onClick={() => saveFuelSavings(appState)}/>
+    </div>
+  );
+};
+
+FuelSavingsForm.propTypes = {
+  saveFuelSavings: PropTypes.func.isRequired,
+  calculateFuelSavings: PropTypes.func.isRequired,
+  appState: PropTypes.object.isRequired
+};
+
+export default FuelSavingsForm;