react-virtualized list

package-lock.json

@@ -4386,6 +4386,11 @@
         "wrap-ansi": "^6.2.0"
       }
     },
+    "clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -12589,6 +12594,19 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-virtualized": {
+      "version": "9.22.3",
+      "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.3.tgz",
+      "integrity": "sha512-MKovKMxWTcwPSxE1kK1HcheQTWfuCxAuBoSTf2gwyMM21NdX/PXUhnoP8Uc5dRKd+nKm8v41R36OellhdCpkrw==",
+      "requires": {
+        "@babel/runtime": "^7.7.2",
+        "clsx": "^1.0.4",
+        "dom-helpers": "^5.1.3",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
     "read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",

package.json

@@ -17,6 +17,7 @@
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.0.1",
     "react-scripts": "4.0.3",
+    "react-virtualized": "^9.22.3",
     "socket.io-client": "^4.3.2",
     "web-vitals": "^0.2.4",
     "workbox-background-sync": "^5.1.4",

src/App.js

@@ -6,9 +6,12 @@ import { Card } from "react-bootstrap";
 import Axios from "axios";
 import { useContext , useEffect , useState} from "react";
 import DebugMessages from "./components/DebugMessages";
+import DebugList from"./components/DebugList";
 import GeneralStatus from "./components/GeneralStatus";
 import socketClient   from "socket.io-client"
-const socket = socketClient("http://127.0.0.1:4500",{ transports: ["websocket"] });
+import {AutoSizer} from 'react-virtualized';
+
+const socket = socketClient("http://192.168.0.98:5000",{transports:['websocket']});
 function App() {
   // const [CameraData, setCameraData] = useState({});
   // const [newCameraData , setNewCameraData] = useState({});
@@ -18,6 +21,10 @@ function App() {
       console.log(res);
 
     })
+    // socket.on("debugMessages", (res) => {
+    //   console.log(res);
+
+    // })
     socket.on("connect_error", (err) => {
       console.log(`connect_error due to ${err.message}`);
     });
@@ -38,15 +45,19 @@ 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>
-      <div className=" m-2 px-2 border border-dark  rounded fill-height text-left">
-      <DebugMessages socket={socket} />
+      <div className=" m-2 px-2 border border-dark  rounded fill-height text-left ">
+      <AutoSizer>
+      {({ width, height }) => (
+      <DebugList socket={socket} width={width} height={height} ></DebugList>
+      )}
+      </AutoSizer>
       </div>
     </div>
   );

src/components/DebugList.js

+import React from "react";
+import { List,} from "react-virtualized";
+class DebugList extends React.Component {
+  state = {
+    data: [],
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    this.props.socket.on("debugMessages", (res) => {
+      // // console.log('2',res)
+      //  let db=[]
+      // let db=[res,...debugMessages]
+      // let dbl=db.map((msg)=>{return msg['id']})
+      let mydata = [res, ...this.state.data];
+      this.setState({ data: mydata });
+    });
+  }
+
+  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>
+    );
+  };
+
+  render() {
+    const height = this.props.height;
+    const rowHeight = 40;
+    const width = this.props.width;
+    return (
+      <ul className="list-group">
+        <List
+          rowCount={this.state.data.length}
+          width={width}
+          height={height - 10}
+          rowHeight={20}
+          rowRenderer={this.rowRenderer}
+          overscanRowCount={3}
+        />
+      </ul>
+    );
+  }
+}
+export default DebugList;