Merge pull request #66 from oceanprotocol/feature/sample

add sample file during publish

content/pages/publish.json

@@ -20,12 +20,19 @@
       },
       {
         "name": "files",
-        "label": "Files",
+        "label": "File",
         "placeholder": "e.g. https://file.com/file.json",
-        "help": "Please provide a URL to your data set file.",
+        "help": "Please provide a URL to your data set file. This URL will be stored encrypted after publishing.",
         "type": "files",
         "required": true
       },
+      {
+        "name": "links",
+        "label": "Sample file",
+        "placeholder": "e.g. https://file.com/samplefile.json",
+        "help": "Please provide a URL to a sample of your data set file. This file should reveal the data structure of your data set, e.g. by including the header and one line of a CSV file. This file URL will be publicly available after publishing.",
+        "type": "files"
+      },
       {
         "name": "access",
         "label": "Access Type",

src/components/atoms/Button.tsx

@@ -17,6 +17,8 @@ interface ButtonProps {
   style?: 'primary' | 'ghost' | 'text'
   type?: 'submit'
   download?: boolean
+  target?: string
+  rel?: string
 }
 
 export default function Button({

src/components/molecules/FormFields/FilesInput/index.tsx

@@ -23,7 +23,7 @@ export default function FilesInput(props: InputProps): ReactElement {
       const newFileInfo = await getFileInfo(url)
       newFileInfo && helpers.setValue([newFileInfo])
     } catch (error) {
-      toast.error('Could not fetch file info. Please check url and try again')
+      toast.error('Could not fetch file info. Please check URL and try again')
       console.error(error.message)
     } finally {
       setIsLoading(false)

src/components/organisms/AssetContent/MetaSecondary.tsx

@@ -1,10 +1,9 @@
 import React, { ReactElement } from 'react'
-import shortid from 'shortid'
-import { ListItem } from '../../atoms/Lists'
 import MetaItem from './MetaItem'
 import styles from './MetaSecondary.module.css'
 import { MetadataMarket } from '../../../@types/Metadata'
 import Tags from '../../atoms/Tags'
+import Button from '../../atoms/Button'
 
 export default function MetaSecondary({
   metadata
@@ -15,18 +14,21 @@ export default function MetaSecondary({
 
   return (
     <aside className={styles.metaSecondary}>
-      {links && (
+      {links && links.length && (
         <div className={styles.samples}>
           <MetaItem
             title="Sample Data"
             content={
-              <ul>
+              <Button
-                {links?.map((link) => (
+                href={links[0].url}
-                  <ListItem key={shortid.generate()}>
+                target="_blank"
-                    <a href={link.url}>{link.name}</a>
+                rel="noreferrer"
-                  </ListItem>
+                download
-                ))}
+                style="text"
-              </ul>
+                size="small"
+              >
+                Download Sample
+              </Button>
             }
           />
         </div>

src/components/organisms/AssetContent/index.tsx

@@ -27,7 +27,7 @@ export default function AssetContent({
       <div className={styles.content}>
         <aside className={styles.meta}>
           <p>{datePublished && <Time date={datePublished} />}</p>
-          {categories && (
+          {categories && categories.length && (
             <p>
               <Link to={`/search?categories=["${categories[0]}"]`}>
                 {categories[0]}

src/components/pages/Publish/Preview.tsx

@@ -6,6 +6,7 @@ import MetaItem from '../../organisms/AssetContent/MetaItem'
 import styles from './Preview.module.css'
 import File from '../../atoms/File'
 import { MetadataPublishForm } from '../../../@types/MetaData'
+import Button from '../../atoms/Button'
 
 export default function Preview({
   values
@@ -18,13 +19,29 @@ export default function Preview({
       <header>
         {values.name && <h3 className={styles.title}>{values.name}</h3>}
         {values.description && <Markdown text={values.description} />}
-        {values.files && values.files.length && (
+        {values.files &&
-          <File
+          typeof values.files !== 'string' &&
-            file={values.files[0] as FileMetadata}
+          values.files.length > 0 && (
-            className={styles.file}
+            <File
-            small
+              file={values.files[0] as FileMetadata}
-          />
+              className={styles.file}
-        )}
+              small
+            />
+          )}
+        {values.links &&
+          typeof values.links !== 'string' &&
+          values.links.length && (
+            <Button
+              href={(values.links[0] as FileMetadata).url}
+              target="_blank"
+              rel="noreferrer"
+              download
+              style="text"
+              size="small"
+            >
+              Download Sample
+            </Button>
+          )}
         {values.tags && <Tags items={values.tags.split(',')} />}
       </header>
 
@@ -37,6 +54,7 @@ export default function Preview({
                 key.includes('description') ||
                 key.includes('tags') ||
                 key.includes('files') ||
+                key.includes('links') ||
                 key.includes('termsAndConditions') ||
                 key.includes('price') ||
                 value === undefined ||

src/components/pages/Publish/PublishForm.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement, useEffect, FormEvent } from 'react'
 import styles from './PublishForm.module.css'
-import { useOcean, usePublish } from '@oceanprotocol/react'
+import { useOcean } from '@oceanprotocol/react'
 import { useFormikContext, Form, Field } from 'formik'
 import Input from '../../atoms/Input'
 import Button from '../../atoms/Button'
@@ -25,7 +25,6 @@ export default function PublishForm({
     setErrors,
     setTouched,
     resetForm,
-    setValues,
     initialValues
   } = useFormikContext()
   const formName = 'ocean-publish-form'

src/components/pages/Publish/index.tsx

@@ -27,12 +27,6 @@ export default function PublishPage({
     values: MetadataPublishForm,
     resetForm: () => void
   ): Promise<void> {
-    // console.log(`
-    //   Collected form values:
-    //   ----------------------
-    //   ${JSON.stringify(values, null, 2)}
-    // `)
-
     const metadata = transformPublishFormToMetadata(values)
     const {
       tokensToMint,
@@ -42,13 +36,6 @@ export default function PublishPage({
     } = values.price
     const serviceType = values.access === 'Download' ? 'access' : 'compute'
 
-    // console.log(`
-    //   Transformed metadata values:
-    //   ----------------------
-    //   ${JSON.stringify(metadata, null, 2)}
-    //   Tokens to mint: ${tokensToMint}
-    // `)
-
     try {
       // mpAddress and mpFee are not yet implemented in ocean js so are not uset
       const ddo = await publish(

src/components/pages/Publish/utils.ts

@@ -35,9 +35,7 @@ export function transformPublishFormToMetadata(
       description,
       copyrightHolder,
       tags: tags?.split(','),
-      // links: {
+      links: typeof links !== 'string' && links,
-      //   url: links
-      // },
       termsAndConditions,
       priceType: price.type
     }

src/models/FormPublish.ts

@@ -25,7 +25,7 @@ export const validationSchema = Yup.object().shape<MetadataPublishForm>({
   // ---- optional fields ----
   copyrightHolder: Yup.string(),
   tags: Yup.string(),
-  links: Yup.object<FileMetadata[]>()
+  links: Yup.object<FileMetadata[]>().nullable()
 })
 
 export const initialValues: MetadataPublishForm = {

src/utils/index.ts

@@ -50,7 +50,7 @@ export async function getFileInfo(url: string): Promise<FileMetadata> {
     data: { url }
   })
 
-  if (response.status > 299 || !response.data.result) {
+  if (response.status > 299 || !response.data) {
     toast.error('Could not connect to File API')
     return
   }