diff --git a/CHANGELOG.md b/CHANGELOG.md
index a7089af95..b292a3b65 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/ui/js/component/priceForm/index.js b/ui/js/component/priceForm/index.js
new file mode 100644
index 000000000..f56521afe
--- /dev/null
+++ b/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);
diff --git a/ui/js/component/priceForm/view.jsx b/ui/js/component/priceForm/view.jsx
new file mode 100644
index 000000000..be325dcd0
--- /dev/null
+++ b/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 (
+
+ this.handleFeeAmountChange(event)}
+ defaultValue={defaultFeeValue}
+ className="form-field__input--inline"
+ />
+ this.handleFeeCurrencyChange(event)}
+ defaultValue={defaultCurrencyValue}
+ className="form-field__input--inline"
+ >
+
+
+
+
+ );
+ }
+}
+
+export default FormFieldPrice;
diff --git a/ui/js/component/publishForm/view.jsx b/ui/js/component/publishForm/view.jsx
index 970787205..ebf6def97 100644
--- a/ui/js/component/publishForm/view.jsx
+++ b/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}
/>
- this.handleFeeAmountChange(event)}
- />{" "}
- {
- this.handleFeeCurrencyChange(event);
- }}
- >
-
-
-
+ placeholder="5.00"
+ step="0.1"
+ onChange={event => this.handleFeeAmtAndCurrChange(event)}
+ defaultFeeValue="5.00"
+ defaultCurrencyValue="LBC"
+ />
{this.state.isFee
?
diff --git a/ui/js/page/settings/view.jsx b/ui/js/page/settings/view.jsx
index d7646c476..e32f22738 100644
--- a/ui/js/page/settings/view.jsx
+++ b/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 {
{__("Max Purchase Price")}
-
-
- {__("Max Purchase Price")}
-
-
{!daemonSettings.disable_max_key_fee
- ?
: ""}
- {!daemonSettings.disable_max_key_fee
- ?
-
-
-
- : ""}
{__(