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

version number fixes

Browse Source 
* add loading state
* add error state
* handle connection errors
* backwards compatibility for all components
* small spinner variant
This commit is contained in:
Matthias Kretschmann 2019-06-11 20:27:02 +02:00
parent 89b04e93fd
commit 1b336e2e80
Signed by: m
GPG Key ID: 606EEEF3C479A91F
6 changed files with 171 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
client/src/components/atoms/Spinner.module.scss
View File

@ -29,6 +29,20 @@
padding-top: $spacer / 4;
}
.small {
composes: spinner;
margin: 0;
display: inline-block;
&:before {
width: $font-size-small;
height: $font-size-small;
margin-top: -($font-size-small);
margin-left: -($font-size-small / 2);
border-width: .1rem;
}
}
@keyframes spinner {
to {
transform: rotate(360deg);

16
client/src/components/atoms/Spinner.tsx
View File

@ -1,8 +1,19 @@
import React from 'react'
import styles from './Spinner.module.scss'
const Spinner = ({ message }: { message?: string }) => (
<div className={styles.spinner}>
const Spinner = ({
message,
small,
className
}: {
message?: string
small?: boolean
className?: string
}) => {
const classes = className || (small ? styles.small : styles.spinner)
return (
<div className={classes}>
{message && (
<div
className={styles.spinnerMessage}
@ -11,5 +22,6 @@ const Spinner = ({ message }: { message?: string }) => (
)}
</div>
)
}
export default Spinner

5
client/src/components/atoms/VersionNumbers/VersionTable.module.scss
View File

@ -52,3 +52,8 @@
}
}
}
.spinner {
composes: spinner, small from '../Spinner.module.scss';
margin-right: $spacer;
}

22
client/src/components/atoms/VersionNumbers/VersionTable.tsx
View File

@ -2,6 +2,7 @@ import React, { Fragment } from 'react'
import { VersionNumbersState as VersionTableProps } from '.'
import styles from './VersionTable.module.scss'
import slugify from '@sindresorhus/slugify'
import Spinner from '../Spinner'
const VersionTableContracts = ({
contracts,
@ -12,7 +13,8 @@ const VersionTableContracts = ({
}) => (
<table>
<tbody>
{Object.keys(contracts).map(key => (
{contracts &&
Object.keys(contracts).map(key => (
<tr key={key}>
<td>
<span className={styles.label}>{key}</span>
@ -42,18 +44,30 @@ const VersionTable = ({ data }: { data: VersionTableProps }) => (
<tr key={key}>
<td>
<a
href={`https://github.com/oceanprotocol/${slugify(
href={
value.software &&
`https://github.com/oceanprotocol/${slugify(
value.software
)}`}
)}`
}
>
<strong>{value.software}</strong>
</a>
</td>
<td>
{value.isLoading ? (
<Spinner small className={styles.spinner} />
) : value.version ? (
<>
<code>v{value.version}</code>
{value.network && `(${value.network})`}
</>
) : (
'Could not get version'
)}
</td>
</tr>
{key === 'keeperContracts' && (
{key === 'keeperContracts' && data.brizo.contracts && (
<tr>
<td colSpan={2}>
<VersionTableContracts

105
client/src/components/atoms/VersionNumbers/index.tsx
View File

@ -36,10 +36,12 @@ export interface VersionNumbersState {
version: string
}
aquarius: {
isLoading: boolean
software: string
version: string
}
brizo: {
isLoading: boolean
software: string
version: string
network: string
@ -48,13 +50,16 @@ export interface VersionNumbersState {
contracts: any
}
keeperContracts: {
isLoading: boolean
software: string
version: string
network: string
contracts: any
}
faucet: {
software: string
version: string
isLoading: boolean
software?: string
version?: string
}
}
@ -68,73 +73,121 @@ export default class VersionNumbers extends PureComponent<
software: 'Squid-js',
version: versionSquid
},
aquarius: { software: 'Aquarius', version: '0.0.0' },
aquarius: {
isLoading: true,
software: 'Aquarius',
version: ''
},
brizo: {
isLoading: true,
software: 'Brizo',
version: '0.0.0',
version: '',
contracts: {} as any,
network: '',
'keeper-version': '0.0.0',
'keeper-url': ''
},
keeperContracts: {
isLoading: true,
software: 'Keeper Contracts',
version: '0.0.0',
version: '',
contracts: {} as any,
network: ''
},
faucet: { software: 'Faucet', version: '0.0.0' }
faucet: {
isLoading: true,
software: 'Faucet',
version: ''
}
}
// for canceling axios requests
public signal = axios.CancelToken.source()
public componentWillMount() {
this.setComponentVersions()
this.setAquarius()
this.setBrizoAndKeeper()
this.setFaucet()
}
public componentWillUnmount() {
this.signal.cancel()
}
private async setComponentVersions() {
try {
private async setAquarius() {
const aquarius = await this.getData(
aquariusScheme,
aquariusHost,
aquariusPort
)
aquarius.version !== undefined && this.setState({ aquarius })
aquarius.version !== undefined &&
this.setState({ aquarius: { isLoading: false, ...aquarius } })
}
private async setBrizoAndKeeper() {
const brizo = await this.getData(brizoScheme, brizoHost, brizoPort)
const keeperVersion =
brizo['keeper-version'] && brizo['keeper-version'].replace('v', '')
const keeperNetwork =
brizo['keeper-url'] &&
new URL(brizo['keeper-url']).hostname.split('.')[0]
brizo.version !== undefined &&
this.setState({
brizo,
brizo: {
isLoading: false,
...brizo
},
keeperContracts: {
...this.state.keeperContracts,
version: brizo['keeper-version'].replace('v', ''),
contracts: brizo.contracts
isLoading: false,
version: keeperVersion,
contracts: brizo.contracts,
network: keeperNetwork
}
})
const faucet = await this.getData(
faucetScheme,
faucetHost,
faucetPort
)
faucet.version !== undefined && this.setState({ faucet })
} catch (error) {
!axios.isCancel(error) && Logger.error(error.message)
}
private async setFaucet() {
const faucet = await this.getData(faucetScheme, faucetHost, faucetPort)
// backwards compatibility
function IsJsonString(str: string) {
try {
JSON.parse(str)
} catch (e) {
return false
}
return true
}
IsJsonString(faucet) === false &&
this.setState({
faucet: { ...this.state.faucet, isLoading: false }
})
// the new thing
faucet.version !== undefined &&
this.setState({ faucet: { isLoading: false, ...faucet } })
}
private async getData(scheme: string, host: string, port: number | string) {
const { data } = await axios.get(`${scheme}://${host}:${port}`, {
try {
const response = await axios.get(`${scheme}://${host}:${port}`, {
headers: { Accept: 'application/json' },
cancelToken: this.signal.token
})
return data
if (response.status !== 200) {
Logger.error(response.statusText)
return
}
return response.data
} catch (error) {
!axios.isCancel(error) && Logger.error(error.message)
}
}
public render() {
@ -152,7 +205,7 @@ export default class VersionNumbers extends PureComponent<
return minimal ? (
<p className={styles.versionsMinimal}>
<a title={mimimalOutput} href={'/about'}>
v{commons.version} ({brizo.network})
v{commons.version} {brizo.network && `(${brizo.network})`}
</a>
</p>
) : (

4
library.json
View File

@ -11,7 +11,7 @@
},
{
"name": "brizo",
"version": "~0.3.6"
"version": "~0.3.9"
},
{
"name": "aquarius",
@ -23,7 +23,7 @@
},
{
"name": "faucet",
"version": "~0.2.0"
"version": "~0.2.4"
}
]
}