fix(ui): update wifi config only if there was a change (#129)

Closes: #128
TheRealKasumi · Jan 24, 2023 · d7daf11 · d7daf11
1 parent e88bb47
commit d7daf11
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 74 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -38,7 +38,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",
-    "react-hook-form": "^7.42.0",
+    "react-hook-form": "^7.42.1",
     "react-i18next": "^12.1.4",
     "rgb-hex": "^4.0.0",
     "swagger-ui-react": "^4.15.5"

diff --git a/ui/pnpm-lock.yaml b/ui/pnpm-lock.yaml
diff --git a/ui/src/pages/CustomAnimations.tsx b/ui/src/pages/CustomAnimations.tsx
@@ -36,7 +36,12 @@ const Form = (): JSX.Element => {
     undefined,
   );
 
-  const { handleSubmit, control, formState, reset } = useForm<FormData>({
+  const {
+    handleSubmit,
+    control,
+    formState: { isSubmitting },
+    reset,
+  } = useForm<FormData>({
     defaultValues: {
       fileName: '',
     },
@@ -246,7 +251,7 @@ const Form = (): JSX.Element => {
           />
         </label>
 
-        <Button type="submit" disabled={formState.isSubmitting}>
+        <Button type="submit" disabled={isSubmitting}>
           {t('customAnimations.upload')}
         </Button>
       </form>

diff --git a/ui/src/pages/Settings.tsx b/ui/src/pages/Settings.tsx
@@ -1,5 +1,5 @@
 import { useQueryErrorResetBoundary } from '@tanstack/react-query';
-import { Suspense } from 'react';
+import { Suspense, type MouseEvent } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -135,7 +135,13 @@ const Form = (): JSX.Element => {
     error: uiError,
   } = useUpdateUi();
 
-  const { handleSubmit, watch, control, reset, formState } = useForm<FormData>({
+  const {
+    handleSubmit,
+    watch,
+    control,
+    reset,
+    formState: { dirtyFields, isSubmitting },
+  } = useForm<FormData>({
     defaultValues: {
       system: {
         fanMaxPwmValue: system?.fanMaxPwmValue,
@@ -170,7 +176,7 @@ const Form = (): JSX.Element => {
     mode: 'onChange',
   });
 
-  const onSubmit = handleSubmit(async (data) => {
+  const onSubmit = handleSubmit(async (data, event) => {
     const wifiCopy: Wifi = JSON.parse(JSON.stringify(wifi));
     const uiCopy: Ui = JSON.parse(JSON.stringify(ui));
     const systemCopy: System = JSON.parse(JSON.stringify(system));
@@ -202,17 +208,23 @@ const Form = (): JSX.Element => {
     );
 
     // Update WiFi configuration only if there was a change.
-    if (formState.dirtyFields.wifi) {
+    if (
+      dirtyFields.wifi ||
+      (event?.target.type === 'reset' &&
+        (DEFAULT_VALUES.wifi.accessPointSsid !== wifi?.accessPointSsid ||
+          DEFAULT_VALUES.wifi.accessPointPassword !==
+            wifi?.accessPointPassword))
+    ) {
       await mutateAsyncWifi({ ...wifiCopy, ...data.wifi });
     }
 
     // Reset dirty fields
     reset({}, { keepValues: true });
   });
 
-  const onReset = async () => {
+  const onReset = async (event: MouseEvent<HTMLButtonElement>) => {
     reset(DEFAULT_VALUES);
-    return await onSubmit();
+    return await onSubmit(event);
   };
 
   const getAvailablePowerModes = () => {
@@ -244,7 +256,7 @@ const Form = (): JSX.Element => {
     <>
       {isSystemSuccess &&
         isUiSuccess &&
-        (isWifiSuccess || !formState.dirtyFields.wifi) && (
+        (isWifiSuccess || !dirtyFields.wifi) && (
           <Toast title={t('settings.submitSuccessful')} />
         )}
 
@@ -620,19 +632,11 @@ const Form = (): JSX.Element => {
           </label>
         </fieldset>
 
-        <Button
-          type="submit"
-          className="mb-4"
-          disabled={formState.isSubmitting}
-        >
+        <Button type="submit" className="mb-4" disabled={isSubmitting}>
           {t('settings.submit')}
         </Button>
 
-        <Button
-          type="reset"
-          onClick={onReset}
-          disabled={formState.isSubmitting}
-        >
+        <Button type="reset" onClick={onReset} disabled={isSubmitting}>
           {t('settings.reset')}
         </Button>
       </form>

diff --git a/ui/src/pages/Update.tsx b/ui/src/pages/Update.tsx
@@ -9,7 +9,12 @@ type FormData = {
 
 export const Update = (): JSX.Element => {
   const { t } = useTranslation();
-  const { handleSubmit, control, formState, reset } = useForm<FormData>({
+  const {
+    handleSubmit,
+    control,
+    formState: { isSubmitting },
+    reset,
+  } = useForm<FormData>({
     mode: 'onChange',
   });
   const { mutateAsync, isSuccess, isError, isLoading, error } = useUpload();
@@ -64,7 +69,7 @@ export const Update = (): JSX.Element => {
           }}
         />
 
-        <Button type="submit" disabled={formState.isSubmitting}>
+        <Button type="submit" disabled={isSubmitting}>
           {t('update.submit')}
         </Button>
       </form>

diff --git a/ui/src/pages/Zone.tsx b/ui/src/pages/Zone.tsx
@@ -93,36 +93,42 @@ const Form = ({ zoneId }: FormProps): JSX.Element => {
   const { mutateAsync, isSuccess, isError, error } = useUpdateLed();
   const zone = data?.[zoneId];
 
-  const { handleSubmit, watch, control, reset, formState, setValue } =
-    useForm<FormData>({
-      defaultValues: {
-        brightness: zone?.brightness,
-        color1: `#${rgbHex(
-          zone?.animationSettings[1] ?? 0,
-          zone?.animationSettings[2] ?? 0,
-          zone?.animationSettings[3] ?? 0,
-        )}`,
-        color2: `#${rgbHex(
-          zone?.animationSettings[4] ?? 0,
-          zone?.animationSettings[5] ?? 0,
-          zone?.animationSettings[6] ?? 0,
-        )}`,
-        fadeSpeed: zone?.fadeSpeed,
-        reverse: zone?.reverse,
-        channelCurrents: zone?.channelCurrents[0],
-        ledCount: zone?.ledCount,
-        ledVoltage: zone?.ledVoltage,
-        offset: zone?.offset,
-        speed: zone?.speed,
-        type: zone?.type.toString(),
-        animationSettings: [...Array(25)].map((_, index) =>
-          index === 0 || index === 7
-            ? zone?.animationSettings[index].toString()
-            : zone?.animationSettings[index],
-        ) as FormData['animationSettings'],
-      },
-      mode: 'onChange',
-    });
+  const {
+    handleSubmit,
+    watch,
+    control,
+    reset,
+    formState: { isSubmitting, defaultValues },
+    setValue,
+  } = useForm<FormData>({
+    defaultValues: {
+      brightness: zone?.brightness,
+      color1: `#${rgbHex(
+        zone?.animationSettings[1] ?? 0,
+        zone?.animationSettings[2] ?? 0,
+        zone?.animationSettings[3] ?? 0,
+      )}`,
+      color2: `#${rgbHex(
+        zone?.animationSettings[4] ?? 0,
+        zone?.animationSettings[5] ?? 0,
+        zone?.animationSettings[6] ?? 0,
+      )}`,
+      fadeSpeed: zone?.fadeSpeed,
+      reverse: zone?.reverse,
+      channelCurrents: zone?.channelCurrents[0],
+      ledCount: zone?.ledCount,
+      ledVoltage: zone?.ledVoltage,
+      offset: zone?.offset,
+      speed: zone?.speed,
+      type: zone?.type.toString(),
+      animationSettings: [...Array(25)].map((_, index) =>
+        index === 0 || index === 7
+          ? zone?.animationSettings[index].toString()
+          : zone?.animationSettings[index],
+      ) as FormData['animationSettings'],
+    },
+    mode: 'onChange',
+  });
 
   const onSubmit = handleSubmit(
     async ({
@@ -509,7 +515,7 @@ const Form = ({ zoneId }: FormProps): JSX.Element => {
               <Collapsible
                 title={t('zone.variance')}
                 className="mb-6"
-                defaultOpen={formState.defaultValues?.animationSettings?.some(
+                defaultOpen={defaultValues?.animationSettings?.some(
                   (value, index) =>
                     index >= 13 && index <= 17 && (value ?? 0) > 0,
                 )}
@@ -657,19 +663,11 @@ const Form = ({ zoneId }: FormProps): JSX.Element => {
           )}
         </fieldset>
 
-        <Button
-          type="submit"
-          className="mb-4"
-          disabled={formState.isSubmitting}
-        >
+        <Button type="submit" className="mb-4" disabled={isSubmitting}>
           {t('zone.submit')}
         </Button>
 
-        <Button
-          type="reset"
-          onClick={onReset}
-          disabled={formState.isSubmitting}
-        >
+        <Button type="reset" onClick={onReset} disabled={isSubmitting}>
           {t('zone.reset')}
         </Button>
       </form>