Skip to content

Commit

Permalink
Merge pull request #1081 from poanetwork/issue#1033#step3
Browse files Browse the repository at this point in the history 
(Bug) Keep data between the steps (Step 3)
  • Loading branch information
@fernandomg
fernandomg committed Aug 27, 2018
2 parents 0a43847 + 93c3b2d commit 0199fbe
Show file tree
Hide file tree
Showing 14 changed files with 391 additions and 100 deletions.
4 changes: 2 additions & 2 deletions src/components/Common/ButtonContinue.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@ export class ButtonContinue extends Component {
* @returns {*}
*/
render() {
const { status, type } = this.props
const { status, type, onClick } = this.props
const submitButtonClass = classNames('button', 'button_fill', 'button_no_border', {
button_disabled: !status
})

return (
<button type={type} disabled={!status} className={submitButtonClass}>
<button onClick={onClick} type={type} disabled={!status} className={submitButtonClass}>
Continue
</button>
)
Expand Down
17 changes: 14 additions & 3 deletions src/components/Common/DutchAuctionBlock.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,14 @@ export const DutchAuctionBlock = inject('tierStore', 'tokenStore')(
return composeValidators(...listOfValidations)(value)
}

const onChangeWhitelisted = (value, input, index) => {
//Clear whitelist
if (tierStore) {
tierStore.emptyWhitelist(index)
}
return input.onChange(value)
}

return (
<div>
{fields.map((name, index) => (
Expand Down Expand Up @@ -153,7 +161,10 @@ export const DutchAuctionBlock = inject('tierStore', 'tokenStore')(
side="left"
label={SUPPLY_SHORT}
description={DESCRIPTION.SUPPLY}
disabled={tierStore && tierStore.tiers[index].whitelist.length}
disabled={
(tierStore && tierStore.tiers[index].whitelistEnabled === 'yes') ||
(tierStore && tierStore.tiers[index].whitelist.length)
}
/>
<Field
name={`${name}.whitelistEnabled`}
Expand All @@ -166,7 +177,7 @@ export const DutchAuctionBlock = inject('tierStore', 'tokenStore')(
type="radio"
checked={input.value === 'yes'}
value="yes"
onChange={() => input.onChange('yes')}
onChange={() => onChangeWhitelisted('yes', input, index)}
/>
<span className="title">yes</span>
</label>
Expand All @@ -175,7 +186,7 @@ export const DutchAuctionBlock = inject('tierStore', 'tokenStore')(
type="radio"
checked={input.value === 'no'}
value="no"
onChange={() => input.onChange('no')}
onChange={() => onChangeWhitelisted('no', input, index)}
/>
<span className="title">no</span>
</label>
Expand Down
17 changes: 14 additions & 3 deletions src/components/Common/TierBlock.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,14 @@ const inputErrorStyle = {
}

export const TierBlock = ({ fields, ...props }) => {
const onChangeWhitelisted = (value, input, index) => {
//Clear whitelist
if (props.tierStore) {
props.tierStore.emptyWhitelist(index)
}
return input.onChange(value)
}

return (
<div>
{fields.map((name, index) => (
Expand Down Expand Up @@ -90,7 +98,7 @@ export const TierBlock = ({ fields, ...props }) => {
type="radio"
checked={input.value === 'yes'}
value="yes"
onChange={() => input.onChange('yes')}
onChange={() => onChangeWhitelisted('yes', input, index)}
/>
<span className="title">yes</span>
</label>
Expand All @@ -100,7 +108,7 @@ export const TierBlock = ({ fields, ...props }) => {
type="radio"
checked={input.value === 'no'}
value="no"
onChange={() => input.onChange('no')}
onChange={() => onChangeWhitelisted('no', input, index)}
/>
<span className="title">no</span>
</label>
Expand Down Expand Up @@ -128,7 +136,10 @@ export const TierBlock = ({ fields, ...props }) => {
name={`${name}.supply`}
errorStyle={inputErrorStyle}
side="right"
disabled={props.tierStore && props.tierStore.tiers[index].whitelist.length}
disabled={
(props.tierStore && props.tierStore.tiers[index].whitelistEnabled === 'yes') ||
(props.tierStore && props.tierStore.tiers[index].whitelist.length)
}
/>
</div>
<div className="input-block-container">
Expand Down
100 changes: 71 additions & 29 deletions src/components/stepThree/GasPriceInput.js
View file
Original file line number Diff line number Diff line change
@@ -1,68 +1,105 @@
import React, { Component } from 'react'
import { GAS_PRICE } from '../../utils/constants'
import { objectKeysToLowerCase } from '../../utils/utils'
import { Error } from '../Common/Error'
import { inject, observer } from 'mobx-react'

@inject('generalStore')
@observer
class GasPriceInput extends Component {
constructor(props) {
super(props)
state = {
isCustom: false,
customGasPrice: GAS_PRICE.CUSTOM.PRICE,
gasTypeSelected: {}
}

async componentDidMount() {
const { generalStore } = this.props
const gasTypeSelected = objectKeysToLowerCase(generalStore.getGasTypeSelected)
this.setState({ gasTypeSelected: gasTypeSelected })

this.state = {
isCustom: false,
customGasPrice: undefined
if (gasTypeSelected.id === GAS_PRICE.CUSTOM.ID) {
this.setState({
isCustom: true,
customGasPrice: gasTypeSelected.price
})
}
}

handleNonCustomSelected = value => {
const { input } = this.props
this.setState({
isCustom: false
})
this.props.input.onChange(value)
}

handleCustomSelected = () => {
const { input, gasPrices } = this.props
const gasTypeSelected = objectKeysToLowerCase(value)
this.handleGasType(gasTypeSelected)

input.onChange(gasTypeSelected)
}

const newState = { isCustom: true }
handleCustomSelected = value => {
const { input } = this.props
this.setState({
isCustom: true
})

if (this.state.customGasPrice === undefined) {
const slow = gasPrices.find(gasPrice => gasPrice.id === GAS_PRICE.SLOW.ID)
newState.customGasPrice = slow.price
let gasTypeSelected = objectKeysToLowerCase(GAS_PRICE.CUSTOM)
if (this.state.customGasPrice) {
gasTypeSelected.price = this.state.customGasPrice
}

this.setState(newState, () => {
input.onChange(
Object.assign(
{},
{
id: GAS_PRICE.CUSTOM.ID,
price: this.state.customGasPrice
}
)
this.handleGasType(gasTypeSelected)
input.onChange(
Object.assign(
{},
{
id: gasTypeSelected.id,
price: gasTypeSelected.price
}
)
)
}

handleGasType = value => {
const { updateGasTypeSelected } = this.props

updateGasTypeSelected(value)
this.setState({
gasTypeSelected: value
})
}

handleCustomGasPriceChange = value => {
const { input } = this.props
const { updateGasTypeSelected, input } = this.props

let gasTypeSelected = this.state.gasTypeSelected
gasTypeSelected.price = value

updateGasTypeSelected(gasTypeSelected)
this.setState({
gasTypeSelected: gasTypeSelected,
customGasPrice: value
})

input.onChange(
Object.assign(
{},
{
id: GAS_PRICE.CUSTOM.ID,
id: gasTypeSelected.id,
price: value
}
)
)
}

compareChecked = value => {
// eslint-disable-next-line
return new String(this.state.gasTypeSelected.id).valueOf() === new String(value).valueOf()
}

render() {
const { input, side, gasPrices } = this.props

return (
<div className={side}>
<label htmlFor={input.name} className="label">
Expand All @@ -74,11 +111,13 @@ class GasPriceInput extends Component {
<input
id={gasPrice.id}
type="radio"
checked={input.value.id === gasPrice.id}
onChange={() => {
value={gasPrice.id}
checked={this.compareChecked(gasPrice.id)}
name="gas-price"
onChange={e => {
gasPrice.id !== GAS_PRICE.CUSTOM.ID
? this.handleNonCustomSelected(gasPrice)
: this.handleCustomSelected()
: this.handleCustomSelected(e.target.value)
}}
/>
<span className="title">{gasPrice.description}</span>
Expand All @@ -91,7 +130,10 @@ class GasPriceInput extends Component {
type="number"
className="input"
value={this.state.customGasPrice}
onChange={e => this.handleCustomGasPriceChange(e.target.value)}
name="gas-price-custom-value"
onChange={e => {
this.handleCustomGasPriceChange(e.target.value)
}}
/>
) : null}
<p className="description">Slow is cheap, fast is expensive</p>
Expand Down
72 changes: 55 additions & 17 deletions src/components/stepThree/StepThreeFormDutchAuction.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import { FieldArray } from 'react-final-form-arrays'
import { WhenFieldChanges } from '../Common/WhenFieldChanges'
import { InputField2 } from '../Common/InputField2'
import GasPriceInput from './GasPriceInput'
import { ButtonContinue } from '../Common/ButtonContinue'
import { gweiToWei } from '../../utils/utils'
import classnames from 'classnames'
import {
composeValidators,
isAddress,
Expand Down Expand Up @@ -33,12 +33,52 @@ const inputErrorStyle = {
height: '20px'
}

export const StepThreeFormDutchAuction = ({ handleSubmit, invalid, pristine, ...props }) => {
const submitButtonClass = classnames('button', 'button_fill', {
button_disabled: pristine || invalid
})
export const StepThreeFormDutchAuction = ({ handleSubmit, invalid, submitting, pristine, form, reload, ...props }) => {
const status = !(submitting || invalid)

const handleOnChange = ({ values }) => {
/**
* Set gas type selected on gas price input
* @param value
*/
const updateGasTypeSelected = value => {
const { updateGasTypeSelected } = props
updateGasTypeSelected(value)
}

const handleValidateGasPrice = value => {
const errors = composeValidators(
isDecimalPlacesNotGreaterThan(VALIDATION_MESSAGES.DECIMAL_PLACES_9)(9),
isGreaterOrEqualThan(VALIDATION_MESSAGES.NUMBER_GREATER_OR_EQUAL_THAN)(0.1)
)(value.price)
if (errors) return errors.shift()
}

const handleBurnExcessChange = (value, input) => {
const { generalStore } = props
generalStore.setBurnExcess(value)
input.onChange(value)
}

const setFieldAsTouched = ({ values, errors }) => {
if (reload) {
const tiers = values && values.tiers ? values.tiers : []
tiers.forEach((tier, index) => {
form.mutators.setFieldTouched(`tiers[${index}].tier`, true)
form.mutators.setFieldTouched(`tiers[${index}].updatable`, true)
form.mutators.setFieldTouched(`tiers[${index}].whitelistEnabled`, true)
form.mutators.setFieldTouched(`tiers[${index}].startTime`, true)
form.mutators.setFieldTouched(`tiers[${index}].rate`, true)
form.mutators.setFieldTouched(`tiers[${index}].endTime`, true)
form.mutators.setFieldTouched(`tiers[${index}].minRate`, true)
form.mutators.setFieldTouched(`tiers[${index}].maxRate`, true)
form.mutators.setFieldTouched(`tiers[${index}].supply`, true)
form.mutators.setFieldTouched(`tiers[${index}].minCap`, true)
})
form.mutators.setFieldTouched(`gasPrice`, true)
}
}

const handleOnChange = ({ values, errors }) => {
props.tierStore.updateWalletAddress(values.walletAddress, VALID)
props.tierStore.updateBurnExcess(values.burnExcess, VALID)
props.generalStore.setGasPrice(gweiToWei(values.gasPrice.price))
Expand All @@ -61,6 +101,9 @@ export const StepThreeFormDutchAuction = ({ handleSubmit, invalid, pristine, ...
const endTime = tiers.length > 0 ? tiers[tiers.length - 1].endTime : null
props.crowdsaleStore.setProperty('supply', totalSupply)
props.crowdsaleStore.setProperty('endTime', endTime)

// Set fields as touched
setFieldAsTouched({ values, errors })
}

return (
Expand Down Expand Up @@ -100,7 +143,7 @@ export const StepThreeFormDutchAuction = ({ handleSubmit, invalid, pristine, ...
type="radio"
checked={input.value === 'yes'}
value="yes"
onChange={() => input.onChange('yes')}
onChange={e => handleBurnExcessChange(e.target.value, input)}
/>
<span className="title">yes</span>
</label>
Expand All @@ -109,7 +152,7 @@ export const StepThreeFormDutchAuction = ({ handleSubmit, invalid, pristine, ...
type="radio"
checked={input.value === 'no'}
value="no"
onChange={() => input.onChange('no')}
onChange={e => handleBurnExcessChange(e.target.value, input)}
/>
<span className="title">no</span>
</label>
Expand All @@ -121,16 +164,13 @@ export const StepThreeFormDutchAuction = ({ handleSubmit, invalid, pristine, ...
</div>
</div>
<Field
id="gasPrice"
name="gasPrice"
component={GasPriceInput}
side="right"
gasPrices={props.gasPricesInGwei}
validate={value =>
composeValidators(
isDecimalPlacesNotGreaterThan(VALIDATION_MESSAGES.DECIMAL_PLACES_9)(9),
isGreaterOrEqualThan(VALIDATION_MESSAGES.NUMBER_GREATER_THAN)(0.1)
)(value.price)
}
updateGasTypeSelected={updateGasTypeSelected}
validate={value => handleValidateGasPrice(value)}
/>
</div>
</div>
Expand All @@ -141,9 +181,7 @@ export const StepThreeFormDutchAuction = ({ handleSubmit, invalid, pristine, ...
</FieldArray>

<div className="button-container">
<span onClick={handleSubmit} className={submitButtonClass}>
Continue
</span>
<ButtonContinue onClick={handleSubmit} status={status} />
</div>

<FormSpy subscription={{ values: true }} onChange={handleOnChange} />
Expand Down
Loading

0 comments on commit 0199fbe

Please sign in to comment.