Refactored dashboard page

lib/dashboard.ts

@@ -0,0 +1,28 @@
+import {getTotalFollowers, getTotalRepos, getTotalStars} from '@/lib/github'
+
+export async function dashboard() {
+    const [totalRepos, totalFollowers] = await Promise.all([
+        getTotalRepos(),
+        getTotalFollowers()
+    ])
+
+    const totalStars = await getTotalStars(totalRepos)
+
+    return [
+        {
+            title: "GitHub Repos",
+            total: totalRepos,
+            href: "https://github.com/r-freeman/"
+        },
+        {
+            title: "GitHub Followers",
+            total: totalFollowers,
+            href: "https://github.com/r-freeman/"
+        },
+        {
+            title: "GitHub Stars",
+            total: totalStars,
+            href: "https://github.com/r-freeman/"
+        }
+    ]
+}

lib/github.ts

@@ -1,5 +1,5 @@
-import fetch from 'node-fetch'
 import type {Repo} from '@/types'
+import fetcher from "@/lib/fetcher";
 
 const GITHUB_ACCESS_TOKEN = process.env.GITHUB_ACCESS_TOKEN
 const GITHUB_GRAPHQL = "https://api.github.com/graphql"
@@ -51,7 +51,7 @@ type TotalStarsResponse = {
 }
 
 export async function getPinnedRepos() {
-    const response = await fetch(GITHUB_GRAPHQL, {
+    const response = await fetcher(GITHUB_GRAPHQL, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
@@ -78,13 +78,13 @@ export async function getPinnedRepos() {
               }
             }`
         })
-    }).then(r => r.json()) as PinnedReposResponse
+    }) as PinnedReposResponse
 
     return response.data.user.pinnedItems.nodes
 }
 
 export async function getTotalRepos() {
-    const response = await fetch(GITHUB_GRAPHQL, {
+    const response = await fetcher(GITHUB_GRAPHQL, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
@@ -99,13 +99,13 @@ export async function getTotalRepos() {
               }
             }`
         })
-    }).then(r => r.json()) as TotalReposResponse
+    }) as TotalReposResponse
 
     return response.data.user.repositories.totalCount
 }
 
 export async function getTotalFollowers() {
-    const response = await fetch(GITHUB_GRAPHQL, {
+    const response = await fetcher(GITHUB_GRAPHQL, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
@@ -120,13 +120,13 @@ export async function getTotalFollowers() {
               }
             }`
         })
-    }).then(r => r.json()) as TotalFollowersResponse
+    }) as TotalFollowersResponse
 
     return response.data.user.followers.totalCount
 }
 
 export async function getTotalStars(totalRepos: number) {
-    const response = await fetch(GITHUB_GRAPHQL, {
+    const response = await fetcher(GITHUB_GRAPHQL, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
@@ -145,7 +145,7 @@ export async function getTotalStars(totalRepos: number) {
               }
             }`
         })
-    }).then(r => r.json()) as TotalStarsResponse
+    }) as TotalStarsResponse
 
     return response.data.user.repositories.nodes
         .reduce((acc, node) => acc + node.stargazers.totalCount, 0)

pages/dashboard.tsx

@@ -1,19 +1,19 @@
 import Head from 'next/head'
 import {GetStaticProps} from 'next'
-import useSWR from 'swr'
+import useSWR from "swr";
 import {SimpleLayout} from '@/components/SimpleLayout'
 import {Card} from '@/components/Card'
 import {numberFormat} from '@/lib/numberFormat'
+import {dashboard} from '@/lib/dashboard'
 import fetcher from '@/lib/fetcher'
-import {getTotalFollowers, getTotalRepos, getTotalStars} from '@/lib/github'
 
-type DashboardProps = {
-    totalRepos: number
-    totalFollowers: number
-    totalStars: number
+type CardProps = {
+    title: string
+    total: number
+    href: string
 }
 
-export default function Dashboard({totalRepos, totalFollowers, totalStars}: DashboardProps) {
+export default function Dashboard({cards}: { cards: CardProps[] }) {
     const {data} = useSWR('/api/views/', fetcher)
     const totalArticleViews = Number(data?.views)
 
@@ -43,33 +43,19 @@ export default function Dashboard({totalRepos, totalFollowers, totalStars}: Dash
                     role="list"
                     className="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 lg:grid-cols-3"
                 >
-                    <Card as="li">
+                    {cards.map((card) => (
+                        <Card as="li" key={card.title}>
+                            <h2 className="text-base font-semibold transition group-hover:text-indigo-500 text-zinc-800 dark:text-zinc-400">
+                                <Card.Link href={card.href}>{card.title}</Card.Link>
+                            </h2>
+                            <Card.Description className="text-zinc-800 dark:text-zinc-100 font-semibold text-5xl">
+                                {numberFormat(card.total)}
+                            </Card.Description>
+                        </Card>
+                    ))}
+                    <Card as="li" key="Total Article Views">
                         <h2 className="text-base font-semibold transition group-hover:text-indigo-500 text-zinc-800 dark:text-zinc-400">
-                            <Card.Link href="https://github.com/r-freeman">GitHub Repos</Card.Link>
-                        </h2>
-                        <Card.Description className="text-zinc-800 dark:text-zinc-100 font-semibold text-5xl">
-                            {numberFormat(totalRepos)}
-                        </Card.Description>
-                    </Card>
-                    <Card as="li">
-                        <h2 className="text-base font-semibold transition group-hover:text-indigo-500 text-zinc-800 dark:text-zinc-400">
-                            <Card.Link href="https://github.com/r-freeman">GitHub Followers</Card.Link>
-                        </h2>
-                        <Card.Description className="text-zinc-800 dark:text-zinc-100 font-semibold text-5xl">
-                            {numberFormat(totalFollowers)}
-                        </Card.Description>
-                    </Card>
-                    <Card as="li">
-                        <h2 className="text-base font-semibold transition group-hover:text-indigo-500 text-zinc-800 dark:text-zinc-400">
-                            <Card.Link href="https://github.com/r-freeman">GitHub Stars</Card.Link>
-                        </h2>
-                        <Card.Description className="text-zinc-800 dark:text-zinc-100 font-semibold text-5xl">
-                            {numberFormat(totalStars)}
-                        </Card.Description>
-                    </Card>
-                    <Card as="li">
-                        <h2 className="text-base font-semibold transition group-hover:text-indigo-500 text-zinc-800 dark:text-zinc-400">
-                            <Card.Link href="https://github.com/r-freeman">Total Article Views</Card.Link>
+                            <Card.Link href="/writing">Total Article Views</Card.Link>
                         </h2>
                         <Card.Description className="text-zinc-800 dark:text-zinc-100 font-semibold text-5xl">
                             {totalArticleViews > 0 ? numberFormat(totalArticleViews) : '—'}
@@ -82,18 +68,9 @@ export default function Dashboard({totalRepos, totalFollowers, totalStars}: Dash
 }
 
 export const getStaticProps: GetStaticProps = async () => {
-    const [totalRepos, totalFollowers] = await Promise.all([
-        getTotalRepos(),
-        getTotalFollowers()
-    ])
-
-    const totalStars = await getTotalStars(totalRepos)
-
     return {
         props: {
-            totalRepos,
-            totalFollowers,
-            totalStars
+            cards: (await dashboard())
         }
     }
 }