From a31b041c05ce00ab412b1bdd197896ae17ef5552 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 16 Jul 2019 18:45:22 +0200 Subject: [PATCH] workaround for version number components updating --- .../VersionNumbers/VersionTable.test.tsx | 13 ++- .../molecules/VersionNumbers/VersionTable.tsx | 12 ++- .../molecules/VersionNumbers/index.tsx | 63 ++++++++----- client/src/components/organisms/Footer.tsx | 89 +++++++++---------- client/src/routes/About.tsx | 86 +++++++++--------- 5 files changed, 143 insertions(+), 120 deletions(-) diff --git a/client/src/components/molecules/VersionNumbers/VersionTable.test.tsx b/client/src/components/molecules/VersionNumbers/VersionTable.test.tsx index e408154..b107cbe 100644 --- a/client/src/components/molecules/VersionNumbers/VersionTable.test.tsx +++ b/client/src/components/molecules/VersionNumbers/VersionTable.test.tsx @@ -26,6 +26,17 @@ describe('VersionTableContracts', () => { /submarine.duero.dev-ocean/ ) + rerender( + + ) + expect(container.querySelector('tr:last-child a').href).toMatch( + /submarine.nile.dev-ocean/ + ) + rerender( { /> ) expect(container.querySelector('tr:last-child a').href).toMatch( - /submarine.pacific.dev-ocean/ + /submarine.oceanprotocol/ ) }) }) diff --git a/client/src/components/molecules/VersionNumbers/VersionTable.tsx b/client/src/components/molecules/VersionNumbers/VersionTable.tsx index 9d1eaba..df0ec1b 100644 --- a/client/src/components/molecules/VersionNumbers/VersionTable.tsx +++ b/client/src/components/molecules/VersionNumbers/VersionTable.tsx @@ -53,13 +53,11 @@ export const VersionTableContracts = ({ // sort alphabetically .sort((a, b) => a.localeCompare(b)) .map(key => { - const submarineLink = `https://submarine${ - network === 'duero' - ? '.duero' - : network === 'pacific' - ? '.pacific' - : '' - }.dev-ocean.com/address/${contracts[key]}` + const submarineLink = `https://submarine.${ + network === 'pacific' + ? 'oceanprotocol' + : `${network}.dev-ocean` + }.com/address/${contracts[key]}` return ( diff --git a/client/src/components/molecules/VersionNumbers/index.tsx b/client/src/components/molecules/VersionNumbers/index.tsx index 7319878..2b7ea55 100644 --- a/client/src/components/molecules/VersionNumbers/index.tsx +++ b/client/src/components/molecules/VersionNumbers/index.tsx @@ -9,19 +9,14 @@ import { version } from '../../../../package.json' import styles from './index.module.scss' import { nodeUri, faucetUri } from '../../../config' -import { User } from '../../../context' +import { User, Market } from '../../../context' import VersionTable from './VersionTable' 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 { minimal?: boolean + account: string } export interface VersionNumbersState extends OceanPlatformVersions { @@ -44,12 +39,20 @@ export default class VersionNumbers extends PureComponent< > { 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 public state: VersionNumbersState = { commons: { name: 'Commons', - network: commonsNetwork, - version: commonsVersion + network: this.commonsNetwork, + version: this.commonsVersion }, squid: { name: 'Squid-js', @@ -66,7 +69,7 @@ export default class VersionNumbers extends PureComponent< faucet: { name: 'Faucet', version: '', - network: faucetNetwork, + network: this.faucetNetwork, status: OceanPlatformTechStatus.Loading }, status: { @@ -79,15 +82,24 @@ export default class VersionNumbers extends PureComponent< // for canceling axios requests public signal = axios.CancelToken.source() - public componentWillUnmount() { - this.signal.cancel() - } - - public componentWillReceiveProps() { + public componentDidMount() { this.getOceanVersions() 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() { const { ocean } = this.context // wait until ocean object is properly populated @@ -132,14 +144,19 @@ export default class VersionNumbers extends PureComponent< const { commons, squid, brizo, aquarius } = this.state return ( -

- - v{commons.version} {squid.network && `(${squid.network})`} - -

+ + {market => ( +

+ + v{commons.version}{' '} + {market.network && `(${market.network})`} + +

+ )} + ) } diff --git a/client/src/components/organisms/Footer.tsx b/client/src/components/organisms/Footer.tsx index bc69c5b..6d3c08e 100644 --- a/client/src/components/organisms/Footer.tsx +++ b/client/src/components/organisms/Footer.tsx @@ -1,5 +1,5 @@ -import React from 'react' -import { Market } from '../../context' +import React, { useContext } from 'react' +import { Market, User } from '../../context' import Content from '../atoms/Content' import { ReactComponent as AiCommons } from '../../img/aicommons.svg' import styles from './Footer.module.scss' @@ -7,48 +7,47 @@ import styles from './Footer.module.scss' import meta from '../../data/meta.json' import VersionNumbers from '../molecules/VersionNumbers' -const Footer = () => ( -
- - - - - © {new Date().getFullYear()}{' '} - {meta.company} — All - Rights Reserved - - - - -
-) - -export default Footer + + ) +} diff --git a/client/src/routes/About.tsx b/client/src/routes/About.tsx index 5cb27be..45b488c 100644 --- a/client/src/routes/About.tsx +++ b/client/src/routes/About.tsx @@ -1,5 +1,5 @@ -import React, { Component } from 'react' -import { Market } from '../context' +import React, { useContext } from 'react' +import { Market, User } from '../context' import Route from '../components/templates/Route' import Content from '../components/atoms/Content' 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 withTracker from '../hoc/withTracker' -class About extends Component { - public static contextType = Market +const About = () => { + const market = useContext(Market) + const user = useContext(User) - public render() { - return ( - - -

- Commons is built on top of the Ocean{' '} - - {this.context.network} network - {' '} - and is targeted at enthusiastic data scientists with - some crypto experience. It can be used with any - Web3-capable browser, like Firefox with MetaMask - installed. -

+ return ( + + +

+ Commons is built on top of the Ocean{' '} + + {market.network} network + {' '} + and is targeted at enthusiastic data scientists with some + crypto experience. It can be used with any Web3-capable + browser, like Firefox with MetaMask installed. +

- - + + - -

- Your Web3 Account Status -

- - - - - ) - } + +

+ Your Web3 Account Status +

+ + + + + ) } export default withTracker(About)