maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: disable update button unless any input value changed in general settings (#5686) 

* feat: disable update button unless any input value changed

* fix: reset dirtyFields on success

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>
This commit is contained in:
Nafees Nazik 2022-12-20 18:55:15 +05:30 committed by GitHub
parent 2a5dd9035f
commit f5e0c6b384
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/web/pages/settings/my-account/general.tsx
View File

@ -70,6 +70,7 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
const mutation = trpc.viewer.updateProfile.useMutation({
onSuccess: () => {
reset(getValues());
showToast(t("settings_updated_successfully"), "success");
},
onError: () => {
@ -119,7 +120,12 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
},
},
});
const {
formState: { isDirty, isSubmitting },
reset,
getValues,
} = formMethods;
const isDisabled = isSubmitting || !isDirty;
return (
<Form
form={formMethods}
@ -160,7 +166,7 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
id="timezone"
value={value}
onChange={(event) => {
if (event) formMethods.setValue("timeZone", event.value);
if (event) formMethods.setValue("timeZone", event.value, { shouldDirty: true });
}}
/>
</>
@ -178,7 +184,7 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
value={value}
options={timeFormatOptions}
onChange={(event) => {
if (event) formMethods.setValue("timeFormat", { ...event });
if (event) formMethods.setValue("timeFormat", { ...event }, { shouldDirty: true });
}}
/>
</>
@ -199,13 +205,13 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
value={value}
options={weekStartOptions}
onChange={(event) => {
if (event) formMethods.setValue("weekStart", { ...event });
if (event) formMethods.setValue("weekStart", { ...event }, { shouldDirty: true });
}}
/>
</>
)}
/>
<Button color="primary" type="submit" className="mt-8">
<Button disabled={isDisabled} color="primary" type="submit" className="mt-8">
<>{t("update")}</>
</Button>
</Form>