Change DisplayInfo.js view.

frontend/src/components/DisplayInfo.js

@@ -4,29 +4,28 @@ import { useEffect, useState } from "react";
 
 const DisplayInfo = () => {
 
-    const columns = [{
-        src: 'Src',
-        data: 'Data',
-        desc: 'Description',
-        // angle: 'Smart Light'
-    }];
+    const bridge_states = {
+        '0': 'BEGIN',
+        '1': 'NORMAL',
+        '2': 'PREALARM',
+        '3': 'ALARM',
+    };
 
-    const [data, setData] = useState([]);
+    const [state, setState] = useState('');
 
     const url_info = "http://localhost:5000/get_logs";
 
     useEffect(() => {
-        var new_data = []
+        var new_state = state;
         const fetchData = async () =>{
             try {
                 await axios.get(url_info)
                   .then((response) => {
                     for (const res of response.data) {
-                        new_data.push({
-                            src: res.src,
-                            data: res.data,
-                            desc: res.desc
-                        });
+                        if (res.desc === "new state") {
+                            new_state = bridge_states[res.data]; 
+                            console.log(new_state);
+                        }
                     } 
                   })
                   .catch((e) => console.log(e));
@@ -36,15 +35,15 @@ const DisplayInfo = () => {
         }
         fetchData()
             .then(() => {
-                setData(new_data);
+                setState(new_state);
             })
             .catch((e) => console.log(e));
     }, []);
 
     return (
         <div className='mx-10 w-full'> 
-            <h1 className='w-full h-full centered mb-4 font-bold'>System Info</h1>
-            <table className='w-full h-full bg-white shadow-lg'>
+            <h1 className='w-full h-full centered mb-4 font-bold'>{state}</h1>
+            {/* <table className='w-full h-full bg-white shadow-lg'>
                 <thead>
                     {
                         columns.map((value, key) => {
@@ -85,7 +84,7 @@ const DisplayInfo = () => {
                         })
                     }
                 </tbody>
-            </table> 
+            </table>  */}
         </div>       
     )
 }