ENH: system's plants/alert hooks and comments

mseng10 · Jul 23, 2024 · 1cc9175 · 1cc9175
1 parent 3a7d869
commit 1cc9175
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 31 deletions.
diff --git a/client/react/src/constants.js b/client/react/src/constants.js
@@ -12,6 +12,14 @@ export const CARD_STYLE = {
   maxWidth: 345,
   opacity: 0.7,
 };
+
+export const MODAL_STYLE = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: 'inherit',
+  border: 'none',
+};
 
 export const AVATAR_STYLE = {
   backgroundColor: 'inherit',

diff --git a/client/react/src/hooks/useSystems.js b/client/react/src/hooks/useSystems.js
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 
 const API_BASE_URL = 'http://127.0.0.1:5000';
 
+/** Query for all systems. */
 export const useSystems = () => {
   const [systems, setSystems] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
@@ -29,6 +30,7 @@ export const useSystems = () => {
   return { systems, isLoading, error };
 };
 
+/** Query a system for it's respective plants. */
 export const useSystemsPlants = (system) => {
   const [plants, setPlants] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
@@ -54,4 +56,32 @@ export const useSystemsPlants = (system) => {
   }, []);
 
   return { plants, isLoading, error };
+};
+
+/** Query a system for it's respective alerts. */
+export const useSystemAlerts = (system) => {
+  const [alerts, setAlerts] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchSystems = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const response = await fetch(`${API_BASE_URL}/system/${system.id}/alerts`);
+        const data = await response.json();
+        setAlerts(data);
+      } catch (error) {
+        console.error('Error fetching system data:', error);
+        setError('Failed to fetch systems. Please try again later.');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchSystems();
+  }, []);
+
+  return { alerts, isLoading, error };
 };
diff --git a/client/react/src/modals/system/SystemAlerts.js b/client/react/src/modals/system/SystemAlerts.js
@@ -1,38 +1,24 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import Modal from '@mui/material/Modal';
 import Box from '@mui/material/Box';
 import Alerts from '../../pages/alert/Alerts';
+import { useSystemAlerts } from '../../hooks/useSystems';
+import { MODAL_STYLE } from '../../constants';
 
+/** View all alerts for a system in a modal. */
 const SystemAlerts = ({ isOpen, system, onRequestClose }) => {
-  const [alerts, setAlerts] = useState([]);
+  const { alerts, isLoading, error } = useSystemAlerts(system);
 
-  useEffect(() => {
-    if (isOpen && system && system.system) {
-      const url = 'http://127.0.0.1:5000/system/' + system.system.id.toString() + '/alerts'
-      // Fetch plant data from the server
-      fetch(url)
-        .then((response) => response.json())
-        .then((data) => setAlerts(data))
-        .catch((error) => console.error('Error fetching plant data:', error));
-    }
-  }, [isOpen, system]);
-
-  if (!system) {
-    return (<div></div>);
-  }
+  if (isLoading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error}</div>;
+  if (alerts.length === 0) return <div>No Alerts!</div>;
 
   return (
     <Modal
       open={isOpen}
       onClose={onRequestClose}
       disableAutoFocus={true}
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: 'inherit',
-        border: 'none',
-      }}
+      style={MODAL_STYLE}
     >
       <Box sx={{ width: 756, height: 512, bgcolor: 'background.paper', borderRadius: 2 }}>
         <Alerts alerts={alerts}></Alerts>

diff --git a/client/react/src/modals/system/SystemPlants.js b/client/react/src/modals/system/SystemPlants.js
@@ -3,26 +3,22 @@ import Modal from '@mui/material/Modal';
 import Box from '@mui/material/Box';
 import Plants from '../../pages/plant/Plants';
 import { useSystemsPlants } from '../../hooks/useSystems';
+import { MODAL_STYLE } from '../../constants';
 
+/** View all plants for a system in a modal. */
 const SystemPlants = ({ isOpen, system, onRequestClose }) => {
   const { plants, isLoading, error } = useSystemsPlants(system);
 
   if (isLoading) return <div>Loading...</div>;
   if (error) return <div>Error: {error}</div>;
-  if (plants.length === 0) return <div>No Systems!</div>;
+  if (plants.length === 0) return <div>No Plants:(</div>;
 
   return (
     <Modal
       open={isOpen}
       onClose={onRequestClose}
       disableAutoFocus={true}
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: 'inherit',
-        border: 'none',
-      }}
+      style={MODAL_STYLE}
     >
       <Box sx={{ width: 756, height: 512, bgcolor: 'background.paper', borderRadius: 2 }}>
         <Plants initialPlants={plants}></Plants>