Created a more generic PriceForm component

- [ ] Fixes #426

Modifying form to use single onChange event.

ONLY MEANT FOR TESTING, NOT MERGING.

CHANGELOG.md

@@ -8,7 +8,7 @@ Web UI version numbers should always match the corresponding version of LBRY App
 
 ## [Unreleased]
 ### Added
-  *
+  * Added a new component, "PriceForm" which is now used in Publish and Settings
   *
 
 ### Changed
@@ -16,7 +16,7 @@ Web UI version numbers should always match the corresponding version of LBRY App
   *
 
 ### Fixed
-  * Tiles will no longer be blurry on hover (Windows only bug) 
+  * Tiles will no longer be blurry on hover (Windows only bug)
   *
 
 ### Deprecated
@@ -24,7 +24,7 @@ Web UI version numbers should always match the corresponding version of LBRY App
   *
 
 ### Removed
-  *
+  * Removed one instance of string "Max Purchase Price" from settings page, it's redudant.
   *
 
 ## [0.14.3] - 2017-08-03

ui/js/component/priceForm/index.js

@@ -0,0 +1,5 @@
+import React from "react";
+import { connect } from "react-redux";
+import FormFieldPrice from "./view";
+
+export default connect(null, null)(FormFieldPrice);

ui/js/component/priceForm/view.jsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { FormField } from "component/form";
+
+class FormFieldPrice extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      price: {
+        feeAmount: "",
+        feeCurrency: "LBC",
+      },
+    };
+  }
+
+  handleFeeAmountChange(event) {
+    this.setState({
+      price: {
+        ...this.state.price,
+        feeAmount: event.target.value,
+      },
+    });
+    this.props.onChange(event.target.name, this.state.price);
+    console.log(this.state.price);
+  }
+
+  handleFeeCurrencyChange(event) {
+    this.setState({
+      price: {
+        ...this.state.price,
+        feeCurrency: event.target.value,
+      },
+    });
+    this.props.onChange(event.target.name, this.state.price);
+    console.log(this.state.price);
+  }
+
+  render() {
+    const {
+      defaultFeeValue,
+      defaultCurrencyValue,
+      placeholder,
+      min,
+      step,
+    } = this.props;
+
+    return (
+      <span className={"form-field "}>
+        <FormField
+          type="number"
+          name="amount"
+          min={min}
+          placeholder={placeholder || null}
+          step={step}
+          onChange={event => this.handleFeeAmountChange(event)}
+          defaultValue={defaultFeeValue}
+          className="form-field__input--inline"
+        />
+        <FormField
+          type="select"
+          name="currency"
+          onChange={event => this.handleFeeCurrencyChange(event)}
+          defaultValue={defaultCurrencyValue}
+          className="form-field__input--inline"
+        >
+          <option value="LBC">{__("LBRY credits")}</option>
+          <option value="USD">{__("US Dollars")}</option>
+        </FormField>
+      </span>
+    );
+  }
+}
+
+export default FormFieldPrice;

ui/js/component/publishForm/view.jsx

@@ -3,6 +3,7 @@ import lbry from "lbry";
 import lbryuri from "lbryuri";
 import { FormField, FormRow } from "component/form.js";
 import Link from "component/link";
+import FormFieldPrice from "component/priceForm";
 import Modal from "component/modal";
 import { BusyMessage } from "component/common";
 import ChannelSection from "./internal/channelSection";
@@ -21,7 +22,7 @@ class PublishForm extends React.PureComponent {
       bid: 10,
       hasFile: false,
       feeAmount: "",
-      feeCurrency: "USD",
+      feeCurrency: "LBC",
       channel: "anonymous",
       newChannelName: "@",
       newChannelBid: 10,
@@ -306,21 +307,21 @@ class PublishForm extends React.PureComponent {
     });
   }
 
