mirror of
https://github.com/status-im/liquid-funding.git
synced 2025-01-11 03:56:20 +00:00
add initial form validation
add error states
This commit is contained in:
Barry Gitarts
Barry G
parent
d97f7998cc
commit
f7d43a7870
@ -148,7 +148,8 @@
|
||||
"webpack": "4.28.3",
|
||||
"webpack-dev-server": "3.1.14",
|
||||
"webpack-manifest-plugin": "2.0.4",
|
||||
"workbox-webpack-plugin": "3.6.3"
|
||||
"workbox-webpack-plugin": "3.6.3",
|
||||
"yup": "^0.27.0"
|
||||
},
|
||||
"browserslist": [
|
||||
">0.2%",
|
||||
|
||||
@ -61,6 +61,12 @@ const useStyles = makeStyles((theme) => ({
|
||||
gridRowStart: 4,
|
||||
gridColumnStart: 1,
|
||||
},
|
||||
red: {
|
||||
color: '#db0000'
|
||||
},
|
||||
errorBorder: {
|
||||
border: '1px solid #db0000'
|
||||
},
|
||||
topRight: {
|
||||
gridRowStart: 1,
|
||||
gridColumnStart: 12,
|
||||
@ -83,10 +89,12 @@ function Input({
|
||||
idFor,
|
||||
isRequired,
|
||||
endAdornment,
|
||||
errorBorder,
|
||||
InputProps,
|
||||
inputClass,
|
||||
label,
|
||||
bottomRightLabel,
|
||||
bottomRightError,
|
||||
bottomLeftLabel,
|
||||
placeholder,
|
||||
className,
|
||||
@ -101,7 +109,9 @@ function Input({
|
||||
const labelForm = label ? renderLabel(classnames(classes.formLabel, classes.top), idFor, label, isRequired) : null
|
||||
const topRightLabel = topRight ? renderLabel(classnames(classes.topRight), idFor, topRight) : null
|
||||
const bottomLeft = bottomLeftLabel ? renderLabel(classnames(classes.formLabel, classes.bottomLeft), idFor, bottomLeftLabel) : null
|
||||
const bottomRight = bottomRightLabel ? renderLabel(classnames(classes.formLabel, classes.bottomRight), idFor, bottomRightLabel) : null
|
||||
const bottomRight = bottomRightLabel ? renderLabel(classnames(classes.formLabel, classes.bottomRight, {
|
||||
[classes.red]: bottomRightError
|
||||
}), idFor, bottomRightLabel) : null
|
||||
return (
|
||||
<FormControl
|
||||
className={classnames(classes.container, className)}
|
||||
@ -110,6 +120,7 @@ function Input({
|
||||
{ topRightLabel }
|
||||
<InputBase
|
||||
id={idFor}
|
||||
error={errorBorder}
|
||||
inputProps={InputProps}
|
||||
endAdornment={endAdornment}
|
||||
placeholder={placeholder}
|
||||
@ -118,6 +129,7 @@ function Input({
|
||||
classes={{
|
||||
root: multiline ? classes.multi : classes.root,
|
||||
input: classnames(classes.input, inputClass),
|
||||
error: classes.errorBorder
|
||||
}}
|
||||
onBlur={onBlur}
|
||||
value={value}
|
||||
|
||||
@ -8,6 +8,8 @@ import InputAdornment from '@material-ui/core/InputAdornment'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import { withRouter } from "react-router-dom"
|
||||
import useWindowSize from '@rehooks/window-size'
|
||||
import { isEmpty } from 'ramda'
|
||||
import * as Yup from 'yup'
|
||||
import { uploadFilesToIpfs, pinToGateway, formatMedia, isWeb } from '../../utils/ipfs'
|
||||
import { FundingContext } from '../../context'
|
||||
import {ZERO_ADDRESS} from '../../utils/address'
|
||||
@ -20,15 +22,20 @@ import { setMediaType } from '../../utils/project'
|
||||
import MediaView from '../base/MediaView'
|
||||
import { isVideo } from '../../utils/images'
|
||||
import BreadCrumb from '../base/BreadCrumb'
|
||||
import { errorStrings } from '../../constants/errors'
|
||||
|
||||
|
||||
const { addProject } = LiquidPledging.methods
|
||||
|
||||
const { TOO_LONG, REQUIRED } = errorStrings
|
||||
|
||||
const hoursToSeconds = hours => hours * 60 * 60
|
||||
const helperText = 'The length of time the Project has to veto when the project delegates to another delegate and they pledge those funds to a project'
|
||||
const generateChatRoom = title => `#status-${title.replace(/\s/g, '')}`
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
title: Yup.string().max(20, TOO_LONG).required(REQUIRED)
|
||||
});
|
||||
|
||||
const styles = theme => ({
|
||||
adornmentText: {
|
||||
@ -203,6 +210,7 @@ const SubmissionSection = ({ classes, history }) => {
|
||||
description: '',
|
||||
commitTime: 24
|
||||
}}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={async (values, { resetForm }) => {
|
||||
const { title, commitTime } = values
|
||||
const manifest = createJSON(values)
|
||||
@ -231,8 +239,8 @@ const SubmissionSection = ({ classes, history }) => {
|
||||
>
|
||||
{({
|
||||
values,
|
||||
errors: _errors,
|
||||
touched: _touched,
|
||||
errors,
|
||||
touched,
|
||||
handleChange,
|
||||
handleBlur,
|
||||
handleSubmit,
|
||||
@ -244,6 +252,7 @@ const SubmissionSection = ({ classes, history }) => {
|
||||
const { firstHalf, secondHalf, fullWidth } = classes
|
||||
const { goalToken, goal } = values
|
||||
const usdValue = convertTokenAmountUsd(goalToken, goal, prices)
|
||||
console.log({errors, touched})
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className={classes.submissionRoot}>
|
||||
<div className={classnames(firstHalf, {
|
||||
@ -260,6 +269,8 @@ const SubmissionSection = ({ classes, history }) => {
|
||||
name="title"
|
||||
label="Project Name"
|
||||
bottomRightLabel="Max 20"
|
||||
bottomRightError={errors.title === TOO_LONG}
|
||||
errorBorder={errors.title === REQUIRED}
|
||||
placeholder="e.g. ‘Tribute to Talk’ or ‘Bob’"
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
@ -408,7 +419,7 @@ const SubmissionSection = ({ classes, history }) => {
|
||||
<div className={classnames(secondHalf, {
|
||||
[classes.fullWidth]: isSmall
|
||||
})}>
|
||||
<Button type="submit" color="primary" variant="contained" className={classnames(classes.formButton, {
|
||||
<Button type="submit" disabled={!isEmpty(errors)} color="primary" variant="contained" className={classnames(classes.formButton, {
|
||||
[classes.fullWidth]: isSmall
|
||||
})}>{isSubmitting ? 'Ethereum Submission In Progress' : 'Publish'}</Button>
|
||||
<CurrencySelect
|
||||
|
||||
7
src/constants/errors.js
Normal file
7
src/constants/errors.js
Normal file
@ -0,0 +1,7 @@
|
||||
const TOO_LONG = 'Too Long!'
|
||||
const REQUIRED = 'Required'
|
||||
|
||||
export const errorStrings = {
|
||||
TOO_LONG,
|
||||
REQUIRED
|
||||
}
|
||||
32
yarn.lock
32
yarn.lock
@ -8270,6 +8270,11 @@ flush-write-stream@^1.0.0:
|
||||
inherits "^2.0.3"
|
||||
readable-stream "^2.3.6"
|
||||
|
||||
fn-name@~2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/fn-name/-/fn-name-2.0.1.tgz#5214d7537a4d06a4a301c0cc262feb84188002e7"
|
||||
integrity sha1-UhTXU3pNBqSjAcDMJi/rhBiAAuc=
|
||||
|
||||
fnv1a@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/fnv1a/-/fnv1a-1.0.1.tgz#915e2d6d023c43d5224ad9f6d2a3c4156f5712f5"
|
||||
@ -16440,6 +16445,11 @@ proper-lockfile@^4.0.0:
|
||||
retry "^0.12.0"
|
||||
signal-exit "^3.0.2"
|
||||
|
||||
property-expr@^1.5.0:
|
||||
version "1.5.1"
|
||||
resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-1.5.1.tgz#22e8706894a0c8e28d58735804f6ba3a3673314f"
|
||||
integrity sha512-CGuc0VUTGthpJXL36ydB6jnbyOf/rAHFvmVrJlH+Rg0DqqLFQGAP6hIaxD/G0OAmBJPhXDHuEJigrp0e0wFV6g==
|
||||
|
||||
property-information@^5.0.0, property-information@^5.0.1:
|
||||
version "5.0.1"
|
||||
resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.0.1.tgz#c3b09f4f5750b1634c0b24205adbf78f18bdf94f"
|
||||
@ -19536,6 +19546,11 @@ symbol-tree@^3.2.2:
|
||||
resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
|
||||
integrity sha1-rifbOPZgp64uHDt9G8KQgZuFGeY=
|
||||
|
||||
synchronous-promise@^2.0.6:
|
||||
version "2.0.9"
|
||||
resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.9.tgz#b83db98e9e7ae826bf9c8261fd8ac859126c780a"
|
||||
integrity sha512-LO95GIW16x69LuND1nuuwM4pjgFGupg7pZ/4lU86AmchPKrhk0o2tpMU2unXRrqo81iAFe1YJ0nAGEVwsrZAgg==
|
||||
|
||||
table@^5.0.2:
|
||||
version "5.2.3"
|
||||
resolved "https://registry.yarnpkg.com/table/-/table-5.2.3.tgz#cde0cc6eb06751c009efab27e8c820ca5b67b7f2"
|
||||
@ -19978,6 +19993,11 @@ topo@3.x.x:
|
||||
dependencies:
|
||||
hoek "6.x.x"
|
||||
|
||||
toposort@^2.0.2:
|
||||
version "2.0.2"
|
||||
resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
|
||||
integrity sha1-riF2gXXRVZ1IvvNUILL0li8JwzA=
|
||||
|
||||
touch@^2.0.1:
|
||||
version "2.0.2"
|
||||
resolved "https://registry.yarnpkg.com/touch/-/touch-2.0.2.tgz#ca0b2a3ae3211246a61b16ba9e6cbf1596287164"
|
||||
@ -22938,6 +22958,18 @@ yeast@0.1.2:
|
||||
resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
|
||||
integrity sha1-AI4G2AlDIMNy28L47XagymyKxBk=
|
||||
|
||||
yup@^0.27.0:
|
||||
version "0.27.0"
|
||||
resolved "https://registry.yarnpkg.com/yup/-/yup-0.27.0.tgz#f8cb198c8e7dd2124beddc2457571329096b06e7"
|
||||
integrity sha512-v1yFnE4+u9za42gG/b/081E7uNW9mUj3qtkmelLbW5YPROZzSH/KUUyJu9Wt8vxFJcT9otL/eZopS0YK1L5yPQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.0.0"
|
||||
fn-name "~2.0.1"
|
||||
lodash "^4.17.11"
|
||||
property-expr "^1.5.0"
|
||||
synchronous-promise "^2.0.6"
|
||||
toposort "^2.0.2"
|
||||
|
||||
zcash-bitcore-lib@~0.13.20-rc3:
|
||||
version "0.13.20-rc3"
|
||||
resolved "https://registry.yarnpkg.com/zcash-bitcore-lib/-/zcash-bitcore-lib-0.13.20-rc3.tgz#813a0f56dcf8b76bc1429951bea6d1236c507008"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user