fix: disable update button when nothing changed (#5592)

* fix: disable update button when nothing changed

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* fix: invalidate after dsubmission

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* Fix isDirty state for appearance settings

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: alannnc <alannnc@gmail.com>

apps/web/pages/settings/my-account/appearance.tsx

@@ -41,9 +41,25 @@ const SkeletonLoader = () => {
 const AppearanceView = () => {
   const { t } = useLocale();
 
+  const utils = trpc.useContext();
   const { data: user, isLoading } = trpc.viewer.me.useQuery();
+
+  const formMethods = useForm({
+    defaultValues: {
+      theme: user?.theme,
+      brandColor: user?.brandColor || "#292929",
+      darkBrandColor: user?.darkBrandColor || "#fafafa",
+      hideBranding: user?.hideBranding,
+    },
+  });
+
+  const {
+    formState: { isSubmitting, isDirty },
+  } = formMethods;
+
   const mutation = trpc.viewer.updateProfile.useMutation({
-    onSuccess: () => {
+    onSuccess: async () => {
+      await utils.viewer.me.invalidate();
       showToast(t("settings_updated_successfully"), "success");
     },
     onError: () => {
@@ -51,11 +67,12 @@ const AppearanceView = () => {
     },
   });
 
-  const formMethods = useForm();
-
   if (isLoading) return <SkeletonLoader />;
 
-  if (user)
+  if (!user) return null;
+
+  const isDisabled = isSubmitting || !isDirty;
+
   return (
     <Form
       form={formMethods}
@@ -116,7 +133,7 @@ const AppearanceView = () => {
               <p className="mb-2 block text-sm font-medium text-gray-900">{t("light_brand_color")}</p>
               <ColorPicker
                 defaultValue={user.brandColor}
-                  onChange={(value) => formMethods.setValue("brandColor", value)}
+                onChange={(value) => formMethods.setValue("brandColor", value, { shouldDirty: true })}
               />
             </div>
           )}
@@ -130,7 +147,7 @@ const AppearanceView = () => {
               <p className="mb-2 block text-sm font-medium text-gray-900">{t("dark_brand_color")}</p>
               <ColorPicker
                 defaultValue={user.darkBrandColor}
-                  onChange={(value) => formMethods.setValue("darkBrandColor", value)}
+                onChange={(value) => formMethods.setValue("darkBrandColor", value, { shouldDirty: true })}
               />
             </div>
           )}
@@ -154,14 +171,17 @@ const AppearanceView = () => {
             <div className="flex w-full text-sm">
               <div className="mr-1 flex-grow">
                 <div className="flex items-center">
-                    <p className="mr-2 font-semibold">{t("disable_cal_branding")}</p>{" "}
+                  <p className="mr-2 font-semibold">{t("disable_cal_branding")}</p>
                   <Badge variant="gray">{t("pro")}</Badge>
                 </div>
                 <p className="mt-0.5  text-gray-600">{t("removes_cal_branding")}</p>
               </div>
               <div className="flex-none">
                 <Switch
-                    onCheckedChange={(checked) => formMethods.setValue("hideBranding", checked)}
+                  id="hideBranding"
+                  onCheckedChange={(checked) =>
+                    formMethods.setValue("hideBranding", checked, { shouldDirty: true })
+                  }
                   checked={value}
                 />
               </div>
@@ -169,7 +189,12 @@ const AppearanceView = () => {
           </>
         )}
       />
-        <Button type="submit" color="primary" className="mt-8">
+      <Button
+        disabled={isDisabled}
+        type="submit"
+        loading={mutation.isLoading}
+        color="primary"
+        className="mt-8">
         {t("update")}
       </Button>
     </Form>