mirror of
https://github.com/r-freeman/portfolio.git
synced 2024-11-11 18:45:41 +00:00
Refactored dashboard page
This commit is contained in:
parent
a7d518460a
commit
5bf9a23501
28
lib/dashboard.ts
Normal file
28
lib/dashboard.ts
Normal 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/"
|
||||
}
|
||||
]
|
||||
}
|
@ -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)
|
||||
|
@ -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())
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user