stuff

lacymorrow · Apr 3, 2024 · deea775 · deea775
1 parent 32f846d
commit deea775
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 15 deletions.
diff --git a/src/config/strings.ts b/src/config/strings.ts
@@ -3,6 +3,8 @@ export const $settings = {
 	description: 'Manage your account settings and application preferences',
 	app: {
 		githubUrl: 'https://github.com/lacymorrow/electron-hotplate',
+		repo: 'lacymorrow/electron-hotplate',
+		description: 'A boilerplate for Electron applications',
 	},
 	appearance: {
 		themeLabel: 'Theme',
@@ -38,6 +40,7 @@ export const $errors = {
 	prefix: 'Main> ',
 	blockedNavigation: 'Blocked navigation to: ',
 	invalidChannel: 'Invalid IPC channel',
+	github: 'Failed to fetch GitHub data',
 };
 
 export const $messages = {

diff --git a/src/renderer/components/pages/settings/about/CardGithub.tsx b/src/renderer/components/pages/settings/about/CardGithub.tsx
@@ -1,4 +1,4 @@
-import { CircleIcon, StarIcon } from '@radix-ui/react-icons';
+import { CircleIcon, StarFilledIcon, StarIcon } from '@radix-ui/react-icons';
 
 import { Button } from '@/components/ui/button';
 import {
@@ -8,11 +8,35 @@ import {
 	CardHeader,
 	CardTitle,
 } from '@/components/ui/card';
-import { useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
-import { $settings } from '@/config/strings';
+import { $errors, $settings } from '@/config/strings';
 
 export function CardGithub() {
+	const [githubData, setGithubData] = useState<any>(null);
+
+	useEffect(() => {
+		// fetch star count
+		const fetchStarCount = async () => {
+			const response = await fetch(
+				`https://api.github.com/repos/${$settings.app.repo}`,
+			);
+			await response
+				.json()
+				.then((data: any) => {
+					setGithubData(data);
+				})
+				.catch((error) => {
+					window.electron.notify({
+						title: $errors.github,
+					});
+
+					console.error(error);
+				});
+		};
+		fetchStarCount();
+	}, []);
+
 	const handleClickStar = useCallback(() => {
 		window?.electron?.openUrl($settings.app.githubUrl);
 	}, []);
@@ -21,27 +45,36 @@ export function CardGithub() {
 		<Card>
 			<CardHeader className="grid grid-cols-[1fr_110px] items-start gap-4 space-y-0">
 				<div className="space-y-1">
-					<CardTitle>Electron-Hotplate</CardTitle>
+					<CardTitle>
+						{githubData?.full_name || githubData?.name || $settings.app.repo}
+					</CardTitle>
 					<CardDescription>
-						Beautifully designed organization for your digital media collection.
+						{githubData?.description || $settings.app.description}
 					</CardDescription>
 				</div>
 				<Button variant="secondary" onClick={handleClickStar}>
-					<StarIcon className="mr-2 h-4 w-4" />
+					<StarFilledIcon className="mr-2 h-4 w-4" />
 					Star
 				</Button>
 			</CardHeader>
 			<CardContent>
 				<div className="flex space-x-4 text-sm text-muted-foreground">
-					<div className="flex items-center">
-						<CircleIcon className="mr-1 h-3 w-3 fill-sky-400 text-sky-400" />
-						TypeScript
-					</div>
-					<div className="flex items-center">
-						<StarIcon className="mr-1 h-3 w-3" />
-						33
-					</div>
-					<div>Updated December 2024</div>
+					{githubData?.language && (
+						<div className="flex items-center">
+							<CircleIcon className="mr-1 h-3 w-3 fill-sky-400 text-sky-400" />
+							{githubData?.language || 'Unknown'}
+						</div>
+					)}
+					{githubData?.stargazers_count && (
+						<div className="flex items-center">
+							<StarIcon className="mr-1 h-3 w-3" />
+
+							{githubData.stargazers_count}
+						</div>
+					)}
+					{githubData?.updated_at && (
+						<div>Updated {new Date(githubData.updated_at).toDateString()}</div>
+					)}
 				</div>
 			</CardContent>
 		</Card>