r-freeman/portfolio
1
0
Fork 0
mirror of https://github.com/r-freeman/portfolio.git synced 2024-11-25 14:55:40 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactored dashboard page

Browse Source
This commit is contained in:
r-freeman 2023-01-28 21:24:05 +00:00
parent a7d518460a
commit 5bf9a23501
3 changed files with 57 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
lib/dashboard.ts Normal file
View File

@ -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/"
}
]
}

18
lib/github.ts
View File

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

53
pages/dashboard.tsx
View File

@ -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="https://github.com/r-freeman">GitHub Repos</Card.Link>
<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(totalRepos)}
{numberFormat(card.total)}
</Card.Description>
</Card>
<Card as="li">
))}
<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 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())
}
}
}