refactor(instances): better disabled/isValid handling

This commit is contained in:
Sérgio Ramos 2018-05-08 17:55:06 +01:00
parent d591d93547
commit 429ad17262
5 changed files with 69 additions and 50 deletions

View File

@ -74,7 +74,6 @@ const PopoverDivider = styled(BasePopoverDivider)`
width: 100%; width: 100%;
`; `;
export const Image = ({ export const Image = ({
name, name,
id, id,

View File

@ -11,7 +11,6 @@ import { set } from 'react-redux-values';
import Fuse from 'fuse.js'; import Fuse from 'fuse.js';
import { import {
H3,
ViewContainer, ViewContainer,
Divider, Divider,
StatusLoader, StatusLoader,

View File

@ -35,7 +35,7 @@ const names = {
name: 'IC_NAME', name: 'IC_NAME',
image: 'IC_IMAGE', image: 'IC_IMAGE',
package: 'IC_PACKAGE', package: 'IC_PACKAGE',
network: 'IC_NETWORK', networks: 'IC_NETWORKS',
tags: 'IC_TAGS', tags: 'IC_TAGS',
metadata: 'IC_METADATA', metadata: 'IC_METADATA',
userScript: 'IC_USERSCRIPT', userScript: 'IC_USERSCRIPT',
@ -69,9 +69,9 @@ class CreateInstance extends Component {
isFormValid = () => { isFormValid = () => {
const { steps } = this.props; const { steps } = this.props;
return Object.keys(this.isValids).filter( return Object.keys(this.isValids).every(name =>
name => !this.isValids[name](steps[name] || {}) this.isValids[name](steps[name] || {})
).length; );
}; };
isStepValid = step => { isStepValid = step => {
@ -95,7 +95,7 @@ class CreateInstance extends Component {
name, name,
image, image,
package: packageResult, package: packageResult,
network, networks,
tags, tags,
metadata, metadata,
userScript, userScript,
@ -136,7 +136,7 @@ class CreateInstance extends Component {
<Package <Package
ref={this.setIsValid('package')} ref={this.setIsValid('package')}
expanded={step === 'package'} expanded={step === 'package'}
next="network" next="networks"
saved={steps.package} saved={steps.package}
onDefocus={handleDefocus('package')} onDefocus={handleDefocus('package')}
preview={packageResult} preview={packageResult}
@ -144,12 +144,12 @@ class CreateInstance extends Component {
</Margin> </Margin>
<Margin bottom="5"> <Margin bottom="5">
<Network <Network
ref={this.setIsValid('network')} ref={this.setIsValid('networks')}
expanded={step === 'network'} expanded={step === 'networks'}
next="tags" next="tags"
saved={steps.network} saved={steps.network}
onDefocus={handleDefocus('network')} onDefocus={handleDefocus('networks')}
preview={network} preview={networks}
/> />
</Margin> </Margin>
<Margin bottom="5"> <Margin bottom="5">
@ -223,7 +223,11 @@ class CreateInstance extends Component {
<ReduxForm form={IC_F} onSubmit={handleSubmit}> <ReduxForm form={IC_F} onSubmit={handleSubmit}>
{({ handleSubmit, submitting }) => ( {({ handleSubmit, submitting }) => (
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<Button disabled={disabled} loading={submitting}> {console.log({ isFormValid: this.isFormValid() })}
<Button
disabled={disabled || !this.isFormValid()}
loading={submitting}
>
Deploy Deploy
</Button> </Button>
</form> </form>
@ -243,7 +247,7 @@ export default compose(
name: values[names.name], name: values[names.name],
image: values[names.image], image: values[names.image],
package: values[names.package], package: values[names.package],
network: values[names.network], networks: values[names.networks],
tags: values[names.tags], tags: values[names.tags],
metadata: values[names.metadata], metadata: values[names.metadata],
userScript: values[names.userScript], userScript: values[names.userScript],
@ -255,17 +259,20 @@ export default compose(
const error = get(form, `${IC_F}.error`, null); const error = get(form, `${IC_F}.error`, null);
// Maybe re-use saved to only write the rule once // Maybe re-use saved to only write the rule once
const disabled = Boolean( const disabled = !(
!this.isFormValid && !error &&
steps.name && steps.name &&
steps.image && steps.name.name &&
steps.image.id && steps.image &&
steps.package && steps.image.id &&
steps.network steps.package &&
steps.package.id &&
steps.networks &&
Array.isArray(steps.networks)
); );
return { return {
disabled: !disabled, disabled,
forms: Object.keys(form), // improve this forms: Object.keys(form), // improve this
error, error,
steps steps

View File

@ -47,17 +47,15 @@
"resolutions": { "resolutions": {
"axios": "0.16.2", "axios": "0.16.2",
"follow-redirects": "1.4.1", "follow-redirects": "1.4.1",
"node-fetch": "2.1.1", "node-fetch": "2.1.2",
"core-js": "2.5.4", "core-js": "2.5.4",
"regenerator-runtime": "0.11.1", "regenerator-runtime": "0.11.1",
"pify": "3.0.0", "lodash": "4.17.10",
"has-flag": "2.0.0",
"parse-json": "4.0.0", "parse-json": "4.0.0",
"whatwg-fetch": "2.0.4",
"react": "16.3.1",
"breeze-nexttick": "0.2.1",
"isarray": "1.0.0", "isarray": "1.0.0",
"uuid": "3.0.1" "react": "16.3.1",
"styled-is": "1.1.3",
"breeze-nexttick": "0.2.1"
}, },
"workspaces": ["packages/*", "consoles/*", "bundle"] "workspaces": ["packages/*", "consoles/*", "bundle"]
} }

View File

@ -5285,10 +5285,18 @@ has-ansi@^2.0.0:
dependencies: dependencies:
ansi-regex "^2.0.0" ansi-regex "^2.0.0"
has-flag@2.0.0, has-flag@^1.0.0, has-flag@^2.0.0, has-flag@^3.0.0: has-flag@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
has-flag@^2.0.0:
version "2.0.0" version "2.0.0"
resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51" resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51"
has-flag@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
has-unicode@^2.0.0: has-unicode@^2.0.0:
version "2.0.1" version "2.0.1"
resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9" resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
@ -7066,18 +7074,10 @@ lodash.values@^4.3.0:
version "4.3.0" version "4.3.0"
resolved "https://registry.yarnpkg.com/lodash.values/-/lodash.values-4.3.0.tgz#a3a6c2b0ebecc5c2cba1c17e6e620fe81b53d347" resolved "https://registry.yarnpkg.com/lodash.values/-/lodash.values-4.3.0.tgz#a3a6c2b0ebecc5c2cba1c17e6e620fe81b53d347"
lodash@4.17.5: lodash@4.17.10, lodash@4.17.5, "lodash@>=3.5 <5", lodash@^3.3.1, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1:
version "4.17.5"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
"lodash@>=3.5 <5", lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1:
version "4.17.10" version "4.17.10"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
lodash@^3.3.1:
version "3.10.1"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
log-symbols@^2.2.0: log-symbols@^2.2.0:
version "2.2.0" version "2.2.0"
resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a" resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
@ -7588,9 +7588,9 @@ node-dir@^0.1.10:
dependencies: dependencies:
minimatch "^3.0.2" minimatch "^3.0.2"
node-fetch@1.6.3, node-fetch@2.1.1, node-fetch@2.1.2, node-fetch@^1.0.1: node-fetch@1.6.3, node-fetch@2.1.2, node-fetch@^1.0.1:
version "2.1.1" version "2.1.2"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.1.1.tgz#369ca70b82f50c86496104a6c776d274f4e4a2d4" resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.1.2.tgz#ab884e8e7e57e38a944753cec706f788d1768bb5"
node-forge@0.7.5: node-forge@0.7.5:
version "0.7.5" version "0.7.5"
@ -8149,7 +8149,11 @@ pez@4.x.x:
hoek "5.x.x" hoek "5.x.x"
nigel "3.x.x" nigel "3.x.x"
pify@3.0.0, pify@^2.0.0, pify@^2.3.0, pify@^3.0.0: pify@^2.0.0, pify@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
pify@^3.0.0:
version "3.0.0" version "3.0.0"
resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176" resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
@ -10449,11 +10453,7 @@ styled-flex-component@^2.2.2:
dependencies: dependencies:
styled-is "1.1.2" styled-is "1.1.2"
styled-is@1.1.2: styled-is@1.1.2, styled-is@1.1.3, styled-is@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/styled-is/-/styled-is-1.1.2.tgz#f23a43249ba52ac9136c166aac1da30a5711593e"
styled-is@^1.1.2:
version "1.1.3" version "1.1.3"
resolved "https://registry.yarnpkg.com/styled-is/-/styled-is-1.1.3.tgz#09df6cb5aff33c91080cdb3bf4f687eac96b5839" resolved "https://registry.yarnpkg.com/styled-is/-/styled-is-1.1.3.tgz#09df6cb5aff33c91080cdb3bf4f687eac96b5839"
@ -11191,10 +11191,22 @@ utils-merge@1.0.1:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713" resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
uuid@3.0.0, uuid@3.0.1, uuid@3.0.x, uuid@^2.0.1, uuid@^2.0.2, uuid@^3.0.1, uuid@^3.1.0: uuid@3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.0.tgz#6728fc0459c450d796a99c31837569bdf672d728"
uuid@3.0.x:
version "3.0.1" version "3.0.1"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1" resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
uuid@^2.0.1, uuid@^2.0.2:
version "2.0.3"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
uuid@^3.0.1, uuid@^3.1.0:
version "3.2.1"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.2.1.tgz#12c528bb9d58d0b9265d9a2f6f0fe8be17ff1f14"
v8flags@^2.1.1: v8flags@^2.1.1:
version "2.1.1" version "2.1.1"
resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-2.1.1.tgz#aab1a1fa30d45f88dd321148875ac02c0b55e5b4" resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-2.1.1.tgz#aab1a1fa30d45f88dd321148875ac02c0b55e5b4"
@ -11531,7 +11543,11 @@ whatwg-encoding@^1.0.1:
dependencies: dependencies:
iconv-lite "0.4.19" iconv-lite "0.4.19"
whatwg-fetch@2.0.3, whatwg-fetch@2.0.4, whatwg-fetch@>=0.10.0: whatwg-fetch@2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"
whatwg-fetch@2.0.4, whatwg-fetch@>=0.10.0:
version "2.0.4" version "2.0.4"
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz#dde6a5df315f9d39991aa17621853d720b85566f" resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz#dde6a5df315f9d39991aa17621853d720b85566f"