From 3f378e0a751baf00c15f7f27b77b42f1b72d45a0 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 20 Nov 2018 17:24:15 +0100
Subject: [PATCH 1/3] prototype fetching repo numbers

---
 package.json                               |  1 +
 src/components/Repositories/Repository.jsx | 79 +++++++++++++++++-----
 2 files changed, 63 insertions(+), 17 deletions(-)

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 8153942e..b609546e 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'
@@ -87,23 +88,66 @@ Links.propTypes = {
     url: PropTypes.string.isRequired
 }
 
-const Numbers = ({ stargazers, forkCount, url }) => (
-    <aside className={styles.repositorynumbers}>
-        <a href={`${url}/stargazers`} title="Show Stargazers">
-            <Star /> <span>{stargazers.totalCount}</span>
-        </a>
-        {forkCount > 0 && (
-            <a href={`${url}/network`} title="Show Forks">
-                <Forks /> <span>{forkCount}</span>
-            </a>
-        )}
-    </aside>
-)
+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
+                }
+            })
+
+            const { forks, stars } = repo
+            this.setState({ forks, 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>{stars}</span>
+                </a>
+                {forks > 0 && (
+                    <a href={`${url}/network`} title="Show Forks">
+                        <Forks /> <span>{forks}</span>
+                    </a>
+                )}
+            </aside>
+        )
+    }
 }
 
 const Readme = ({ object }) => {
@@ -165,6 +209,7 @@ const Repository = ({ name, links, readme }) => (
                             stargazers={stargazers}
                             forkCount={forkCount}
                             url={url}
+                            name={name}
                         />
                     </footer>
 

From 14fad134c8b5abfe391ede76d8098dd2e5bef863 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 20 Nov 2018 17:50:58 +0100
Subject: [PATCH 2/3] update state only when numbers have changed

---
 src/components/Repositories/Repository.jsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/Repositories/Repository.jsx b/src/components/Repositories/Repository.jsx
index b609546e..ebabc8e3 100644
--- a/src/components/Repositories/Repository.jsx
+++ b/src/components/Repositories/Repository.jsx
@@ -121,7 +121,15 @@ class Numbers extends PureComponent {
             })
 
             const { forks, stars } = repo
-            this.setState({ forks, stars })
+
+            // 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
         }

From 9204f7d34cc79cb1c3835b3df157ba63cecfc6a3 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 20 Nov 2018 18:03:52 +0100
Subject: [PATCH 3/3] make it work

---
 src/components/Repositories/Repository.jsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/Repositories/Repository.jsx b/src/components/Repositories/Repository.jsx
index ebabc8e3..0305cbed 100644
--- a/src/components/Repositories/Repository.jsx
+++ b/src/components/Repositories/Repository.jsx
@@ -114,11 +114,13 @@ class Numbers extends PureComponent {
                 }
             })
 
-            const repo = response.data.map(item => {
-                if (item.name === this.props.name) {
-                    return item
-                }
-            })
+            const repo = response.data
+                .map(item => {
+                    if (item.name === this.props.name) {
+                        return item
+                    }
+                })
+                .filter(n => n)
 
             const { forks, stars } = repo