mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
load all metadata client-side only
This commit is contained in:
parent
5910faf455
commit
894f3b39be
@ -1,5 +1,3 @@
|
|||||||
const path = require('path')
|
|
||||||
|
|
||||||
exports.onCreateWebpackConfig = ({ actions }) => {
|
exports.onCreateWebpackConfig = ({ actions }) => {
|
||||||
actions.setWebpackConfig({
|
actions.setWebpackConfig({
|
||||||
node: {
|
node: {
|
||||||
@ -9,60 +7,6 @@ exports.onCreateWebpackConfig = ({ actions }) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
exports.createPages = async ({ graphql, actions }) => {
|
|
||||||
const { createPage } = actions
|
|
||||||
|
|
||||||
// Create pages for all assets
|
|
||||||
const assetDetailsTemplate = path.resolve(
|
|
||||||
'src/components/templates/AssetDetails.tsx'
|
|
||||||
)
|
|
||||||
|
|
||||||
const result = await graphql(`
|
|
||||||
query {
|
|
||||||
allOceanAsset {
|
|
||||||
edges {
|
|
||||||
node {
|
|
||||||
did
|
|
||||||
main {
|
|
||||||
type
|
|
||||||
name
|
|
||||||
dateCreated
|
|
||||||
author
|
|
||||||
license
|
|
||||||
price
|
|
||||||
datePublished
|
|
||||||
files {
|
|
||||||
contentType
|
|
||||||
index
|
|
||||||
}
|
|
||||||
}
|
|
||||||
additionalInformation {
|
|
||||||
description
|
|
||||||
deliveryType
|
|
||||||
termsAndConditions
|
|
||||||
access
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`)
|
|
||||||
|
|
||||||
if (result.errors) {
|
|
||||||
throw result.errors
|
|
||||||
}
|
|
||||||
|
|
||||||
await result.data.allOceanAsset.edges.forEach(({ node }) => {
|
|
||||||
const path = `/asset/${node.did}`
|
|
||||||
|
|
||||||
createPage({
|
|
||||||
path,
|
|
||||||
component: assetDetailsTemplate,
|
|
||||||
context: { did: node.did }
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
exports.onCreatePage = async ({ page, actions }) => {
|
exports.onCreatePage = async ({ page, actions }) => {
|
||||||
const { createPage } = actions
|
const { createPage } = actions
|
||||||
// page.matchPath is a special key that's used for matching pages
|
// page.matchPath is a special key that's used for matching pages
|
||||||
|
5
src/@types/MetaData.d.ts
vendored
5
src/@types/MetaData.d.ts
vendored
@ -34,8 +34,3 @@ export interface MetaDataPublishForm {
|
|||||||
export interface ServiceMetaDataMarket extends ServiceMetadata {
|
export interface ServiceMetaDataMarket extends ServiceMetadata {
|
||||||
attributes: MetaDataMarket
|
attributes: MetaDataMarket
|
||||||
}
|
}
|
||||||
|
|
||||||
// type for assets pulled into GraphQL
|
|
||||||
export interface OceanAsset extends MetaDataMarket {
|
|
||||||
did: DID
|
|
||||||
}
|
|
||||||
|
@ -1,3 +1,9 @@
|
|||||||
.grid {
|
.grid {
|
||||||
composes: assetList from '../organisms/AssetList.module.css';
|
composes: assetList from '../organisms/AssetList.module.css';
|
||||||
|
margin-top: calc(var(--spacer) * 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
color: var(--color-secondary);
|
||||||
|
font-size: var(--font-size-small);
|
||||||
}
|
}
|
||||||
|
@ -1,29 +1,50 @@
|
|||||||
import React, { ReactElement } from 'react'
|
import React, { ReactElement, useEffect, useState } from 'react'
|
||||||
import SearchBar from '../molecules/SearchBar'
|
import SearchBar from '../molecules/SearchBar'
|
||||||
import shortid from 'shortid'
|
import { ServiceMetaDataMarket } from '../../@types/MetaData'
|
||||||
import { OceanAsset } from '../../@types/MetaData'
|
|
||||||
import AssetTeaser from '../molecules/AssetTeaser'
|
import AssetTeaser from '../molecules/AssetTeaser'
|
||||||
import styles from './Home.module.css'
|
import styles from './Home.module.css'
|
||||||
|
import axios from 'axios'
|
||||||
|
import { oceanConfig } from '../../../app.config'
|
||||||
|
import { DDO } from '@oceanprotocol/lib'
|
||||||
|
|
||||||
|
export default function HomePage(): ReactElement {
|
||||||
|
const [assets, setAssets] = useState<DDO[]>()
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
async function getAllAssets() {
|
||||||
|
try {
|
||||||
|
const result = await axios(
|
||||||
|
`${oceanConfig.metadataStoreUri}/api/v1/aquarius/assets/ddo`
|
||||||
|
)
|
||||||
|
setAssets(result.data)
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error.message)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
getAllAssets()
|
||||||
|
}, [])
|
||||||
|
|
||||||
export default function HomePage({
|
|
||||||
assets
|
|
||||||
}: {
|
|
||||||
assets: {
|
|
||||||
node: OceanAsset
|
|
||||||
}[]
|
|
||||||
}): ReactElement {
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SearchBar large />
|
<SearchBar large />
|
||||||
|
|
||||||
{assets && (
|
{assets && (
|
||||||
<div className={styles.grid}>
|
<div className={styles.grid}>
|
||||||
{assets.map(({ node }: { node: OceanAsset }) => (
|
{assets.length ? (
|
||||||
<AssetTeaser
|
assets.map((ddo: DDO) => {
|
||||||
key={shortid.generate()}
|
const {
|
||||||
did={node.did}
|
attributes
|
||||||
metadata={node}
|
}: ServiceMetaDataMarket = ddo.findServiceByType('metadata')
|
||||||
/>
|
|
||||||
))}
|
return (
|
||||||
|
<AssetTeaser key={ddo.id} did={ddo.id} metadata={attributes} />
|
||||||
|
)
|
||||||
|
})
|
||||||
|
) : (
|
||||||
|
<div className={styles.empty}>
|
||||||
|
No data sets found in {oceanConfig.metadataStoreUri}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
|
@ -1,41 +0,0 @@
|
|||||||
import React, { ReactElement } from 'react'
|
|
||||||
import { PageProps, graphql } from 'gatsby'
|
|
||||||
import Layout from '../Layout'
|
|
||||||
import AssetContent from '../organisms/AssetContent'
|
|
||||||
|
|
||||||
export default function AssetDetailsTemplate(props: PageProps): ReactElement {
|
|
||||||
const { oceanAsset } = props.data as any
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Layout title={oceanAsset.main.name} uri={props.path}>
|
|
||||||
<AssetContent did={oceanAsset.did} metadata={oceanAsset} />
|
|
||||||
</Layout>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export const templateQuery = graphql`
|
|
||||||
query OceanAssetByDid($did: String!) {
|
|
||||||
oceanAsset(did: { eq: $did }) {
|
|
||||||
did
|
|
||||||
main {
|
|
||||||
type
|
|
||||||
name
|
|
||||||
dateCreated
|
|
||||||
author
|
|
||||||
license
|
|
||||||
price
|
|
||||||
datePublished
|
|
||||||
files {
|
|
||||||
index
|
|
||||||
contentType
|
|
||||||
}
|
|
||||||
}
|
|
||||||
additionalInformation {
|
|
||||||
description
|
|
||||||
deliveryType
|
|
||||||
termsAndConditions
|
|
||||||
access
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`
|
|
@ -7,6 +7,7 @@ import { MetaDataMarket, ServiceMetaDataMarket } from '../../@types/MetaData'
|
|||||||
import { MetadataStore, Logger } from '@oceanprotocol/lib'
|
import { MetadataStore, Logger } from '@oceanprotocol/lib'
|
||||||
import { oceanConfig } from '../../../app.config'
|
import { oceanConfig } from '../../../app.config'
|
||||||
import Alert from '../../components/atoms/Alert'
|
import Alert from '../../components/atoms/Alert'
|
||||||
|
import { useMetadata } from '@oceanprotocol/react'
|
||||||
|
|
||||||
export default function AssetRoute(props: PageProps): ReactElement {
|
export default function AssetRoute(props: PageProps): ReactElement {
|
||||||
const [metadata, setMetadata] = useState<MetaDataMarket>()
|
const [metadata, setMetadata] = useState<MetaDataMarket>()
|
||||||
@ -51,7 +52,11 @@ export default function AssetRoute(props: PageProps): ReactElement {
|
|||||||
) : did && metadata ? (
|
) : did && metadata ? (
|
||||||
<Layout title={title} uri={props.location.pathname}>
|
<Layout title={title} uri={props.location.pathname}>
|
||||||
<Router basepath="/asset">
|
<Router basepath="/asset">
|
||||||
<AssetContent did={did} metadata={metadata} path="/asset/:did" />
|
<AssetContent
|
||||||
|
did={did}
|
||||||
|
metadata={metadata as MetaDataMarket}
|
||||||
|
path="/asset/:did"
|
||||||
|
/>
|
||||||
</Router>
|
</Router>
|
||||||
</Layout>
|
</Layout>
|
||||||
) : (
|
) : (
|
||||||
|
@ -1,40 +1,15 @@
|
|||||||
import React, { ReactElement } from 'react'
|
import React, { ReactElement } from 'react'
|
||||||
import { PageProps, graphql } from 'gatsby'
|
import { PageProps } from 'gatsby'
|
||||||
import PageHome from '../components/pages/Home'
|
import PageHome from '../components/pages/Home'
|
||||||
import { useSiteMetadata } from '../hooks/useSiteMetadata'
|
import { useSiteMetadata } from '../hooks/useSiteMetadata'
|
||||||
import Layout from '../components/Layout'
|
import Layout from '../components/Layout'
|
||||||
|
|
||||||
export default function PageGatsbyHome(props: PageProps): ReactElement {
|
export default function PageGatsbyHome(props: PageProps): ReactElement {
|
||||||
const { siteTitle, siteTagline } = useSiteMetadata()
|
const { siteTitle, siteTagline } = useSiteMetadata()
|
||||||
const assets = (props.data as any).allOceanAsset.edges
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout title={siteTitle} description={siteTagline} uri={props.uri}>
|
<Layout title={siteTitle} description={siteTagline} uri={props.uri}>
|
||||||
<PageHome assets={assets} />
|
<PageHome />
|
||||||
</Layout>
|
</Layout>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export const pageQuery = graphql`
|
|
||||||
query PageHomeQuery {
|
|
||||||
allOceanAsset {
|
|
||||||
edges {
|
|
||||||
node {
|
|
||||||
did
|
|
||||||
main {
|
|
||||||
type
|
|
||||||
name
|
|
||||||
dateCreated
|
|
||||||
author
|
|
||||||
price
|
|
||||||
datePublished
|
|
||||||
}
|
|
||||||
additionalInformation {
|
|
||||||
description
|
|
||||||
access
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`
|
|
||||||
|
@ -1,10 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import { render } from '@testing-library/react'
|
|
||||||
import { Web3Provider } from '@oceanprotocol/react'
|
|
||||||
|
|
||||||
describe('Web3Provider', () => {
|
|
||||||
it('renders without crashing', () => {
|
|
||||||
const { container } = render(<Web3Provider>Children</Web3Provider>)
|
|
||||||
expect(container).toHaveTextContent('Children')
|
|
||||||
})
|
|
||||||
})
|
|
Loading…
Reference in New Issue
Block a user