fix: form not correctly updating based on values (#572)

* fix: form not correctly updating based on values

Closes #549

* chore: pr review

app/client/modules/notifications/components/create-notification-form.tsx

@@ -111,7 +111,7 @@ export const CreateNotificationForm = ({ onSubmit, mode = "create", initialValue
 			name: "",
 		},
 		resetOptions: {
-			keepDefaultValues: true,
+			keepDefaultValues: false,
 			keepDirtyValues: false,
 		},
 	});

app/client/modules/notifications/components/notification-forms/generic-form.tsx

@@ -1,4 +1,4 @@
-import type { UseFormReturn } from "react-hook-form";
+import { useWatch, type UseFormReturn } from "react-hook-form";
 import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "~/client/components/ui/form";
 import { Input } from "~/client/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/client/components/ui/select";
@@ -49,7 +49,8 @@ ${body}`;
 };
 
 export const GenericForm = ({ form }: Props) => {
-	const watchedValues = form.watch();
+	const watchedValues = useWatch({ control: form.control });
+	const useJson = useWatch({ control: form.control, name: "useJson" });
 
 	return (
 		<>
@@ -126,7 +127,7 @@ export const GenericForm = ({ form }: Props) => {
 				render={({ field }) => (
 					<FormItem className="flex flex-row items-center space-x-3">
 						<FormControl>
-							<Checkbox checked={field.value} onCheckedChange={field.onChange} />
+							<Checkbox checked={field.value} onCheckedChange={(checked) => field.onChange(checked)} />
 						</FormControl>
 						<div className="space-y-1 leading-none">
 							<FormLabel>Use JSON Template</FormLabel>
@@ -135,7 +136,7 @@ export const GenericForm = ({ form }: Props) => {
 					</FormItem>
 				)}
 			/>
-			{form.watch("useJson") && (
+			{useJson && (
 				<>
 					<FormField
 						control={form.control}

app/client/modules/repositories/components/repository-forms/advanced-tls-form.tsx

@@ -1,4 +1,4 @@
-import type { UseFormReturn } from "react-hook-form";
+import { useWatch, type UseFormReturn } from "react-hook-form";
 import {
 	FormControl,
 	FormDescription,
@@ -22,10 +22,10 @@ type Props = {
 };
 
 export const AdvancedForm = ({ form }: Props) => {
-	const insecureTls = form.watch("insecureTls");
+	const insecureTls = useWatch({ control: form.control, name: "insecureTls" });
-	const cacert = form.watch("cacert");
+	const cacert = useWatch({ control: form.control, name: "cacert" });
-	const uploadLimitEnabled = form.watch("uploadLimit.enabled");
+	const uploadLimitEnabled = useWatch({ control: form.control, name: "uploadLimit.enabled" });
-	const downloadLimitEnabled = form.watch("downloadLimit.enabled");
+	const downloadLimitEnabled = useWatch({ control: form.control, name: "downloadLimit.enabled" });
 
 	return (
 		<Collapsible>
@@ -164,6 +164,7 @@ export const AdvancedForm = ({ form }: Props) => {
 												onValueChange={field.onChange}
 												defaultValue={field.value || "Mbps"}
 												value={field.value || "Mbps"}
+												disabled={!downloadLimitEnabled}
 											>
 												<FormControl>
 													<SelectTrigger className="text-xs">

app/client/modules/repositories/components/repository-forms/sftp-repository-form.tsx

@@ -1,4 +1,4 @@
-import type { UseFormReturn } from "react-hook-form";
+import { useWatch, type UseFormReturn } from "react-hook-form";
 import {
 	FormControl,
 	FormDescription,
@@ -17,6 +17,8 @@ type Props = {
 };
 
 export const SftpRepositoryForm = ({ form }: Props) => {
+	const skipHostKeyCheck = useWatch({ control: form.control, name: "skipHostKeyCheck" });
+
 	return (
 		<>
 			<FormField
@@ -114,7 +116,7 @@ export const SftpRepositoryForm = ({ form }: Props) => {
 					</FormItem>
 				)}
 			/>
-			{!form.watch("skipHostKeyCheck") && (
+			{!skipHostKeyCheck && (
 				<FormField
 					control={form.control}
 					name="knownHosts"

app/client/modules/volumes/components/volume-forms/sftp-form.tsx

@@ -1,4 +1,4 @@
-import type { UseFormReturn } from "react-hook-form";
+import { useWatch, type UseFormReturn } from "react-hook-form";
 import type { FormValues } from "../create-volume-form";
 import {
 	FormControl,
@@ -18,6 +18,8 @@ type Props = {
 };
 
 export const SFTPForm = ({ form }: Props) => {
+	const skipHostKeyCheck = useWatch({ control: form.control, name: "skipHostKeyCheck" });
+
 	return (
 		<>
 			<FormField
@@ -132,7 +134,7 @@ export const SFTPForm = ({ form }: Props) => {
 					</FormItem>
 				)}
 			/>
-			{!form.watch("skipHostKeyCheck") && (
+			{!skipHostKeyCheck && (
 				<FormField
 					control={form.control}
 					name="knownHosts"

app/client/modules/volumes/components/volume-forms/smb-form.tsx

@@ -1,4 +1,4 @@
-import type { UseFormReturn } from "react-hook-form";
+import { useWatch, type UseFormReturn } from "react-hook-form";
 import type { FormValues } from "../create-volume-form";
 import {
 	FormControl,
@@ -17,7 +17,7 @@ type Props = {
 };
 
 export const SMBForm = ({ form }: Props) => {
-	const guest = form.watch("guest");
+	const guest = useWatch({ control: form.control, name: "guest" });
 
 	return (
 		<>
@@ -83,12 +83,7 @@ export const SMBForm = ({ form }: Props) => {
 					<FormItem>
 						<FormLabel>Username</FormLabel>
 						<FormControl>
-							<Input
+							<Input placeholder="admin" value={field.value} onChange={field.onChange} disabled={guest} />
-								placeholder="admin"
-								value={field.value}
-								onChange={field.onChange}
-								disabled={guest}
-							/>
 						</FormControl>
 						<FormDescription>Username for SMB authentication.</FormDescription>
 						<FormMessage />