form validation wip

This commit is contained in:
Mikhail Mikheev 2019-04-24 13:48:33 +04:00
parent 30228345d3
commit d57c4caa15
3 changed files with 36 additions and 30 deletions

View File

@ -80,7 +80,6 @@
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-final-form": "^4.1.0",
"react-final-form-listeners": "^1.0.2",
"react-hot-loader": "4.8.4",
"react-infinite-scroll-component": "^4.5.2",
"react-redux": "7.0.2",

View File

@ -1,7 +1,6 @@
// @flow
import React, { useState } from 'react'
import { List } from 'immutable'
import { OnChange } from 'react-final-form-listeners'
import { FormSpy } from 'react-final-form'
import { withStyles } from '@material-ui/core/styles'
import Block from '~/components/layout/Block'
@ -17,8 +16,9 @@ import TextField from '~/components/forms/TextField'
import Hairline from '~/components/layout/Hairline'
import { composeValidators, required, mustBeEthereumAddress } from '~/components/forms/validator'
import { type TokenProps } from '~/logic/tokens/store/model/token'
import { setImageToPlaceholder } from '~/routes/safe/components/Balances/utils'
import TokenPlaceholder from '~/routes/safe/components/Balances/assets/token_placeholder.svg'
import { addressIsTokenContract, INITIAL_FORM_STATE } from './validators'
import { addressIsTokenContract } from './validators'
import { styles } from './style'
type Props = {
@ -31,19 +31,26 @@ type Props = {
onClose: Function,
}
const INITIAL_FORM_STATE = {
address: '',
decimals: '',
symbol: '',
logoUri: '',
}
const AddCustomToken = (props: Props) => {
const {
classes, setActiveScreen, onClose, addToken, updateActiveTokens, safeAddress, activeTokens,
} = props
const [formValue, setFormValue] = useState(INITIAL_FORM_STATE)
const [formValues, setFormValues] = useState(INITIAL_FORM_STATE)
const handleSubmit = (formValues) => {
const handleSubmit = (values) => {
const activeTokensAddresses = activeTokens.map(({ address }) => address)
const token = {
address: formValues.address,
decimals: formValues.decimals,
symbol: formValues.symbol,
name: formValues.symbol,
address: values.address,
decimals: values.decimals,
symbol: values.symbol,
name: values.symbol,
}
addToken(token)
@ -51,13 +58,22 @@ const AddCustomToken = (props: Props) => {
onClose()
}
const populateFormValuesFromAddress = (tokenAddress) => {}
const formSpyOnChangeHandler = (state) => {
const { errors, validating, values } = state
if (!errors.address && !validating) {
populateFormValuesFromAddress(values.address)
}
}
const goBackToTokenList = () => {
setActiveScreen('tokenList')
}
return (
<React.Fragment>
<GnoForm onSubmit={handleSubmit} initialValues={formValue}>
<GnoForm onSubmit={handleSubmit} initialValues={formValues}>
{() => (
<React.Fragment>
<Block className={classes.formContainer}>
@ -68,22 +84,15 @@ const AddCustomToken = (props: Props) => {
name="address"
component={TextField}
type="text"
validate={composeValidators(
required,
mustBeEthereumAddress,
addressIsTokenContract,
)}
validate={composeValidators(required, mustBeEthereumAddress, addressIsTokenContract)}
placeholder="Token contract address*"
text="Token contract address*"
className={classes.addressInput}
/>
<OnChange name="address">
{(value) => {
if (value === '') {
setFormValue(INITIAL_FORM_STATE)
}
}}
</OnChange>
<FormSpy
subscription={{ values: true, errors: true, validating: true }}
onChange={formSpyOnChangeHandler}
/>
<Row>
<Col xs={6} layout="column">
<Field
@ -113,7 +122,12 @@ const AddCustomToken = (props: Props) => {
</Col>
<Col xs={6} layout="column" align="center">
<Paragraph className={classes.tokenImageHeading}>Token Image</Paragraph>
<Img src={TokenPlaceholder} alt="Token image" height={100} />
<Img
src={formValues.logoUri || TokenPlaceholder}
onError={setImageToPlaceholder}
alt="Token image"
height={100}
/>
</Col>
</Row>
</Block>

View File

@ -1,13 +1,6 @@
// @flow
import { getWeb3 } from '~/logic/wallets/getWeb3'
export const INITIAL_FORM_STATE = {
address: '',
decimals: '',
symbol: '',
logoUri: '',
}
export const simpleMemoize = (fn: Function) => {
let lastArg
let lastResult