From 6de5dce176d451690c6cb7b8dcd91fb7417f669d Mon Sep 17 00:00:00 2001
From: Henry Dollman <hank@henrygd.me>
Date: Sat, 19 Oct 2024 19:57:35 -0400
Subject: [PATCH] improve useeffects for favicon and system subscription

---
 beszel/site/src/components/routes/system.tsx |  2 +-
 beszel/site/src/lib/utils.ts                 |  6 +++---
 beszel/site/src/main.tsx                     | 12 +++++-------
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/beszel/site/src/components/routes/system.tsx b/beszel/site/src/components/routes/system.tsx
index f5b619b7..6e5a0318 100644
--- a/beszel/site/src/components/routes/system.tsx
+++ b/beszel/site/src/components/routes/system.tsx
@@ -155,7 +155,7 @@ export default function SystemDetail({ name }: { name: string }) {
 		return () => {
 			pb.collection('systems').unsubscribe(system.id)
 		}
-	}, [system])
+	}, [system.id])
 
 	const chartData: ChartData = useMemo(() => {
 		const lastCreated = Math.max(
diff --git a/beszel/site/src/lib/utils.ts b/beszel/site/src/lib/utils.ts
index a221c64c..8e133fe6 100644
--- a/beszel/site/src/lib/utils.ts
+++ b/beszel/site/src/lib/utils.ts
@@ -9,7 +9,6 @@ import { timeDay, timeHour } from 'd3-time'
 import { useEffect, useState } from 'react'
 import { CpuIcon, HardDriveIcon, MemoryStickIcon, ServerIcon } from 'lucide-react'
 import { EthernetIcon, ThermometerIcon } from '@/components/ui/icons'
-import { newQueue, Queue } from '@henrygd/queue'
 
 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs))
@@ -103,8 +102,9 @@ export const formatDay = (timestamp: string) => {
 	return dayFormatter.format(new Date(timestamp))
 }
 
-export const updateFavicon = (newIcon: string) =>
-	((document.querySelector("link[rel='icon']") as HTMLLinkElement).href = `/static/${newIcon}`)
+export const updateFavicon = (newIcon: string) => {
+	;(document.querySelector("link[rel='icon']") as HTMLLinkElement).href = `/static/${newIcon}`
+}
 
 export const isAdmin = () => pb.authStore.model?.role === 'admin'
 export const isReadOnlyUser = () => pb.authStore.model?.role === 'readonly'
diff --git a/beszel/site/src/main.tsx b/beszel/site/src/main.tsx
index 6aac4822..89b62042 100644
--- a/beszel/site/src/main.tsx
+++ b/beszel/site/src/main.tsx
@@ -73,29 +73,27 @@ const App = () => {
 		updateUserSettings()
 		// get alerts after system list is loaded
 		updateSystemList().then(updateAlerts)
+
+		return () => updateFavicon('favicon.svg')
 	}, [])
 
 	// update favicon
 	useEffect(() => {
-		if (!authenticated || !systems.length) {
+		if (!systems.length || !authenticated) {
 			updateFavicon('favicon.svg')
 		} else {
 			let up = false
 			for (const system of systems) {
 				if (system.status === 'down') {
 					updateFavicon('favicon-red.svg')
-					return () => updateFavicon('favicon.svg')
+					return
 				} else if (system.status === 'up') {
 					up = true
 				}
 			}
 			updateFavicon(up ? 'favicon-green.svg' : 'favicon.svg')
-			return () => updateFavicon('favicon.svg')
-		}
-		return () => {
-			updateFavicon('favicon.svg')
 		}
-	}, [authenticated, systems])
+	}, [systems])
 
 	if (!page) {
 		return <h1 className="text-3xl text-center my-14">404</h1>