Fetch stars count from repo (#2214)

ethanshar · web-flow · commit bbb8a984bc79 · 2022-08-23T14:04:25.000+03:00
* Fetch stars count from repo

* Use BrowserOnly to allow using localStorage

* bump verison
diff --git a/docuilib/package.json b/docuilib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "uilib-docs",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "scripts": {
     "docusaurus": "docusaurus",
     "start": "docusaurus start",
diff --git a/docuilib/src/components/MainSection.tsx b/docuilib/src/components/MainSection.tsx
@@ -1,14 +1,31 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
 import styles from './MainSection.module.scss';
 import mainCover from '@site/static/img/mainCover.jpg';
 import GoldStarSvg from '@site/static/img/goldStar.svg';
 
+const STARS_COUNT_KEY = 'starsCount';
+
 export default () => {
   const {siteConfig} = useDocusaurusContext();
   const {expoSnackLink, docsMainEntry} = siteConfig.customFields;
+  const [starsCount, setStarsCount] = useState(localStorage.getItem(STARS_COUNT_KEY) ?? siteConfig.customFields.stars);
+
+  useEffect(() => {
+    fetchStarsCount();
+  }, []);
+
+  const fetchStarsCount = async () => {
+    const response = await fetch('https://api.github.com/repos/wix/react-native-ui-lib');
+    const data = await response.json();
+    const _starsCount = (data.stargazers_count / 1000).toFixed(1);
+
+
+    localStorage.setItem(STARS_COUNT_KEY, _starsCount.toString());
+    setStarsCount(_starsCount);
+  };
 
   return (
     <div className={styles.main}>
@@ -19,7 +36,7 @@ export default () => {
         </p>
         <div className={styles.gitStars}>
           <GoldStarSvg width={16} height={16} style={{margin: 4}}/>
-          <span>{siteConfig.customFields.stars}k</span>
+          <span>{starsCount}k</span>
         </div>
 
         <div className={styles.buttons}>
diff --git a/docuilib/src/pages/index.tsx b/docuilib/src/pages/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Layout from '@theme/Layout';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 // import clsx from 'clsx';
 // import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 // import HomepageFeatures from '../components/HomepageFeatures';
@@ -15,16 +16,17 @@ export default function Home(): JSX.Element {
   // const {siteConfig} = useDocusaurusContext();
   return (
     <>
-      <StandWithUkraine />
+      <StandWithUkraine/>
       <Layout
         /* title={`Hello from ${siteConfig.title}`} */ description="Description will go into a meta tag in <head />"
       >
         <main>
-          <MainSection />
-          <ComponentsSection />
-          <FeaturesSection />
-          <CodeSection />
-          <LibrariesSection />
+          {/* Note: BrowserOnly allows using `localStorage` in MainSection, otherwise docusaurus build fail */}
+          <BrowserOnly>{() => <MainSection/>}</BrowserOnly>
+          <ComponentsSection/>
+          <FeaturesSection/>
+          <CodeSection/>
+          <LibrariesSection/>
         </main>
       </Layout>
     </>

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "uilib-docs",`
`3`		`- "version": "2.1.0",`
	`3`	`+ "version": "2.2.1",`
`4`	`4`	`"scripts": {`
`5`	`5`	`"docusaurus": "docusaurus",`
`6`	`6`	`"start": "docusaurus start",`