update time each second + fix serialization of date

ui/src/components/SystemStatusArea.js

@@ -2,21 +2,36 @@ import React from 'react';
 import { Card } from 'react-bootstrap';
 import { connect } from 'react-redux';
 
-// TODO: Update time since last update every second,
-//       currently it only updates when the status changes
-function _systemStatus(status) {
+// time elapsed since last update
+function TimeElapsedComponent({ updated }) {
+  const [diffString, setDiffString] = React.useState('');  
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      const now = new Date();
+      const diff = now - updated;
+      const newDiffString = new Date(diff).toISOString().substr(11, 8);
+      setDiffString(newDiffString);
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [updated]);
+
+  return (
+    <span>{diffString}</span>
+  );
+}
+
+function _systemStatus(status) {  
   if (null === status) {
     return (<b>Not connected</b>);
   }
-
+  
   const pump = status.pump;
-  // TODO: check is this is a valid way to get the time since last update
-  const now = new Date();
-  const diff = now - status.updated;
-  const diffString = new Date(diff).toISOString().substr(11, 8);
   return (
     <>
-      <strong>Time since last update:</strong> {diffString}<br />
+      <strong>Time since last update:</strong>{' '}
+        <TimeElapsedComponent updated={status.updated} />
+      <br />
       <strong>Pump Running:</strong> {pump.running ? "Yes" : "No"}<br />
       <strong>Time Left:</strong> {pump.timeLeft} ms
     </>

ui/src/store/slices/SystemStatus.js

@@ -10,9 +10,8 @@ const systemStatus = {
     running: false,
     timeLeft: 0,
   },
-  updated: new Date(),
+  updated: Date.now(),
 };
-// NOTE: SystemStatusSlice can't store unseralizable data, such as Date objects!
 
 // slice for system status
 export const SystemStatusSlice = createSlice({