oceanprotocol/commons
1
0
Fork 0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00
Code Releases Activity

workaround for version number components updating

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-07-16 18:45:22 +02:00
parent c1ff41b711
commit a31b041c05
Signed by: m
GPG Key ID: 606EEEF3C479A91F
5 changed files with 143 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
client/src/components/molecules/VersionNumbers/VersionTable.test.tsx
View File

@ -26,6 +26,17 @@ describe('VersionTableContracts', () => {
/submarine.duero.dev-ocean/ /submarine.duero.dev-ocean/
) )
rerender(
<VersionTableContracts
contracts={{ hello: 'hello', hello2: 'hello2' }}
network="nile"
keeperVersion="6.6.6"
/>
)
expect(container.querySelector('tr:last-child a').href).toMatch(
/submarine.nile.dev-ocean/
)
rerender( rerender(
<VersionTableContracts <VersionTableContracts
contracts={{ hello: 'hello', hello2: 'hello2' }} contracts={{ hello: 'hello', hello2: 'hello2' }}
@ -34,7 +45,7 @@ describe('VersionTableContracts', () => {
/> />
) )
expect(container.querySelector('tr:last-child a').href).toMatch( expect(container.querySelector('tr:last-child a').href).toMatch(
/submarine.pacific.dev-ocean/ /submarine.oceanprotocol/
) )
}) })
}) })

12
client/src/components/molecules/VersionNumbers/VersionTable.tsx
View File

