Update to make TeaSense run in the back ground

public/index.html

@@ -30,7 +30,7 @@
     <div id="root"></div>
     <script>
       if ('serviceWorker' in navigator) {
-        navigator.serviceWorker.register("./serviceworker.js");
+        navigator.serviceWorker.register("./serviceworker.js", {scope: '.'});
       }
     </script>
     <!--

public/serviceworker.js

@@ -1,6 +1,52 @@
 // This code executes in its own worker or thread
 self.addEventListener("install", event => {
+  checkNotificationPromise();
+  interval = setInterval(() => fetchAndCacheLatestNews(), 1000);
 });
-self.addEventListener("activate", event => {
+
+self.addEventListener("fetch", (e) => {
+  console.log(`[Service Worker] Fetched resource ${e.request.url}`);
 });
-self.addEventListener('fetch',() => console.log("fetch"));
+
+let interval = 0;
+
+function handleNotification(title, notif) {
+    if (checkNotificationPromise()) {
+      self.registration.showNotification(title, notif);
+    } else {
+      self.registration.showNotification(title, notif);
+    }
+}
+
+async function fetchAndCacheLatestNews() {
+        const response = await fetch('/api/teasense');
+  const data = await response.json();
+      const temp = data[data.length - 1].value;
+      if (temp) {
+        if (temp >= ALERT_THRESHOLD) {
+          handleNotification('TeaSense Alert', {
+            body: '♨️ ',
+            tag: 1,
+          });
+        } else if (temp < ALERT_THRESHOLD && temp > WARNING_THRESHOLD) {
+          handleNotification('TeaSense Warning', {
+            body: '🫖',
+            tag: 1,
+          });
+        }
+      }
+
+}
+
+function checkNotificationPromise() {
+  try {
+    Notification.requestPermission().then();
+  } catch (e) {
+    return false;
+  }
+
+  return true;
+}
+
+const ALERT_THRESHOLD = 80.0;
+const WARNING_THRESHOLD = 75.0;

src/App.css

@@ -3,24 +3,15 @@
 }
 
 .rainfall-gauge {
-  border: .01em solid black;
-  border-radius: 1em;
   padding: .6em;
-  height: 5vh;
 }
 
 .soil-gauge {
-  border: .01em solid black;
-  border-radius: 1em;
   padding: .6em;
-  height: 7vh;
 }
 
 .teasense {
-  border: .01em solid black;
-  border-radius: 1em;
   padding: .6em;
-  height: 5vh;
 }
 
 @media (max-width: 601px)  {
@@ -32,18 +23,6 @@
     margin: .6em !important;
   }
 
-  .merrysky {
-    height: 50vh !important;
-  }
-
-  .soil-gauge {
-    height: 12vh;
-  }
-
-  .teasense {
-    height: 7vh !important;
-  }
-
   .rainfall-gauge {
     height: 6vh !important;
   }
@@ -54,19 +33,8 @@
     display: block !important;
   }
 
-  .rainfall-gauge {
-    height: 3vh !important;
-  }
-
-  .soil-gauge {
-    height: 7vh !important;
-  }
-
-  .teasense {
-    height: 4vh !important;
-  }
-
   .merrysky {
+    width: 90vw !important;
     height: 80vh !important;
   }
 }

src/App.tsx

@@ -4,14 +4,6 @@ import Rainfall from './components/rainfall';
 import Soil from './components/soil';
 import TeaSense from './components/teasense';
 function App() {
-
-  useEffect(() => {
-    Notification.requestPermission().then((permission) => {
-      if (permission === 'granted') {
-      }
-    });
-  }, []);
-  
   return (
     <div className="App">
       <h1 className={'header'}>MooreForge Sensor Station</h1>

src/components/teasense/index.tsx

@@ -3,9 +3,6 @@ import React, { useEffect, useState } from 'react';
 
 import './style.css';
 
-const ALERT_THRESHOLD = parseInt(process.env.REACT_APP_TEASENSE_ALERT_THRESHOLD ?? '80.0');
-const WARNING_THRESHOLD = parseInt(process.env.REACT_APP_TEASENSE_WARNING_THRESHOLD ?? '75.0');
-
 const Sensor = () => {
   const [temp, setTemp] = useState();
 
@@ -18,46 +15,10 @@ const Sensor = () => {
     setTemp(result.value);
   }
  
-  function checkNotificationPromise() {
-    try {
-      Notification.requestPermission().then();
-    } catch (e) {
-      return false;
-    }
-
-    return true;
-  }
- 
   useEffect(() => {
     setInterval(() => pullTempFromBackend(), 1000);
   }, []);
 
-  useEffect(() => {
-    function handleNotification(title: string, notif: any) {
-      navigator.serviceWorker.ready.then((registration) => {
-        if (checkNotificationPromise()) {
-          registration.showNotification(title, notif);
-        } else {
-          registration.showNotification(title, notif);
-        }
-      });
-    }
-
-    if (temp) {
-      if (temp >= ALERT_THRESHOLD) {
-        handleNotification('TeaSense Alert', {
-          body: process.env.REACT_APP_TEASENSE_ALERT_MESSAGE,
-          tag: 1,
-        });
-      } else if (temp < ALERT_THRESHOLD && temp > WARNING_THRESHOLD) {
-        handleNotification('TeaSense Warning', {
-          body: process.env.REACT_APP_TEASENSE_WARNING_MESSAGE,
-          tag: 1,
-        });
-      }
-    }
-  }, [temp]);
-
   return (
     <div className={'gauge-body'}>
       <div className={'gauge-label'}>TeaSense</div>