Merge pull request #50 from oceanprotocol/feature/46

Fetching repo numbers on client side

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",

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
+    }
+
+    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 (
             <aside className={styles.repositorynumbers}>
                 <a href={`${url}/stargazers`} title="Show Stargazers">
-            <Star /> <span>{stargazers.totalCount}</span>
+                    <Star /> <span>{stars}</span>
                 </a>
-        {forkCount > 0 && (
+                {forks > 0 && (
                     <a href={`${url}/network`} title="Show Forks">
-                <Forks /> <span>{forkCount}</span>
+                        <Forks /> <span>{forks}</span>
                     </a>
                 )}
             </aside>
-)
+        )
-
+    }
-Numbers.propTypes = {
-    stargazers: PropTypes.object.isRequired,
-    forkCount: PropTypes.number.isRequired,
-    url: PropTypes.string.isRequired
 }
 
 const Readme = ({ object }) => {
@@ -194,6 +248,7 @@ const Repository = ({ name, links, readme }) => (
                             stargazers={stargazers}
                             forkCount={forkCount}
                             url={url}
+                            name={name}
                         />
                     </footer>