merging to sync - still need to fix system.ts

interface/src/framework/mqtt/MqttSettingsForm.tsx

@@ -17,22 +17,32 @@ import {
   BlockNavigation
 } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
-import { numberValue, updateValueDirty, useRest } from 'utils';
+import { numberValue, updateValueDirty, useRest2 } from 'utils';
 
 import { createMqttSettingsValidator, validate } from 'validators';
 
 const MqttSettingsForm: FC = () => {
-  const { loadData, saving, data, setData, origData, dirtyFlags, setDirtyFlags, blocker, saveData, errorMessage } =
-    useRest<MqttSettings>({
-      read: MqttApi.readMqttSettings,
-      update: MqttApi.updateMqttSettings
-    });
+  const {
+    loadData,
+    saving,
+    data,
+    updateDataValue,
+    origData,
+    dirtyFlags,
+    setDirtyFlags,
+    blocker,
+    saveData,
+    errorMessage
+  } = useRest2<MqttSettings>({
+    read: MqttApi.readMqttSettings,
+    update: MqttApi.updateMqttSettings
+  });
 
   const { LL } = useI18nContext();
 
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
 
-  const updateFormValue = updateValueDirty(origData, dirtyFlags, setDirtyFlags, setData);
+  const updateFormValue = updateValueDirty(origData, dirtyFlags, setDirtyFlags, updateDataValue);
 
   const content = () => {
     if (!data) {

interface/src/framework/mqtt/MqttStatusForm.tsx

@@ -4,6 +4,7 @@ import RefreshIcon from '@mui/icons-material/Refresh';
 import ReportIcon from '@mui/icons-material/Report';
 import SpeakerNotesOffIcon from '@mui/icons-material/SpeakerNotesOff';
 import { Avatar, Button, Divider, List, ListItem, ListItemAvatar, ListItemText, useTheme } from '@mui/material';
+import { useRequest } from 'alova';
 import type { Theme } from '@mui/material';
 import type { FC } from 'react';
 
@@ -12,7 +13,6 @@ import * as MqttApi from 'api/mqtt';
 import { ButtonRow, FormLoader, SectionContent } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 import { MqttDisconnectReason } from 'types';
-import { useRest } from 'utils';
 
 export const mqttStatusHighlight = ({ enabled, connected }: MqttStatus, theme: Theme) => {
   if (!enabled) {
@@ -38,8 +38,7 @@ export const mqttQueueHighlight = ({ mqtt_queued }: MqttStatus, theme: Theme) =>
 };
 
 const MqttStatusForm: FC = () => {
-  // TODO replace with   const { data: data, send: loadData, error } = useRequest(APApi.readAPStatus);
-  const { loadData, data, errorMessage } = useRest<MqttStatus>({ read: MqttApi.readMqttStatus });
+  const { data: data, send: loadData, error } = useRequest(MqttApi.readMqttStatus);
 
   const { LL } = useI18nContext();
 
@@ -80,7 +79,7 @@ const MqttStatusForm: FC = () => {
 
   const content = () => {
     if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={errorMessage} />;
+      return <FormLoader onRetry={loadData} errorMessage={error?.message} />;
     }
 
     const renderConnectionStatus = () => (