Merge pull request #11 from EvolutionAPI/fixes

Fixes

Author: DavidsonGomes

src/components/footer.tsx

@@ -9,10 +9,10 @@ import { Button } from "./ui/button";
 function Footer() {
   const { t } = useTranslation();
 
-  const clientName = getToken(TOKEN_ID.CLIENT_NAME);
   const url = getToken(TOKEN_ID.API_URL);
   const { data: serverInfo } = useVerifyServer({ url });
 
+  const clientName = useMemo(() => serverInfo?.clientName, [serverInfo]);
   const version = useMemo(() => serverInfo?.version, [serverInfo]);
 
   const links = [

src/lib/queries/webhook/manageWebhook.tsx

@@ -9,7 +9,7 @@ interface IParams {
   data: Webhook;
 }
 
-const createWebhook = async ({ instanceName, token, ...data }: IParams) => {
+const createWebhook = async ({ instanceName, token, data }: IParams) => {
   const response = await api.post(
     `/webhook/set/${instanceName}`,
     { webhook: data },

src/lib/queries/webhook/types.ts

@@ -1,4 +1,7 @@
 import { Webhook } from "@/types/evolution.types";
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
-export type FetchWebhookResponse = Webhook;
+export type FetchWebhookResponse = Omit<Webhook, "base64" | "byEvents"> & {
+  webhookBase64: boolean;
+  webhookByEvents: boolean;
+};

src/pages/instance/Chatwoot/index.tsx

@@ -82,11 +82,9 @@ function Chatwoot() {
     }
   });
 
-  const onSubmit = async () => {
+  const onSubmit = async (data: FormSchema) => {
     if (!instance) return;
 
-    const data = form.getValues();
-
     setLoading(true);
     const chatwootData: ChatwootType = {
       enabled: data.enabled,
@@ -136,7 +134,10 @@ function Chatwoot() {
   return (
     <>
       <Form {...form}>
-        <form className="w-full space-y-6">
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="w-full space-y-6"
+        >
           <div>
             <h3 className="mb-1 text-lg font-medium">{t("chatwoot.title")}</h3>
             <Separator className="my-4" />
@@ -231,9 +232,7 @@ function Chatwoot() {
             </div>
           </div>
           <div className="mx-4 flex justify-end">
-            <Button type="submit" onClick={onSubmit}>
-              {t("chatwoot.button.save")}
-            </Button>
+            <Button type="submit">{t("chatwoot.button.save")}</Button>
           </div>
         </form>
       </Form>

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/Webhook/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";
@@ -52,14 +52,26 @@ function Webhook() {
   const form = useForm<FormSchemaType>({
     resolver: zodResolver(FormSchema),
     defaultValues: {
-      enabled: webhook?.enabled ?? false,
-      url: webhook?.url ?? "",
-      events: webhook?.events ?? [],
-      base64: webhook?.base64 ?? false,
-      byEvents: webhook?.byEvents ?? false,
+      enabled: false,
+      url: "",
+      events: [],
+      base64: false,
+      byEvents: false,
     },
   });
 
+  useEffect(() => {
+    if (webhook) {
+      form.reset({
+        enabled: webhook.enabled,
+        url: webhook.url,
+        events: webhook.events,
+        base64: webhook.webhookBase64,
+        byEvents: webhook.webhookByEvents,
+      });
+    }
+  }, [webhook]); // 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;