From d9a8ab3864c7d3d96638b897515ca0ffd3734f30 Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Thu, 24 Nov 2022 04:53:40 +0530
Subject: [PATCH] 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>
---
 .../pages/settings/my-account/appearance.tsx  | 247 ++++++++++--------
 1 file changed, 136 insertions(+), 111 deletions(-)

diff --git a/apps/web/pages/settings/my-account/appearance.tsx b/apps/web/pages/settings/my-account/appearance.tsx
index 5642b61c00..9da3eed0b2 100644
--- a/apps/web/pages/settings/my-account/appearance.tsx
+++ b/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,129 +67,138 @@ const AppearanceView = () => {
     },
   });
 
-  const formMethods = useForm();
-
   if (isLoading) return <SkeletonLoader />;
 
-  if (user)
-    return (
-      <Form
-        form={formMethods}
-        handleSubmit={(values) => {
-          mutation.mutate({
-            ...values,
-            // Radio values don't support null as values, therefore we convert an empty string
-            // back to null here.
-            theme: values.theme || null,
-          });
-        }}>
-        <Meta title="Appearance" description="Manage settings for your booking appearance" />
-        <div className="mb-6 flex items-center text-sm">
-          <div>
-            <p className="font-semibold">{t("theme")}</p>
-            <p className="text-gray-600">{t("theme_applies_note")}</p>
-          </div>
-        </div>
-        <div className="flex flex-col justify-between sm:flex-row">
-          <ThemeLabel
-            variant="system"
-            value={null}
-            label={t("theme_system")}
-            defaultChecked={user.theme === null}
-            register={formMethods.register}
-          />
-          <ThemeLabel
-            variant="light"
-            value="light"
-            label={t("theme_light")}
-            defaultChecked={user.theme === "light"}
-            register={formMethods.register}
-          />
-          <ThemeLabel
-            variant="dark"
-            value="dark"
-            label={t("theme_dark")}
-            defaultChecked={user.theme === "dark"}
-            register={formMethods.register}
-          />
-        </div>
+  if (!user) return null;
 
-        <hr className="border-1 my-8 border-neutral-200" />
-        <div className="mb-6 flex items-center text-sm">
-          <div>
-            <p className="font-semibold">{t("custom_brand_colors")}</p>
-            <p className="mt-0.5 leading-5 text-gray-600">{t("customize_your_brand_colors")}</p>
-          </div>
-        </div>
+  const isDisabled = isSubmitting || !isDirty;
 
-        <div className="block justify-between sm:flex">
-          <Controller
-            name="brandColor"
-            control={formMethods.control}
-            defaultValue={user.brandColor}
-            render={() => (
-              <div>
-                <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)}
-                />
-              </div>
-            )}
-          />
-          <Controller
-            name="darkBrandColor"
-            control={formMethods.control}
-            defaultValue={user.darkBrandColor}
-            render={() => (
-              <div className="mt-6 sm:mt-0">
-                <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)}
-                />
-              </div>
-            )}
-          />
+  return (
+    <Form
+      form={formMethods}
+      handleSubmit={(values) => {
+        mutation.mutate({
+          ...values,
+          // Radio values don't support null as values, therefore we convert an empty string
+          // back to null here.
+          theme: values.theme || null,
+        });
+      }}>
+      <Meta title="Appearance" description="Manage settings for your booking appearance" />
+      <div className="mb-6 flex items-center text-sm">
+        <div>
+          <p className="font-semibold">{t("theme")}</p>
+          <p className="text-gray-600">{t("theme_applies_note")}</p>
         </div>
-        {/* TODO future PR to preview brandColors */}
-        {/* <Button
+      </div>
+      <div className="flex flex-col justify-between sm:flex-row">
+        <ThemeLabel
+          variant="system"
+          value={null}
+          label={t("theme_system")}
+          defaultChecked={user.theme === null}
+          register={formMethods.register}
+        />
+        <ThemeLabel
+          variant="light"
+          value="light"
+          label={t("theme_light")}
+          defaultChecked={user.theme === "light"}
+          register={formMethods.register}
+        />
+        <ThemeLabel
+          variant="dark"
+          value="dark"
+          label={t("theme_dark")}
+          defaultChecked={user.theme === "dark"}
+          register={formMethods.register}
+        />
+      </div>
+
+      <hr className="border-1 my-8 border-neutral-200" />
+      <div className="mb-6 flex items-center text-sm">
+        <div>
+          <p className="font-semibold">{t("custom_brand_colors")}</p>
+          <p className="mt-0.5 leading-5 text-gray-600">{t("customize_your_brand_colors")}</p>
+        </div>
+      </div>
+
+      <div className="block justify-between sm:flex">
+        <Controller
+          name="brandColor"
+          control={formMethods.control}
+          defaultValue={user.brandColor}
+          render={() => (
+            <div>
+              <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, { shouldDirty: true })}
+              />
+            </div>
+          )}
+        />
+        <Controller
+          name="darkBrandColor"
+          control={formMethods.control}
+          defaultValue={user.darkBrandColor}
+          render={() => (
+            <div className="mt-6 sm:mt-0">
+              <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, { shouldDirty: true })}
+              />
+            </div>
+          )}
+        />
+      </div>
+      {/* TODO future PR to preview brandColors */}
+      {/* <Button
         color="secondary"
         EndIcon={Icon.FiExternalLink}
         className="mt-6"
         onClick={() => window.open(`${WEBAPP_URL}/${user.username}/${user.eventTypes[0].title}`, "_blank")}>
         Preview
       </Button> */}
-        <hr className="border-1 my-8 border-neutral-200" />
-        <Controller
-          name="hideBranding"
-          control={formMethods.control}
-          defaultValue={user.hideBranding}
-          render={({ field: { value } }) => (
-            <>
-              <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>{" "}
-                    <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)}
-                    checked={value}
-                  />
+      <hr className="border-1 my-8 border-neutral-200" />
+      <Controller
+        name="hideBranding"
+        control={formMethods.control}
+        defaultValue={user.hideBranding}
+        render={({ field: { value } }) => (
+          <>
+            <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>
+                  <Badge variant="gray">{t("pro")}</Badge>
                 </div>
+                <p className="mt-0.5  text-gray-600">{t("removes_cal_branding")}</p>
               </div>
-            </>
-          )}
-        />
-        <Button type="submit" color="primary" className="mt-8">
-          {t("update")}
-        </Button>
-      </Form>
-    );
+              <div className="flex-none">
+                <Switch
+                  id="hideBranding"
+                  onCheckedChange={(checked) =>
+                    formMethods.setValue("hideBranding", checked, { shouldDirty: true })
+                  }
+                  checked={value}
+                />
+              </div>
+            </div>
+          </>
+        )}
+      />
+      <Button
+        disabled={isDisabled}
+        type="submit"
+        loading={mutation.isLoading}
+        color="primary"
+        className="mt-8">
+        {t("update")}
+      </Button>
+    </Form>
+  );
 };
 
 AppearanceView.getLayout = getLayout;