From f5968412a091842105c101f5ed7ddc9476201cb7 Mon Sep 17 00:00:00 2001
From: proddy <paul@derbyshire.nl>
Date: Sun, 11 Aug 2024 10:40:11 +0200
Subject: [PATCH] useAutoRequest tidy up

---
 interface/src/app/main/Devices.tsx            | 30 +++----
 interface/src/app/main/Sensors.tsx            | 84 ++++++++-----------
 .../src/app/settings/security/ManageUsers.tsx |  9 +-
 interface/src/app/status/Activity.tsx         |  9 --
 mock-api/rest_server.ts                       | 15 ++--
 5 files changed, 60 insertions(+), 87 deletions(-)

diff --git a/interface/src/app/main/Devices.tsx b/interface/src/app/main/Devices.tsx
index a3fb2c42d..305d3d81b 100644
--- a/interface/src/app/main/Devices.tsx
+++ b/interface/src/app/main/Devices.tsx
@@ -55,7 +55,7 @@ import {
 import { useTheme } from '@table-library/react-table-library/theme';
 import type { Action, State } from '@table-library/react-table-library/types/common';
 import { dialogStyle } from 'CustomTheme';
-import { useAutoRequest, useRequest } from 'alova/client';
+import { useRequest } from 'alova/client';
 import { MessageBox, SectionContent, useLayoutTitle } from 'components';
 import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
@@ -83,16 +83,12 @@ const Devices = () => {
 
   useLayoutTitle(LL.DEVICES());
 
-  const { data: coreData, send: sendCoreData } = useAutoRequest(
-    () => readCoreData(),
-    {
-      initialData: {
-        connected: true,
-        devices: []
-      },
-      pollingTime: 2000
+  const { data: coreData, send: sendCoreData } = useRequest(() => readCoreData(), {
+    initialData: {
+      connected: true,
+      devices: []
     }
-  );
+  });
 
   const { data: deviceData, send: sendDeviceData } = useRequest(
     (id: number) => readDeviceData(id),
@@ -320,12 +316,6 @@ const Devices = () => {
     };
   }, [escFunction]);
 
-  const refreshData = () => {
-    if (!deviceValueDialogOpen) {
-      selectedDevice ? void sendDeviceData(selectedDevice) : void sendCoreData();
-    }
-  };
-
   const customize = () => {
     if (selectedDevice == 99) {
       navigate('/customentities');
@@ -436,7 +426,12 @@ const Devices = () => {
   };
 
   useEffect(() => {
-    const timer = setInterval(() => refreshData(), 60000);
+    const timer = setInterval(() => {
+      if (deviceValueDialogOpen) {
+        return;
+      }
+      selectedDevice ? void sendDeviceData(selectedDevice) : void sendCoreData();
+    }, 2000);
     return () => {
       clearInterval(timer);
     };
@@ -591,6 +586,7 @@ const Devices = () => {
 
   const deviceValueDialogClose = () => {
     setDeviceValueDialogOpen(false);
+    void sendDeviceData(selectedDevice);
   };
 
   const renderDeviceData = () => {
diff --git a/interface/src/app/main/Sensors.tsx b/interface/src/app/main/Sensors.tsx
index 07f53abcc..b93b61cb3 100644
--- a/interface/src/app/main/Sensors.tsx
+++ b/interface/src/app/main/Sensors.tsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useState } from 'react';
 import { toast } from 'react-toastify';
 
 import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
@@ -59,18 +59,15 @@ const Sensors = () => {
   const [analogDialogOpen, setAnalogDialogOpen] = useState<boolean>(false);
   const [creating, setCreating] = useState<boolean>(false);
 
-  const { data: sensorData, send: sendSensorData } = useAutoRequest(
-    () => readSensorData(),
-    {
-      initialData: {
-        ts: [],
-        as: [],
-        analog_enabled: false,
-        platform: 'ESP32'
-      },
-      pollingTime: 2000
-    }
-  );
+  const { data: sensorData } = useAutoRequest(() => readSensorData(), {
+    initialData: {
+      ts: [],
+      as: [],
+      analog_enabled: false,
+      platform: 'ESP32'
+    },
+    pollingTime: 2000
+  });
 
   const { send: sendTemperatureSensor } = useRequest(
     (data: WriteTemperatureSensor) => writeTemperatureSensor(data),
@@ -198,13 +195,6 @@ const Sensors = () => {
     }
   );
 
-  useEffect(() => {
-    const timer = setInterval(() => sendSensorData(), 30000);
-    return () => {
-      clearInterval(timer);
-    };
-  });
-
   useLayoutTitle(LL.SENSORS());
 
   const formatDurationMin = (duration_min: number) => {
@@ -276,10 +266,9 @@ const Sensors = () => {
       .catch(() => {
         toast.error(LL.UPDATE_OF(LL.SENSOR(2)) + ' ' + LL.FAILED(1));
       })
-      .finally(async () => {
+      .finally(() => {
         setTemperatureDialogOpen(false);
         setSelectedTemperatureSensor(undefined);
-        await sendSensorData();
       });
   };
 
@@ -330,10 +319,9 @@ const Sensors = () => {
       .catch(() => {
         toast.error(LL.UPDATE_OF(LL.ANALOG_SENSOR(5)) + ' ' + LL.FAILED(1));
       })
-      .finally(async () => {
+      .finally(() => {
         setAnalogDialogOpen(false);
         setSelectedAnalogSensor(undefined);
-        await sendSensorData();
       });
   };
 
@@ -477,41 +465,37 @@ const Sensors = () => {
           )}
         />
       )}
-      {sensorData?.analog_enabled === true && (
-        <>
-          <Typography sx={{ pt: 4, pb: 1 }} variant="h6" color="secondary">
-            {LL.ANALOG_SENSORS()}
-          </Typography>
-          <RenderAnalogSensors />
-          {selectedAnalogSensor && (
-            <DashboardSensorsAnalogDialog
-              open={analogDialogOpen}
-              onClose={onAnalogDialogClose}
-              onSave={onAnalogDialogSave}
-              creating={creating}
-              selectedItem={selectedAnalogSensor}
-              validator={analogSensorItemValidation(
-                sensorData.as,
-                selectedAnalogSensor,
-                creating,
-                sensorData.platform
-              )}
-            />
+      <Typography sx={{ pt: 4, pb: 1 }} variant="h6" color="secondary">
+        {LL.ANALOG_SENSORS()}
+      </Typography>
+      <RenderAnalogSensors />
+      {selectedAnalogSensor && (
+        <DashboardSensorsAnalogDialog
+          open={analogDialogOpen}
+          onClose={onAnalogDialogClose}
+          onSave={onAnalogDialogSave}
+          creating={creating}
+          selectedItem={selectedAnalogSensor}
+          validator={analogSensorItemValidation(
+            sensorData.as,
+            selectedAnalogSensor,
+            creating,
+            sensorData.platform
           )}
-        </>
+        />
       )}
-      <Box mt={1} display="flex" flexWrap="wrap">
-        {sensorData?.analog_enabled === true && me.admin && (
+      {sensorData?.analog_enabled === true && me.admin && (
+        <Box mt={1} display="flex" flexWrap="wrap" justifyContent="flex-end">
           <Button
             variant="outlined"
             color="primary"
             startIcon={<AddCircleOutlineOutlinedIcon />}
             onClick={addAnalogSensor}
           >
-            {LL.ADD(0) + ' ' + LL.ANALOG_SENSOR(1)}
+            {LL.ADD(0)}
           </Button>
-        )}
-      </Box>
+        </Box>
+      )}
     </SectionContent>
   );
 };
diff --git a/interface/src/app/settings/security/ManageUsers.tsx b/interface/src/app/settings/security/ManageUsers.tsx
index 9805d8dcf..0cf5f191c 100644
--- a/interface/src/app/settings/security/ManageUsers.tsx
+++ b/interface/src/app/settings/security/ManageUsers.tsx
@@ -220,8 +220,8 @@ const ManageUsers = () => {
         )}
 
         <Box display="flex" flexWrap="wrap">
-          <Box flexGrow={1} sx={{ '& button': { mt: 2 } }}>
-            {changed !== 0 && (
+          {changed !== 0 && (
+            <Box flexGrow={1} sx={{ '& button': { mt: 2 } }}>
               <ButtonRow>
                 <Button
                   startIcon={<CancelIcon />}
@@ -244,9 +244,8 @@ const ManageUsers = () => {
                   {LL.APPLY_CHANGES(changed)}
                 </Button>
               </ButtonRow>
-            )}
-          </Box>
-
+            </Box>
+          )}
           <Box flexWrap="nowrap" whiteSpace="nowrap">
             <ButtonRow>
               <Button
diff --git a/interface/src/app/status/Activity.tsx b/interface/src/app/status/Activity.tsx
index 93f07a44f..27d01a1fa 100644
--- a/interface/src/app/status/Activity.tsx
+++ b/interface/src/app/status/Activity.tsx
@@ -1,5 +1,3 @@
-import { useEffect } from 'react';
-
 import {
   Body,
   Cell,
@@ -67,13 +65,6 @@ const SystemActivity = () => {
     `
   });
 
-  useEffect(() => {
-    const timer = setInterval(() => loadData(), 30000);
-    return () => {
-      clearInterval(timer);
-    };
-  });
-
   const showName = (id: number) => {
     const name: keyof Translation['STATUS_NAMES'] = id;
     return LL.STATUS_NAMES[name]();
diff --git a/mock-api/rest_server.ts b/mock-api/rest_server.ts
index 639ba5703..81cc309e5 100644
--- a/mock-api/rest_server.ts
+++ b/mock-api/rest_server.ts
@@ -15,9 +15,8 @@ const logger: ResponseHandler = (response, request) => {
 
 const router = AutoRouter({
   port: 3080,
-  missing: () => error(404, 'Error, endpoint not found'),
-  finally: [logger]
-
+  missing: () => error(404, 'Error, endpoint not found')
+  // finally: [logger]
 });
 
 const REST_ENDPOINT_ROOT = '/rest/';
@@ -870,7 +869,7 @@ const emsesp_sensordata = {
   ts: [
     { id: '28-233D-9497-0C03', n: 'Dallas 1', t: 25.7, o: 1.2, u: 1 },
     { id: '28-243D-7437-1E3A', n: 'Dallas 2 outside', t: 26.1, o: 0, u: 1 },
-    { id: '28-243E-7437-1E3B', n: 'Zolder', t: 27.1, o: 0, u: 16 },
+    { id: '28-243E-7437-1E3B', n: 'Zolder', t: 27.1, o: 0, u: 1 },
     { id: '28-183D-1892-0C33', n: 'Roof', o: 2, u: 1 } // no temperature
   ],
   // as: [],
@@ -4285,6 +4284,8 @@ function deviceData(id: number) {
     return new Response(encoder.encode(emsesp_devicedata_7), { headers });
   }
   if (id == 8) {
+    // test changing the selected flow temp on a Bosch Compress 7000i AW Heat Pump (Boiler/HP)
+    emsesp_devicedata_8.data[4].v = Math.floor(Math.random() * 100);
     return new Response(encoder.encode(emsesp_devicedata_8), { headers });
   }
   if (id == 9) {
@@ -4352,12 +4353,14 @@ router
     sorted_devices.push(emsesp_coredata_custom);
     return { connected: true, devices: sorted_devices };
   })
-  .get(EMSESP_SENSOR_DATA_ENDPOINT, () => emsesp_sensordata)
+  .get(EMSESP_SENSOR_DATA_ENDPOINT, () => { 
+    // random change the zolder temperature 0-100
+    emsesp_sensordata.ts[2].t = Math.floor(Math.random() * 100);
+    return emsesp_sensordata })
   .get(EMSESP_DEVICES_ENDPOINT, () => {
     // sort by type
     const sorted_devices = emsesp_devices.devices.sort((a, b) => a.t - b.t);
     return { devices: sorted_devices };
-    
   })
   .get(EMSESP_DEVICEDATA_ENDPOINT1, (request) =>
     request.query.id ? deviceData(Number(request.query.id)) : status(404)