From 809028cc4a8761f776d1bd04d644be587ae654b3 Mon Sep 17 00:00:00 2001
From: deme <joaommdemenech@gmail.com>
Date: Fri, 21 Apr 2023 13:09:14 -0300
Subject: [PATCH] [website,#778][xs]: contributors and stas counts are now
 fetched from GitHub

---
 site/components/Community.tsx | 37 +++++++++++++++++++++++++++++++++--
 site/lib/getGitHubData.ts     | 27 +++++++++++++++++++++++++
 2 files changed, 62 insertions(+), 2 deletions(-)
 create mode 100644 site/lib/getGitHubData.ts

diff --git a/site/components/Community.tsx b/site/components/Community.tsx
index d5e76c34..b4a8b061 100644
--- a/site/components/Community.tsx
+++ b/site/components/Community.tsx
@@ -4,6 +4,8 @@ import EmailIcon from './icons/EmailIcon';
 import GitHubIcon from './icons/GitHubIcon';
 
 import { siteConfig } from '@/config/siteConfig';
+import { getContributorsCount, getRepoInfo } from '@/lib/getGitHubData';
+import { useEffect, useState } from 'react';
 
 const Stat = ({ title, value, ...props }) => {
   return (
@@ -29,6 +31,33 @@ const IconButton = ({ Icon, text, href, ...props }) => {
 };
 
 export default function Community() {
+  const [repoInfo, setRepoInfo] = useState<any>();
+  const [contributorsCount, setContributorsCount] = useState('');
+
+  useEffect(() => {
+    //  This runs on client side and it's unlikely that users
+    //  will exceed the GitHub API  usage limit,  but added a
+    //  handling for that just in case.
+
+    getRepoInfo().then((res) => {
+      if (res.success) {
+        res.info.then((data) => setRepoInfo(data));
+      } else {
+        //  If the request fail e.g API usage limit, use
+        //  a placeholder
+        setRepoInfo({ stargazers_count: '+2k' });
+      }
+    });
+
+    getContributorsCount().then((res) => {
+      if (res.success) {
+        setContributorsCount(res.count);
+      } else {
+        setContributorsCount('+70');
+      }
+    });
+  }, []);
+
   return (
     <Container>
       <h2 className="text-3xl font-bold text-primary dark:text-primary-dark ">
@@ -38,8 +67,12 @@ export default function Community() {
         We are growing. Get in touch or become a contributor!
       </p>
       <div className="flex justify-center mt-12">
-        <Stat title="Stars on GitHub" value="+2k" className="mr-10" />
-        <Stat title="Contributors" value="+70" />
+        <Stat
+          title="Stars on GitHub"
+          value={repoInfo?.stargazers_count}
+          className="mr-10"
+        />
+        <Stat title="Contributors" value={contributorsCount} />
       </div>
       <div className="flex flex-wrap justify-center mt-12">
         <IconButton
diff --git a/site/lib/getGitHubData.ts b/site/lib/getGitHubData.ts
new file mode 100644
index 00000000..204835f4
--- /dev/null
+++ b/site/lib/getGitHubData.ts
@@ -0,0 +1,27 @@
+export function getRepoInfo() {
+  return fetch('https://api.github.com/repositories/2579069').then((res) => {
+    if (res.status < 400) {
+      return { success: true, info: res.json() };
+    } else {
+      return { success: false, info: null };
+    }
+  });
+}
+
+export function getContributorsCount() {
+  //  Based on https://stackoverflow.com/questions/44347339/github-api-how-efficiently-get-the-total-contributors-amount-per-repository
+  return fetch(
+    'https://api.github.com/repos/datopian/portaljs/contributors?per_page=1&anon=false'
+  ).then((res) => {
+    if (res.status < 400) {
+      const pattern = /&page=(\d+)>; rel="last"/;
+      const linkHeader = res.headers.get('link');
+
+      const count = pattern.exec(linkHeader)[1];
+
+      return { success: true, count: count };
+    } else {
+      return { success: false, count: null };
+    }
+  });
+}