From 2814ac0ae81f4af1f91838c98abf032b231c43cf Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Mon, 5 Apr 2021 18:55:10 +0700
Subject: [PATCH] Show the number of GitHub stars

---
 client/layouts/Header.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/client/layouts/Header.tsx b/client/layouts/Header.tsx
index aa1317c..98c10f9 100644
--- a/client/layouts/Header.tsx
+++ b/client/layouts/Header.tsx
@@ -8,7 +8,23 @@ import { Link } from 'react-router-dom';
 
 import './header.css';
 
+const STARS_KEY = 'stars';
+
 const Header: React.FC<{}> = () => {
+    const stars = window.localStorage.getItem(STARS_KEY) || '';
+    const [totalStars, setTotalStars] = React.useState(stars);
+
+    React.useEffect(() => {
+        if (window.location.pathname === '/' || stars === '') {
+            fetch('https://api.github.com/repos/phuoc-ng/csslayout')
+                .then(res => res.json())
+                .then(data => setTotalStars(data.stargazers_count))
+                .catch(console.log);
+        }
+    }, []);
+
+    React.useEffect(() => window.localStorage.setItem(STARS_KEY, totalStars), [totalStars]);
+
     return (
         <header className="header">
             <div className="container">
@@ -17,7 +33,7 @@ const Header: React.FC<{}> = () => {
                         <img src="/assets/logo.svg" />
                     </Link>
                     <Link to="/patterns">Patterns</Link>
-                    <a href="https://github.com/phuoc-ng/csslayout">GitHub</a>
+                    <a href="https://github.com/phuoc-ng/csslayout">{totalStars}★</a>
                 </div>
             </div>
         </header>