Update to make sensorUI be the main source of notifications

package.json

@@ -11,6 +11,7 @@
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "date-fns": "^2.29.3",
+    "firebase": "^9.16.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

src/App.css

@@ -72,7 +72,7 @@
 }
 
 .header {
-  background-color: #282c34;
+  background-color: #146b37;
   color: white;
   text-align: center;
   border: .01em solid black;

src/App.tsx

@@ -1,10 +1,17 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import './App.css';
 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/soil/index.tsx

@@ -5,39 +5,26 @@ import { isBefore } from 'date-fns';
 import './style.css';
 
 const Sensor = () => {
-  const [temp, setTemp] = useState();
+  const [moisture, setMoisture] = useState();
-  const [cap, setCap] = useState();
 
-  async function pullTempFromBackend() {
+  async function pullMoistureFromBackend() {
-    const response = await fetch(process.env.REACT_APP_SOIL_TEMP_DATA ?? '');
+    const response = await fetch(process.env.REACT_APP_SOIL_MOISTURE_DATA ?? '');
     const data = await response.json();
     const result = data
       .reduce((accum: any, datum: any) => ( ((accum && isBefore(new Date(accum?.timestamp), new Date(datum?.timestamp))) || !accum ) ? datum : accum ));
 
-    setTemp(result.value);
+    setMoisture(result.value);
-  }
-
-  async function pullCapFromBackend() {
-    const response = await fetch(process.env.REACT_APP_SOIL_CAP_DATA ?? '');
-    const data = await response.json();
-    const result = data
-      .reduce((accum: any, datum: any) => ( ((accum && isBefore(new Date(accum?.timestamp), new Date(datum?.timestamp))) || !accum ) ? datum : accum ));
-
-    setCap(result.value);
   }
 
   useEffect(() => {
-    setInterval(() => pullTempFromBackend(), 1000);
+    setInterval(() => pullMoistureFromBackend(), 1000);
-    setInterval(() => pullCapFromBackend(), 1000);
   }, []);
 
   return (
     <div className={'gauge-body'}>
       <div className={'gauge-label'}>Soil</div>
-      <div className={'gauge-label'}>Temperature (in C)</div>
+      <div className={'gauge-label'}>Moisture</div>
-      <div>{temp}</div>
+      <div>{moisture} V</div>
-      <div className={'gauge-label'}>Capacitance</div>
-      <div>{cap}</div>
     </div>
   );
 };

src/components/teasense/index.tsx

@@ -3,6 +3,9 @@ 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();
 
@@ -11,31 +14,45 @@ const Sensor = () => {
     const data = await response.json();
     const result = data
       .reduce((accum: any, datum: any) => (((accum && isBefore(new Date(accum?.timestamp), new Date(datum?.timestamp))) || !accum) ? datum : accum));
-    console.log(result);
+
     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 >= 82.2) {
+      if (temp >= ALERT_THRESHOLD) {
-        Notification.requestPermission().then((result) => {
+        handleNotification('TeaSense Alert', {
-          if (result === 'granted') {
+          body: process.env.REACT_APP_TEASENSE_ALERT_MESSAGE,
-            new Notification('TeaSense Alert', {
+          tag: 1,
-              body: '♨️',
-            });
-          }
         });
-      } else if (temp >= 80.0) {
+      } else if (temp < ALERT_THRESHOLD && temp > WARNING_THRESHOLD) {
-        Notification.requestPermission().then((result) => {
+        handleNotification('TeaSense Warning', {
-          if (result === 'granted') {
+          body: process.env.REACT_APP_TEASENSE_WARNING_MESSAGE,
-            new Notification('TeaSense Warning', {
+          tag: 1,
-              body: '🫖',
-            });
-          }
         });
       }
     }