alova 3

interface/src/app/main/CustomEntities.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useState } from 'react';
-import type { FC } from 'react';
 import { useBlocker } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
@@ -30,13 +29,13 @@ import {
 } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 
-import * as EMSESP from './api';
 import SettingsCustomEntitiesDialog from './CustomEntitiesDialog';
+import { readCustomEntities, writeCustomEntities } from './api';
 import { DeviceValueTypeNames, DeviceValueUOM_s } from './types';
 import type { Entities, EntityItem } from './types';
 import { entityItemValidation } from './validators';
 
-const CustomEntities: FC = () => {
+const CustomEntities = () => {
   const { LL } = useI18nContext();
   const [numChanges, setNumChanges] = useState<number>(0);
   const blocker = useBlocker(numChanges !== 0);
@@ -50,13 +49,12 @@ const CustomEntities: FC = () => {
     data: entities,
     send: fetchEntities,
     error
-  } = useRequest(EMSESP.readCustomEntities, {
-    initialData: [],
-    force: true
+  } = useRequest(readCustomEntities, {
+    initialData: []
   });
 
   const { send: writeEntities } = useRequest(
-    (data: Entities) => EMSESP.writeCustomEntities(data),
+    (data: Entities) => writeCustomEntities(data),
     { immediate: false }
   );
 
@@ -182,7 +180,7 @@ const CustomEntities: FC = () => {
 
   const onDialogSave = (updatedItem: EntityItem) => {
     setDialogOpen(false);
-    updateState('entities', (data: EntityItem[]) => {
+    void updateState(readCustomEntities(), (data: EntityItem[]) => {
       const new_data = creating
         ? [
             ...data.filter((ei) => creating || ei.o_id !== updatedItem.o_id),

interface/src/app/main/CustomEntitiesDialog.tsx

@@ -291,7 +291,11 @@ const CustomEntitiesDialog = ({
                       fullWidth
                       margin="normal"
                       type="number"
-                      inputProps={{ min: '1', max: String(256 - editItem.offset), step: '1' }}
+                      inputProps={{
+                        min: '1',
+                        max: String(256 - editItem.offset),
+                        step: '1'
+                      }}
                     />
                   </Grid>
                 )}

interface/src/app/main/Customizations.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useState } from 'react';
-import type { FC } from 'react';
 import { useBlocker, useLocation } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
@@ -52,7 +51,7 @@ import {
 import { useI18nContext } from 'i18n/i18n-react';
 
 import * as EMSESP from './api';
-import SettingsCustomizationDialog from './CustomizationDialog';
+import SettingsCustomizationsDialog from './CustomizationsDialog';
 import EntityMaskToggle from './EntityMaskToggle';
 import OptionIcon from './OptionIcon';
 import { DeviceEntityMask } from './types';
@@ -60,7 +59,7 @@ import type { DeviceEntity, DeviceShort } from './types';
 
 export const APIURL = window.location.origin + '/api/';
 
-const Customization: FC = () => {
+const Customizations = () => {
   const { LL } = useI18nContext();
   const [numChanges, setNumChanges] = useState<number>(0);
   const blocker = useBlocker(numChanges !== 0);
@@ -106,13 +105,15 @@ const Customization: FC = () => {
     }
   );
 
-  const { send: readDeviceEntities, onSuccess: onSuccess } = useRequest(
+  const { send: readDeviceEntities } = useRequest(
     (data: number) => EMSESP.readDeviceEntities(data),
     {
       initialData: [],
       immediate: false
     }
-  );
+  ).onSuccess((event) => {
+    setOriginalSettings(event.data);
+  });
 
   const setOriginalSettings = (data: DeviceEntity[]) => {
     setDeviceEntities(
@@ -126,10 +127,6 @@ const Customization: FC = () => {
     );
   };
 
-  onSuccess((event) => {
-    setOriginalSettings(event.data);
-  });
-
   const { send: restartCommand } = useRequest(SystemApi.restart(), {
     immediate: false
   });
@@ -727,7 +724,7 @@ const Customization: FC = () => {
       {blocker ? <BlockNavigation blocker={blocker} /> : null}
       {restarting ? <RestartMonitor /> : renderContent()}
       {selectedDeviceEntity && (
-        <SettingsCustomizationDialog
+        <SettingsCustomizationsDialog
           open={dialogOpen}
           onClose={onDialogClose}
           onSave={onDialogSave}
@@ -738,4 +735,4 @@ const Customization: FC = () => {
   );
 };
 
-export default Customization;
+export default Customizations;

interface/src/app/main/CustomizationsDialog.tsx

@@ -23,19 +23,19 @@ import EntityMaskToggle from './EntityMaskToggle';
 import { DeviceEntityMask } from './types';
 import type { DeviceEntity } from './types';
 
-interface SettingsCustomizationDialogProps {
+interface SettingsCustomizationsDialogProps {
   open: boolean;
   onClose: () => void;
   onSave: (di: DeviceEntity) => void;
   selectedItem: DeviceEntity;
 }
 
-const CustomizationDialog = ({
+const CustomizationsDialog = ({
   open,
   onClose,
   onSave,
   selectedItem
-}: SettingsCustomizationDialogProps) => {
+}: SettingsCustomizationsDialogProps) => {
   const { LL } = useI18nContext();
   const [editItem, setEditItem] = useState<DeviceEntity>(selectedItem);
   const [error, setError] = useState<boolean>(false);
@@ -175,4 +175,4 @@ const CustomizationDialog = ({
   );
 };
 
-export default CustomizationDialog;
+export default CustomizationsDialog;

interface/src/app/main/DeviceIcon.tsx

@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import { AiOutlineAlert, AiOutlineControl, AiOutlineGateway } from 'react-icons/ai';
 import { CgSmartHomeBoiler } from 'react-icons/cg';
 import { FaSolarPanel } from 'react-icons/fa';
@@ -16,11 +15,7 @@ import PlaylistAddIcon from '@mui/icons-material/PlaylistAdd';
 
 import { DeviceType } from './types';
 
-interface DeviceIconProps {
-  type_id: number;
-}
-
-const DeviceIcon: FC<DeviceIconProps> = ({ type_id }) => {
+export default function DeviceIcon({ type_id }) {
   switch (type_id as DeviceType) {
     case DeviceType.TEMPERATURESENSOR:
     case DeviceType.ANALOGSENSOR:
@@ -60,6 +55,4 @@ const DeviceIcon: FC<DeviceIconProps> = ({ type_id }) => {
     default:
       return null;
   }
-};
-
-export default DeviceIcon;
+}

interface/src/app/main/Devices.tsx

@@ -5,7 +5,6 @@ import {
   useLayoutEffect,
   useState
 } from 'react';
-import type { FC } from 'react';
 import { IconContext } from 'react-icons';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
@@ -70,7 +69,7 @@ import { DeviceEntityMask, DeviceType, DeviceValueUOM_s } from './types';
 import type { Device, DeviceValue } from './types';
 import { deviceValueItemValidation } from './validators';
 
-const Devices: FC = () => {
+const Devices = () => {
   const { LL } = useI18nContext();
   const { me } = useContext(AuthenticatedContext);
 

interface/src/app/main/Help.tsx

@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import { toast } from 'react-toastify';
 
 import CommentIcon from '@mui/icons-material/CommentTwoTone';
@@ -21,27 +20,19 @@ import {
 import * as SystemApi from 'api/system';
 
 import * as EMSESP from 'app/main/api';
-import { useAutoRequest, useRequest } from 'alova/client';
+import { useRequest } from 'alova/client';
 import { SectionContent, useLayoutTitle } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 
 import type { APIcall } from './types';
 
-const Help: FC = () => {
+const Help = () => {
   const { LL } = useI18nContext();
   useLayoutTitle(LL.HELP_OF(''));
 
-  const { send: getAPI, onSuccess: onGetAPI } = useRequest(
-    (data: APIcall) => EMSESP.API(data),
-    {
-      immediate: false
-    }
-  );
-
-  // TODO check useAutoRequest - https://alova.js.org/tutorial/client/strategy/use-auto-request/#basic-usage
-  const { data, loading } = useAutoRequest(SystemApi.readSystemStatus);
-
-  onGetAPI((event) => {
+  const { send: getAPI } = useRequest((data: APIcall) => EMSESP.API(data), {
+    immediate: false
+  }).onSuccess((event) => {
     const anchor = document.createElement('a');
     anchor.href = URL.createObjectURL(
       new Blob([JSON.stringify(event.data, null, 2)], {
@@ -56,14 +47,16 @@ const Help: FC = () => {
     toast.info(LL.DOWNLOAD_SUCCESSFUL());
   });
 
+  const { data, loading } = useRequest(SystemApi.readSystemStatus);
+
   const callAPI = async (device: string, entity: string) => {
     await getAPI({ device, entity, id: 0 }).catch((error: Error) => {
       toast.error(error.message);
     });
   };
 
+  // TODO remove debug testing useRequest preact hook
   console.log('loading: ' + loading + ' data2: ' + data);
-
   if (loading) {
     return <div>Loading...</div>;
   }

interface/src/app/main/Modules.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useState } from 'react';
-import type { FC } from 'react';
 import { useBlocker } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
@@ -8,8 +7,6 @@ import CircleIcon from '@mui/icons-material/Circle';
 import WarningIcon from '@mui/icons-material/Warning';
 import { Box, Button, Typography } from '@mui/material';
 
-import { alovaInstance } from 'api/endpoints';
-
 import {
   Body,
   Cell,
@@ -30,11 +27,11 @@ import {
 } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 
-import * as EMSESP from './api';
 import ModulesDialog from './ModulesDialog';
+import { readModules, writeModules } from './api';
 import type { ModuleItem, Modules } from './types';
 
-const Modules: FC = () => {
+const Modules = () => {
   const { LL } = useI18nContext();
   const [numChanges, setNumChanges] = useState<number>(0);
   const blocker = useBlocker(numChanges !== 0);
@@ -46,13 +43,12 @@ const Modules: FC = () => {
     data: modules,
     send: fetchModules,
     error
-  } = useRequest(EMSESP.readModules, {
+  } = useRequest(readModules, {
     initialData: []
   });
 
-  const { send: writeModules } = useRequest(
-    (data: { key: string; enabled: boolean; license: string }) =>
-      EMSESP.writeModules(data),
+  const { send: updateModules } = useRequest(
+    (data: { key: string; enabled: boolean; license: string }) => writeModules(data),
     {
       immediate: false
     }
@@ -124,23 +120,18 @@ const Modules: FC = () => {
     return mi.enabled !== mi.o_enabled || mi.license !== mi.o_license;
   }
 
-  // TODO example of how to use updateState
-  // TODO see https://alova.js.org/api/states/#updatestate
   const updateModuleItem = (updatedItem: ModuleItem) => {
-    updateState<ModuleItem[]>(
-      [alovaInstance.snapshots.match('modules', true)] as any,
-      (data: ModuleItem[]) => {
-        const new_data = data.map((mi) =>
-          mi.id === updatedItem.id ? { ...mi, ...updatedItem } : mi
-        );
-        setNumChanges(new_data.filter((mi) => hasModulesChanged(mi)).length);
-        return new_data;
-      }
-    );
+    void updateState(readModules(), (data: ModuleItem[]) => {
+      const new_data = data.map((mi) =>
+        mi.id === updatedItem.id ? { ...mi, ...updatedItem } : mi
+      );
+      setNumChanges(new_data.filter((mi) => hasModulesChanged(mi)).length);
+      return new_data;
+    });
   };
 
   const saveModules = async () => {
-    await writeModules({
+    await updateModules({
       modules: modules.map((condensed_mi) => ({
         key: condensed_mi.key,
         enabled: condensed_mi.enabled,

interface/src/app/main/OptionIcon.tsx

@@ -1,5 +1,3 @@
-import type { FC } from 'react';
-
 import CommentsDisabledOutlinedIcon from '@mui/icons-material/CommentsDisabledOutlined';
 import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
@@ -32,18 +30,11 @@ const OPTION_ICONS: {
   favorite: [StarIcon, StarOutlineIcon]
 };
 
-interface OptionIconProps {
-  type: OptionType;
-  isSet: boolean;
-}
-
-const OptionIcon: FC<OptionIconProps> = ({ type, isSet }) => {
+export default function OptionIcon({ type, isSet }) {
   const Icon = OPTION_ICONS[type][isSet ? 0 : 1];
   return isSet ? (
     <Icon color="primary" sx={{ fontSize: 16, verticalAlign: 'middle' }} />
   ) : (
     <Icon sx={{ fontSize: 16, verticalAlign: 'middle' }} />
   );
-};
-
-export default OptionIcon;
+}

interface/src/app/main/Scheduler.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useState } from 'react';
-import type { FC } from 'react';
 import { useBlocker } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
@@ -29,13 +28,13 @@ import {
 } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 
-import * as EMSESP from './api';
 import SettingsSchedulerDialog from './SchedulerDialog';
+import { readSchedule, writeSchedule } from './api';
 import { ScheduleFlag } from './types';
 import type { Schedule, ScheduleItem } from './types';
 import { schedulerItemValidation } from './validators';
 
-const Scheduler: FC = () => {
+const Scheduler = () => {
   const { LL, locale } = useI18nContext();
   const [numChanges, setNumChanges] = useState<number>(0);
   const blocker = useBlocker(numChanges !== 0);
@@ -48,13 +47,12 @@ const Scheduler: FC = () => {
     data: schedule,
     send: fetchSchedule,
     error
-  } = useRequest(EMSESP.readSchedule, {
-    initialData: [],
-    force: true
+  } = useRequest(readSchedule, {
+    initialData: []
   });
 
-  const { send: writeSchedule } = useRequest(
-    (data: Schedule) => EMSESP.writeSchedule(data),
+  const { send: updateSchedule } = useRequest(
+    (data: Schedule) => writeSchedule(data),
     {
       immediate: false
     }
@@ -131,7 +129,7 @@ const Scheduler: FC = () => {
   });
 
   const saveSchedule = async () => {
-    await writeSchedule({
+    await updateSchedule({
       schedule: schedule
         .filter((si) => !si.deleted)
         .map((condensed_si) => ({
@@ -177,7 +175,7 @@ const Scheduler: FC = () => {
 
   const onDialogSave = (updatedItem: ScheduleItem) => {
     setDialogOpen(false);
-    updateState('schedule', (data: ScheduleItem[]) => {
+    void updateState(readSchedule(), (data: ScheduleItem[]) => {
       const new_data = creating
         ? [
             ...data.filter((si) => creating || si.o_id !== updatedItem.o_id),

interface/src/app/main/SchedulerDialog.tsx

@@ -208,7 +208,7 @@ const SchedulerDialog = ({
                 scheduleType === ScheduleFlag.SCHEDULE_ONCHANGE ? 'primary' : 'grey'
               }
             >
-              {LL.ONCHANGE(0)}
+              {LL.ONCHANGE()}
             </Typography>
           </ToggleButton>
           <ToggleButton value={ScheduleFlag.SCHEDULE_CONDITION}>
@@ -218,7 +218,7 @@ const SchedulerDialog = ({
                 scheduleType === ScheduleFlag.SCHEDULE_CONDITION ? 'primary' : 'grey'
               }
             >
-              {LL.CONDITION(0)}
+              {LL.CONDITION()}
             </Typography>
           </ToggleButton>
           <ToggleButton value={ScheduleFlag.SCHEDULE_IMMEDIATE}>
@@ -228,7 +228,7 @@ const SchedulerDialog = ({
                 scheduleType === ScheduleFlag.SCHEDULE_IMMEDIATE ? 'primary' : 'grey'
               }
             >
-              {LL.IMMEDIATE(0)}
+              {LL.IMMEDIATE()}
             </Typography>
           </ToggleButton>
         </ToggleButtonGroup>
@@ -282,7 +282,7 @@ const SchedulerDialog = ({
             </Grid>
             <Grid container>
               {scheduleType === ScheduleFlag.SCHEDULE_DAY ||
-                scheduleType === ScheduleFlag.SCHEDULE_TIMER ? (
+              scheduleType === ScheduleFlag.SCHEDULE_TIMER ? (
                 <>
                   <TextField
                     name="time"
@@ -311,10 +311,10 @@ const SchedulerDialog = ({
                   name="time"
                   label={
                     scheduleType === ScheduleFlag.SCHEDULE_CONDITION
-                      ? LL.CONDITION(1)
+                      ? LL.CONDITION()
                       : scheduleType === ScheduleFlag.SCHEDULE_ONCHANGE
-                        ? LL.ONCHANGE(1)
-                        : LL.IMMEDIATE(1)
+                        ? LL.ONCHANGE()
+                        : LL.IMMEDIATE()
                   }
                   multiline
                   fullWidth

interface/src/app/main/Sensors.tsx

@@ -1,5 +1,4 @@
 import { useContext, useEffect, useState } from 'react';
-import type { FC } from 'react';
 import { toast } from 'react-toastify';
 
 import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
@@ -46,7 +45,7 @@ import {
   temperatureSensorItemValidation
 } from './validators';
 
-const Sensors: FC = () => {
+const Sensors = () => {
   const { LL } = useI18nContext();
   const { me } = useContext(AuthenticatedContext);
 

interface/src/app/main/api.ts

@@ -88,7 +88,6 @@ export const writeDeviceName = (data: { id: number; name: string }) =>
 // SettingsScheduler
 export const readSchedule = () =>
   alovaInstance.Get<ScheduleItem[]>('/rest/schedule', {
-    name: 'schedule',
     transform(data) {
       return (data as Schedule).schedule.map((si: ScheduleItem) => ({
         ...si,
@@ -109,7 +108,6 @@ export const writeSchedule = (data: Schedule) =>
 // Modules
 export const readModules = () =>
   alovaInstance.Get<ModuleItem[]>('/rest/modules', {
-    name: 'modules',
     transform(data) {
       return (data as Modules).modules.map((mi: ModuleItem) => ({
         ...mi,
@@ -127,7 +125,6 @@ export const writeModules = (data: {
 // SettingsEntities
 export const readCustomEntities = () =>
   alovaInstance.Get<EntityItem[]>('/rest/customEntities', {
-    name: 'entities',
     transform(data) {
       return (data as Entities).entities.map((ei: EntityItem) => ({
         ...ei,

interface/src/app/settings/APSettings.tsx

@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import type { FC } from 'react';
 
 import CancelIcon from '@mui/icons-material/Cancel';
 import WarningIcon from '@mui/icons-material/Warning';
@@ -29,7 +28,7 @@ export const isAPEnabled = ({ provision_mode }: APSettingsType) =>
   provision_mode === APProvisionMode.AP_MODE_ALWAYS ||
   provision_mode === APProvisionMode.AP_MODE_DISCONNECTED;
 
-const APSettings: FC = () => {
+const APSettings = () => {
   const {
     loadData,
     saving,

interface/src/app/settings/ApplicationSettings.tsx

@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import type { FC } from 'react';
 import { toast } from 'react-toastify';
 
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -49,9 +48,9 @@ export function boardProfileSelectItems() {
   ));
 }
 
-const ApplicationSettings: FC = () => {
+const ApplicationSettings = () => {
   const { data: hardwareData } = useRequest(SystemApi.readHardwareStatus, {
-    force: true
+    initialData: { psram: false }
   });
 
   const {
@@ -84,19 +83,12 @@ const ApplicationSettings: FC = () => {
 
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
 
-  const {
-    loading: processingBoard,
-    send: readBoardProfile,
-    onSuccess: onSuccessBoardProfile
-  } = useRequest((boardProfile: string) => EMSESP.getBoardProfile(boardProfile), {
-    immediate: false
-  });
-
-  const { send: restartCommand } = useRequest(SystemApi.restart(), {
-    immediate: false
-  });
-
-  onSuccessBoardProfile((event) => {
+  const { loading: processingBoard, send: readBoardProfile } = useRequest(
+    (boardProfile: string) => EMSESP.getBoardProfile(boardProfile),
+    {
+      immediate: false
+    }
+  ).onSuccess((event) => {
     const response = event.data as Settings;
     updateDataValue({
       ...data,
@@ -113,6 +105,10 @@ const ApplicationSettings: FC = () => {
     });
   });
 
+  const { send: restartCommand } = useRequest(SystemApi.restart(), {
+    immediate: false
+  });
+
   const updateBoardProfile = async (board_profile: string) => {
     await readBoardProfile(board_profile).catch((error: Error) => {
       toast.error(error.message);

interface/src/app/settings/MqttSettings.tsx

@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import type { FC } from 'react';
 
 import CancelIcon from '@mui/icons-material/Cancel';
 import WarningIcon from '@mui/icons-material/Warning';
@@ -31,7 +30,7 @@ import type { MqttSettingsType } from 'types';
 import { numberValue, updateValueDirty, useRest } from 'utils';
 import { createMqttSettingsValidator, validate } from 'validators';
 
-const MqttSettings: FC = () => {
+const MqttSettings = () => {
   const {
     loadData,
     saving,

interface/src/app/settings/NTPSettings.tsx

@@ -1,11 +1,11 @@
 import { useState } from 'react';
-import type { FC } from 'react';
 
 import CancelIcon from '@mui/icons-material/Cancel';
 import WarningIcon from '@mui/icons-material/Warning';
 import { Button, Checkbox, MenuItem } from '@mui/material';
 
 import * as NTPApi from 'api/ntp';
+import { readNTPSettings } from 'api/ntp';
 
 import { updateState } from 'alova/client';
 import type { ValidateFieldsError } from 'async-validator';
@@ -26,7 +26,7 @@ import { NTP_SETTINGS_VALIDATOR } from 'validators/ntp';
 
 import { TIME_ZONES, selectedTimeZone, timeZoneSelectItems } from './TZ';
 
-const NTPSettings: FC = () => {
+const NTPSettings = () => {
   const {
     loadData,
     saving,
@@ -72,9 +72,7 @@ const NTPSettings: FC = () => {
 
     const changeTimeZone = (event: React.ChangeEvent<HTMLInputElement>) => {
       updateFormValue(event);
-
-      // TODO fix
-      updateState('ntpSettings', (settings: NTPSettingsType) => ({
+      void updateState(readNTPSettings(), (settings: NTPSettingsType) => ({
         ...settings,
         tz_label: event.target.value,
         tz_format: TIME_ZONES[event.target.value]

interface/src/app/settings/Settings.tsx

@@ -1,4 +1,4 @@
-import { type FC, useState } from 'react';
+import { useState } from 'react';
 
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -29,7 +29,7 @@ import { SectionContent, useLayoutTitle } from 'components';
 import ListMenuItem from 'components/layout/ListMenuItem';
 import { useI18nContext } from 'i18n/i18n-react';
 
-const Settings: FC = () => {
+const Settings = () => {
   const { LL } = useI18nContext();
   useLayoutTitle(LL.SETTINGS(0));
 

interface/src/app/settings/UploadDownload.tsx

@@ -1,4 +1,4 @@
-import { type FC, useState } from 'react';
+import { useState } from 'react';
 import { toast } from 'react-toastify';
 
 import DownloadIcon from '@mui/icons-material/GetApp';
@@ -19,61 +19,59 @@ import { useI18nContext } from 'i18n/i18n-react';
 
 import RestartMonitor from '../status/RestartMonitor';
 
-const UploadDownload: FC = () => {
+const UploadDownload = () => {
   const { LL } = useI18nContext();
   const [restarting, setRestarting] = useState<boolean>();
   const [md5, setMd5] = useState<string>();
 
-  const { send: getSettings, onSuccess: onSuccessGetSettings } = useRequest(
-    EMSESP.getSettings(),
-    {
-      immediate: false
-    }
-  );
-  const { send: getCustomizations, onSuccess: onSuccessGetCustomizations } =
-    useRequest(EMSESP.getCustomizations(), {
-      immediate: false
-    });
-  const { send: getEntities, onSuccess: onSuccessGetEntities } = useRequest(
-    EMSESP.getEntities(),
-    {
-      immediate: false
-    }
-  );
-  const { send: getSchedule, onSuccess: onSuccessGetSchedule } = useRequest(
-    EMSESP.getSchedule(),
-    {
-      immediate: false
-    }
-  );
-  const { send: getAPI, onSuccess: onGetAPI } = useRequest(
-    (data: APIcall) => EMSESP.API(data),
-    {
-      immediate: false
-    }
-  );
+  const { send: getSettings } = useRequest(EMSESP.getSettings(), {
+    immediate: false
+  }).onSuccess((event) => {
+    saveFile(event.data, 'settings.json');
+  });
+
+  const { send: getCustomizations } = useRequest(EMSESP.getCustomizations(), {
+    immediate: false
+  }).onSuccess((event) => {
+    saveFile(event.data, 'customizations.json');
+  });
+
+  const { send: getEntities } = useRequest(EMSESP.getEntities(), {
+    immediate: false
+  }).onSuccess((event) => {
+    saveFile(event.data, 'entities.json');
+  });
+
+  const { send: getSchedule } = useRequest(EMSESP.getSchedule(), {
+    immediate: false
+  }).onSuccess((event) => {
+    saveFile(event.data, 'schedule.json');
+  });
+
+  const { send: getAPI } = useRequest((data: APIcall) => EMSESP.API(data), {
+    immediate: false
+  }).onSuccess((event) => {
+    saveFile(
+      event.data,
+      String(event.args[0].device) + '_' + String(event.args[0].entity) + '.txt'
+    );
+  });
 
   const {
     data: data,
     send: loadData,
     error
-  } = useRequest(SystemApi.readHardwareStatus, { force: true });
+  } = useRequest(SystemApi.readHardwareStatus);
 
-  const { data: latestVersion } = useRequest(SystemApi.getStableVersion, {
-    immediate: true,
-    force: true
-  });
-
-  const { data: latestDevVersion } = useRequest(SystemApi.getDevVersion, {
-    immediate: true,
-    force: true
-  });
+  // called immediately to get the latest version, on page load
+  const { data: latestVersion } = useRequest(SystemApi.getStableVersion);
+  const { data: latestDevVersion } = useRequest(SystemApi.getDevVersion);
 
   const STABLE_URL = 'https://github.com/emsesp/EMS-ESP32/releases/download/';
-  const DEV_URL = 'https://github.com/emsesp/EMS-ESP32/releases/download/latest/';
-
   const STABLE_RELNOTES_URL =
     'https://github.com/emsesp/EMS-ESP32/blob/main/CHANGELOG.md';
+
+  const DEV_URL = 'https://github.com/emsesp/EMS-ESP32/releases/download/latest/';
   const DEV_RELNOTES_URL =
     'https://github.com/emsesp/EMS-ESP32/blob/dev/CHANGELOG_LATEST.md';
 
@@ -95,16 +93,11 @@ const UploadDownload: FC = () => {
     loading: isUploading,
     uploading: progress,
     send: sendUpload,
-    onSuccess: onSuccessUpload,
     abort: cancelUpload
   } = useRequest(SystemApi.uploadFile, {
-    immediate: false,
-    force: true
-  });
-
-  onSuccessUpload(({ data }) => {
+    immediate: false
+  }).onSuccess(({ data }) => {
     if (data) {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       setMd5(data.md5);
       toast.success(LL.UPLOAD() + ' MD5 ' + LL.SUCCESSFUL());
     } else {
@@ -137,22 +130,6 @@ const UploadDownload: FC = () => {
     toast.info(LL.DOWNLOAD_SUCCESSFUL());
   };
 
-  onSuccessGetSettings((event) => {
-    saveFile(event.data, 'settings.json');
-  });
-  onSuccessGetCustomizations((event) => {
-    saveFile(event.data, 'customizations.json');
-  });
-  onSuccessGetEntities((event) => {
-    saveFile(event.data, 'entities.json');
-  });
-  onSuccessGetSchedule((event) => {
-    saveFile(event.data, 'schedule.json');
-  });
-  onGetAPI((event) => {
-    saveFile(event.data, event.args[0].device + '_' + event.args[0].entity + '.txt');
-  });
-
   const downloadSettings = async () => {
     await getSettings().catch((error: Error) => {
       toast.error(error.message);
@@ -211,11 +188,7 @@ const UploadDownload: FC = () => {
               <Link
                 target="_blank"
                 href={
-                  STABLE_URL +
-                  'v' +
-                  latestVersion +
-                  '/' +
-                  getBinURL(latestVersion as string)
+                  STABLE_URL + 'v' + latestVersion + '/' + getBinURL(latestVersion)
                 }
                 color="primary"
               >
@@ -236,7 +209,7 @@ const UploadDownload: FC = () => {
               )&nbsp;(
               <Link
                 target="_blank"
-                href={DEV_URL + getBinURL(latestDevVersion as string)}
+                href={DEV_URL + getBinURL(latestDevVersion)}
                 color="primary"
               >
                 {LL.DOWNLOAD(1)}

interface/src/app/settings/network/Network.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useState } from 'react';
-import type { FC } from 'react';
 import { Navigate, Route, Routes, useNavigate } from 'react-router-dom';
 
 import { Tab } from '@mui/material';
@@ -12,7 +11,7 @@ import NetworkSettings from './NetworkSettings';
 import { WiFiConnectionContext } from './WiFiConnectionContext';
 import WiFiNetworkScanner from './WiFiNetworkScanner';
 
-const Network: FC = () => {
+const Network = () => {
   const { LL } = useI18nContext();
   useLayoutTitle(LL.SETTINGS_OF(LL.NETWORK(0)));
 

interface/src/app/settings/network/NetworkSettings.tsx

@@ -1,5 +1,4 @@
 import { useContext, useEffect, useState } from 'react';
-import type { FC } from 'react';
 import { toast } from 'react-toastify';
 
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -48,7 +47,7 @@ import RestartMonitor from '../../status/RestartMonitor';
 import { WiFiConnectionContext } from './WiFiConnectionContext';
 import { isNetworkOpen, networkSecurityMode } from './WiFiNetworkSelector';
 
-const NetworkSettings: FC = () => {
+const NetworkSettings = () => {
   const { LL } = useI18nContext();
 
   const { selectedNetwork, deselectNetwork } = useContext(WiFiConnectionContext);
@@ -80,19 +79,22 @@ const NetworkSettings: FC = () => {
   useEffect(() => {
     if (!initialized && data) {
       if (selectedNetwork) {
-        updateState('networkSettings', (current_data: NetworkSettingsType) => ({
-          ssid: selectedNetwork.ssid,
-          bssid: selectedNetwork.bssid,
-          password: current_data ? current_data.password : '',
-          hostname: current_data?.hostname,
-          static_ip_config: false,
-          bandwidth20: false,
-          tx_power: 0,
-          nosleep: false,
-          enableMDNS: true,
-          enableCORS: false,
-          CORSOrigin: '*'
-        }));
+        void updateState(
+          NetworkApi.readNetworkSettings(),
+          (current_data: NetworkSettingsType) => ({
+            ssid: selectedNetwork.ssid,
+            bssid: selectedNetwork.bssid,
+            password: current_data ? current_data.password : '',
+            hostname: current_data?.hostname,
+            static_ip_config: false,
+            bandwidth20: false,
+            tx_power: 0,
+            nosleep: false,
+            enableMDNS: true,
+            enableCORS: false,
+            CORSOrigin: '*'
+          })
+        );
       }
       setInitialized(true);
     }

interface/src/app/settings/network/WiFiNetworkScanner.tsx

@@ -1,5 +1,4 @@
 import { useRef, useState } from 'react';
-import type { FC } from 'react';
 
 import PermScanWifiIcon from '@mui/icons-material/PermScanWifi';
 import { Button } from '@mui/material';
@@ -15,23 +14,28 @@ import WiFiNetworkSelector from './WiFiNetworkSelector';
 const NUM_POLLS = 10;
 const POLLING_FREQUENCY = 1000;
 
-const WiFiNetworkScanner: FC = () => {
+const WiFiNetworkScanner = () => {
   const pollCount = useRef(0);
   const { LL } = useI18nContext();
   const [errorMessage, setErrorMessage] = useState<string>();
 
-  const { send: scanNetworks, onComplete: onCompleteScanNetworks } = useRequest(
-    NetworkApi.scanNetworks
-  ); // is called on page load to start network scan
-  const {
-    data: networkList,
-    send: getNetworkList,
-    onSuccess: onSuccessNetworkList
-  } = useRequest(NetworkApi.listNetworks, {
-    immediate: false
-  });
+  // is called on page load to start network scan
+  const { send: scanNetworks } = useRequest(NetworkApi.scanNetworks).onComplete(
+    () => {
+      pollCount.current = 0;
+      setErrorMessage(undefined);
+      void updateState(NetworkApi.listNetworks(), () => undefined);
+      void getNetworkList();
+    }
+  );
 
-  onSuccessNetworkList((event) => {
+  const { data: networkList, send: getNetworkList } = useRequest(
+    NetworkApi.listNetworks,
+    {
+      immediate: false
+    }
+  ).onSuccess((event) => {
+    // is called when network scan is completed
     if (!event.data) {
       const completedPollCount = pollCount.current + 1;
       if (completedPollCount < NUM_POLLS) {
@@ -44,14 +48,6 @@ const WiFiNetworkScanner: FC = () => {
     }
   });
 
-  onCompleteScanNetworks(() => {
-    pollCount.current = 0;
-    setErrorMessage(undefined);
-    // TODO fix
-    updateState('listNetworks', () => undefined);
-    void getNetworkList();
-  });
-
   const renderNetworkScanner = () => {
     if (!networkList) {
       return (

interface/src/app/settings/network/WiFiNetworkSelector.tsx

@@ -1,5 +1,4 @@
 import { useContext } from 'react';
-import type { FC } from 'react';
 
 import LockIcon from '@mui/icons-material/Lock';
 import LockOpenIcon from '@mui/icons-material/LockOpen';
@@ -18,15 +17,11 @@ import type { Theme } from '@mui/material';
 
 import { MessageBox } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
-import type { WiFiNetwork, WiFiNetworkList } from 'types';
+import type { WiFiNetwork } from 'types';
 import { WiFiEncryptionType } from 'types';
 
 import { WiFiConnectionContext } from './WiFiConnectionContext';
 
-interface WiFiNetworkSelectorProps {
-  networkList: WiFiNetworkList;
-}
-
 export const isNetworkOpen = ({ encryption_type }: WiFiNetwork) =>
   encryption_type === WiFiEncryptionType.WIFI_AUTH_OPEN;
 
@@ -62,7 +57,7 @@ const networkQualityHighlight = ({ rssi }: WiFiNetwork, theme: Theme) => {
   return theme.palette.success.main;
 };
 
-const WiFiNetworkSelector: FC<WiFiNetworkSelectorProps> = ({ networkList }) => {
+function WiFiNetworkSelector({ networkList }) {
   const { LL } = useI18nContext();
   const theme = useTheme();
 
@@ -100,6 +95,6 @@ const WiFiNetworkSelector: FC<WiFiNetworkSelectorProps> = ({ networkList }) => {
   }
 
   return <List>{networkList.networks.map(renderNetwork)}</List>;
-};
+}
 
 export default WiFiNetworkSelector;

interface/src/app/settings/security/GenerateToken.tsx

@@ -1,5 +1,4 @@
 import { useEffect } from 'react';
-import type { FC } from 'react';
 
 import CloseIcon from '@mui/icons-material/Close';
 import {
@@ -21,12 +20,7 @@ import { useRequest } from 'alova/client';
 import { MessageBox } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 
-interface GenerateTokenProps {
-  username?: string;
-  onClose: () => void;
-}
-
-const GenerateToken: FC<GenerateTokenProps> = ({ username, onClose }) => {
+export default function GenerateToken({ username, onClose }) {
   const { LL } = useI18nContext();
   const open = !!username;
 
@@ -85,6 +79,4 @@ const GenerateToken: FC<GenerateTokenProps> = ({ username, onClose }) => {
       </DialogActions>
     </Dialog>
   );
-};
-
-export default GenerateToken;
+}

interface/src/app/settings/security/ManageUsers.tsx

@@ -1,5 +1,4 @@
 import { useContext, useState } from 'react';
-import type { FC } from 'react';
 import { useBlocker } from 'react-router-dom';
 
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -40,7 +39,7 @@ import { createUserValidator } from 'validators';
 import GenerateToken from './GenerateToken';
 import User from './User';
 
-const ManageUsers: FC = () => {
+const ManageUsers = () => {
   const { loadData, saveData, saving, data, updateDataValue, errorMessage } =
     useRest<SecuritySettingsType>({
       read: SecurityApi.readSecuritySettings,

interface/src/app/settings/security/Security.tsx

@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 
 import { Tab } from '@mui/material';
@@ -9,7 +8,7 @@ import { useI18nContext } from 'i18n/i18n-react';
 import ManageUsers from './ManageUsers';
 import SecuritySettings from './SecuritySettings';
 
-const Security: FC = () => {
+const Security = () => {
   const { LL } = useI18nContext();
   useLayoutTitle(LL.SETTINGS_OF(LL.SECURITY(0)));
 

interface/src/app/settings/security/SecuritySettings.tsx

@@ -1,5 +1,4 @@
 import { useContext, useState } from 'react';
-import type { FC } from 'react';
 
 import CancelIcon from '@mui/icons-material/Cancel';
 import WarningIcon from '@mui/icons-material/Warning';
@@ -22,7 +21,7 @@ import type { SecuritySettingsType } from 'types';
 import { updateValueDirty, useRest } from 'utils';
 import { SECURITY_SETTINGS_VALIDATOR, validate } from 'validators';
 
-const SecuritySettings: FC = () => {
+const SecuritySettings = () => {
   const { LL } = useI18nContext();
 
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();

interface/src/app/settings/security/User.tsx

@@ -29,10 +29,8 @@ import { validate } from 'validators';
 interface UserFormProps {
   creating: boolean;
   validator: Schema;
-
   user?: UserType;
   setUser: React.Dispatch<React.SetStateAction<UserType | undefined>>;
-
   onDoneEditing: () => void;
   onCancelEditing: () => void;
 }

interface/src/app/status/APStatus.tsx

@@ -1,5 +1,3 @@
-import type { FC } from 'react';
-
 import ComputerIcon from '@mui/icons-material/Computer';
 import DeviceHubIcon from '@mui/icons-material/DeviceHub';
 import RefreshIcon from '@mui/icons-material/Refresh';
@@ -37,7 +35,7 @@ export const apStatusHighlight = ({ status }: APStatusType, theme: Theme) => {
   }
 };
 
-const APStatus: FC = () => {
+const APStatus = () => {
   const { data: data, send: loadData, error } = useRequest(APApi.readAPStatus);
 
   const { LL } = useI18nContext();

interface/src/app/status/Activity.tsx

@@ -1,5 +1,4 @@
 import { useEffect } from 'react';
-import type { FC } from 'react';
 
 import RefreshIcon from '@mui/icons-material/Refresh';
 import { Button } from '@mui/material';
@@ -22,7 +21,7 @@ import type { Translation } from 'i18n/i18n-types';
 import * as EMSESP from '../main/api';
 import type { Stat } from '../main/types';
 
-const SystemActivity: FC = () => {
+const SystemActivity = () => {
   const { data: data, send: loadData, error } = useRequest(EMSESP.readActivity);
 
   const { LL } = useI18nContext();

interface/src/app/status/HardwareStatus.tsx

@@ -1,5 +1,3 @@
-import type { FC } from 'react';
-
 import AppsIcon from '@mui/icons-material/Apps';
 import DeveloperBoardIcon from '@mui/icons-material/DeveloperBoard';
 import DevicesIcon from '@mui/icons-material/Devices';
@@ -32,7 +30,7 @@ function formatNumber(num: number) {
   return new Intl.NumberFormat().format(num);
 }
 
-const HardwareStatus: FC = () => {
+const HardwareStatus = () => {
   const { LL } = useI18nContext();
 
   useLayoutTitle(LL.STATUS_OF(LL.HARDWARE()));
@@ -41,7 +39,7 @@ const HardwareStatus: FC = () => {
     data: data,
     send: loadData,
     error
-  } = useRequest(SystemApi.readHardwareStatus, { force: true });
+  } = useRequest(SystemApi.readHardwareStatus);
 
   const content = () => {
     if (!data) {

interface/src/app/status/MqttStatus.tsx

@@ -1,5 +1,3 @@
-import type { FC } from 'react';
-
 import AutoAwesomeMotionIcon from '@mui/icons-material/AutoAwesomeMotion';
 import DeviceHubIcon from '@mui/icons-material/DeviceHub';
 import RefreshIcon from '@mui/icons-material/Refresh';
@@ -57,7 +55,7 @@ export const mqttQueueHighlight = (
   return theme.palette.warning.main;
 };
 
-const MqttStatus: FC = () => {
+const MqttStatus = () => {
   const { data: data, send: loadData, error } = useRequest(MqttApi.readMqttStatus);
 
   const { LL } = useI18nContext();

interface/src/app/status/NTPStatus.tsx

@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import type { FC } from 'react';
 import { toast } from 'react-toastify';
 
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
@@ -37,7 +36,7 @@ import type { NTPStatusType, Time } from 'types';
 import { NTPSyncStatus } from 'types';
 import { formatDateTime, formatLocalDateTime } from 'utils';
 
-const NTPStatus: FC = () => {
+const NTPStatus = () => {
   const { data: data, send: loadData, error } = useRequest(NTPApi.readNTPStatus);
 
   const [localTime, setLocalTime] = useState<string>('');

interface/src/app/status/NetworkStatus.tsx

@@ -1,5 +1,3 @@
-import type { FC } from 'react';
-
 import DeviceHubIcon from '@mui/icons-material/DeviceHub';
 import DnsIcon from '@mui/icons-material/Dns';
 import GiteIcon from '@mui/icons-material/Gite';
@@ -84,7 +82,7 @@ const IPs = (status: NetworkStatusType) => {
   return status.local_ip + ', ' + status.local_ipv6;
 };
 
-const NetworkStatus: FC = () => {
+const NetworkStatus = () => {
   const {
     data: data,
     send: loadData,

interface/src/app/status/RestartMonitor.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useRef, useState } from 'react';
-import type { FC } from 'react';
 
 import * as SystemApi from 'api/system';
 
@@ -10,11 +9,11 @@ import { useI18nContext } from 'i18n/i18n-react';
 const RESTART_TIMEOUT = 2 * 60 * 1000;
 const POLL_INTERVAL = 3000;
 
-const RestartMonitor: FC = () => {
+const RestartMonitor = () => {
   const [failed, setFailed] = useState<boolean>(false);
   const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout>();
   const { LL } = useI18nContext();
-  const { send } = useRequest(SystemApi.readSystemStatus, { force: true });
+  const { send } = useRequest(SystemApi.readSystemStatus);
   const timeoutAt = useRef(new Date().getTime() + RESTART_TIMEOUT);
 
   const poll = useRef(async () => {

interface/src/app/status/Status.tsx

@@ -1,4 +1,4 @@
-import { type FC, useContext, useState } from 'react';
+import { useContext, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
@@ -44,7 +44,7 @@ import { NTPSyncStatus, NetworkConnectionStatus } from 'types';
 
 import RestartMonitor from './RestartMonitor';
 
-const SystemStatus: FC = () => {
+const SystemStatus = () => {
   const { LL } = useI18nContext();
 
   const navigate = useNavigate();
@@ -272,12 +272,13 @@ const SystemStatus: FC = () => {
   );
 
   const content = () => {
-    // if (!data) {
-    //   return <FormLoader onRetry={loadData} errorMessage={error?.message} />;
-    // }
-
+    // TODO remove test code
     if (loading) {
-      return <>fddfdd</>;
+      return <>not loaded!</>;
+    }
+
+    if (!data) {
+      return <FormLoader onRetry={loadData} errorMessage={error?.message} />;
     }
 
     return (
@@ -411,7 +412,9 @@ const SystemStatus: FC = () => {
     );
   };
 
-  return <SectionContent>{content()}</SectionContent>;
+  return (
+    <SectionContent>{restarting ? <RestartMonitor /> : content()}</SectionContent>
+  );
 };
 
 export default SystemStatus;

interface/src/app/status/SystemLog.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useRef, useState } from 'react';
-import type { FC } from 'react';
 import { toast } from 'react-toastify';
 
 import DownloadIcon from '@mui/icons-material/GetApp';
@@ -71,7 +70,7 @@ const levelLabel = (level: LogLevel) => {
   }
 };
 
-const SystemLog: FC = () => {
+const SystemLog = () => {
   const { LL } = useI18nContext();
 
   useLayoutTitle(LL.LOG_OF(LL.SYSTEM(0)));