merging to sync - still need to fix system.ts

interface/src/api/ap.ts

@@ -1,14 +1,7 @@
-import { AXIOS, alovaInstance } from './endpoints';
-import type { AxiosPromise } from 'axios';
+import { alovaInstance } from './endpoints';
 
 import type { APSettings, APStatus } from 'types';
 
-export const readAPStatus = () => alovaInstance.Get<APStatus>('/apStatus');
-
-// TODO change APSettings AXIOS to Alova
-export function readAPSettings(): AxiosPromise<APSettings> {
-  return AXIOS.get('/apSettings');
-}
-export function updateAPSettings(apSettings: APSettings): AxiosPromise<APSettings> {
-  return AXIOS.post('/apSettings', apSettings);
-}
+export const readAPStatus = () => alovaInstance.Get<APStatus>('/rest/apStatus');
+export const readAPSettings = () => alovaInstance.Get<APSettings>('/rest/apSettings');
+export const updateAPSettings = (data: APSettings) => alovaInstance.Post<APSettings>('/rest/apSettings', data);

interface/src/api/endpoints.ts

@@ -18,6 +18,14 @@ export const EVENT_SOURCE_ROOT = 'http://' + host + '/es/';
 export const alovaInstance = createAlova({
   statesHook: ReactHook,
   timeout: 3000,
+  localCache: {
+    GET: {
+      mode: 'placeholder',
+      // expire: 60 * 10 * 1000
+      // see https://alova.js.org/learning/response-cache/#cache-replaceholder-mode
+      expire: 2000
+    }
+  },
   requestAdapter: xhrRequestAdapter(),
   beforeRequest(method) {
     if (localStorage.getItem(ACCESS_TOKEN)) {

interface/src/api/mqtt.ts

@@ -1,16 +1,6 @@
-import { AXIOS } from './endpoints';
-import type { AxiosPromise } from 'axios';
+import { alovaInstance } from './endpoints';
 import type { MqttSettings, MqttStatus } from 'types';
 
-// TODO move to alova
-export function readMqttStatus(): AxiosPromise<MqttStatus> {
-  return AXIOS.get('/mqttStatus');
-}
-
-export function readMqttSettings(): AxiosPromise<MqttSettings> {
-  return AXIOS.get('/mqttSettings');
-}
-
-export function updateMqttSettings(mqttSettings: MqttSettings): AxiosPromise<MqttSettings> {
-  return AXIOS.post('/mqttSettings', mqttSettings);
-}
+export const readMqttStatus = () => alovaInstance.Get<MqttStatus>('/rest/mqttStatus');
+export const readMqttSettings = () => alovaInstance.Get<MqttSettings>('/rest/mqttSettings');
+export const updateMqttSettings = (data: MqttSettings) => alovaInstance.Post<MqttSettings>('/rest/mqttSettings', data);

interface/src/api/network.ts

@@ -1,25 +1,11 @@
-import { AXIOS } from './endpoints';
-import type { AxiosPromise } from 'axios';
+import { alovaInstance } from './endpoints';
 
 import type { WiFiNetworkList, NetworkSettings, NetworkStatus } from 'types';
 
-// TODO move to alova
-export function readNetworkStatus(): AxiosPromise<NetworkStatus> {
-  return AXIOS.get('/networkStatus');
-}
-
-export function scanNetworks(): AxiosPromise<void> {
-  return AXIOS.get('/scanNetworks');
-}
-
-export function listNetworks(): AxiosPromise<WiFiNetworkList> {
-  return AXIOS.get('/listNetworks');
-}
-
-export function readNetworkSettings(): AxiosPromise<NetworkSettings> {
-  return AXIOS.get('/networkSettings');
-}
-
-export function updateNetworkSettings(wifiSettings: NetworkSettings): AxiosPromise<NetworkSettings> {
-  return AXIOS.post('/networkSettings', wifiSettings);
-}
+export const readNetworkStatus = () => alovaInstance.Get<NetworkStatus>('/rest/networkStatus');
+export const scanNetworks = () => alovaInstance.Get('/rest/scanNetworks');
+export const listNetworks = () => alovaInstance.Get<WiFiNetworkList>('/rest/listNetworks');
+export const readNetworkSettings = () =>
+  alovaInstance.Get<NetworkSettings>('/rest/networkSettings', { name: 'networkSettings' });
+export const updateNetworkSettings = (wifiSettings: NetworkSettings) =>
+  alovaInstance.Post<NetworkSettings>('/rest/networkSettings', wifiSettings);

interface/src/api/ntp.ts

@@ -1,20 +1,11 @@
-import { AXIOS } from './endpoints';
-import type { AxiosPromise } from 'axios';
+import { alovaInstance } from './endpoints';
 import type { NTPSettings, NTPStatus, Time } from 'types';
 
-// TODO move to Alova
-export function readNTPStatus(): AxiosPromise<NTPStatus> {
-  return AXIOS.get('/ntpStatus');
-}
+export const readNTPStatus = () => alovaInstance.Get<NTPStatus>('/rest/ntpStatus');
+export const readNTPSettings = () =>
+  alovaInstance.Get<NTPSettings>('/rest/ntpSettings', {
+    name: 'ntpSettings'
+  });
+export const updateNTPSettings = (data: NTPSettings) => alovaInstance.Post<NTPSettings>('/rest/ntpSettings', data);
 
-export function readNTPSettings(): AxiosPromise<NTPSettings> {
-  return AXIOS.get('/ntpSettings');
-}
-
-export function updateNTPSettings(ntpSettings: NTPSettings): AxiosPromise<NTPSettings> {
-  return AXIOS.post('/ntpSettings', ntpSettings);
-}
-
-export function updateTime(time: Time): AxiosPromise<Time> {
-  return AXIOS.post('/time', time);
-}
+export const updateTime = (data: Time) => alovaInstance.Post<Time>('/rest/time', data);

interface/src/api/system.ts

@@ -1,13 +1,20 @@
-import { AXIOS, AXIOS_BIN, startUploadFile } from './endpoints';
+import { AXIOS, AXIOS_BIN, alovaInstance, startUploadFile } from './endpoints';
 import type { FileUploadConfig } from './endpoints';
 import type { AxiosPromise } from 'axios';
 
 import type { OTASettings, SystemStatus, LogSettings, LogEntries } from 'types';
 
 // TODO move to Alova
-export function readSystemStatus(timeout?: number): AxiosPromise<SystemStatus> {
-  return AXIOS.get('/systemStatus', { timeout });
-}
+// TODO fix this next!
+
+export const readSystemStatus = (timeout?: number) =>
+  alovaInstance.Get<SystemStatus>('/rest/systemStatus', {
+    params: { timeout }
+  });
+
+// export function readSystemStatus(timeout?: number): AxiosPromise<SystemStatus> {
+//   return AXIOS.get('/systemStatus', { timeout });
+// }
 
 export function restart(): AxiosPromise<void> {
   return AXIOS.post('/restart');

interface/src/framework/ap/APSettingsForm.tsx

@@ -20,7 +20,7 @@ import {
 
 import { useI18nContext } from 'i18n/i18n-react';
 import { APProvisionMode } from 'types';
-import { numberValue, updateValueDirty, useRest } from 'utils';
+import { numberValue, updateValueDirty, useRest2 } from 'utils';
 
 import { createAPSettingsValidator, validate } from 'validators';
 
@@ -28,8 +28,18 @@ export const isAPEnabled = ({ provision_mode }: APSettings) =>
   provision_mode === APProvisionMode.AP_MODE_ALWAYS || provision_mode === APProvisionMode.AP_MODE_DISCONNECTED;
 
 const APSettingsForm: FC = () => {
-  const { loadData, saving, data, setData, origData, dirtyFlags, setDirtyFlags, blocker, saveData, errorMessage } =
-    useRest<APSettings>({
+  const {
+    loadData,
+    saving,
+    data,
+    updateDataValue,
+    origData,
+    dirtyFlags,
+    setDirtyFlags,
+    blocker,
+    saveData,
+    errorMessage
+  } = useRest2<APSettings>({
     read: APApi.readAPSettings,
     update: APApi.updateAPSettings
   });
@@ -38,7 +48,7 @@ const APSettingsForm: FC = () => {
 
   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/MqttSettingsForm.tsx

@@ -17,13 +17,23 @@ 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>({
+  const {
+    loadData,
+    saving,
+    data,
+    updateDataValue,
+    origData,
+    dirtyFlags,
+    setDirtyFlags,
+    blocker,
+    saveData,
+    errorMessage
+  } = useRest2<MqttSettings>({
     read: MqttApi.readMqttSettings,
     update: MqttApi.updateMqttSettings
   });
@@ -32,7 +42,7 @@ const MqttSettingsForm: FC = () => {
 
   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 = () => (

interface/src/framework/network/NetworkSettingsForm.tsx

@@ -18,6 +18,7 @@ import {
   InputAdornment,
   TextField
 } from '@mui/material';
+import { updateState, useRequest } from 'alova';
 import { useContext, useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import RestartMonitor from '../system/RestartMonitor';
@@ -40,7 +41,7 @@ import {
 } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 import * as EMSESP from 'project/api';
-import { numberValue, updateValueDirty, useRest } from 'utils';
+import { numberValue, updateValueDirty, useRest2 } from 'utils';
 
 import { validate } from 'validators';
 import { createNetworkSettingsValidator } from 'validators/network';
@@ -52,11 +53,12 @@ const WiFiSettingsForm: FC = () => {
 
   const [initialized, setInitialized] = useState(false);
   const [restarting, setRestarting] = useState(false);
+
   const {
     loadData,
     saving,
     data,
-    setData,
+    updateDataValue,
     origData,
     dirtyFlags,
     setDirtyFlags,
@@ -64,18 +66,22 @@ const WiFiSettingsForm: FC = () => {
     saveData,
     errorMessage,
     restartNeeded
-  } = useRest<NetworkSettings>({
+  } = useRest2<NetworkSettings>({
     read: NetworkApi.readNetworkSettings,
     update: NetworkApi.updateNetworkSettings
   });
 
+  const { send: restartCommand } = useRequest(EMSESP.restart(), {
+    immediate: false
+  });
+
   useEffect(() => {
     if (!initialized && data) {
       if (selectedNetwork) {
-        setData({
+        updateState('networkSettings', (current_data) => ({
           ssid: selectedNetwork.ssid,
           password: '',
-          hostname: data?.hostname,
+          hostname: current_data?.hostname,
           static_ip_config: false,
           enableIPv6: false,
           bandwidth20: false,
@@ -84,13 +90,13 @@ const WiFiSettingsForm: FC = () => {
           enableMDNS: true,
           enableCORS: false,
           CORSOrigin: '*'
-        });
+        }));
       }
       setInitialized(true);
     }
-  }, [initialized, setInitialized, data, setData, selectedNetwork]);
+  }, [initialized, setInitialized, data, selectedNetwork]);
 
-  const updateFormValue = updateValueDirty(origData, dirtyFlags, setDirtyFlags, setData);
+  const updateFormValue = updateValueDirty(origData, dirtyFlags, setDirtyFlags, updateDataValue);
 
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
 
@@ -112,12 +118,10 @@ const WiFiSettingsForm: FC = () => {
     };
 
     const restart = async () => {
-      try {
-        await EMSESP.restart();
+      await restartCommand().catch((error) => {
+        toast.error(error.message);
+      });
       setRestarting(true);
-      } catch (error) {
-        toast.error(LL.PROBLEM_UPDATING());
-      }
     };
 
     return (

interface/src/framework/network/NetworkStatusForm.tsx

@@ -6,6 +6,7 @@ import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
 import SettingsInputComponentIcon from '@mui/icons-material/SettingsInputComponent';
 import WifiIcon from '@mui/icons-material/Wifi';
 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';
 
@@ -15,7 +16,6 @@ import { ButtonRow, FormLoader, SectionContent } from 'components';
 
 import { useI18nContext } from 'i18n/i18n-react';
 import { NetworkConnectionStatus } from 'types';
-import { useRest } from 'utils';
 
 const isConnected = ({ status }: NetworkStatus) =>
   status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED ||
@@ -59,8 +59,7 @@ const IPs = (status: NetworkStatus) => {
 };
 
 const NetworkStatusForm: FC = () => {
-  // TODO replace with   const { data: data, send: loadData, error } = useRequest(APApi.readAPStatus);
-  const { loadData, data, errorMessage } = useRest<NetworkStatus>({ read: NetworkApi.readNetworkStatus });
+  const { data: data, send: loadData, error } = useRequest(NetworkApi.readNetworkStatus);
 
   const { LL } = useI18nContext();
 
@@ -91,7 +90,7 @@ const NetworkStatusForm: FC = () => {
 
   const content = () => {
     if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={errorMessage} />;
+      return <FormLoader onRetry={loadData} errorMessage={error?.message} />;
     }
 
     return (

interface/src/framework/ntp/NTPSettingsForm.tsx

@@ -1,6 +1,7 @@
 import CancelIcon from '@mui/icons-material/Cancel';
 import WarningIcon from '@mui/icons-material/Warning';
 import { Button, Checkbox, MenuItem } from '@mui/material';
+import { updateState } from 'alova';
 import { useState } from 'react';
 import { selectedTimeZone, timeZoneSelectItems, TIME_ZONES } from './TZ';
 import type { ValidateFieldsError } from 'async-validator';
@@ -17,20 +18,30 @@ import {
   BlockNavigation
 } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
-import { updateValueDirty, useRest } from 'utils';
+import { updateValueDirty, useRest2 } from 'utils';
 import { validate } from 'validators';
 import { NTP_SETTINGS_VALIDATOR } from 'validators/ntp';
 
 const NTPSettingsForm: FC = () => {
-  const { loadData, saving, data, setData, origData, dirtyFlags, setDirtyFlags, blocker, saveData, errorMessage } =
-    useRest<NTPSettings>({
+  const {
+    loadData,
+    saving,
+    data,
+    updateDataValue,
+    origData,
+    dirtyFlags,
+    setDirtyFlags,
+    blocker,
+    saveData,
+    errorMessage
+  } = useRest2<NTPSettings>({
     read: NTPApi.readNTPSettings,
     update: NTPApi.updateNTPSettings
   });
 
   const { LL } = useI18nContext();
 
-  const updateFormValue = updateValueDirty(origData, dirtyFlags, setDirtyFlags, setData);
+  const updateFormValue = updateValueDirty(origData, dirtyFlags, setDirtyFlags, updateDataValue);
 
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
 
@@ -51,11 +62,12 @@ const NTPSettingsForm: FC = () => {
 
     const changeTimeZone = (event: React.ChangeEvent<HTMLInputElement>) => {
       updateFormValue(event);
-      setData({
-        ...data,
+
+      updateState('ntpSettings', (settings) => ({
+        ...settings,
         tz_label: event.target.value,
         tz_format: TIME_ZONES[event.target.value]
-      });
+      }));
     };
 
     return (

interface/src/framework/ntp/NTPStatusForm.tsx

@@ -21,6 +21,7 @@ import {
   useTheme,
   Typography
 } from '@mui/material';
+import { useRequest } from 'alova';
 import { useContext, useState } from 'react';
 import { toast } from 'react-toastify';
 import type { Theme } from '@mui/material';
@@ -33,7 +34,7 @@ import { AuthenticatedContext } from 'contexts/authentication';
 
 import { useI18nContext } from 'i18n/i18n-react';
 import { NTPSyncStatus } from 'types';
-import { extractErrorMessage, formatDateTime, formatLocalDateTime, useRest } from 'utils';
+import { formatDateTime, formatLocalDateTime } from 'utils';
 
 export const isNtpActive = ({ status }: NTPStatus) => status === NTPSyncStatus.NTP_ACTIVE;
 export const isNtpEnabled = ({ status }: NTPStatus) => status !== NTPSyncStatus.NTP_DISABLED;
@@ -52,8 +53,7 @@ export const ntpStatusHighlight = ({ status }: NTPStatus, theme: Theme) => {
 };
 
 const NTPStatusForm: FC = () => {
-  // TODO replace with   const { data: data, send: loadData, error } = useRequest(APApi.readAPStatus);
-  const { loadData, data, errorMessage } = useRest<NTPStatus>({ read: NTPApi.readNTPStatus });
+  const { data: data, send: loadData, error } = useRequest(NTPApi.readNTPStatus);
 
   const [localTime, setLocalTime] = useState<string>('');
   const [settingTime, setSettingTime] = useState<boolean>(false);
@@ -62,6 +62,12 @@ const NTPStatusForm: FC = () => {
 
   const { LL } = useI18nContext();
 
+  const { send: updateTime } = useRequest((local_time) => NTPApi.updateTime(local_time), {
+    immediate: false
+  });
+
+  NTPApi.updateTime;
+
   const updateLocalTime = (event: React.ChangeEvent<HTMLInputElement>) => setLocalTime(event.target.value);
 
   const openSetTime = () => {
@@ -86,18 +92,19 @@ const NTPStatusForm: FC = () => {
 
   const configureTime = async () => {
     setProcessing(true);
-    try {
-      await NTPApi.updateTime({
-        local_time: formatLocalDateTime(new Date(localTime))
-      });
+
+    await updateTime({ local_time: formatLocalDateTime(new Date(localTime)) })
+      .then(async () => {
         toast.success(LL.TIME_SET());
         setSettingTime(false);
         await loadData();
-    } catch (error) {
-      toast.error(extractErrorMessage(error, LL.PROBLEM_UPDATING()));
-    } finally {
+      })
+      .catch(() => {
+        toast.error(LL.PROBLEM_UPDATING());
+      })
+      .finally(() => {
         setProcessing(false);
-    }
+      });
   };
 
   const renderSetTimeDialog = () => (
@@ -138,7 +145,7 @@ const NTPStatusForm: FC = () => {
 
   const content = () => {
     if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={errorMessage} />;
+      return <FormLoader onRetry={loadData} errorMessage={error?.message} />;
     }
 
     return (

interface/src/framework/system/SystemStatusForm.tsx

@@ -28,6 +28,7 @@ import {
   Typography
 } from '@mui/material';
 
+import { useRequest } from 'alova';
 import axios from 'axios';
 import { useContext, useState, useEffect } from 'react';
 import { toast } from 'react-toastify';
@@ -39,7 +40,7 @@ import * as SystemApi from 'api/system';
 import { ButtonRow, FormLoader, SectionContent, MessageBox } from 'components';
 import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
-import { extractErrorMessage, useRest } from 'utils';
+import { extractErrorMessage } from 'utils';
 
 export const VERSIONCHECK_ENDPOINT = 'https://api.github.com/repos/emsesp/EMS-ESP32/releases/latest';
 export const VERSIONCHECK_DEV_ENDPOINT = 'https://api.github.com/repos/emsesp/EMS-ESP32/releases/tags/latest';
@@ -53,8 +54,7 @@ const SystemStatusForm: FC = () => {
   const { LL } = useI18nContext();
   const [restarting, setRestarting] = useState<boolean>();
 
-  // TODO replace with   const { data: data, send: loadData, error } = useRequest(APApi.readAPStatus);
-  const { loadData, data, errorMessage } = useRest<SystemStatus>({ read: SystemApi.readSystemStatus });
+  const { data: data, send: loadData, error } = useRequest(SystemApi.readSystemStatus);
 
   const { me } = useContext(AuthenticatedContext);
   const [confirmRestart, setConfirmRestart] = useState<boolean>(false);

interface/src/project/DashboardDevices.tsx

@@ -64,16 +64,13 @@ const DashboardDevices: FC = () => {
     initialData: {
       connected: true,
       devices: []
-    },
-    force: true,
-    immediate: true
+    }
   });
 
   const { data: deviceData, send: readDeviceData } = useRequest((id) => EMSESP.readDeviceData(id), {
     initialData: {
       data: []
     },
-    force: true,
     immediate: false
   });
 

interface/src/project/DashboardSensors.tsx

@@ -39,9 +39,7 @@ const DashboardSensors: FC = () => {
       ts: [],
       as: [],
       analog_enabled: false
-    },
-    force: true,
-    immediate: true
+    }
   });
 
   const { send: writeTemperatureSensor } = useRequest((data) => EMSESP.writeTemperatureSensor(data), {

interface/src/project/DashboardStatus.tsx

@@ -64,7 +64,7 @@ const showQuality = (stat: Stat) => {
 };
 
 const DashboardStatus: FC = () => {
-  const { data: data, send: loadData, error } = useRequest(EMSESP.readStatus, { force: true });
+  const { data: data, send: loadData, error } = useRequest(EMSESP.readStatus);
 
   const { LL } = useI18nContext();
 

interface/src/project/SettingsApplication.tsx

@@ -74,7 +74,7 @@ const SettingsApplication: FC = () => {
   });
 
   onSuccessBoardProfile((event) => {
-    const response = event.data as unknown as Settings;
+    const response = event.data as Settings;
     updateDataValue({
       ...data,
       board_profile: response.board_profile,

interface/src/project/SettingsCustomization.tsx

@@ -67,8 +67,7 @@ const SettingsCustomization: FC = () => {
 
   const { send: readDeviceEntities, onSuccess: onSuccess } = useRequest((data) => EMSESP.readDeviceEntities(data), {
     initialData: [],
-    immediate: false,
-    force: true
+    immediate: false
   });
 
   const setOriginalSettings = (data: DeviceEntity[]) => {

mock-api/server.js

@@ -2002,10 +2002,11 @@ rest_server.get(FETCH_LOG_ENDPOINT, (req, res) => {
 rest_server.get(LOG_SETTINGS_ENDPOINT, (req, res) => {
   res.json(log_settings);
 });
+// TODO do we need to send back here a res.SendStatus(200) ?
 rest_server.post(LOG_SETTINGS_ENDPOINT, (req, res) => {
   log_settings = req.body;
   console.log(JSON.stringify(log_settings));
-  res.json(log_settings);
+  res.sendStatus(200);
 });
 
 // NETWORK
@@ -2018,7 +2019,8 @@ rest_server.get(NETWORK_SETTINGS_ENDPOINT, (req, res) => {
 rest_server.post(NETWORK_SETTINGS_ENDPOINT, (req, res) => {
   network_settings = req.body;
   console.log(JSON.stringify(network_settings));
-  res.json(network_settings);
+  // TODO do we need to send back here a res.SendStatus(200) ?
+  res.sendStatus(200);
 });
 rest_server.get(LIST_NETWORKS_ENDPOINT, (req, res) => {
   res.json(list_networks);
@@ -2032,12 +2034,13 @@ rest_server.get(AP_SETTINGS_ENDPOINT, (req, res) => {
   res.json(ap_settings);
 });
 rest_server.get(AP_STATUS_ENDPOINT, (req, res) => {
+  console.log('get apStatus', ap_status);
   res.json(ap_status);
 });
 rest_server.post(AP_SETTINGS_ENDPOINT, (req, res) => {
-  ap_status = req.body;
-  console.log(JSON.stringify(ap_settings));
-  res.json(ap_settings);
+  ap_settings = req.body;
+  console.log('post apSettings', ap_settings);
+  res.sendStatus(200);
 });
 
 // OTA
@@ -2048,6 +2051,7 @@ rest_server.post(OTA_SETTINGS_ENDPOINT, (req, res) => {
   ota_settings = req.body;
   console.log(JSON.stringify(ota_settings));
   res.json(ota_settings);
+  // TODO do we need to send back a   res.sendStatus(200); ?
 });
 
 // MQTT
@@ -2058,6 +2062,7 @@ rest_server.post(MQTT_SETTINGS_ENDPOINT, (req, res) => {
   mqtt_settings = req.body;
   console.log(JSON.stringify(mqtt_settings));
   res.json(mqtt_settings);
+  // TODO do we need to send back a   res.sendStatus(200); ?
 });
 rest_server.get(MQTT_STATUS_ENDPOINT, (req, res) => {
   res.json(mqtt_status);
@@ -2070,6 +2075,8 @@ rest_server.get(NTP_SETTINGS_ENDPOINT, (req, res) => {
 rest_server.post(NTP_SETTINGS_ENDPOINT, (req, res) => {
   ntp_settings = req.body;
   console.log(JSON.stringify(ntp_settings));
+  // TODO do we need to send back a   res.sendStatus(200); ?
+
   res.json(ntp_settings);
 });
 rest_server.get(NTP_STATUS_ENDPOINT, (req, res) => {
@@ -2089,6 +2096,8 @@ rest_server.get(SECURITY_SETTINGS_ENDPOINT, (req, res) => {
 rest_server.post(SECURITY_SETTINGS_ENDPOINT, (req, res) => {
   security_settings = req.body;
   console.log(JSON.stringify(security_settings));
+  // TODO do we need to send back a   res.sendStatus(200); ?
+
   res.json(security_settings);
 });
 rest_server.get(FEATURES_ENDPOINT, (req, res) => {
@@ -2109,6 +2118,8 @@ rest_server.post(UPLOAD_FILE_ENDPOINT, (req, res) => {
 });
 rest_server.post(SIGN_IN_ENDPOINT, (req, res) => {
   console.log('Signed in as ' + req.body.username);
+  // TODO do we need to send back a   res.sendStatus(200); ?
+
   res.json(signin);
 });
 rest_server.get(GENERATE_TOKEN_ENDPOINT, (req, res) => {
@@ -2127,8 +2138,8 @@ rest_server.get(EMSESP_SETTINGS_ENDPOINT, (req, res) => {
 rest_server.post(EMSESP_SETTINGS_ENDPOINT, (req, res) => {
   settings = req.body;
   console.log('Write settings: ' + JSON.stringify(settings));
-  // res.status(205).json(settings); // restart needed
-  res.status(200).json(settings); // no restart needed
+  // res.sendStatus(205); // restart needed
+  res.sendStatus(200); // no restart needed
 });
 rest_server.get(EMSESP_CORE_DATA_ENDPOINT, (req, res) => {
   console.log('send back core data...');