diff --git a/src/components/pages/Publish/FormPublish.tsx b/src/components/pages/Publish/FormPublish.tsx index 6252d3e28..e592e9390 100644 --- a/src/components/pages/Publish/FormPublish.tsx +++ b/src/components/pages/Publish/FormPublish.tsx @@ -1,11 +1,16 @@ -import React, { ReactElement, useEffect, FormEvent, ChangeEvent } from 'react' +import React, { + ReactElement, + useEffect, + FormEvent, + ChangeEvent, + useState +} from 'react' import { useStaticQuery, graphql } from 'gatsby' import { useFormikContext, Field, Form, FormikContextType } from 'formik' import Input from '../../atoms/Input' import { FormContent, FormFieldProps } from '../../../@types/Form' import { MetadataPublishFormDataset } from '../../../@types/MetaData' import { initialValues as initialValuesDataset } from '../../../models/FormAlgoPublish' -import { useOcean } from '../../../providers/Ocean' import { ReactComponent as Download } from '../../../images/download.svg' import { ReactComponent as Compute } from '../../../images/compute.svg' import FormTitle from './FormTitle' @@ -47,6 +52,7 @@ export default function FormPublish(): ReactElement { status, setStatus, isValid, + values, setErrors, setTouched, resetForm, @@ -54,6 +60,8 @@ export default function FormPublish(): ReactElement { setFieldValue }: FormikContextType = useFormikContext() + const [computeTypeSelected, setComputeTypeSelected] = useState(false) + // reset form validation on every mount useEffect(() => { setErrors({}) @@ -75,6 +83,8 @@ export default function FormPublish(): ReactElement { } ] + const computeTypeOptions = ['1 day', '1 week', '1 month', '1 year'] + // Manually handle change events instead of using `handleChange` from Formik. // Workaround for default `validateOnChange` not kicking in function handleFieldChange( @@ -84,6 +94,16 @@ export default function FormPublish(): ReactElement { const value = field.type === 'terms' ? !JSON.parse(e.target.value) : e.target.value + if (field.name === 'access' && value === 'Compute') { + setComputeTypeSelected(true) + if (values.timeout === 'Forever') + setFieldValue('timeout', computeTypeOptions[0]) + } else { + if (field.name === 'access' && value === 'Download') { + setComputeTypeSelected(false) + } + } + validateField(field.name) setFieldValue(field.name, value) } @@ -110,7 +130,11 @@ export default function FormPublish(): ReactElement { key={field.name} {...field} options={ - field.type === 'boxSelection' ? accessTypeOptions : field.options + field.type === 'boxSelection' + ? accessTypeOptions + : field.name === 'timeout' && computeTypeSelected === true + ? computeTypeOptions + : field.options } component={Input} onChange={(e: ChangeEvent) =>