refactored restart and format services to be non-blocking

interface/src/app/main/Customizations.tsx

@@ -26,8 +26,6 @@ import {
 } from '@mui/material';
 import Grid from '@mui/material/Grid2';
 
-import { restart } from 'api/system';
-
 import {
   Body,
   Cell,
@@ -51,6 +49,7 @@ import {
 import { useI18nContext } from 'i18n/i18n-react';
 
 import {
+  API,
   readDeviceEntities,
   readDevices,
   resetCustomizations,
@@ -61,7 +60,7 @@ import SettingsCustomizationsDialog from './CustomizationsDialog';
 import EntityMaskToggle from './EntityMaskToggle';
 import OptionIcon from './OptionIcon';
 import { DeviceEntityMask } from './types';
-import type { DeviceEntity, DeviceShort } from './types';
+import type { APIcall, DeviceEntity, DeviceShort } from './types';
 
 export const APIURL = window.location.origin + '/api/';
 
@@ -85,6 +84,10 @@ const Customizations = () => {
   // fetch devices first
   const { data: devices, send: fetchDevices } = useRequest(readDevices);
 
+  const { send: sendAPI } = useRequest((data: APIcall) => API(data), {
+    immediate: false
+  });
+
   const [selectedDevice, setSelectedDevice] = useState<number>(
     Number(useLocation().state) || -1
   );
@@ -132,9 +135,14 @@ const Customizations = () => {
     );
   };
 
-  const { send: sendRestart } = useRequest(restart(), {
-    immediate: false
-  });
+  const doRestart = async () => {
+    setRestarting(true);
+    await sendAPI({ device: 'system', cmd: 'restart', id: -1 }).catch(
+      (error: Error) => {
+        toast.error(error.message);
+      }
+    );
+  };
 
   const entities_theme = useTheme({
     Table: `
@@ -247,13 +255,6 @@ const Customizations = () => {
     }
   }, [devices, selectedDevice]);
 
-  const doRestart = async () => {
-    await sendRestart().catch((error: Error) => {
-      toast.error(error.message);
-    });
-    setRestarting(true);
-  };
-
   function formatValue(value: unknown) {
     if (typeof value === 'number') {
       return new Intl.NumberFormat().format(value);
@@ -509,7 +510,7 @@ const Customizations = () => {
           container
           mb={1}
           mt={0}
-          spacing={1}
+          spacing={2}
           direction="row"
           justifyContent="flex-start"
           alignItems="center"

interface/src/app/main/Help.tsx

@@ -28,7 +28,7 @@ const Help = () => {
   const { LL } = useI18nContext();
   useLayoutTitle(LL.HELP());
 
-  const { send: getAPI } = useRequest((data: APIcall) => API(data), {
+  const { send: sendAPI } = useRequest((data: APIcall) => API(data), {
     immediate: false
   }).onSuccess((event) => {
     const anchor = document.createElement('a');
@@ -45,8 +45,8 @@ const Help = () => {
     toast.info(LL.DOWNLOAD_SUCCESSFUL());
   });
 
-  const callAPI = async (device: string, entity: string) => {
-    await getAPI({ device, entity, id: 0 }).catch((error: Error) => {
+  const callAPI = async (device: string, cmd: string) => {
+    await sendAPI({ device, cmd, id: 0 }).catch((error: Error) => {
       toast.error(error.message);
     });
   };
@@ -113,7 +113,7 @@ const Help = () => {
           color="primary"
           onClick={() => callAPI('system', 'allvalues')}
         >
-          {LL.ALLVALUES(0)}
+          {LL.ALLVALUES()}
         </Button>
 
         <Box border={1} p={1} mt={4}>

interface/src/app/main/types.ts

@@ -272,8 +272,8 @@ export interface BoardProfile {
 
 export interface APIcall {
   device: string;
-  entity: string;
-  id: unknown;
+  cmd: string;
+  id: number;
 }
 export interface WriteAnalogSensor {
   id: number;