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)

Browse Source 
* 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({ const mutation = trpc.viewer.updateProfile.useMutation({
onSuccess: () => { onSuccess: () => {
reset(getValues());
showToast(t("settings_updated_successfully"), "success"); showToast(t("settings_updated_successfully"), "success");
}, },
onError: () => { onError: () => {
@ -119,7 +120,12 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
}, },
}, },
}); });
const {
formState: { isDirty, isSubmitting },
reset,
getValues,
} = formMethods;
const isDisabled = isSubmitting || !isDirty;
return ( return (
<Form <Form
form={formMethods} form={formMethods}
@ -160,7 +166,7 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
id="timezone" id="timezone"
value={value} value={value}
onChange={(event) => { 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} value={value}
options={timeFormatOptions} options={timeFormatOptions}
onChange={(event) => { 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} value={value}
options={weekStartOptions} options={weekStartOptions}
onChange={(event) => { 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")}</> <>{t("update")}</>
</Button> </Button>
</Form> </Form>