diff --git a/package.json b/package.json index ba821de8..6d78c637 100755 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ }, "dependencies": { "@oceanprotocol/art": "^1.0.2", + "axios": "^0.18.0", "classnames": "^2.2.6", "gatsby": "^2.0.52", "gatsby-image": "^2.0.20", diff --git a/src/components/Repositories/Repository.jsx b/src/components/Repositories/Repository.jsx index 29c8ec4b..38e56d27 100644 --- a/src/components/Repositories/Repository.jsx +++ b/src/components/Repositories/Repository.jsx @@ -1,8 +1,9 @@ -import React from 'react' +import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import { StaticQuery, graphql } from 'gatsby' import remark from 'remark' import remarkReact from 'remark-react' +import axios from 'axios' import { ReactComponent as Star } from '../../images/star.svg' import { ReactComponent as Forks } from '../../images/forks.svg' import styles from './Repository.module.scss' @@ -101,23 +102,76 @@ Links.propTypes = { url: PropTypes.string.isRequired } -const Numbers = ({ stargazers, forkCount, url }) => ( - -) +class Numbers extends PureComponent { + static propTypes = { + stargazers: PropTypes.object.isRequired, + forkCount: PropTypes.number.isRequired, + url: PropTypes.string.isRequired, + name: PropTypes.string.isRequired + } -Numbers.propTypes = { - stargazers: PropTypes.object.isRequired, - forkCount: PropTypes.number.isRequired, - url: PropTypes.string.isRequired + state = { + forks: this.props.forkCount, + stars: this.props.stargazers.totalCount + } + + url = 'https://oceanprotocol-github.now.sh' + + 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) { + console.log(error) // eslint-disable-line no-console + } + } + + componentDidMount() { + this.fetchNumbers() + } + + render() { + const { url } = this.props + const { forks, stars } = this.state + + return ( + + ) + } } const Readme = ({ object }) => { @@ -194,6 +248,7 @@ const Repository = ({ name, links, readme }) => ( stargazers={stargazers} forkCount={forkCount} url={url} + name={name} />