mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-06 14:16:50 +02:00
Code Issues Releases Wiki Activity

Show the number of GitHub stars

Browse Source
This commit is contained in:
Phuoc Nguyen
2021-04-05 18:55:10 +07:00
parent 98c044cf48
commit 2814ac0ae8
1 changed files with 17 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
client/layouts/Header.tsx
View File

@@ -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>