2020-12-10 14:30:40 +01:00
|
|
|
import React, { FormEvent, ReactElement, useState } from 'react'
|
|
|
|
import { File as FileMetadata } from '@oceanprotocol/lib/dist/node/ddo/interfaces/File'
|
2021-10-27 12:27:14 +02:00
|
|
|
import Markdown from '@shared/Markdown'
|
2021-10-13 18:48:59 +02:00
|
|
|
import Tags from '@shared/atoms/Tags'
|
2021-10-25 15:26:00 +02:00
|
|
|
import MetaItem from '../../../Asset/AssetContent/MetaItem'
|
2021-10-18 20:44:33 +02:00
|
|
|
import FileIcon from '@shared/FileIcon'
|
2021-10-13 18:48:59 +02:00
|
|
|
import Button from '@shared/atoms/Button'
|
2021-10-28 11:38:40 +02:00
|
|
|
import { transformTags } from '@utils/ddo'
|
2021-10-18 20:44:33 +02:00
|
|
|
import NetworkName from '@shared/NetworkName'
|
2021-10-13 18:48:59 +02:00
|
|
|
import { useWeb3 } from '@context/Web3'
|
2021-10-28 12:33:29 +02:00
|
|
|
import styles from './index.module.css'
|
2021-10-13 18:48:59 +02:00
|
|
|
import Web3Feedback from '@shared/Web3Feedback'
|
|
|
|
import { useAsset } from '@context/Asset'
|
2021-10-25 15:26:00 +02:00
|
|
|
import { FormPublishData } from '../../_types'
|
2021-10-28 12:33:29 +02:00
|
|
|
import { useFormikContext } from 'formik'
|
2020-12-10 14:30:40 +01:00
|
|
|
|
|
|
|
function Description({ description }: { description: string }) {
|
|
|
|
const [fullDescription, setFullDescription] = useState<boolean>(false)
|
|
|
|
|
|
|
|
const textLimit = 500 // string.length
|
|
|
|
const descriptionDisplay =
|
|
|
|
fullDescription === true
|
|
|
|
? description
|
|
|
|
: `${description.substring(0, textLimit)}${
|
2021-01-28 17:28:32 +01:00
|
|
|
description.length > textLimit ? '...' : ''
|
2020-12-10 14:30:40 +01:00
|
|
|
}`
|
|
|
|
|
|
|
|
function handleDescriptionToggle(e: FormEvent<HTMLButtonElement>) {
|
|
|
|
e.preventDefault()
|
|
|
|
setFullDescription(!fullDescription)
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className={styles.description}>
|
|
|
|
<Markdown text={descriptionDisplay} />
|
|
|
|
{description.length > textLimit && (
|
|
|
|
<Button
|
|
|
|
style="text"
|
|
|
|
size="small"
|
|
|
|
onClick={handleDescriptionToggle}
|
|
|
|
className={styles.toggle}
|
|
|
|
>
|
|
|
|
{fullDescription === true ? 'Close' : 'Expand'}
|
|
|
|
</Button>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2021-10-13 18:48:59 +02:00
|
|
|
function MetaFull({ values }: { values: Partial<FormPublishData> }) {
|
2020-12-10 14:30:40 +01:00
|
|
|
return (
|
|
|
|
<div className={styles.metaFull}>
|
|
|
|
{Object.entries(values)
|
|
|
|
.filter(
|
|
|
|
([key, value]) =>
|
|
|
|
!(
|
|
|
|
key.includes('name') ||
|
|
|
|
key.includes('description') ||
|
|
|
|
key.includes('tags') ||
|
|
|
|
key.includes('files') ||
|
|
|
|
key.includes('links') ||
|
|
|
|
key.includes('termsAndConditions') ||
|
|
|
|
key.includes('dataTokenOptions') ||
|
2021-02-17 14:31:26 +01:00
|
|
|
key.includes('dockerImage') ||
|
|
|
|
key.includes('algorithmPrivacy') ||
|
2021-10-27 12:27:14 +02:00
|
|
|
value === undefined
|
2020-12-10 14:30:40 +01:00
|
|
|
)
|
|
|
|
)
|
|
|
|
.map(([key, value]) => (
|
|
|
|
<MetaItem key={key} title={key} content={value} />
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
function Sample({ url }: { url: string }) {
|
|
|
|
return (
|
|
|
|
<Button
|
|
|
|
href={url}
|
|
|
|
target="_blank"
|
|
|
|
rel="noreferrer"
|
|
|
|
download
|
|
|
|
style="text"
|
|
|
|
size="small"
|
|
|
|
>
|
|
|
|
Download Sample
|
|
|
|
</Button>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2021-10-28 12:33:29 +02:00
|
|
|
export default function Preview(): ReactElement {
|
2021-05-27 13:58:52 +02:00
|
|
|
const { networkId } = useWeb3()
|
2021-07-15 17:03:03 +02:00
|
|
|
const { isAssetNetwork } = useAsset()
|
2021-10-28 12:33:29 +02:00
|
|
|
const { values } = useFormikContext<FormPublishData>()
|
2021-05-27 13:58:52 +02:00
|
|
|
|
2020-12-10 14:30:40 +01:00
|
|
|
return (
|
|
|
|
<div className={styles.preview}>
|
|
|
|
<h2 className={styles.previewTitle}>Preview</h2>
|
2021-10-27 12:27:14 +02:00
|
|
|
{/* <header>
|
2021-05-27 13:58:52 +02:00
|
|
|
{networkId && <NetworkName networkId={networkId} />}
|
2020-12-10 14:30:40 +01:00
|
|
|
{values.name && <h3 className={styles.title}>{values.name}</h3>}
|
|
|
|
{values.dataTokenOptions?.name && (
|
|
|
|
<p
|
|
|
|
className={styles.datatoken}
|
|
|
|
>{`${values.dataTokenOptions.name} — ${values.dataTokenOptions.symbol}`}</p>
|
|
|
|
)}
|
|
|
|
{values.description && <Description description={values.description} />}
|
|
|
|
|
|
|
|
<div className={styles.asset}>
|
|
|
|
{values.files?.length > 0 && typeof values.files !== 'string' && (
|
2021-10-18 20:44:33 +02:00
|
|
|
<FileIcon
|
2020-12-10 14:30:40 +01:00
|
|
|
file={values.files[0] as FileMetadata}
|
|
|
|
className={styles.file}
|
|
|
|
small
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
{typeof values.links !== 'string' && values.links?.length && (
|
|
|
|
<Sample url={(values.links[0] as FileMetadata).url} />
|
|
|
|
)}
|
|
|
|
{values.tags && <Tags items={transformTags(values.tags)} />}
|
|
|
|
</header>
|
|
|
|
|
|
|
|
<MetaFull values={values} />
|
2021-07-15 17:03:03 +02:00
|
|
|
{isAssetNetwork === false && (
|
|
|
|
<Web3Feedback isAssetNetwork={isAssetNetwork} />
|
|
|
|
)}
|
2020-12-10 14:30:40 +01:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
2021-02-16 10:27:02 +01:00
|
|
|
|
|
|
|
export function MetadataAlgorithmPreview({
|
|
|
|
values
|
|
|
|
}: {
|
2021-10-13 18:48:59 +02:00
|
|
|
values: Partial<FormPublishData>
|
2021-02-16 10:27:02 +01:00
|
|
|
}): ReactElement {
|
2021-05-27 13:58:52 +02:00
|
|
|
const { networkId } = useWeb3()
|
|
|
|
|
2021-02-16 10:27:02 +01:00
|
|
|
return (
|
|
|
|
<div className={styles.preview}>
|
|
|
|
<h2 className={styles.previewTitle}>Preview</h2>
|
|
|
|
<header>
|
2021-05-27 13:58:52 +02:00
|
|
|
{networkId && <NetworkName networkId={networkId} />}
|
2021-02-16 10:27:02 +01:00
|
|
|
{values.name && <h3 className={styles.title}>{values.name}</h3>}
|
2021-04-26 13:43:58 +02:00
|
|
|
{values.dataTokenOptions?.name && (
|
|
|
|
<p
|
|
|
|
className={styles.datatoken}
|
|
|
|
>{`${values.dataTokenOptions.name} — ${values.dataTokenOptions.symbol}`}</p>
|
|
|
|
)}
|
2021-02-16 10:27:02 +01:00
|
|
|
{values.description && <Description description={values.description} />}
|
|
|
|
|
|
|
|
<div className={styles.asset}>
|
|
|
|
{values.files?.length > 0 && typeof values.files !== 'string' && (
|
2021-10-18 20:44:33 +02:00
|
|
|
<FileIcon
|
2021-02-16 10:27:02 +01:00
|
|
|
file={values.files[0] as FileMetadata}
|
|
|
|
className={styles.file}
|
|
|
|
small
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
{values.tags && <Tags items={transformTags(values.tags)} />}
|
|
|
|
</header>
|
2021-02-17 14:31:26 +01:00
|
|
|
<div className={styles.metaAlgorithm}>
|
|
|
|
{values.dockerImage && (
|
|
|
|
<MetaItem
|
|
|
|
key="dockerImage"
|
|
|
|
title="Docker Image"
|
|
|
|
content={values.dockerImage}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
{values.algorithmPrivacy && (
|
2021-02-25 22:08:40 +01:00
|
|
|
<MetaItem
|
|
|
|
key="privateAlgorithm"
|
|
|
|
title="Private Algorithm"
|
|
|
|
content="Yes"
|
|
|
|
/>
|
2021-02-17 14:31:26 +01:00
|
|
|
)}
|
|
|
|
</div>
|
2021-10-27 12:27:14 +02:00
|
|
|
<MetaFull values={values} /> */}
|
2021-02-16 10:27:02 +01:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|