camera data change to object instead of array

src/App.js

@@ -11,7 +11,7 @@ import GeneralStatus from "./components/GeneralStatus";
 import socketClient   from "socket.io-client"
 import {AutoSizer} from 'react-virtualized';
 
-const socket = socketClient("http://192.168.0.98:5000",{transports:['websocket']});
+const socket = socketClient(process.env.REACT_APP_SOCKET_URL,{transports:['websocket']});
 function App() {
   // const [CameraData, setCameraData] = useState({});
   // const [newCameraData , setNewCameraData] = useState({});
@@ -45,10 +45,10 @@ function App() {
   return (
     <div className="App pt-3">
       <h4>Backpack GUI</h4>
-      {/* <div className=" m-2 py-1 border border-dark  rounded">
+      <div className=" m-2 py-1 border border-dark  rounded">
         <Cameras  socket={socket} />
         <ImuGps socket={socket} />
-      </div> */}
+      </div>
       <div className=" m-2 py-1 border border-dark  rounded">
         <GeneralStatus socket={socket} />
       </div>

src/components/Cameras.js

@@ -4,13 +4,26 @@ import Axios from "axios";
 import { useEffect, useState } from "react";
 
 const Cameras = ({socket}) => {
-  const [cameraData, setCameraData] = useState([]);
+  const [cameraData0, setCameraData0] = useState([]);
+  const [cameraData1, setCameraData1] = useState([]);
+  const [cameraData2, setCameraData2] = useState([]);
+  const [cameraData3, setCameraData3] = useState([]);
   const [newCameraData, setNewCameraData] = useState([]);
 
   socket.on("cameraData", (res) => {
-    console.log(res);
-    setCameraData(res);
+    console.log(res)
+switch ( res.cam_id )
+{
+  case 0 : setCameraData0(res);
+  break;
+  case 1 : setCameraData1(res);
+  break;
+  case 2 : setCameraData2(res);
+  break;
+  case 3 : setCameraData3(res);
+  break;
 
+}
   })
   // useEffect(() => {
   //   Axios({
@@ -26,18 +39,18 @@ const Cameras = ({socket}) => {
   return (
     <React.Fragment>
       <div className="row  m-1 py-1">
-        {(cameraData || []).map((cam) => (
-          <div className="col-3 px-1" key={`divCamera_${cam.name}`}>
-            <Camera
-              bat={cam.bat}
-              sd={cam.sd}
-              name={cam.name}
-              connection={cam.connection}
-              recording={cam.recording}
-              key={`cameraCom_${cam.name}`}
-            ></Camera>
+          <div className="col-3 px-1" >
+            <Camera data={cameraData0}></Camera>
           </div>
-        ))}
+          <div className="col-3 px-1" >
+            <Camera data={cameraData1}></Camera>
+          </div>
+          <div className="col-3 px-1" >
+            <Camera data={cameraData2}></Camera>
+          </div>
+          <div className="col-3 px-1" >
+            <Camera data={cameraData3}></Camera>
+          </div>                              
       </div>
     </React.Fragment>
   );

src/components/DebugList.js

@@ -23,10 +23,6 @@ class DebugList extends React.Component {
   rowRenderer = ({ index, isScrolling, key, style }) => {
     return (
         <li className={"list-group-item " + this.state.data[index].type }  key={`liMessages_${index}`}>{this.state.data[index].message}</li>
-    //   <div key={key} style={style}>
-    //     <div>{this.state.data[index].message}</div>
-    //     {/* <div>{this.props.data[index].email}</div> */}
-    //   </div>
     );
   };
 

src/components/DebugMessages.js

-import {  useState } from "react";
+import {  useState , useEffect } from "react";
 import DebugList from"./DebugList";
 
 const DebugMessages =({socket})=>
@@ -7,7 +7,7 @@ const DebugMessages =({socket})=>
 
 
 
-
+useEffect(() => {
   socket.on("debugMessages", (res) => {
 
     console.log('1',res)
@@ -16,15 +16,18 @@ const DebugMessages =({socket})=>
     // let db=[res,...debugMessages]
     // let dbl=db.map((msg)=>{return msg['id']})
     setDebugMessages([res,...debugMessages]);
+  
+}, [])
+  
 
   })
     return(
-      //   <ul className="list-group">
-      //      {(debugMessages || []).map((msg, index) => (
-      //   <li className={"list-group-item " + msg.type }  key={`liMessages_${index}`}>{msg.message}</li>
-      //       ) )}
-      // </ul>
-      <DebugList data={debugMessages}  />
+        <ul className="list-group">
+           {(debugMessages || []).map((msg, index) => (
+        <li className={"list-group-item " + msg.type }  key={`liMessages_${index}`}>{msg.message}</li>
+            ) )}
+      </ul>
+      // <DebugList data={debugMessages}  />
     )
 }
 export default DebugMessages;
\ No newline at end of file

src/components/UIElements/Camera.js

@@ -9,30 +9,30 @@ import {
 import "./Camera.css";
 const Camera = (props) => {
   return (
-    <div className={"border border-dark p-1 rounded " + ( props.connected === 0 ? "" : "border-thick") }>
-      <div className={props.bat < 20 ? " text-danger" : ""}>
+    <div className={"border border-dark p-1 rounded " + ( props.data.connected === 0 ? "" : "border-thick") }>
+      <div className={props.data.bat < 20 ? " text-danger" : ""}>
         <div className="col-3 float-left text-right">
           <FontAwesomeIcon
-            icon={props.bat < 20 ? faBatteryQuarter : faBatteryFull}
+            icon={props.data.bat < 20 ? faBatteryQuarter : faBatteryFull}
             className="menu-icon "
           />
         </div>
-        <span className={props.bat < 20 ? " p-1 text-danger small" : "p-1 small"}>
-          {props.bat}%
+        <span className={props.data.bat < 20 ? " p-1 text-danger small" : "p-1 small"}>
+          {props.data.bat}%
         </span>
       </div>
-      <div className={props.connection ?  "text-success" :" text-danger"}>
+      <div className={props.data.connection ?  "text-success" :" text-danger"}>
         <div className="col-3 float-left text-right">
-          <FontAwesomeIcon icon={props.connection ? faLink : faUnlink} className="menu-icon" />
+          <FontAwesomeIcon icon={props.data.connection ? faLink : faUnlink} className="menu-icon" />
         </div>
-        <span className={ props.recording ? "flash small" :" small"}>{props.name}</span>
+        <span className={ props.data.recording ? "flash small" :" small"}>{props.data.name || "--"}</span>
       </div>
-      <div className={props.sd < 60 ? "m-2  text-danger" : "m-2 "}>
+      <div className={props.data.sd < 60 ? "m-2  text-danger" : "m-2 "}>
         <div className="col-3 float-left text-right">
           <FontAwesomeIcon icon={faSdCard} className="menu-icon" />
         </div>
         <span className="p-1 small">
-          {Math.floor(props.sd / 60)}:{Math.floor(props.sd % 60)}
+          {Math.floor(props.data.sd / 60)}:{Math.floor(props.data.sd % 60)}
         </span>
       </div>
     </div>

src/components/UIElements/Gps.js

@@ -7,7 +7,7 @@ const Gps = ({socket}) => {
 
   const [gpsData, setGpsData] = useState({}); 
   socket.on("gpsData", (res) => {
-    console.log(res);
+   // console.log(res);
     setGpsData(res);
 
   })