public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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>
pull/5654/head
Udit Takkar 2022-11-24 04:53:40 +05:30 committed by GitHub
parent e3a7fd006b
commit d9a8ab3864
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 136 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
apps/web/pages/settings/my-account/appearance.tsx
View File

@ -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>