-  handleFeeAmountChange(event) {
-    this.setState({
-      feeAmount: event.target.value,
-    });
-  }
+  handleFeeAmtAndCurrChange(event) {
+    name = event.target.name;
+    let targetValue = { [name]: event.target.value };
 
-  handleFeeCurrencyChange(event) {
-    this.setState({
-      feeCurrency: event.target.value,
-    });
+    if ([name] == "amount") {
+      this.setState({ feeAmount: targetValue.amount });
+    } else {
+      this.setState({ feeCurrency: targetValue.currency });
+    }
   }
 
   handleFeePrefChange(feeEnabled) {
     this.setState({
       isFee: feeEnabled,
+      feeAmount: this.state.feeAmount == "" ? "5.00" : this.state.feeAmount,
     });
   }
 
@@ -666,23 +667,14 @@ class PublishForm extends React.PureComponent {
                 checked={this.state.isFee}
               />
               <span className={!this.state.isFee ? "hidden" : ""}>
-                <FormField
-                  type="number"
-                  className="form-field__input--inline"
-                  step="0.01"
-                  placeholder="1.00"
+                <FormFieldPrice
                   min="0.01"
-                  onChange={event => this.handleFeeAmountChange(event)}
-                />{" "}
-                <FormField
-                  type="select"
-                  onChange={event => {
-                    this.handleFeeCurrencyChange(event);
-                  }}
-                >
-                  <option value="USD">{__("US Dollars")}</option>
-                  <option value="LBC">{__("LBRY credits")}</option>
-                </FormField>
+                  placeholder="5.00"
+                  step="0.1"
+                  onChange={event => this.handleFeeAmtAndCurrChange(event)}
+                  defaultFeeValue="5.00"
+                  defaultCurrencyValue="LBC"
+                />
               </span>
               {this.state.isFee
                 ? <div className="form-field__helper">

ui/js/page/settings/view.jsx

@@ -3,6 +3,7 @@ import { FormField, FormRow } from "component/form.js";
 import SubHeader from "component/subHeader";
 import lbry from "lbry.js";
 import Link from "component/link";
+import FormFieldPrice from "component/priceForm";
 
 const { remote } = require("electron");
 
@@ -55,24 +56,20 @@ class SettingsPage extends React.PureComponent {
     this.setDaemonSetting("download_directory", event.target.value);
   }
 
-  onKeyFeeChange(event) {
+  onKeyFeeChange(name, price) {
     var oldSettings = this.props.daemonSettings.max_key_fee;
     var newSettings = {
       amount: oldSettings.amount,
       currency: oldSettings.currency,
     };
-    newSettings.amount = Number(event.target.value);
 
-    this.setDaemonSetting("max_key_fee", newSettings);
-  }
-
-  onFeeCurrencyChange(event) {
-    var oldSettings = this.props.daemonSettings.max_key_fee;
-    var newSettings = {
-      amount: oldSettings.amount,
-      currency: oldSettings.currency,
-    };
-    newSettings.currency = event.target.value;
+    if (name == "amount") {
+      newSettings.amount = Number(price.feeAmount);
+      console.log(newSettings.amount, price.feeAmount);
+    } else {
+      newSettings.currency = price.feeCurrency;
+      console.log(newSettings.amount, price.feeAmount);
+    }
 
     this.setDaemonSetting("max_key_fee", newSettings);
   }
@@ -151,11 +148,6 @@ class SettingsPage extends React.PureComponent {
             <h3>{__("Max Purchase Price")}</h3>
           </div>
           <div className="card__content">
-            <div className="form-row__label-row">
-              <div className="form-field__label">
-                {__("Max Purchase Price")}
-              </div>
-            </div>
             <FormRow
               type="radio"
               name="max_key_fee"
@@ -180,27 +172,15 @@ class SettingsPage extends React.PureComponent {
                 }
               />
               {!daemonSettings.disable_max_key_fee
-                ? <FormField
-                    type="number"
+                ? <FormFieldPrice
                     min="0"
-                    placeholder="50"
+                    placeholder="50.0"
                     step="1"
                     onChange={this.onKeyFeeChange.bind(this)}
-                    defaultValue={daemonSettings.max_key_fee.amount}
-                    className="form-field__input--inline"
+                    defaultFeeValue={daemonSettings.max_key_fee.amount}
+                    defaultCurrencyValue={daemonSettings.max_key_fee.currency}
                   />
                 : ""}
-              {!daemonSettings.disable_max_key_fee
-                ? <FormField
-                    type="select"
-                    onChange={this.onFeeCurrencyChange.bind(this)}
-                    defaultValue={daemonSettings.max_key_fee.currency}
-                    className="form-field__input--inline"
-                  >
-                    <option value="USD">{__("US Dollars")}</option>
-                    <option value="LBC">{__("LBRY credits")}</option>
-                  </FormField>
-                : ""}
             </div>
             <div className="form-field__helper">
               {__(