mirror of
https://github.com/oceanprotocol/market.git
synced 2024-06-20 11:23:24 +02:00
remove json-schema-form, replace with Formik
This commit is contained in:
parent
e8ebb88782
commit
cd88cb41e5
GPG Key ID:
606EEEF3C479A91F
|
|
@ -1,4 +1,96 @@
|
|||
{
|
||||
"title": "Publish Data",
|
||||
"description": "Highlight the important features of your data set to make it more discoverable and catch the interest of data consumers."
|
||||
"description": "Highlight the important features of your data set to make it more discoverable and catch the interest of data consumers.",
|
||||
"form": {
|
||||
"title": "Publish",
|
||||
"data": [
|
||||
{
|
||||
"name": "name",
|
||||
"label": "Title",
|
||||
"placeholder": "e.g. Shapes of Desert Plants",
|
||||
"help": "Enter a concise title.",
|
||||
"required": true
|
||||
},
|
||||
{
|
||||
"name": "files",
|
||||
"label": "Files",
|
||||
"placeholder": "e.g. https://file.com/file.json",
|
||||
"help": "Please provide a URL to your data set file.",
|
||||
"type": "url",
|
||||
"required": true
|
||||
},
|
||||
{
|
||||
"name": "description",
|
||||
"label": "Description",
|
||||
"help": "Add a thorough description with as much detail as possible.",
|
||||
"type": "textarea",
|
||||
"required": true
|
||||
},
|
||||
{
|
||||
"name": "price",
|
||||
"label": "Price",
|
||||
"help": "Set your price in Ocean Tokens.",
|
||||
"type": "price",
|
||||
"min": 1,
|
||||
"required": true
|
||||
},
|
||||
{
|
||||
"name": "access",
|
||||
"label": "Access Type",
|
||||
"type": "select",
|
||||
"options": ["Download", "Compute"],
|
||||
"required": true
|
||||
},
|
||||
{
|
||||
"name": "author",
|
||||
"label": "Author",
|
||||
"placeholder": "e.g. Jelly McJellyfish",
|
||||
"help": "Give proper attribution for your data set.",
|
||||
"required": true
|
||||
},
|
||||
{
|
||||
"name": "copyrightHolder",
|
||||
"label": "Copyright Holder",
|
||||
"placeholder": "e.g. Marine Institute of Jellyfish",
|
||||
"required": true
|
||||
},
|
||||
{
|
||||
"name": "tags",
|
||||
"label": "Tags",
|
||||
"placeholder": "e.g. logistics, ai",
|
||||
"help": "Separate tags with comma.",
|
||||
"required": true
|
||||
},
|
||||
{
|
||||
"name": "license",
|
||||
"label": "License",
|
||||
"type": "select",
|
||||
"options": [
|
||||
"Public Domain",
|
||||
"PDDL: Public Domain Dedication and License",
|
||||
"ODC-By: Attribution License",
|
||||
"ODC-ODbL: Open Database License",
|
||||
"CDLA-Sharing: Community Data License Agreement",
|
||||
"CDLA-Permissive: Community Data License Agreement",
|
||||
"CC0: Public Domain Dedication",
|
||||
"CC BY: Attribution 4.0 International",
|
||||
"CC BY-SA: Attribution-ShareAlike 4.0 International",
|
||||
"CC BY-ND: Attribution-NoDerivatives 4.0 International",
|
||||
"CC BY-NC: Attribution-NonCommercial 4.0 International",
|
||||
"CC BY-NC-SA: Attribution-NonCommercial-ShareAlike 4.0 International",
|
||||
"CC BY-NC-ND: Attribution-NonCommercial-NoDerivatives 4.0 International",
|
||||
"No License Specified"
|
||||
],
|
||||
"required": true
|
||||
},
|
||||
{
|
||||
"name": "termsAndConditions",
|
||||
"label": "Terms & Conditions",
|
||||
"type": "checkbox",
|
||||
"options": ["I agree to these Terms and Conditions"],
|
||||
"required": true
|
||||
}
|
||||
],
|
||||
"success": "Asset Created!"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
1009
package-lock.json
generated
1009
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
41
package.json
41
package.json
|
|
@ -34,31 +34,31 @@
|
|||
"dotenv": "^8.2.0",
|
||||
"ethereum-blockies": "github:MyEtherWallet/blockies",
|
||||
"filesize": "^6.1.0",
|
||||
"gatsby": "^2.23.22",
|
||||
"gatsby-image": "^2.4.12",
|
||||
"gatsby-plugin-manifest": "^2.4.17",
|
||||
"gatsby-plugin-react-helmet": "^3.3.9",
|
||||
"gatsby-plugin-remove-trailing-slashes": "^2.3.10",
|
||||
"gatsby-plugin-sharp": "^2.6.18",
|
||||
"formik": "^2.1.4",
|
||||
"gatsby": "^2.24.1",
|
||||
"gatsby-image": "^2.4.13",
|
||||
"gatsby-plugin-manifest": "^2.4.18",
|
||||
"gatsby-plugin-react-helmet": "^3.3.10",
|
||||
"gatsby-plugin-remove-trailing-slashes": "^2.3.11",
|
||||
"gatsby-plugin-sharp": "^2.6.19",
|
||||
"gatsby-plugin-svgr": "^2.0.2",
|
||||
"gatsby-plugin-webpack-size": "^1.0.0",
|
||||
"gatsby-source-filesystem": "^2.3.18",
|
||||
"gatsby-source-graphql": "^2.6.1",
|
||||
"gatsby-transformer-json": "^2.4.10",
|
||||
"gatsby-transformer-remark": "^2.8.23",
|
||||
"gatsby-transformer-sharp": "^2.5.10",
|
||||
"gatsby-source-filesystem": "^2.3.19",
|
||||
"gatsby-source-graphql": "^2.6.2",
|
||||
"gatsby-transformer-json": "^2.4.11",
|
||||
"gatsby-transformer-remark": "^2.8.25",
|
||||
"gatsby-transformer-sharp": "^2.5.11",
|
||||
"intersection-observer": "^0.11.0",
|
||||
"is-url-superb": "^4.0.0",
|
||||
"numeral": "^2.0.6",
|
||||
"query-string": "^6.13.1",
|
||||
"react": "^16.13.1",
|
||||
"react-data-table-component": "^6.9.6",
|
||||
"react-datepicker": "^3.0.0",
|
||||
"react-datepicker": "^3.1.3",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-dotdotdot": "^1.3.1",
|
||||
"react-dropzone": "^11.0.1",
|
||||
"react-helmet": "^6.1.0",
|
||||
"react-jsonschema-form": "^1.8.1",
|
||||
"react-markdown": "^4.3.1",
|
||||
"react-paginate": "^6.3.2",
|
||||
"react-rating": "^2.0.5",
|
||||
|
|
@ -68,28 +68,29 @@
|
|||
"react-toastify": "^6.0.8",
|
||||
"shortid": "^2.2.15",
|
||||
"slugify": "^1.4.4",
|
||||
"web3connect": "^1.0.0-beta.33"
|
||||
"web3connect": "^1.0.0-beta.33",
|
||||
"yup": "^0.29.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.10.3",
|
||||
"@babel/preset-typescript": "^7.10.1",
|
||||
"@storybook/addon-actions": "^6.0.0-beta.45",
|
||||
"@storybook/addon-storyshots": "^6.0.0-beta.45",
|
||||
"@storybook/react": "^6.0.0-beta.45",
|
||||
"@storybook/addon-actions": "^6.0.0-rc.1",
|
||||
"@storybook/addon-storyshots": "^6.0.0-rc.1",
|
||||
"@storybook/react": "^6.0.0-rc.1",
|
||||
"@svgr/webpack": "^5.4.0",
|
||||
"@testing-library/jest-dom": "^5.11.0",
|
||||
"@testing-library/react": "^10.4.4",
|
||||
"@testing-library/react": "^10.4.5",
|
||||
"@types/jest": "^26.0.4",
|
||||
"@types/loadable__component": "^5.10.0",
|
||||
"@types/node": "^14.0.19",
|
||||
"@types/node": "^14.0.20",
|
||||
"@types/numeral": "^0.0.28",
|
||||
"@types/react": "^16.9.41",
|
||||
"@types/react-datepicker": "^3.0.2",
|
||||
"@types/react-helmet": "^6.0.0",
|
||||
"@types/react-jsonschema-form": "^1.7.3",
|
||||
"@types/react-paginate": "^6.2.1",
|
||||
"@types/react-tabs": "^2.3.2",
|
||||
"@types/shortid": "0.0.29",
|
||||
"@types/yup": "^0.29.3",
|
||||
"@typescript-eslint/eslint-plugin": "^3.6.0",
|
||||
"@typescript-eslint/parser": "^3.6.0",
|
||||
"babel-loader": "^8.1.0",
|
||||
|
|
|
|||
18
src/@types/Form.d.ts
vendored
Normal file
18
src/@types/Form.d.ts
vendored
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
export interface FormFieldProps {
|
||||
label: string
|
||||
name: string
|
||||
type?: string
|
||||
options?: string[]
|
||||
required?: boolean
|
||||
help?: string
|
||||
placeholder?: string
|
||||
pattern?: string
|
||||
min?: string
|
||||
}
|
||||
|
||||
export interface FormContent {
|
||||
title: string
|
||||
description: string
|
||||
success: string
|
||||
data: FormFieldProps[]
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { ReactElement } from 'react'
|
||||
import styles from './Alert.module.css'
|
||||
|
||||
export function Alert({
|
||||
export default function Alert({
|
||||
title,
|
||||
text,
|
||||
state
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
.label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import React from 'react'
|
||||
import Checkbox from './Checkbox'
|
||||
import { Center } from '../../../.storybook/helpers'
|
||||
|
||||
export default {
|
||||
title: 'Atoms/Checkbox',
|
||||
decorators: [(storyFn: any) => <Center>{storyFn()}</Center>]
|
||||
}
|
||||
|
||||
export const Checked = () => (
|
||||
<Checkbox
|
||||
name="someName"
|
||||
checked
|
||||
onChange={() => null}
|
||||
label="Example checkbox"
|
||||
/>
|
||||
)
|
||||
|
||||
export const Unchecked = () => (
|
||||
<Checkbox
|
||||
name="someName"
|
||||
checked={false}
|
||||
onChange={() => null}
|
||||
label="Example checkbox"
|
||||
/>
|
||||
)
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
import React from 'react'
|
||||
import styles from './Checkbox.module.css'
|
||||
|
||||
interface CheckboxProps {
|
||||
name: string
|
||||
checked: boolean
|
||||
onChange?: (evt: React.ChangeEvent) => void
|
||||
label: string
|
||||
}
|
||||
|
||||
const Checkbox: React.FC<CheckboxProps> = ({
|
||||
name,
|
||||
checked,
|
||||
onChange,
|
||||
label
|
||||
}) => {
|
||||
return (
|
||||
<label className={styles.label}>
|
||||
<input
|
||||
type="checkbox"
|
||||
name={name}
|
||||
checked={checked}
|
||||
onChange={onChange}
|
||||
className={styles.checkbox}
|
||||
/>
|
||||
{label}
|
||||
</label>
|
||||
)
|
||||
}
|
||||
|
||||
export default Checkbox
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
import React from 'react'
|
||||
import React, { ReactElement } from 'react'
|
||||
import { File as FileMetaData } from '@oceanprotocol/squid'
|
||||
import filesize from 'filesize'
|
||||
import cleanupContentType from '../../utils/cleanupContentType'
|
||||
import styles from './File.module.css'
|
||||
|
||||
export default function File({ file }: { file: FileMetaData }) {
|
||||
export default function File({ file }: { file: FileMetaData }): ReactElement {
|
||||
if (!file) return null
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,22 +0,0 @@
|
|||
.dateRange {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin: 0 var(--spacer);
|
||||
height: inherit;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
composes: checkbox from '../../molecules/Form/FieldTemplate.module.css';
|
||||
margin-top: calc(var(--spacer) / 8);
|
||||
}
|
||||
|
||||
.label {
|
||||
composes: label from '../../molecules/Form/FieldTemplate.module.css';
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import React from 'react'
|
||||
import { Center } from '../../../../.storybook/helpers'
|
||||
import DateRangeWidget from './DateRangeWidget'
|
||||
import { PublishFormSchema } from '../../../models/PublishForm'
|
||||
|
||||
export default {
|
||||
title: 'Atoms/DateRangeWidget',
|
||||
decorators: [(storyFn: () => React.FC) => <Center>{storyFn()}</Center>]
|
||||
}
|
||||
|
||||
export const DateRange = () => (
|
||||
<DateRangeWidget
|
||||
schema={PublishFormSchema}
|
||||
id="1"
|
||||
autofocus={false}
|
||||
disabled={false}
|
||||
label="Date Range"
|
||||
formContext={{}}
|
||||
readonly={false}
|
||||
value="[]"
|
||||
onBlur={() => {
|
||||
/* */
|
||||
}}
|
||||
onFocus={() => {
|
||||
/* */
|
||||
}}
|
||||
onChange={() => {
|
||||
/* */
|
||||
}}
|
||||
options={{}}
|
||||
required={false}
|
||||
/>
|
||||
)
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
import React, { useEffect, useState } from 'react'
|
||||
import { WidgetProps } from 'react-jsonschema-form'
|
||||
import loadable from '@loadable/component'
|
||||
import styles from './DateRangeWidget.module.css'
|
||||
import { toStringNoMS } from '../../../utils'
|
||||
|
||||
// lazy load this module, it's huge
|
||||
const LazyDatePicker = loadable(() => import('react-datepicker'))
|
||||
|
||||
export function getWidgetValue(
|
||||
date1: Date,
|
||||
date2: Date,
|
||||
range: boolean
|
||||
): string {
|
||||
let [initial, final] = [toStringNoMS(date1), toStringNoMS(date2)]
|
||||
|
||||
if (!range) {
|
||||
final = initial
|
||||
}
|
||||
|
||||
return JSON.stringify([initial, final])
|
||||
}
|
||||
|
||||
export default function DateRangeWidget(props: WidgetProps) {
|
||||
const { onChange } = props
|
||||
const [startDate, setStartDate] = useState<Date>(new Date())
|
||||
const [endDate, setEndDate] = useState<Date>(new Date())
|
||||
const [range, setRange] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
// If the range checkbox is clicked we update the value of the picker
|
||||
onChange(getWidgetValue(startDate, endDate, range))
|
||||
}, [range])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.dateRange}>
|
||||
{range ? (
|
||||
<>
|
||||
<LazyDatePicker
|
||||
selected={startDate}
|
||||
onChange={(date: Date) => {
|
||||
setStartDate(date)
|
||||
onChange(getWidgetValue(date, endDate, range))
|
||||
}}
|
||||
startDate={startDate}
|
||||
selectsStart
|
||||
endDate={endDate}
|
||||
/>
|
||||
<div className={styles.separator}>–</div>
|
||||
<LazyDatePicker
|
||||
selected={endDate}
|
||||
selectsEnd
|
||||
onChange={(date: Date) => {
|
||||
setEndDate(date)
|
||||
onChange(getWidgetValue(startDate, date, range))
|
||||
}}
|
||||
minDate={startDate}
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<LazyDatePicker
|
||||
selected={startDate}
|
||||
onChange={(date: Date) => {
|
||||
setStartDate(date)
|
||||
onChange(getWidgetValue(date, date, range))
|
||||
}}
|
||||
startDate={startDate}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.checkbox}>
|
||||
<input
|
||||
id="range"
|
||||
type="checkbox"
|
||||
onChange={(ev) => setRange(ev.target.checked)}
|
||||
checked={range}
|
||||
/>
|
||||
<label className={styles.label} htmlFor="range">
|
||||
Date Range
|
||||
</label>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
.terms {
|
||||
padding: calc(var(--spacer) / 2);
|
||||
border: 1px solid var(--brand-grey-light);
|
||||
background-color: var(--brand-grey-lighter);
|
||||
border-radius: var(--border-radius);
|
||||
margin-bottom: calc(var(--spacer) / 2);
|
||||
font-size: var(--font-size-small);
|
||||
|
||||
max-height: 250px;
|
||||
/* smooth overflow scrolling for pre-iOS 13 */
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.terms h1 {
|
||||
font-size: var(--font-size-base);
|
||||
margin-bottom: calc(var(--spacer) / 2);
|
||||
}
|
||||
|
||||
.terms h2 {
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
.label {
|
||||
composes: label from '../../molecules/Form/FieldTemplate.module.css';
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.req {
|
||||
composes: req from '../../molecules/Form/FieldTemplate.module.css';
|
||||
}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
import React from 'react'
|
||||
import { WidgetProps } from 'react-jsonschema-form'
|
||||
import styles from './TermsWidget.module.css'
|
||||
|
||||
export default function TermsWidget(props: WidgetProps) {
|
||||
const {
|
||||
id,
|
||||
value,
|
||||
disabled,
|
||||
readonly,
|
||||
label,
|
||||
autofocus,
|
||||
onBlur,
|
||||
onFocus,
|
||||
onChange,
|
||||
required
|
||||
// DescriptionField
|
||||
} = props
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* <Markdown text={terms} className={styles.terms} /> */}
|
||||
<label
|
||||
htmlFor={id}
|
||||
className={required ? `${styles.label} ${styles.req}` : styles.label}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
id={id}
|
||||
checked={typeof value === 'undefined' ? false : value}
|
||||
disabled={disabled || readonly}
|
||||
autoFocus={autofocus}
|
||||
onChange={(event) => onChange(event.target.checked)}
|
||||
onBlur={onBlur && ((event) => onBlur(id, event.target.checked))}
|
||||
onFocus={onFocus && ((event) => onFocus(id, event.target.checked))}
|
||||
/>
|
||||
<span>{label}</span>
|
||||
</label>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,140 +0,0 @@
|
|||
.row {
|
||||
margin-bottom: var(--spacer);
|
||||
}
|
||||
|
||||
.input,
|
||||
.row input:not([type='radio']):not([type='checkbox']),
|
||||
.row select,
|
||||
.row textarea {
|
||||
font-size: var(--font-size-base);
|
||||
font-family: var(--font-family-base);
|
||||
font-weight: var(--font-weight-bold);
|
||||
/* font-weight: var(--font-weight-bold); */
|
||||
color: var(--brand-grey-dark);
|
||||
border: 2px solid var(--brand-pink);
|
||||
box-shadow: none;
|
||||
width: 100%;
|
||||
background: var(--brand-white);
|
||||
padding: calc(var(--spacer) / 3);
|
||||
margin: 0;
|
||||
border-radius: var(--border-radius);
|
||||
transition: 0.2s ease-out;
|
||||
min-height: 43px;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.input:focus,
|
||||
.row input:focus:not([type='radio']):not([type='checkbox']),
|
||||
.row select:focus,
|
||||
.row textarea:focus {
|
||||
box-shadow: none;
|
||||
outline: 0;
|
||||
border-color: var(--brand-pink);
|
||||
}
|
||||
|
||||
.input::placeholder,
|
||||
.row input::placeholder,
|
||||
.row textarea::placeholder {
|
||||
font-family: var(--font-family-base);
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-secondary);
|
||||
font-weight: var(--font-weight-base);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.input[readonly],
|
||||
.input[disabled],
|
||||
.row input[readonly],
|
||||
.row input[disabled] {
|
||||
background-color: var(--brand-grey-light);
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.row textarea {
|
||||
min-height: 5rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.row select {
|
||||
padding-right: 3rem;
|
||||
|
||||
/* custom arrow */
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
transparent 50%,
|
||||
var(--brand-pink) 50%
|
||||
),
|
||||
linear-gradient(135deg, var(--brand-pink) 50%, transparent 50%),
|
||||
linear-gradient(to right, var(--brand-pink) 0px, var(--brand-white) 2px);
|
||||
background-position: calc(100% - 18px) calc(1rem + 5px),
|
||||
calc(100% - 13px) calc(1rem + 5px), 100% 0;
|
||||
background-size: 5px 5px, 5px 5px, 2.5rem 4rem;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox label,
|
||||
.radio label,
|
||||
.row input[type='radio'] + span,
|
||||
.row input[type='checkbox'] + span {
|
||||
display: inline-block;
|
||||
font-weight: var(--font-weight-base);
|
||||
margin-bottom: calc(var(--spacer) / 4);
|
||||
}
|
||||
|
||||
.row :global(.field-radio-group) {
|
||||
border: 2px solid var(--brand-pink);
|
||||
padding: calc(var(--spacer) / 3);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.labelHolder {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: block;
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: var(--font-weight-bold);
|
||||
margin-bottom: calc(var(--spacer) / 8);
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.req:after {
|
||||
content: '*';
|
||||
padding-left: calc(var(--spacer) / 8);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.help {
|
||||
font-size: var(--font-size-small);
|
||||
color: var(--color-secondary);
|
||||
margin-top: 0.25rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.errors {
|
||||
padding-top: calc(var(--spacer) / 8);
|
||||
font-size: var(--font-size-mini);
|
||||
color: var(--color-primary);
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.error input:not([type='radio']):not([type='checkbox']),
|
||||
.error select,
|
||||
.error textarea {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* Size Modifiers */
|
||||
.large,
|
||||
.large::placeholder,
|
||||
.large + button {
|
||||
font-size: var(--font-size-large);
|
||||
}
|
||||
|
||||
.large {
|
||||
padding: calc(var(--spacer) / 2);
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
import React from 'react'
|
||||
import { FieldTemplateProps } from 'react-jsonschema-form'
|
||||
import styles from './FieldTemplate.module.css'
|
||||
|
||||
const noLabelFields = ['root', 'root_termsAndConditions', 'root_files_0']
|
||||
|
||||
// Ref: https://react-jsonschema-form.readthedocs.io/en/latest/advanced-customization/#field-template
|
||||
export const FieldTemplate = ({
|
||||
id,
|
||||
label,
|
||||
rawHelp,
|
||||
required,
|
||||
rawErrors,
|
||||
children
|
||||
}: FieldTemplateProps) => {
|
||||
const noLabel = id !== noLabelFields.filter((f) => id === f)[0]
|
||||
return (
|
||||
<section
|
||||
key={id}
|
||||
className={
|
||||
rawErrors !== undefined && rawErrors.length > 0
|
||||
? `${styles.row} ${styles.error}`
|
||||
: `${styles.row}`
|
||||
}
|
||||
>
|
||||
<div className={styles.labelHolder}>
|
||||
{noLabel && (
|
||||
<label
|
||||
className={
|
||||
required ? `${styles.label} ${styles.req}` : styles.label
|
||||
}
|
||||
htmlFor={id}
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
{children}
|
||||
|
||||
{rawErrors && <span className={styles.errors}>{rawErrors}</span>}
|
||||
{rawHelp && <div className={styles.help}>{rawHelp}</div>}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
.info {
|
||||
border-radius: var(--border-radius);
|
||||
padding: calc(var(--spacer) / 2);
|
||||
border: 1px solid var(--brand-grey-light);
|
||||
background-color: var(--brand-grey-lighter);
|
||||
}
|
||||
|
||||
.url {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height);
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
padding-right: calc(var(--spacer) / 2);
|
||||
}
|
||||
|
||||
.info ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.info li {
|
||||
display: inline-block;
|
||||
font-size: var(--font-size-small);
|
||||
margin-right: calc(var(--spacer) / 2);
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.removeButton {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
position: absolute;
|
||||
top: -0.2rem;
|
||||
right: 0;
|
||||
font-size: var(--font-size-h3);
|
||||
cursor: pointer;
|
||||
color: var(--color-secondary);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
import React from 'react'
|
||||
import { File } from '@oceanprotocol/squid'
|
||||
import { prettySize } from '../../../../utils'
|
||||
import cleanupContentType from '../../../../utils/cleanupContentType'
|
||||
import styles from './Info.module.css'
|
||||
|
||||
const FileInfo = ({ info, removeItem }: { info: File; removeItem(): void }) => (
|
||||
<div className={styles.info}>
|
||||
<h3 className={styles.url}>{info.url}</h3>
|
||||
<ul>
|
||||
<li>URL confirmed</li>
|
||||
{info.contentLength && <li>{prettySize(+info.contentLength)}</li>}
|
||||
{info.contentType && <li>{cleanupContentType(info.contentType)}</li>}
|
||||
</ul>
|
||||
<button className={styles.removeButton} onClick={() => removeItem()}>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default FileInfo
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
import React, { ReactElement, ReactNode } from 'react'
|
||||
import isUrl from 'is-url-superb'
|
||||
import Loader from '../../../atoms/Loader'
|
||||
import Button from '../../../atoms/Button'
|
||||
import styles from './index.module.css'
|
||||
|
||||
const FileInput = ({
|
||||
formData,
|
||||
handleButtonClick,
|
||||
isLoading,
|
||||
children,
|
||||
i
|
||||
}: {
|
||||
children: ReactNode
|
||||
i: number
|
||||
formData: string[]
|
||||
handleButtonClick(e: React.SyntheticEvent, data: string): void
|
||||
isLoading: boolean
|
||||
}): ReactElement => (
|
||||
<>
|
||||
{children}
|
||||
{formData[i] && (
|
||||
<Button
|
||||
className={styles.addButton}
|
||||
onClick={(e: React.SyntheticEvent) => handleButtonClick(e, formData[i])}
|
||||
disabled={!isUrl(formData[i])}
|
||||
>
|
||||
{isLoading ? <Loader /> : 'Add File'}
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
|
||||
export default FileInput
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
.arrayField {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.arrayField > section {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.addButton {
|
||||
margin-top: calc(var(--spacer) / 4);
|
||||
}
|
||||
|
||||
.error {
|
||||
border-color: var(--color-primary);
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
import React, { useState } from 'react'
|
||||
import { ArrayFieldTemplateProps } from 'react-jsonschema-form'
|
||||
import { File } from '@oceanprotocol/squid'
|
||||
import { toast } from 'react-toastify'
|
||||
import useStoredValue from '../../../../hooks/useStoredValue'
|
||||
import { getFileInfo } from '../../../../utils'
|
||||
import FileInfo from './Info'
|
||||
import FileInput from './Input'
|
||||
import styles from './index.module.css'
|
||||
|
||||
const FILES_DATA_LOCAL_STORAGE_KEY = 'filesData'
|
||||
|
||||
const FileField = ({ items, formData }: ArrayFieldTemplateProps) => {
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
// in order to access fileInfo as an array of objects upon formSubmit we need to keep it in localStorage
|
||||
const [fileInfo, setFileInfo] = useStoredValue<File[]>(
|
||||
FILES_DATA_LOCAL_STORAGE_KEY,
|
||||
[]
|
||||
)
|
||||
|
||||
const handleButtonClick = async (e: React.SyntheticEvent, url: string) => {
|
||||
// File example 'https://oceanprotocol.com/tech-whitepaper.pdf'
|
||||
e.preventDefault()
|
||||
|
||||
try {
|
||||
setIsLoading(true)
|
||||
const newFileInfo = await getFileInfo(url)
|
||||
newFileInfo && setFileInfo([newFileInfo])
|
||||
} catch (error) {
|
||||
toast.error('Could not fetch file info. Please check url and try again')
|
||||
console.error(error.message)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const removeItem = () => {
|
||||
setFileInfo([])
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{items.map(({ children, key }, i) => (
|
||||
<div key={key} className={styles.arrayField}>
|
||||
{fileInfo[i] ? (
|
||||
<FileInfo info={fileInfo[i]} removeItem={removeItem} />
|
||||
) : (
|
||||
<FileInput
|
||||
formData={formData}
|
||||
handleButtonClick={handleButtonClick}
|
||||
i={i}
|
||||
isLoading={isLoading}
|
||||
>
|
||||
{children}
|
||||
</FileInput>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default FileField
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import React from 'react'
|
||||
import { ObjectFieldTemplateProps } from 'react-jsonschema-form'
|
||||
|
||||
// Template to render form
|
||||
// https://react-jsonschema-form.readthedocs.io/en/latest/advanced-customization/#object-field-template
|
||||
const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => (
|
||||
<>
|
||||
<h3>{props.title}</h3>
|
||||
{props.properties.map(
|
||||
(element: { content: React.ReactElement }) => element.content
|
||||
)}
|
||||
</>
|
||||
)
|
||||
|
||||
export { ObjectFieldTemplate }
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
.form {
|
||||
composes: box from '../../atoms/Box.module.css';
|
||||
margin-bottom: var(--spacer);
|
||||
}
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
import React from 'react'
|
||||
import FormJsonSchema, {
|
||||
UiSchema,
|
||||
IChangeEvent,
|
||||
ISubmitEvent,
|
||||
ErrorSchema,
|
||||
AjvError
|
||||
} from 'react-jsonschema-form'
|
||||
import { JSONSchema6 } from 'json-schema'
|
||||
import Button from '../../atoms/Button'
|
||||
import styles from './index.module.css'
|
||||
|
||||
import { FieldTemplate } from './FieldTemplate'
|
||||
|
||||
import {
|
||||
customWidgets,
|
||||
PublishFormDataInterface
|
||||
} from '../../../models/PublishForm'
|
||||
// Overwrite default input fields
|
||||
/*
|
||||
AltDateTimeWidget
|
||||
AltDateWidget
|
||||
CheckboxWidget
|
||||
ColorWidget
|
||||
DateTimeWidget
|
||||
DateWidget
|
||||
EmailWidget
|
||||
FileWidget
|
||||
HiddenWidget
|
||||
RadioWidget
|
||||
RangeWidget
|
||||
SelectWidget
|
||||
CheckboxesWidget
|
||||
UpDownWidget
|
||||
TextareaWidget
|
||||
PasswordWidget
|
||||
TextWidget
|
||||
URLWidget
|
||||
*/
|
||||
|
||||
// Example of Custom Error
|
||||
// REF: react-jsonschema-form.readthedocs.io/en/latest/validation/#custom-error-messages
|
||||
export const transformErrors = (errors: AjvError[]) => {
|
||||
return errors.map((error: AjvError) => {
|
||||
if (error.property === '.termsAndConditions') {
|
||||
console.log('ERROR')
|
||||
error.message = 'Required Field'
|
||||
}
|
||||
return error
|
||||
})
|
||||
}
|
||||
|
||||
const validate = (formData: PublishFormDataInterface, errors: any) => {
|
||||
if (!formData.termsAndConditions) {
|
||||
errors.termsAndConditions.addError('Required Field')
|
||||
}
|
||||
return errors
|
||||
}
|
||||
|
||||
export declare type FormProps = {
|
||||
buttonDisabled?: boolean
|
||||
children?: React.ReactNode
|
||||
schema: JSONSchema6
|
||||
uiSchema: UiSchema
|
||||
formData: PublishFormDataInterface
|
||||
onChange: (
|
||||
e: IChangeEvent<PublishFormDataInterface>,
|
||||
es?: ErrorSchema
|
||||
) => void
|
||||
onSubmit: (e: ISubmitEvent<PublishFormDataInterface>) => void
|
||||
onError: (e: AjvError) => void
|
||||
showErrorList?: boolean
|
||||
}
|
||||
|
||||
export default function Form({
|
||||
children,
|
||||
schema,
|
||||
uiSchema,
|
||||
formData,
|
||||
onChange,
|
||||
onSubmit,
|
||||
onError,
|
||||
showErrorList,
|
||||
buttonDisabled
|
||||
}: FormProps) {
|
||||
return (
|
||||
<FormJsonSchema
|
||||
className={styles.form}
|
||||
schema={schema}
|
||||
formData={formData}
|
||||
uiSchema={uiSchema}
|
||||
onChange={(event: IChangeEvent<PublishFormDataInterface>) =>
|
||||
onChange(event)
|
||||
}
|
||||
onSubmit={(event: ISubmitEvent<PublishFormDataInterface>) =>
|
||||
onSubmit(event)
|
||||
}
|
||||
FieldTemplate={FieldTemplate}
|
||||
onError={onError}
|
||||
widgets={customWidgets}
|
||||
noHtml5Validate
|
||||
showErrorList={showErrorList}
|
||||
validate={validate} // REF: https://react-jsonschema-form.readthedocs.io/en/latest/validation/#custom-validation
|
||||
// liveValidate
|
||||
transformErrors={transformErrors}
|
||||
>
|
||||
<div>
|
||||
<Button disabled={buttonDisabled} style="primary">
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
{children}
|
||||
</FormJsonSchema>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,203 +0,0 @@
|
|||
import React, { useEffect, useState } from 'react'
|
||||
import { useNavigate } from '@reach/router'
|
||||
import Form from '../../molecules/Form/index'
|
||||
import {
|
||||
PublishFormSchema,
|
||||
PublishFormUiSchema,
|
||||
publishFormData,
|
||||
PublishFormDataInterface
|
||||
} from '../../../models/PublishForm'
|
||||
import useStoredValue from '../../../hooks/useStoredValue'
|
||||
import { MetaDataMarket } from '../../../@types/MetaData'
|
||||
import { File, MetaData } from '@oceanprotocol/squid'
|
||||
import { isBrowser, toStringNoMS } from '../../../utils'
|
||||
import { toast } from 'react-toastify'
|
||||
import styles from './PublishForm.module.css'
|
||||
import utils from 'web3-utils'
|
||||
import AssetModel from '../../../models/Asset'
|
||||
import { useWeb3, useOcean } from '@oceanprotocol/react'
|
||||
import {
|
||||
Service,
|
||||
ServiceCompute
|
||||
} from '@oceanprotocol/squid/dist/node/ddo/Service'
|
||||
|
||||
const FILES_DATA_LOCAL_STORAGE_KEY = 'filesData'
|
||||
const PUBLISH_FORM_LOCAL_STORAGE_KEY = 'publishForm'
|
||||
|
||||
export function getFilesData() {
|
||||
let localFileData: File[] = []
|
||||
if (isBrowser) {
|
||||
const storedData = localStorage.getItem(FILES_DATA_LOCAL_STORAGE_KEY)
|
||||
if (storedData) {
|
||||
localFileData = localFileData.concat(JSON.parse(storedData) as File[])
|
||||
}
|
||||
}
|
||||
return localFileData
|
||||
}
|
||||
|
||||
export function clearFilesData() {
|
||||
if (isBrowser)
|
||||
localStorage.setItem(FILES_DATA_LOCAL_STORAGE_KEY, JSON.stringify([]))
|
||||
}
|
||||
|
||||
export function transformPublishFormToMetadata(
|
||||
data: PublishFormDataInterface
|
||||
): MetaDataMarket {
|
||||
const currentTime = toStringNoMS(new Date())
|
||||
|
||||
const {
|
||||
title,
|
||||
price,
|
||||
author,
|
||||
license,
|
||||
summary,
|
||||
holder,
|
||||
keywords,
|
||||
termsAndConditions,
|
||||
supportName,
|
||||
supportEmail,
|
||||
dateRange,
|
||||
access
|
||||
} = data
|
||||
|
||||
const metadata: MetaDataMarket = {
|
||||
main: {
|
||||
...AssetModel.main,
|
||||
name: title,
|
||||
price: utils.toWei(price.toString()),
|
||||
author,
|
||||
dateCreated: currentTime,
|
||||
datePublished: currentTime,
|
||||
files: getFilesData(),
|
||||
license
|
||||
},
|
||||
// ------- additional information -------
|
||||
additionalInformation: {
|
||||
...AssetModel.additionalInformation,
|
||||
description: summary,
|
||||
copyrightHolder: holder,
|
||||
tags: keywords?.split(','),
|
||||
termsAndConditions,
|
||||
access: access || 'Download'
|
||||
},
|
||||
// ------- curation -------
|
||||
curation: AssetModel.curation
|
||||
}
|
||||
|
||||
if (dateRange) {
|
||||
const newDateRange = JSON.parse(dateRange)
|
||||
if (newDateRange.length > 1) {
|
||||
metadata.additionalInformation.dateRange = JSON.parse(dateRange)
|
||||
} else if (newDateRange.length === 1) {
|
||||
// eslint-disable-next-line prefer-destructuring
|
||||
metadata.main.dateCreated = newDateRange[0]
|
||||
}
|
||||
}
|
||||
|
||||
return metadata
|
||||
}
|
||||
|
||||
const PublishForm: React.FC<any> = () => {
|
||||
const [buttonDisabled, setButtonDisabled] = useState(false)
|
||||
const { web3Connect } = useWeb3()
|
||||
const { ocean, account } = useOcean()
|
||||
const navigate = useNavigate()
|
||||
const [data, updateData] = useStoredValue(
|
||||
PUBLISH_FORM_LOCAL_STORAGE_KEY,
|
||||
publishFormData
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
setButtonDisabled(!ocean)
|
||||
}, [ocean])
|
||||
|
||||
const handleChange = ({
|
||||
formData
|
||||
}: {
|
||||
formData: PublishFormDataInterface
|
||||
}) => {
|
||||
updateData(formData)
|
||||
}
|
||||
|
||||
const handleSubmit = async ({
|
||||
formData
|
||||
}: {
|
||||
formData: PublishFormDataInterface
|
||||
}) => {
|
||||
setButtonDisabled(true)
|
||||
const submittingToast = toast.info('submitting asset', {
|
||||
className: styles.info
|
||||
})
|
||||
|
||||
if (ocean == null) {
|
||||
await web3Connect.connect()
|
||||
}
|
||||
|
||||
if (ocean) {
|
||||
const metadata = transformPublishFormToMetadata(formData)
|
||||
|
||||
// if services array stays empty, the default access service
|
||||
// will be created by squid-js
|
||||
let services: Service[] = []
|
||||
|
||||
if (metadata.additionalInformation.access === 'Compute') {
|
||||
const computeService: ServiceCompute = await ocean.compute.createComputeServiceAttributes(
|
||||
account,
|
||||
metadata.main.price,
|
||||
// Note: a hack without consequences.
|
||||
// Will make metadata.main.datePublished (automatically created by Aquarius)
|
||||
// go out of sync with this service.main.datePublished.
|
||||
toStringNoMS(new Date(Date.now()))
|
||||
)
|
||||
services = [computeService]
|
||||
}
|
||||
try {
|
||||
const asset = await ocean.assets.create(
|
||||
(metadata as unknown) as MetaData,
|
||||
account,
|
||||
services
|
||||
)
|
||||
|
||||
// Reset the form to initial values
|
||||
|
||||
updateData(publishFormData)
|
||||
clearFilesData()
|
||||
|
||||
// User feedback and redirect
|
||||
toast.success('asset created successfully', {
|
||||
className: styles.success
|
||||
})
|
||||
toast.dismiss(submittingToast)
|
||||
navigate(`/asset/${asset.id}`)
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
} finally {
|
||||
setButtonDisabled(false)
|
||||
}
|
||||
|
||||
// Reset the form to initial values
|
||||
|
||||
// User feedback and redirect
|
||||
}
|
||||
}
|
||||
|
||||
const handleError = () =>
|
||||
toast.error('Please check form. There are some errors', {
|
||||
className: styles.error
|
||||
})
|
||||
|
||||
return (
|
||||
<Form
|
||||
schema={PublishFormSchema}
|
||||
uiSchema={PublishFormUiSchema}
|
||||
formData={data}
|
||||
onChange={handleChange}
|
||||
onSubmit={handleSubmit}
|
||||
onError={handleError}
|
||||
showErrorList={false}
|
||||
buttonDisabled={buttonDisabled}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default PublishForm
|
||||
|
|
@ -15,7 +15,7 @@ import styles from './Compute.module.css'
|
|||
import Button from '../../atoms/Button'
|
||||
import Input from '../../atoms/Input'
|
||||
import { MetaDataMarket } from '../../../@types/MetaData'
|
||||
import { Alert } from '../../atoms/Alert'
|
||||
import Alert from '../../atoms/Alert'
|
||||
|
||||
export default function Compute({
|
||||
did,
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
import React from 'react'
|
||||
import PublishForm from '../molecules/PublishForm/PublishForm'
|
||||
import styles from './Publish.module.css'
|
||||
import Web3Feedback from '../molecules/Wallet/Feedback'
|
||||
|
||||
const PublishPage: React.FC = () => {
|
||||
return (
|
||||
<article className={styles.grid}>
|
||||
<PublishForm />
|
||||
<aside>
|
||||
<div className={styles.sticky}>
|
||||
<Web3Feedback />
|
||||
</div>
|
||||
</aside>
|
||||
</article>
|
||||
)
|
||||
}
|
||||
export default PublishPage
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
.form {
|
||||
composes: box from '../../atoms/Box.module.css';
|
||||
}
|
||||
|
||||
.error {
|
||||
background-color: var(--red);
|
||||
}
|
||||
107
src/components/pages/Publish/PublishForm.tsx
Normal file
107
src/components/pages/Publish/PublishForm.tsx
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
import React, { ReactElement } from 'react'
|
||||
import {
|
||||
initialValues,
|
||||
validationSchema,
|
||||
PublishFormData
|
||||
} from '../../../models/PublishForm'
|
||||
import { MetaData } from '@oceanprotocol/squid'
|
||||
import { toStringNoMS } from '../../../utils'
|
||||
import { toast } from 'react-toastify'
|
||||
import styles from './PublishForm.module.css'
|
||||
import { useOcean } from '@oceanprotocol/react'
|
||||
import {
|
||||
Service,
|
||||
ServiceCompute
|
||||
} from '@oceanprotocol/squid/dist/node/ddo/Service'
|
||||
import { Formik, Form as FormFormik, Field } from 'formik'
|
||||
import Input from '../../atoms/Input'
|
||||
import Button from '../../atoms/Button'
|
||||
import { transformPublishFormToMetadata } from './utils'
|
||||
import { FormContent, FormFieldProps } from '../../../@types/Form'
|
||||
|
||||
export default function PublishForm({
|
||||
content
|
||||
}: {
|
||||
content: FormContent
|
||||
}): ReactElement {
|
||||
const { ocean, account } = useOcean()
|
||||
|
||||
async function handleSubmit(values: PublishFormData) {
|
||||
const submittingToast = toast.info('submitting asset', {
|
||||
className: styles.info
|
||||
})
|
||||
|
||||
const metadata = transformPublishFormToMetadata(values)
|
||||
|
||||
// if services array stays empty, the default access service
|
||||
// will be created by squid-js
|
||||
let services: Service[] = []
|
||||
|
||||
if (metadata.additionalInformation.access === 'Compute') {
|
||||
const computeService: ServiceCompute = await ocean.compute.createComputeServiceAttributes(
|
||||
account,
|
||||
metadata.main.price,
|
||||
// Note: a hack without consequences.
|
||||
// Will make metadata.main.datePublished (automatically created by Aquarius)
|
||||
// go out of sync with this service.main.datePublished.
|
||||
toStringNoMS(new Date(Date.now()))
|
||||
)
|
||||
services = [computeService]
|
||||
}
|
||||
try {
|
||||
const asset = await ocean.assets.create(
|
||||
(metadata as unknown) as MetaData,
|
||||
account,
|
||||
services
|
||||
)
|
||||
|
||||
// TODO: Reset the form to initial values
|
||||
|
||||
// User feedback and redirect
|
||||
toast.success('asset created successfully', {
|
||||
className: styles.success
|
||||
})
|
||||
toast.dismiss(submittingToast)
|
||||
// navigate(`/asset/${asset.id}`)
|
||||
} catch (e) {
|
||||
console.error(e.message)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
initialStatus="empty"
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={async (values, { setSubmitting }) => {
|
||||
await handleSubmit(values)
|
||||
setSubmitting(false)
|
||||
}}
|
||||
>
|
||||
{({ isSubmitting, isValid, status, setStatus }) => (
|
||||
<FormFormik
|
||||
className={styles.form}
|
||||
onChange={() => status === 'empty' && setStatus(null)}
|
||||
>
|
||||
{content.data.map((field: FormFieldProps) => (
|
||||
<Field key={field.name} {...field} component={Input} />
|
||||
))}
|
||||
|
||||
<Button
|
||||
style="primary"
|
||||
type="submit"
|
||||
disabled={
|
||||
!ocean ||
|
||||
!account ||
|
||||
isSubmitting ||
|
||||
!isValid ||
|
||||
status === 'empty'
|
||||
}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</FormFormik>
|
||||
)}
|
||||
</Formik>
|
||||
)
|
||||
}
|
||||
21
src/components/pages/Publish/index.tsx
Normal file
21
src/components/pages/Publish/index.tsx
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import React, { ReactElement } from 'react'
|
||||
import PublishForm from './PublishForm'
|
||||
import styles from './index.module.css'
|
||||
import Web3Feedback from '../../molecules/Wallet/Feedback'
|
||||
|
||||
export default function PublishPage({
|
||||
content
|
||||
}: {
|
||||
content: any
|
||||
}): ReactElement {
|
||||
return (
|
||||
<article className={styles.grid}>
|
||||
<PublishForm content={content.form} />
|
||||
<aside>
|
||||
<div className={styles.sticky}>
|
||||
<Web3Feedback />
|
||||
</div>
|
||||
</aside>
|
||||
</article>
|
||||
)
|
||||
}
|
||||
61
src/components/pages/Publish/utils.ts
Normal file
61
src/components/pages/Publish/utils.ts
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
import { PublishFormData } from '../../../models/PublishForm'
|
||||
import { MetaDataMarket } from '../../../@types/MetaData'
|
||||
import { toStringNoMS } from '../../../utils'
|
||||
import AssetModel from '../../../models/Asset'
|
||||
import web3Utils from 'web3-utils'
|
||||
|
||||
export function transformPublishFormToMetadata(
|
||||
data: PublishFormData
|
||||
): MetaDataMarket {
|
||||
const currentTime = toStringNoMS(new Date())
|
||||
|
||||
const {
|
||||
name,
|
||||
price,
|
||||
author,
|
||||
license,
|
||||
description,
|
||||
copyrightHolder,
|
||||
tags,
|
||||
termsAndConditions,
|
||||
files,
|
||||
dateRange,
|
||||
access
|
||||
} = data
|
||||
|
||||
const metadata: MetaDataMarket = {
|
||||
main: {
|
||||
...AssetModel.main,
|
||||
name,
|
||||
price: web3Utils.toWei(price.toString()),
|
||||
author,
|
||||
dateCreated: currentTime,
|
||||
datePublished: currentTime,
|
||||
files,
|
||||
license
|
||||
},
|
||||
// ------- additional information -------
|
||||
additionalInformation: {
|
||||
...AssetModel.additionalInformation,
|
||||
description,
|
||||
copyrightHolder,
|
||||
tags: tags?.split(','),
|
||||
termsAndConditions,
|
||||
access: access || 'Download'
|
||||
},
|
||||
// ------- curation -------
|
||||
curation: AssetModel.curation
|
||||
}
|
||||
|
||||
if (dateRange) {
|
||||
const newDateRange = JSON.parse(dateRange)
|
||||
if (newDateRange.length > 1) {
|
||||
metadata.additionalInformation.dateRange = JSON.parse(dateRange)
|
||||
} else if (newDateRange.length === 1) {
|
||||
// eslint-disable-next-line prefer-destructuring
|
||||
metadata.main.dateCreated = newDateRange[0]
|
||||
}
|
||||
}
|
||||
|
||||
return metadata
|
||||
}
|
||||
|
|
@ -1,188 +1,45 @@
|
|||
import { UiSchema } from 'react-jsonschema-form'
|
||||
import { JSONSchema6 } from 'json-schema'
|
||||
import TermsWidget from '../components/atoms/FormWidgets/TermsWidget'
|
||||
import DateRangeWidget from '../components/atoms/FormWidgets/DateRangeWidget'
|
||||
import { ObjectFieldTemplate } from '../components/molecules/Form/ObjectFieldTemplate'
|
||||
import * as Yup from 'yup'
|
||||
import { AccessType } from '../@types/MetaData'
|
||||
import FileField from '../components/molecules/Form/FileField'
|
||||
import { File } from '@oceanprotocol/squid'
|
||||
|
||||
export const customWidgets = {
|
||||
TermsWidget,
|
||||
DateRangeWidget
|
||||
}
|
||||
|
||||
export const PublishFormSchema: JSONSchema6 = {
|
||||
type: 'object',
|
||||
required: [
|
||||
'title',
|
||||
'author',
|
||||
'license',
|
||||
'price',
|
||||
'files',
|
||||
'summary',
|
||||
'termsAndConditions',
|
||||
'access'
|
||||
],
|
||||
definitions: {
|
||||
files: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
properties: {
|
||||
title: {
|
||||
type: 'string',
|
||||
title: 'Offer Title'
|
||||
},
|
||||
summary: {
|
||||
type: 'string',
|
||||
title: 'Summary',
|
||||
minLength: 24
|
||||
},
|
||||
files: {
|
||||
type: 'array',
|
||||
title: 'Data File URL',
|
||||
items: {
|
||||
type: 'string',
|
||||
title: 'File URL',
|
||||
format: 'uri'
|
||||
}
|
||||
},
|
||||
price: {
|
||||
title: 'Price',
|
||||
type: 'number',
|
||||
minimum: 0
|
||||
},
|
||||
author: {
|
||||
type: 'string',
|
||||
title: 'Author'
|
||||
},
|
||||
access: {
|
||||
title: 'Access type',
|
||||
type: 'string',
|
||||
enum: ['Download', 'Compute']
|
||||
},
|
||||
license: {
|
||||
title: 'License',
|
||||
type: 'string',
|
||||
enum: [
|
||||
'Public Domain',
|
||||
'PDDL: Public Domain Dedication and License',
|
||||
'ODC-By: Attribution License',
|
||||
'ODC-ODbL: Open Database License',
|
||||
'CDLA-Sharing: Community Data License Agreement',
|
||||
'CDLA-Permissive: Community Data License Agreement',
|
||||
'CC0: Public Domain Dedication',
|
||||
'CC BY: Attribution 4.0 International',
|
||||
'CC BY-SA: Attribution-ShareAlike 4.0 International',
|
||||
'CC BY-ND: Attribution-NoDerivatives 4.0 International',
|
||||
'CC BY-NC: Attribution-NonCommercial 4.0 International',
|
||||
'CC BY-NC-SA: Attribution-NonCommercial-ShareAlike 4.0 International',
|
||||
'CC BY-NC-ND: Attribution-NonCommercial-NoDerivatives 4.0 International',
|
||||
'No License Specified'
|
||||
]
|
||||
},
|
||||
dateRange: {
|
||||
type: 'string',
|
||||
title: 'Creation Date'
|
||||
},
|
||||
holder: {
|
||||
type: 'string',
|
||||
title: 'Copyright Holder'
|
||||
},
|
||||
keywords: {
|
||||
type: 'string',
|
||||
title: 'Keywords'
|
||||
},
|
||||
termsAndConditions: {
|
||||
type: 'boolean',
|
||||
title: 'I agree to these Terms and Conditions'
|
||||
}
|
||||
}
|
||||
}
|
||||
// Widgets Ref https://react-jsonschema-form.readthedocs.io/en/latest/form-customization/#alternative-widgets
|
||||
export const PublishFormUiSchema: UiSchema = {
|
||||
'ui:ObjectFieldTemplate': ObjectFieldTemplate,
|
||||
category: {
|
||||
'ui:widget': 'radio'
|
||||
},
|
||||
title: {
|
||||
'ui:placeholder': 'e.g. Shapes of Desert Plants',
|
||||
'ui:help': 'Enter a concise title.'
|
||||
},
|
||||
summary: {
|
||||
'ui:placeholder': 'Max of 1000 characters',
|
||||
'ui:widget': 'textarea',
|
||||
'ui:help': 'Add a thorough description with as much detail as possible.'
|
||||
},
|
||||
files: {
|
||||
'ui:ArrayFieldTemplate': FileField,
|
||||
items: {
|
||||
'ui:placeholder': 'e.g. https://file.com/file.json',
|
||||
'ui:widget': 'uri',
|
||||
classNames: 'input-file'
|
||||
},
|
||||
'ui:help': 'Please provide a URL to your data set file.'
|
||||
},
|
||||
price: {
|
||||
'ui:help': 'Set your price in Ocean Tokens.'
|
||||
},
|
||||
access: {
|
||||
'ui:widget': 'select',
|
||||
'ui:help': 'Access Type'
|
||||
},
|
||||
author: {
|
||||
'ui:placeholder': 'e.g. Jelly McJellyfish',
|
||||
'ui:help': 'Give proper attribution for your data set.'
|
||||
},
|
||||
license: {
|
||||
'ui:widget': 'select'
|
||||
},
|
||||
dateRange: {
|
||||
'ui:widget': 'DateRangeWidget',
|
||||
'ui:help':
|
||||
'Select the date the asset was created, or was updated for the last time.'
|
||||
},
|
||||
holder: {
|
||||
'ui:placeholder': 'e.g. Marine Institute of Jellyfish'
|
||||
},
|
||||
keywords: {
|
||||
'ui:placeholder': 'shipment, logistics'
|
||||
},
|
||||
termsAndConditions: {
|
||||
'ui:widget': 'TermsWidget'
|
||||
}
|
||||
}
|
||||
|
||||
export interface PublishFormDataInterface {
|
||||
export interface PublishFormData {
|
||||
// ---- required fields ----
|
||||
summary: string
|
||||
name: string
|
||||
description: string
|
||||
files: File[]
|
||||
termsAndConditions: boolean
|
||||
author: string
|
||||
license: string
|
||||
files: string[]
|
||||
price: number
|
||||
title: string
|
||||
access?: AccessType
|
||||
// ---- optional fields ----
|
||||
dateRange?: string
|
||||
holder?: string
|
||||
keywords?: string
|
||||
copyrightHolder?: string
|
||||
tags?: string
|
||||
}
|
||||
// Ref: https://github.com/oceanprotocol/OEPs/blob/master/8/v0.4/README.md#main-attributes
|
||||
export const publishFormData: PublishFormDataInterface = {
|
||||
|
||||
export const validationSchema = Yup.object().shape({
|
||||
name: Yup.string().required('Required'),
|
||||
author: Yup.string().required('Required'),
|
||||
price: Yup.string().required('Required'),
|
||||
files: Yup.array().required('Required'),
|
||||
summary: Yup.string().required('Required'),
|
||||
license: Yup.string().required('Required'),
|
||||
termsAndConditions: Yup.boolean().required('Required'),
|
||||
dateRange: Yup.string().required('Required'),
|
||||
copyrightHolder: Yup.string().required('Required'),
|
||||
tags: Yup.string().required('Required')
|
||||
})
|
||||
|
||||
export const initialValues: PublishFormData = {
|
||||
author: '',
|
||||
price: 0,
|
||||
title: '',
|
||||
files: [''], // should be empty string initially to display the expanded field
|
||||
summary: '',
|
||||
name: '',
|
||||
files: [],
|
||||
description: '',
|
||||
license: '',
|
||||
termsAndConditions: false,
|
||||
dateRange: undefined,
|
||||
holder: undefined,
|
||||
keywords: undefined
|
||||
copyrightHolder: undefined,
|
||||
tags: undefined
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { PageProps } from 'gatsby'
|
|||
import { MetaDataMarket, ServiceMetaDataMarket } from '../../@types/MetaData'
|
||||
import { Aquarius, Logger } from '@oceanprotocol/squid'
|
||||
import { oceanConfig } from '../../../app.config'
|
||||
import { Alert } from '../../components/atoms/Alert'
|
||||
import Alert from '../../components/atoms/Alert'
|
||||
|
||||
export default function AssetRoute(props: PageProps): ReactElement {
|
||||
const [metadata, setMetadata] = useState<MetaDataMarket>()
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export default function PageGatsbyPublish(props: PageProps): ReactElement {
|
|||
|
||||
return (
|
||||
<Layout title={title} description={description} uri={props.uri}>
|
||||
<PagePublish />
|
||||
<PagePublish content={content} />
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
|
@ -22,6 +22,20 @@ export const contentQuery = graphql`
|
|||
childPagesJson {
|
||||
title
|
||||
description
|
||||
form {
|
||||
title
|
||||
data {
|
||||
name
|
||||
placeholder
|
||||
label
|
||||
help
|
||||
type
|
||||
required
|
||||
options
|
||||
min
|
||||
}
|
||||
success
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ export function updateQueryStringParameter(
|
|||
uri: string,
|
||||
key: string,
|
||||
newValue: string
|
||||
) {
|
||||
): string {
|
||||
const regex = new RegExp('([?&])' + key + '=.*?(&|$)', 'i')
|
||||
const separator = uri.indexOf('?') !== -1 ? '&' : '?'
|
||||
|
||||
|
|
@ -19,7 +19,11 @@ export function updateQueryStringParameter(
|
|||
}
|
||||
}
|
||||
|
||||
export function prettySize(bytes: number, separator = ' ', postFix = '') {
|
||||
export function prettySize(
|
||||
bytes: number,
|
||||
separator = ' ',
|
||||
postFix = ''
|
||||
): string {
|
||||
if (bytes) {
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
|
||||
const i = Math.min(
|
||||
|
|
@ -36,7 +40,7 @@ export function prettySize(bytes: number, separator = ' ', postFix = '') {
|
|||
// Boolean value that will be true if we are inside a browser, false otherwise
|
||||
export const isBrowser = typeof window !== 'undefined'
|
||||
|
||||
export function formatNumber(number: number, format?: string) {
|
||||
export function formatNumber(number: number, format?: string): string {
|
||||
numeral.zeroFormat('0')
|
||||
const defaultFormat = '0,0.000'
|
||||
|
||||
|
|
@ -72,7 +76,7 @@ export async function getFileInfo(url: string): Promise<File> {
|
|||
}
|
||||
}
|
||||
|
||||
export function isDid(did: string | undefined) {
|
||||
export function isDid(did: string | undefined): boolean {
|
||||
const didMatch = (did as string).match(/^did:op:([a-f0-9]{64})$/i)
|
||||
return !!didMatch
|
||||
}
|
||||
|
|
@ -125,7 +129,7 @@ export function setProperty<T extends Record<string, unknown>>(
|
|||
}
|
||||
}
|
||||
|
||||
export function formatBytes(a: number, b: number) {
|
||||
export function formatBytes(a: number, b: number): string {
|
||||
if (a === 0) return '0 Bytes'
|
||||
const c = 1024
|
||||
const d = b || 2
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ describe('AssetModel', () => {
|
|||
name: 'Hello'
|
||||
}),
|
||||
additionalInformation: Object.assign(AssetModel.additionalInformation, {
|
||||
supportName: 'Jelly McJellyfish'
|
||||
description: 'Jelly McJellyfish'
|
||||
}),
|
||||
curation: Object.assign(AssetModel.curation, {
|
||||
numVotes: 100,
|
||||
|
|
@ -18,6 +18,6 @@ describe('AssetModel', () => {
|
|||
|
||||
expect(newMeta).toMatchObject(AssetModel)
|
||||
expect(newMeta.main.name).toBe('Hello')
|
||||
expect(newMeta.additionalInformation.supportName).toBe('Jelly McJellyfish')
|
||||
expect(newMeta.additionalInformation.description).toBe('Jelly McJellyfish')
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
import { PublishFormDataInterface } from '../../../src/models/PublishForm'
|
||||
import { PublishFormData } from '../../../src/models/PublishForm'
|
||||
|
||||
const testFormData: PublishFormDataInterface = {
|
||||
const testFormData: PublishFormData = {
|
||||
author: '',
|
||||
files: [],
|
||||
license: '',
|
||||
price: 0,
|
||||
title: '',
|
||||
summary: 'summary',
|
||||
description: 'description',
|
||||
termsAndConditions: true
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import {
|
|||
PublishFormUiSchema
|
||||
} from '../../../src/models/PublishForm'
|
||||
import testFormData from '../__fixtures__/testFormData'
|
||||
import { transformPublishFormToMetadata } from '../../../src/components/molecules/PublishForm/PublishForm'
|
||||
import { transformPublishFormToMetadata } from '../../../src/components/pages/Publish/PublishForm'
|
||||
import { MetaDataMarket } from '../../../src/@types/MetaData'
|
||||
|
||||
describe('PublishForm', () => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user