Refreshing devices for every 30 seconds

This should allow devices on lan to query the backend router every 30 seconds.

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"
   },

src/DevicesOnLan/Devices.js

@@ -3,16 +3,24 @@ 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 = () => {
   const [loading, setLoading] = useState(null);
   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 (

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>
   );

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";