@ -53,13 +53,11 @@ export const VersionTableContracts = ({
// sort alphabetically // sort alphabetically
.sort((a, b) => a.localeCompare(b)) .sort((a, b) => a.localeCompare(b))
.map(key => { .map(key => {
const submarineLink = `https://submarine${ const submarineLink = `https://submarine.${
network === 'duero' network === 'pacific'
? '.duero' ? 'oceanprotocol'
: network === 'pacific' : `${network}.dev-ocean`
? '.pacific' }.com/address/${contracts[key]}`
: ''
}.dev-ocean.com/address/${contracts[key]}`
return ( return (
<tr key={key}> <tr key={key}>

63
client/src/components/molecules/VersionNumbers/index.tsx
View File

@ -9,19 +9,14 @@ import { version } from '../../../../package.json'
import styles from './index.module.scss' import styles from './index.module.scss'
import { nodeUri, faucetUri } from '../../../config' import { nodeUri, faucetUri } from '../../../config'
import { User } from '../../../context' import { User, Market } from '../../../context'
import VersionTable from './VersionTable' import VersionTable from './VersionTable'
import VersionStatus from './VersionStatus' import VersionStatus from './VersionStatus'
// construct values which are not part of any response
export const commonsVersion =
process.env.NODE_ENV === 'production' ? version : `${version}-dev`
const commonsNetwork = new URL(nodeUri).hostname.split('.')[0]
const faucetNetwork = new URL(faucetUri).hostname.split('.')[1]
interface VersionNumbersProps { interface VersionNumbersProps {
minimal?: boolean minimal?: boolean
account: string
} }
export interface VersionNumbersState extends OceanPlatformVersions { export interface VersionNumbersState extends OceanPlatformVersions {
@ -44,12 +39,20 @@ export default class VersionNumbers extends PureComponent<
> { > {
public static contextType = User public static contextType = User
// construct values which are not part of any response
public commonsVersion =
process.env.NODE_ENV === 'production' ? version : `${version}-dev`
public commonsNetwork = new URL(nodeUri).hostname.split('.')[0]
public faucetNetwork = faucetUri.includes('dev-ocean')
? new URL(faucetUri).hostname.split('.')[1]
: 'Pacific'
// define a minimal default state to fill UI // define a minimal default state to fill UI
public state: VersionNumbersState = { public state: VersionNumbersState = {
commons: { commons: {
name: 'Commons', name: 'Commons',
network: commonsNetwork, network: this.commonsNetwork,
version: commonsVersion version: this.commonsVersion
}, },
squid: { squid: {
name: 'Squid-js', name: 'Squid-js',
@ -66,7 +69,7 @@ export default class VersionNumbers extends PureComponent<
faucet: { faucet: {
name: 'Faucet', name: 'Faucet',
version: '', version: '',
network: faucetNetwork, network: this.faucetNetwork,
status: OceanPlatformTechStatus.Loading status: OceanPlatformTechStatus.Loading
}, },
status: { status: {
@ -79,15 +82,24 @@ export default class VersionNumbers extends PureComponent<
// for canceling axios requests // for canceling axios requests
public signal = axios.CancelToken.source() public signal = axios.CancelToken.source()
public componentWillUnmount() { public componentDidMount() {
this.signal.cancel()
}
public componentWillReceiveProps() {
this.getOceanVersions() this.getOceanVersions()
this.getFaucetVersion() this.getFaucetVersion()
} }
public async componentDidUpdate(prevProps: any) {
// Workaround: Using account prop instead of getting it from
// context to be able to compare. Cause there is no `prevContext`.
if (prevProps.account !== this.props.account) {
this.getOceanVersions()
this.getFaucetVersion()
}
}
public componentWillUnmount() {
this.signal.cancel()
}
private async getOceanVersions() { private async getOceanVersions() {
const { ocean } = this.context const { ocean } = this.context
// wait until ocean object is properly populated // wait until ocean object is properly populated
@ -132,14 +144,19 @@ export default class VersionNumbers extends PureComponent<
const { commons, squid, brizo, aquarius } = this.state const { commons, squid, brizo, aquarius } = this.state
return ( return (
<p className={styles.versionsMinimal}> <Market.Consumer>
<a {market => (
title={`${squid.name} v${squid.version}\n${brizo.name} v${brizo.version}\n${aquarius.name} v${aquarius.version}`} <p className={styles.versionsMinimal}>
href={'/about'} <a
> title={`${squid.name} v${squid.version}\n${brizo.name} v${brizo.version}\n${aquarius.name} v${aquarius.version}`}
v{commons.version} {squid.network && `(${squid.network})`} href={'/about'}
</a> >
</p> v{commons.version}{' '}
{market.network && `(${market.network})`}
</a>
</p>
)}
</Market.Consumer>
) )
} }

89
client/src/components/organisms/Footer.tsx
View File

@ -1,5 +1,5 @@
import React from 'react' import React, { useContext } from 'react'
import { Market } from '../../context' import { Market, User } from '../../context'
import Content from '../atoms/Content' import Content from '../atoms/Content'
import { ReactComponent as AiCommons } from '../../img/aicommons.svg' import { ReactComponent as AiCommons } from '../../img/aicommons.svg'
import styles from './Footer.module.scss' import styles from './Footer.module.scss'
@ -7,48 +7,47 @@ import styles from './Footer.module.scss'
import meta from '../../data/meta.json' import meta from '../../data/meta.json'
import VersionNumbers from '../molecules/VersionNumbers' import VersionNumbers from '../molecules/VersionNumbers'
const Footer = () => ( export default function Footer() {
<footer className={styles.footer}> const market = useContext(Market)
<aside className={styles.stats}> const user = useContext(User)
return (
<footer className={styles.footer}>
<aside className={styles.stats}>
<Content wide>
<p>
Online since March 2019.
{market.totalAssets > 0 &&
` With a total of ${market.totalAssets} registered assets.`}
</p>
<p className={styles.aicommons}>
Proud supporter of{' '}
<a
href="https://aicommons.com/?utm_source=commons.oceanprotocol.com"
title="AI Commons"
>
<AiCommons />
</a>
</p>
<VersionNumbers account={user.account} minimal />
</Content>
</aside>
<Content wide> <Content wide>
<p> <small>
Online since March 2019. &copy; {new Date().getFullYear()}{' '}
<Market.Consumer> <a href={meta.social[0].url}>{meta.company}</a> &mdash; All
{state => Rights Reserved
state.totalAssets > 0 && </small>
` With a total of ${state.totalAssets} registered assets.`
} <nav className={styles.links}>
</Market.Consumer> {meta.social.map(site => (
</p> <a key={site.title} href={site.url}>
<p className={styles.aicommons}> {site.title}
Proud supporter of{' '} </a>
<a ))}
href="https://aicommons.com/?utm_source=commons.oceanprotocol.com" </nav>
title="AI Commons"
>
<AiCommons />
</a>
</p>
<VersionNumbers minimal />
</Content> </Content>
</aside> </footer>
)
<Content wide> }
<small>
&copy; {new Date().getFullYear()}{' '}
<a href={meta.social[0].url}>{meta.company}</a> &mdash; All
Rights Reserved
</small>
<nav className={styles.links}>
{meta.social.map(site => (
<a key={site.title} href={site.url}>
{site.title}
</a>
))}
</nav>
</Content>
</footer>
)
export default Footer

86
client/src/routes/About.tsx
View File

@ -1,5 +1,5 @@
import React, { Component } from 'react' import React, { useContext } from 'react'
import { Market } from '../context' import { Market, User } from '../context'
import Route from '../components/templates/Route' import Route from '../components/templates/Route'
import Content from '../components/atoms/Content' import Content from '../components/atoms/Content'
import VersionNumbers from '../components/molecules/VersionNumbers' import VersionNumbers from '../components/molecules/VersionNumbers'
@ -7,51 +7,49 @@ import Web3message from '../components/organisms/Web3message'
import stylesVersionNumbers from '../components/molecules/VersionNumbers/index.module.scss' import stylesVersionNumbers from '../components/molecules/VersionNumbers/index.module.scss'
import withTracker from '../hoc/withTracker' import withTracker from '../hoc/withTracker'
class About extends Component { const About = () => {
public static contextType = Market const market = useContext(Market)
const user = useContext(User)
public render() { return (
return ( <Route
<Route title="About"
title="About" description={`A marketplace to find and publish open data sets in the Ocean ${market.network} Network.`}
description={`A marketplace to find and publish open data sets in the Ocean ${this.context.network} Network.`} >
> <Content>
<Content> <p>
<p> Commons is built on top of the Ocean{' '}
Commons is built on top of the Ocean{' '} <a href="https://docs.oceanprotocol.com/concepts/pacific-network/">
<a href="https://docs.oceanprotocol.com/concepts/pacific-network/"> {market.network} network
{this.context.network} network </a>{' '}
</a>{' '} and is targeted at enthusiastic data scientists with some
and is targeted at enthusiastic data scientists with crypto experience. It can be used with any Web3-capable
some crypto experience. It can be used with any browser, like Firefox with MetaMask installed.
Web3-capable browser, like Firefox with MetaMask </p>
installed.
</p>
<ul> <ul>
<li> <li>
<a href="https://blog.oceanprotocol.com/the-commons-marketplace-c57a44288314"> <a href="https://blog.oceanprotocol.com/the-commons-marketplace-c57a44288314">
Read the blog post → Read the blog post →
</a> </a>
</li> </li>
<li> <li>
<a href="https://github.com/oceanprotocol/commons"> <a href="https://github.com/oceanprotocol/commons">
Check out oceanprotocol/commons on GitHub → Check out oceanprotocol/commons on GitHub →
</a> </a>
</li> </li>
</ul> </ul>
</Content> </Content>
<Content> <Content>
<h2 className={stylesVersionNumbers.versionsTitle}> <h2 className={stylesVersionNumbers.versionsTitle}>
Your Web3 Account Status Your Web3 Account Status
</h2> </h2>
<Web3message extended /> <Web3message extended />
<VersionNumbers /> <VersionNumbers account={user.account} />
</Content> </Content>
</Route> </Route>
) )
}
} }
export default withTracker(About) export default withTracker(About)