From 812fe20df7d24831f1d9656f70a197bb16e96090 Mon Sep 17 00:00:00 2001
From: Henry Dollman <hank@henrygd.me>
Date: Mon, 16 Sep 2024 16:51:23 -0400
Subject: [PATCH] fix: update settings when visiting a settings page directly

---
 .../site/src/components/routes/settings/general.tsx  |  6 +++++-
 .../src/components/routes/settings/notifications.tsx | 12 +++++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/beszel/site/src/components/routes/settings/general.tsx b/beszel/site/src/components/routes/settings/general.tsx
index e645807..9cc331a 100644
--- a/beszel/site/src/components/routes/settings/general.tsx
+++ b/beszel/site/src/components/routes/settings/general.tsx
@@ -71,7 +71,11 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
 					<Label className="block" htmlFor="chartTime">
 						Default time period
 					</Label>
-					<Select name="chartTime" defaultValue={userSettings.chartTime}>
+					<Select
+						name="chartTime"
+						key={userSettings.chartTime}
+						defaultValue={userSettings.chartTime}
+					>
 						<SelectTrigger id="chartTime">
 							<SelectValue />
 						</SelectTrigger>
diff --git a/beszel/site/src/components/routes/settings/notifications.tsx b/beszel/site/src/components/routes/settings/notifications.tsx
index 4f2e004..503ccef 100644
--- a/beszel/site/src/components/routes/settings/notifications.tsx
+++ b/beszel/site/src/components/routes/settings/notifications.tsx
@@ -5,7 +5,7 @@ import { pb } from '@/lib/stores'
 import { Separator } from '@/components/ui/separator'
 import { Card } from '@/components/ui/card'
 import { BellIcon, LoaderCircleIcon, PlusIcon, SaveIcon, Trash2Icon } from 'lucide-react'
-import { ChangeEventHandler, useState } from 'react'
+import { ChangeEventHandler, useEffect, useState } from 'react'
 import { toast } from '@/components/ui/use-toast'
 import { InputTags } from '@/components/ui/input-tags'
 import { UserSettings } from '@/types'
@@ -29,7 +29,13 @@ const SettingsNotificationsPage = ({ userSettings }: { userSettings: UserSetting
 	const [emails, setEmails] = useState<string[]>(userSettings.emails ?? [])
 	const [isLoading, setIsLoading] = useState(false)
 
-	const addWebhook = () => {
+	// update values when userSettings changes
+	useEffect(() => {
+		setWebhooks(userSettings.webhooks ?? [])
+		setEmails(userSettings.emails ?? [])
+	}, [userSettings])
+
+	function addWebhook() {
 		setWebhooks([...webhooks, ''])
 		// focus on the new input
 		queueMicrotask(() => {
@@ -39,7 +45,7 @@ const SettingsNotificationsPage = ({ userSettings }: { userSettings: UserSetting
 	}
 	const removeWebhook = (index: number) => setWebhooks(webhooks.filter((_, i) => i !== index))
 
-	const updateWebhook = (index: number, value: string) => {
+	function updateWebhook(index: number, value: string) {
 		const newWebhooks = [...webhooks]
 		newWebhooks[index] = value
 		setWebhooks(newWebhooks)