113 lines
2.8 KiB
TypeScript
113 lines
2.8 KiB
TypeScript
import React, { ReactElement, useEffect } from 'react'
|
|
import styles from './FormComputeDataset.module.css'
|
|
import { Field, Form, FormikContextType, useFormikContext } from 'formik'
|
|
import Input from '../../../atoms/Input'
|
|
import { FormFieldProps } from '../../../../@types/Form'
|
|
import { useStaticQuery, graphql } from 'gatsby'
|
|
import { DDO } from '@oceanprotocol/lib'
|
|
import { AssetSelectionAsset } from '../../../molecules/FormFields/AssetSelection'
|
|
import ButtonBuy from '../../../atoms/ButtonBuy'
|
|
|
|
const contentQuery = graphql`
|
|
query StartComputeDatasetQuery {
|
|
content: allFile(
|
|
filter: { relativePath: { eq: "pages/startComputeDataset.json" } }
|
|
) {
|
|
edges {
|
|
node {
|
|
childPagesJson {
|
|
description
|
|
form {
|
|
success
|
|
successAction
|
|
error
|
|
data {
|
|
name
|
|
label
|
|
help
|
|
type
|
|
required
|
|
sortOptions
|
|
options
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`
|
|
|
|
export default function FormStartCompute({
|
|
algorithms,
|
|
ddoListAlgorithms,
|
|
setSelectedAlgorithm,
|
|
isLoading,
|
|
isComputeButtonDisabled,
|
|
hasPreviousOrder,
|
|
hasDatatoken,
|
|
dtSymbol,
|
|
dtBalance,
|
|
stepText,
|
|
datasetTimeout
|
|
}: {
|
|
algorithms: AssetSelectionAsset[]
|
|
ddoListAlgorithms: DDO[]
|
|
setSelectedAlgorithm: React.Dispatch<React.SetStateAction<DDO>>
|
|
isLoading: boolean
|
|
isComputeButtonDisabled: boolean
|
|
hasPreviousOrder: boolean
|
|
hasDatatoken: boolean
|
|
dtSymbol: string
|
|
dtBalance: string
|
|
stepText: string
|
|
datasetTimeout: string
|
|
}): ReactElement {
|
|
const data = useStaticQuery(contentQuery)
|
|
const content = data.content.edges[0].node.childPagesJson
|
|
|
|
const {
|
|
isValid,
|
|
values
|
|
}: FormikContextType<{ algorithm: string }> = useFormikContext()
|
|
|
|
function getAlgorithmAsset(algorithmId: string): DDO {
|
|
let assetDdo = null
|
|
ddoListAlgorithms.forEach((ddo: DDO) => {
|
|
if (ddo.id === algorithmId) assetDdo = ddo
|
|
})
|
|
return assetDdo
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!values.algorithm) return
|
|
setSelectedAlgorithm(getAlgorithmAsset(values.algorithm))
|
|
}, [values.algorithm])
|
|
|
|
return (
|
|
<Form className={styles.form}>
|
|
{content.form.data.map((field: FormFieldProps) => (
|
|
<Field
|
|
key={field.name}
|
|
{...field}
|
|
options={algorithms}
|
|
component={Input}
|
|
/>
|
|
))}
|
|
|
|
<ButtonBuy
|
|
action="compute"
|
|
disabled={isComputeButtonDisabled || !isValid}
|
|
hasPreviousOrder={hasPreviousOrder}
|
|
hasDatatoken={hasDatatoken}
|
|
dtSymbol={dtSymbol}
|
|
dtBalance={dtBalance}
|
|
stepText={stepText}
|
|
isLoading={isLoading}
|
|
type="submit"
|
|
assetTimeout={datasetTimeout}
|
|
/>
|
|
</Form>
|
|
)
|
|
}
|