89 lines
2.1 KiB
JavaScript
89 lines
2.1 KiB
JavaScript
import React, { PureComponent } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import axios from 'axios'
|
|
import { ReactComponent as Star } from '../../images/star.svg'
|
|
import { ReactComponent as Forks } from '../../images/forks.svg'
|
|
import styles from './Numbers.module.scss'
|
|
|
|
export default class Numbers extends PureComponent {
|
|
static propTypes = {
|
|
stargazers: PropTypes.object.isRequired,
|
|
forkCount: PropTypes.number.isRequired,
|
|
url: PropTypes.string.isRequired,
|
|
name: PropTypes.string.isRequired
|
|
}
|
|
|
|
state = {
|
|
forks: this.props.forkCount,
|
|
stars: this.props.stargazers.totalCount
|
|
}
|
|
|
|
url = 'https://oceanprotocol-github.now.sh'
|
|
|
|
signal = axios.CancelToken.source()
|
|
|
|
componentDidMount() {
|
|
this.fetchNumbers()
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.signal.cancel()
|
|
}
|
|
|
|
fetchNumbers = async () => {
|
|
try {
|
|
const response = await axios({
|
|
method: 'get',
|
|
url: this.url,
|
|
timeout: 10000, // 10 sec.
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
})
|
|
|
|
const repo = response.data
|
|
.map((item) => {
|
|
if (item.name === this.props.name) {
|
|
return item
|
|
}
|
|
})
|
|
.filter((n) => n)
|
|
|
|
const { forks, stars } = repo
|
|
|
|
// update state only when numbers have changed
|
|
if (forks && forks !== this.props.forkCount) {
|
|
this.setState({ forks })
|
|
}
|
|
|
|
if (stars && stars !== this.props.stargazers.totalCount) {
|
|
this.setState({ stars })
|
|
}
|
|
} catch (error) {
|
|
if (axios.isCancel(error)) {
|
|
return null
|
|
} else {
|
|
console.log(error.message) // eslint-disable-line no-console
|
|
}
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { url } = this.props
|
|
const { forks, stars } = this.state
|
|
|
|
return (
|
|
<aside className={styles.repositorynumbers}>
|
|
<a href={`${url}/stargazers`} title="Show Stargazers">
|
|
<Star /> <span>{stars}</span>
|
|
</a>
|
|
{forks > 0 && (
|
|
<a href={`${url}/network`} title="Show Forks">
|
|
<Forks /> <span>{forks}</span>
|
|
</a>
|
|
)}
|
|
</aside>
|
|
)
|
|
}
|
|
}
|