From 48c32c333e044d620a83fa52f5fa773c1482be3d Mon Sep 17 00:00:00 2001 From: r-freeman Date: Sun, 29 Jan 2023 22:16:58 +0000 Subject: [PATCH] Added card groups to dashboard --- lib/dashboard.ts | 25 ++++++++++++++++++----- pages/dashboard.tsx | 49 +++++++++++++++++++++++---------------------- types/index.ts | 16 ++++++++++++++- 3 files changed, 60 insertions(+), 30 deletions(-) diff --git a/lib/dashboard.ts b/lib/dashboard.ts index be0e4e6..8092b44 100644 --- a/lib/dashboard.ts +++ b/lib/dashboard.ts @@ -2,7 +2,7 @@ import {getTotalFollowers, getTotalRepos, getTotalStars} from '@/lib/github' import {getAllArticles} from '@/lib/getAllArticles' import {getViews} from '@/lib/views' -export async function dashboard() { +export async function getDashboardData() { const [totalRepos, totalFollowers] = await Promise.all([ getTotalRepos(), getTotalFollowers() @@ -12,31 +12,46 @@ export async function dashboard() { const totalArticles = (await getAllArticles()).length const totalArticleViews = (await getViews()).views - return [ + const data = [ { - title: "GitHub Repos", + title: "Repos", metric: totalRepos, + group: "GitHub", href: "https://github.com/r-freeman?tab=repositories" }, { - title: "GitHub Followers", + title: "Followers", metric: totalFollowers, + group: "GitHub", href: "https://github.com/r-freeman?tab=followers" }, { - title: "GitHub Stars", + title: "Stars", metric: totalStars, + group: "GitHub", href: "https://github.com/r-freeman/" }, { title: "Total Articles", metric: totalArticles, + group: "Website", href: "/writing" }, { title: "Total Article Views", metric: totalArticleViews, + group: "Website", href: "/writing" } ] + + const groups = data.reduce((acc, item) => { + // @ts-ignore + (acc[item.group] = acc[item.group] || []).push(item); + return acc; + }, {}) + + return Object.entries(groups).map(([groupName, groupItems]) => { + return {groupName, groupItems} + }) } \ No newline at end of file diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx index 2a787aa..75ff274 100644 --- a/pages/dashboard.tsx +++ b/pages/dashboard.tsx @@ -1,17 +1,13 @@ +import React from 'react' import Head from 'next/head' import {GetStaticProps} from 'next' import {SimpleLayout} from '@/components/SimpleLayout' import {Card} from '@/components/Card' import {numberFormat} from '@/lib/numberFormat' -import {dashboard} from '@/lib/dashboard' +import {getDashboardData} from '@/lib/dashboard' +import type {CardGroupProps} from '@/types' -type CardProps = { - title: string - metric: number - href: string -} - -export default function Dashboard({cards}: { cards: CardProps[] }) { +export default function Dashboard({cardGroups}: { cardGroups: CardGroupProps }) { return ( <> @@ -34,21 +30,26 @@ export default function Dashboard({cards}: { cards: CardProps[] }) { intro="This is my digital life in numbers which is updated daily. I use this dashboard to track various metrics across platforms like Spotify, GitHub, Twitter and more." gradient="bg-gradient-to-r from-orange-300 to-rose-300" > - + {cardGroups.map(({groupName, groupItems}, index) => ( +
+

{groupName}

+ +
+ ))} ) @@ -57,7 +58,7 @@ export default function Dashboard({cards}: { cards: CardProps[] }) { export const getStaticProps: GetStaticProps = async () => { return { props: { - cards: await dashboard() + cardGroups: await getDashboardData() } } } diff --git a/types/index.ts b/types/index.ts index a7d74ce..31ed90a 100644 --- a/types/index.ts +++ b/types/index.ts @@ -22,4 +22,18 @@ export type Repo = { name: string color: string } -} \ No newline at end of file +} + +export type CardProps = { + title: string + metric: number | string + group: string + href: string +} + +export type CardGroupProps = [ + { + groupName: string, + groupItems: CardProps[] + } +]