mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
refactor to use one download per file
This commit is contained in:
parent
3fb426413d
commit
519c2a887f
GPG Key ID:
606EEEF3C479A91F
60
client/src/routes/Details/AssetFile.module.scss
Normal file
60
client/src/routes/Details/AssetFile.module.scss
Normal file
@ -0,0 +1,60 @@
|
||||
@import '../../styles/variables';
|
||||
|
||||
.buttonMain {
|
||||
margin: auto;
|
||||
margin-bottom: $spacer / 2;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.error {
|
||||
text-align: center;
|
||||
color: $red;
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
|
||||
.fileWrap {
|
||||
margin-left: $spacer / 4;
|
||||
margin-right: $spacer / 4;
|
||||
margin-bottom: $spacer * $line-height;
|
||||
flex: 1 1 100%;
|
||||
|
||||
@media (min-width: $break-point--small) {
|
||||
flex-basis: calc(100% / 3 - #{$spacer} / 2);
|
||||
}
|
||||
}
|
||||
|
||||
.file {
|
||||
display: inline-block;
|
||||
background: $brand-grey;
|
||||
padding: $spacer $spacer / 2;
|
||||
margin-bottom: $spacer / 2;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
min-height: 100px;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 1rem solid $body-background;
|
||||
border-left: 1rem solid transparent;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $brand-white;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// move spinner a bit up
|
||||
+ div {
|
||||
margin-top: $spacer / 2;
|
||||
}
|
||||
}
|
||||
99
client/src/routes/Details/AssetFile.tsx
Normal file
99
client/src/routes/Details/AssetFile.tsx
Normal file
@ -0,0 +1,99 @@
|
||||
import React, { PureComponent } from 'react'
|
||||
import { Logger } from '@oceanprotocol/squid'
|
||||
import filesize from 'filesize'
|
||||
import { User } from '../../context/User'
|
||||
import Button from '../../components/atoms/Button'
|
||||
import Spinner from '../../components/atoms/Spinner'
|
||||
import styles from './AssetFile.module.scss'
|
||||
|
||||
interface AssetFileProps {
|
||||
file: any
|
||||
ddo: any
|
||||
}
|
||||
|
||||
interface AssetFileState {
|
||||
isLoading: boolean
|
||||
error: string
|
||||
message: string
|
||||
}
|
||||
|
||||
export default class AssetFile extends PureComponent<
|
||||
AssetFileProps,
|
||||
AssetFileState
|
||||
> {
|
||||
public state = {
|
||||
isLoading: false,
|
||||
error: '',
|
||||
message: 'Decrypting file, please sign...'
|
||||
}
|
||||
|
||||
private resetState = () => this.setState({ isLoading: true, error: '' })
|
||||
|
||||
private purchaseAsset = async (ddo: any, index: number) => {
|
||||
this.resetState()
|
||||
|
||||
const { ocean } = this.context
|
||||
const accounts = await ocean.accounts.list()
|
||||
|
||||
try {
|
||||
const service = ddo.findServiceByType('Access')
|
||||
const agreementId = await ocean.assets.order(
|
||||
ddo.id,
|
||||
service.serviceDefinitionId,
|
||||
accounts[0]
|
||||
)
|
||||
|
||||
const path = await ocean.assets.consume(
|
||||
agreementId,
|
||||
ddo.id,
|
||||
service.serviceDefinitionId,
|
||||
accounts[0],
|
||||
'',
|
||||
index
|
||||
)
|
||||
Logger.log('path', path)
|
||||
|
||||
this.setState({ isLoading: false })
|
||||
} catch (error) {
|
||||
Logger.log('error', error)
|
||||
this.setState({ isLoading: false, error: error.message })
|
||||
}
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { ddo, file } = this.props
|
||||
|
||||
return (
|
||||
<div className={styles.fileWrap}>
|
||||
<ul key={file.index} className={styles.file}>
|
||||
<li>
|
||||
{file.contentType && file.contentType.split('/')[1]}
|
||||
</li>
|
||||
<li>
|
||||
{file.contentLength && filesize(file.contentLength)}
|
||||
</li>
|
||||
{/* <li>{file.encoding}</li> */}
|
||||
{/* <li>{file.compression}</li> */}
|
||||
</ul>
|
||||
|
||||
{this.state.isLoading ? (
|
||||
<Spinner message={this.state.message} />
|
||||
) : (
|
||||
<Button
|
||||
primary
|
||||
className={styles.buttonMain}
|
||||
onClick={() => this.purchaseAsset(ddo, file.index)}
|
||||
>
|
||||
Get file
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{this.state.error !== '' && (
|
||||
<div className={styles.error}>{this.state.error}</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
AssetFile.contextType = User
|
||||
@ -1,49 +1,8 @@
|
||||
@import '../../styles/variables';
|
||||
|
||||
.buttonMain {
|
||||
margin: auto;
|
||||
margin-bottom: $spacer / 2;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.error {
|
||||
text-align: center;
|
||||
color: $red;
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
|
||||
.files {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.file {
|
||||
display: inline-block;
|
||||
background: $brand-grey;
|
||||
padding: $spacer $spacer / 2;
|
||||
text-align: left;
|
||||
margin-left: $spacer / 4;
|
||||
margin-right: $spacer / 4;
|
||||
position: relative;
|
||||
min-height: 100px;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 1rem solid $body-background;
|
||||
border-left: 1rem solid transparent;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $brand-white;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@ -1,64 +1,11 @@
|
||||
import React, { PureComponent } from 'react'
|
||||
import { Logger } from '@oceanprotocol/squid'
|
||||
import filesize from 'filesize'
|
||||
import { User } from '../../context/User'
|
||||
import Button from '../../components/atoms/Button'
|
||||
import Spinner from '../../components/atoms/Spinner'
|
||||
import AssetFile from './AssetFile'
|
||||
import styles from './AssetFilesDetails.module.scss'
|
||||
|
||||
interface AssetFilesDetailsProps {
|
||||
export default class AssetFilesDetails extends PureComponent<{
|
||||
files: any[]
|
||||
ddo: any
|
||||
}
|
||||
|
||||
interface AssetFilesDetailsState {
|
||||
isLoading: boolean
|
||||
error: string
|
||||
message: string
|
||||
}
|
||||
|
||||
export default class AssetFilesDetails extends PureComponent<
|
||||
AssetFilesDetailsProps,
|
||||
AssetFilesDetailsState
|
||||
> {
|
||||
public state = {
|
||||
isLoading: false,
|
||||
error: '',
|
||||
message: 'Decrypting files, please sign with your wallet...'
|
||||
}
|
||||
|
||||
private resetState = () => this.setState({ isLoading: true, error: '' })
|
||||
|
||||
private purchaseAsset = async (ddo: any) => {
|
||||
this.resetState()
|
||||
|
||||
const { ocean } = this.context
|
||||
const accounts = await ocean.accounts.list()
|
||||
|
||||
try {
|
||||
const service = ddo.findServiceByType('Access')
|
||||
const agreementId = await ocean.assets.order(
|
||||
ddo.id,
|
||||
service.serviceDefinitionId,
|
||||
accounts[0]
|
||||
)
|
||||
|
||||
const path = await ocean.assets.consume(
|
||||
agreementId,
|
||||
ddo.id,
|
||||
service.serviceDefinitionId,
|
||||
accounts[0],
|
||||
''
|
||||
)
|
||||
Logger.log('path', path)
|
||||
|
||||
this.setState({ isLoading: false })
|
||||
} catch (error) {
|
||||
Logger.log('error', error)
|
||||
this.setState({ isLoading: false, error: error.message })
|
||||
}
|
||||
}
|
||||
|
||||
}> {
|
||||
public render() {
|
||||
const { files, ddo } = this.props
|
||||
|
||||
@ -66,41 +13,12 @@ export default class AssetFilesDetails extends PureComponent<
|
||||
<>
|
||||
<div className={styles.files}>
|
||||
{files.map(file => (
|
||||
<ul key={file.index} className={styles.file}>
|
||||
<li>
|
||||
{file.contentType &&
|
||||
file.contentType.split('/')[1]}
|
||||
</li>
|
||||
<li>
|
||||
{file.contentLength &&
|
||||
filesize(file.contentLength)}
|
||||
</li>
|
||||
{/* <li>{file.encoding}</li> */}
|
||||
{/* <li>{file.compression}</li> */}
|
||||
</ul>
|
||||
<AssetFile key={file.index} ddo={ddo} file={file} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{this.state.isLoading ? (
|
||||
<Spinner message={this.state.message} />
|
||||
) : (
|
||||
<Button
|
||||
primary
|
||||
className={styles.buttonMain}
|
||||
onClick={() => this.purchaseAsset(ddo)}
|
||||
>
|
||||
Get asset files
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{this.state.error !== '' && (
|
||||
<div className={styles.error}>{this.state.error}</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div>No files attached.</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
AssetFilesDetails.contextType = User
|
||||
|
||||
Loading…
Reference in New Issue
Block a user