Permalink
Browse files

Created a more generic PriceForm component

- [ ] Fixes #426

Modifying form to use single onChange event.

ONLY MEANT FOR TESTING, NOT MERGING.
  • Loading branch information...
hackrush01 authored and kauffj committed Aug 4, 2017
1 parent 06979f1 commit 9c3d63353da7944e44322161aef8037208ed1658
View
@@ -8,23 +8,23 @@ 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
*
*
### Fixed
* Tiles will no longer be blurry on hover (Windows only bug)
* Tiles will no longer be blurry on hover (Windows only bug)
*
### Deprecated
*
*
### Removed
*
* Removed one instance of string "Max Purchase Price" from settings page, it's redudant.
*
## [0.14.3] - 2017-08-03
@@ -0,0 +1,5 @@
import React from "react";
import { connect } from "react-redux";
import FormFieldPrice from "./view";
export default connect(null, null)(FormFieldPrice);
@@ -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;
@@ -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">
@@ -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">
{__(

0 comments on commit 9c3d633

Please sign in to comment.