Preguntar cambiar los cambios en Ajustes

client/src/app/settings/edit.tsx

@@ -19,9 +19,9 @@ import { useMemo, useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { Trans } from "react-i18next";
 
+import { useUnsavedChangesNotifier } from "@/lib/hooks";
 import { cn } from "@/lib/utils";
 import { IUpdateProfile_Request_DTO } from "@shared/contexts";
-import { Link } from "react-router-dom";
 import { toast } from "react-toastify";
 import { useSettings } from "./hooks";
 
@@ -50,6 +50,7 @@ export const SettingsEditor = () => {
     mode: "onBlur",
     values: data?.dealer,
     defaultValues,
+    //defaultValues: _defaultValues,
     /*resolver: joiResolver(
       Joi.object({
         email: Joi.string()
@@ -63,11 +64,14 @@ export const SettingsEditor = () => {
     ),*/
   });
 
-  const { formState, reset } = form;
-  const { isSubmitting } = formState;
+  const { formState, reset, getValues } = form;
+  const { isSubmitting, isDirty } = formState;
+
+  useUnsavedChangesNotifier({
+    isDirty,
+  });
 
   const onSubmit: SubmitHandler<SettingsDataForm> = async (data) => {
-    console.log(data);
     mutate(data, {
       onError: (error) => {
         console.debug(error);
@@ -76,9 +80,8 @@ export const SettingsEditor = () => {
       },
       //onSettled: () => {},
       onSuccess: () => {
-        reset({}, { keepValues: true, keepIsValid: true });
+        reset(getValues());
         toast("Ajustes guardados");
-        //clear();
       },
     });
   };
@@ -117,27 +120,30 @@ export const SettingsEditor = () => {
             )}
 
             <nav className='grid gap-4 text-sm text-muted-foreground'>
-              <Link
-                to='#'
+              <a
                 onClick={() => setActiveSection("profile")}
-                className={activeSection === "profile" ? "font-semibold text-primary" : ""}
+                className={
+                  activeSection === "profile" ? "font-semibold text-primary" : "cursor-pointer"
+                }
               >
                 <Trans i18nKey='settings.edit.tabs.profile' />
-              </Link>
-              <Link
-                to='#'
+              </a>
+              <a
                 onClick={() => setActiveSection("quotes")}
-                className={activeSection === "quotes" ? "font-semibold text-primary" : ""}
+                className={
+                  activeSection === "quotes" ? "font-semibold text-primary" : "cursor-pointer "
+                }
               >
                 <Trans i18nKey='settings.edit.tabs.quotes' />
-              </Link>
-              <Link
-                to='#'
+              </a>
+              <a
                 onClick={() => setActiveSection("legal")}
-                className={activeSection === "legal" ? "font-semibold text-primary" : ""}
+                className={
+                  activeSection === "legal" ? "font-semibold text-primary" : "cursor-pointer "
+                }
               >
                 <Trans i18nKey='settings.edit.tabs.legal' />
-              </Link>
+              </a>
             </nav>
             <div className={cn("grid gap-6", activeSection === "profile" ? "visible" : "hidden")}>
               <Card>