From 869cdeda3ba88313c3aad5e4c0882acd6e695650 Mon Sep 17 00:00:00 2001
From: Kenneth Tang <kenneth@althea.systems>
Date: Tue, 29 Nov 2022 14:11:19 -0800
Subject: [PATCH] Refreshing devices for every 30 seconds

This should allow devices on lan to query the backend router every 30 seconds.
---
 package.json                |  3 ++-
 src/DevicesOnLan/Devices.js | 16 ++++++++++++----
 src/DevicesOnLan/index.js   |  3 ++-
 src/styles/althea.scss      |  2 +-
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index ab2fc30..d7b9dbf 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,6 @@
     "ip-address": "^5.8.9",
     "jquery": "^1.12.4",
     "js-sha3": "^0.8.0",
-    "node-sass": "^6.0.1",
     "npm": "^6.3.0",
     "popper.js": "^1.14.4",
     "prettier": "^2.0.0",
@@ -101,11 +100,13 @@
     "react-widgets": "4",
     "react-widgets-date-fns": "^4.0.26",
     "reactstrap": "^8.0.0",
+    "sass": "^1.56.1",
     "source-map-explorer": "^2.5.2",
     "start": "^5.1.0",
     "styled-components": "^3.4.9",
     "typescript": "^3.4.5",
     "unstated": "^2.1.1",
+    "uuid": "^9.0.0",
     "webpack": "^5.73.0",
     "yarn": "^1.22.17"
   },
diff --git a/src/DevicesOnLan/Devices.js b/src/DevicesOnLan/Devices.js
index 4622a8c..0b20bff 100644
--- a/src/DevicesOnLan/Devices.js
+++ b/src/DevicesOnLan/Devices.js
@@ -3,6 +3,7 @@ import { Card, CardBody } from "reactstrap";
 import { get } from "store";
 import Device from "./Device";
 import { useTranslation } from "react-i18next";
+import useInterval from "hooks/useInterval";
 import ClipLoader from "react-spinners/ClipLoader";
 
 const Devices = () => {
@@ -10,9 +11,16 @@ const Devices = () => {
   const [devices, setDevices] = useState(null);
   let [t] = useTranslation();
 
-  useEffect(() => {
-    const controller = new AbortController();
+  useInterval(async () => {
+    try {
+      let lanDevices = await get("/lan_devices");
+      if (!(lanDevices instanceof Error)) setDevices(lanDevices.allLanDevices);
+    } catch (e) {
+      console.log(e);
+    }
+  }, 30000); // every 30 seconds
 
+  useEffect(() => {
     (async () => {
       if (loading == null) {
         setLoading(true);
@@ -23,8 +31,8 @@ const Devices = () => {
       }
     })();
 
-    return () => controller.abort();
-  });
+    return;
+  }, [loading]);
 
   if (loading) {
     return (
diff --git a/src/DevicesOnLan/index.js b/src/DevicesOnLan/index.js
index 4e22348..3d3bb2f 100644
--- a/src/DevicesOnLan/index.js
+++ b/src/DevicesOnLan/index.js
@@ -1,7 +1,7 @@
 /* eslint-disable import/no-anonymous-default-export */
 import { React } from "react";
 import { useTranslation } from "react-i18next";
-import { InputGroup } from "reactstrap";
+import { InputGroup, Label } from "reactstrap";
 import Devices from "./Devices";
 
 const LanDevices = () => {
@@ -12,6 +12,7 @@ const LanDevices = () => {
       <InputGroup>
         <h2 id="devicesPage">{t("devicesLan")}</h2>
       </InputGroup>
+      <Label> Devices will be refreshed every 30 seconds.</Label>
       <Devices />
     </div>
   );
diff --git a/src/styles/althea.scss b/src/styles/althea.scss
index 950b2cd..f39a4b4 100644
--- a/src/styles/althea.scss
+++ b/src/styles/althea.scss
@@ -6,7 +6,7 @@ $input-btn-padding-y: 0.7rem;
 $input-btn-padding-x: 1.5rem;
 $font-size-base: 1.1rem;
 $spacer: 1.5rem;
-$headings-margin-bottom: ($spacer / 1);
+$headings-margin-bottom: calc($spacer / 1);
 $input-placeholder-color: #aaa;
 
 @import "~bootstrap/scss/bootstrap";