Form default values

Author: judsonjuniorr

src/pages/instance/Proxy/index.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Separator } from "@radix-ui/react-dropdown-menu";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { toast } from "react-toastify";
@@ -42,15 +42,28 @@ function Proxy() {
   const form = useForm<FormSchemaType>({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      enabled: proxy?.enabled ?? false,
-      host: proxy?.host ?? "",
-      port: proxy?.port ?? "",
-      protocol: proxy?.protocol ?? "http",
-      username: proxy?.username ?? "",
-      password: proxy?.password ?? "",
+      enabled: false,
+      host: "",
+      port: "",
+      protocol: "http",
+      username: "",
+      password: "",
     },
   });
 
+  useEffect(() => {
+    if (proxy) {
+      form.reset({
+        enabled: proxy.enabled,
+        host: proxy.host,
+        port: proxy.port,
+        protocol: proxy.protocol,
+        username: proxy.username,
+        password: proxy.password,
+      });
+    }
+  }, [proxy]); // eslint-disable-line react-hooks/exhaustive-deps
+
   const onSubmit = async (data: FormSchemaType) => {
     if (!instance) return;
 

src/pages/instance/Rabbitmq/index.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Separator } from "@radix-ui/react-dropdown-menu";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { toast } from "react-toastify";
@@ -47,11 +47,20 @@ function Rabbitmq() {
   const form = useForm<FormSchemaType>({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      enabled: rabbitmq?.enabled ?? false,
-      events: rabbitmq?.events ?? [],
+      enabled: false,
+      events: [],
     },
   });
 
+  useEffect(() => {
+    if (rabbitmq) {
+      form.reset({
+        enabled: rabbitmq.enabled,
+        events: rabbitmq.events,
+      });
+    }
+  }, [rabbitmq]); // eslint-disable-line react-hooks/exhaustive-deps
+
   const onSubmit = async (data: FormSchemaType) => {
     if (!instance) return;
 

src/pages/instance/Sqs/index.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Separator } from "@radix-ui/react-dropdown-menu";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { toast } from "react-toastify";
@@ -47,11 +47,20 @@ function Sqs() {
   const form = useForm<FormSchemaType>({
     resolver: zodResolver(FormSchema),
     defaultValues: {
-      enabled: sqs?.enabled ?? false,
-      events: sqs?.events ?? [],
+      enabled: false,
+      events: [],
     },
   });
 
+  useEffect(() => {
+    if (sqs) {
+      form.reset({
+        enabled: sqs.enabled,
+        events: sqs.events,
+      });
+    }
+  }, [sqs]); // eslint-disable-line react-hooks/exhaustive-deps
+
   const onSubmit = async (data: FormSchemaType) => {
     if (!instance) return;
     setLoading(true);

src/pages/instance/Websocket/index.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Separator } from "@radix-ui/react-dropdown-menu";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { toast } from "react-toastify";
@@ -47,11 +47,20 @@ function Websocket() {
   const form = useForm<FormSchemaType>({
     resolver: zodResolver(FormSchema),
     defaultValues: {
-      enabled: websocket?.enabled ?? false,
-      events: websocket?.events ?? [],
+      enabled: false,
+      events: [],
     },
   });
 
+  useEffect(() => {
+    if (websocket) {
+      form.reset({
+        enabled: websocket.enabled,
+        events: websocket.events,
+      });
+    }
+  }, [websocket]); // eslint-disable-line react-hooks/exhaustive-deps
+
   const onSubmit = async (data: FormSchemaType) => {
     if (!instance) return;