update package versions

also don't use react-bootstrap-table-next

webapp/package.json

@@ -2,46 +2,48 @@
   "name": "gap-service-editor",
   "version": "0.0.1",
   "devDependencies": {
-    "@babel/core": "^7.13.10",
-    "@babel/plugin-transform-runtime": "^7.13.10",
-    "@babel/preset-env": "^7.13.10",
-    "@babel/preset-react": "^7.16.0",
-    "@babel/preset-typescript": "^7.13.0",
-    "@babel/runtime": "^7.13.10",
+    "@babel/core": "^7.20.12",
+    "@babel/plugin-transform-runtime": "^7.19.6",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@babel/runtime": "^7.20.7",
+    "@types/bootstrap": "^5.2.6",
     "@types/fork-ts-checker-webpack-plugin": "^0.4.5",
-    "@types/react": "^17.0.37",
-    "@types/react-dom": "^17.0.11",
-    "@types/webpack": "^4.41.26",
-    "@types/webpack-dev-server": "^3.11.2",
-    "@typescript-eslint/eslint-plugin": "^4.17.0",
-    "@typescript-eslint/parser": "^4.17.0",
-    "babel-loader": "^8.2.2",
+    "@types/md5": "^2.3.2",
+    "@types/react": "^18.0.27",
+    "@types/react-bootstrap": "^0.32.32",
+    "@types/react-dom": "^18.0.10",
+    "@types/webpack": "^5.28.0",
+    "@types/webpack-dev-server": "^4.7.1",
+    "@typescript-eslint/eslint-plugin": "^5.48.2",
+    "@typescript-eslint/parser": "^5.48.2",
+    "babel-loader": "^9.1.2",
     "babel-plugin-transform-class-properties": "^6.24.1",
-    "css-loader": "^5.1.2",
-    "date-fns": "^2.26.0",
-    "eslint": "^7.22.0",
-    "eslint-plugin-react": "^7.27.1",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "fork-ts-checker-webpack-plugin": "^6.1.1",
-    "sass": "^1.32.8",
-    "sass-loader": "^11.0.1",
-    "style-loader": "^2.0.0",
-    "ts-node": "^9.1.1",
-    "typescript": "^4.2.3",
-    "webpack": "^5.25.0",
-    "webpack-cli": "^4.5.0",
-    "webpack-dev-server": "^3.11.2"
+    "css-loader": "^6.7.3",
+    "date-fns": "^2.29.3",
+    "eslint": "^8.32.0",
+    "eslint-plugin-react": "^7.32.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "fork-ts-checker-webpack-plugin": "^6.5.2",
+    "sass": "^1.57.1",
+    "sass-loader": "^13.2.0",
+    "style-loader": "^3.3.1",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.9.4",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1"
   },
   "scripts": {
     "start": "webpack serve --mode development --open",
     "build": "webpack --mode production"
   },
   "dependencies": {
-    "@types/react-bootstrap-table-next": "^4.0.16",
-    "bootstrap": "^4.6.0",
+    "bootstrap": "^5.2.3",
     "install": "^0.13.0",
-    "npm": "^7.6.3",
-    "react-bootstrap": "^2.0.2",
-    "react-bootstrap-table-next": "^4.0.3"
+    "md5": "^2.3.0",
+    "npm": "^9.3.1",
+    "react-bootstrap": "^2.7.0"
   }
 }

webapp/src/Things.tsx

 import React, {useEffect} from 'react';
-import BootstrapTable from 'react-bootstrap-table-next';
 import { formatDistance } from 'date-fns';
-
-import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
+import Table from 'react-bootstrap/Table';
+import md5 from 'md5';
 import "./styles.scss"
 
+
+export interface IAppProps {
+    refresh_frequency_ms?: number;
+    api_url?: string;
+}
+
 interface Thing {
     id: string;
     data1: string;
@@ -14,65 +19,50 @@ interface Thing {
     time: number;
 }
 
-
-export interface IAppProps {
-    refresh_frequency_ms?: number;
-    api_url?: string;
+interface IThingRowProps {
+    thing: Thing;
 }
 
-function timeFormatter(time: number, _thing: Thing): string {
-    return formatDistance(new Date(1000 * time), new Date());
-}
+const formatTime = (time: number): string => {
+    const distance = formatDistance(new Date(1000 * time), new Date());
+    const now = Math.floor(Date.now() / 1000);
+    return time > now ? 'in ' + distance : distance + ' ago';
+}  ;      
+
+const ThingHeader: React.FC = () => {
+    return <tr>
+        <th>id</th>
+        <th>data1</th>
+        <th>data2</th>
+        <th>data3</th>
+        <th>state</th>
+        <th>time</th>
+    </tr>;
+};
 
-const columns = [
-    {
-        dataField: 'state',
-        text: 'State'
-    },
-    {
-        dataField: 'data1',
-        text: 'Data 1'
-        // title: columnTitle
-    }, {
-        dataField: 'data2',
-        text: 'Data 2'
-    }, {
-        dataField: 'data3',
-        text: 'Data 3',
-        // classes: severityClasses,
-        // formatter: severityFormatter
-    }, {
-        dataField: 'time',
-        text: 'When',
-        formatter: timeFormatter
-    }
-];
-
-
-const ThingRow = (t: Thing): Thing => {
-    return {
-        id: t.id,
-        time: t.time,
-        state: t.state,
-        data1: t.data1,
-        data2: t.data2,
-        data3: t.data3
-    }
-}
+const ThingRow: React.FC<IThingRowProps> = (props) => {
 
+    return <tr className={props.thing.state ? 'bg-success' : 'bg-danger'}>
+            <td>{props.thing.id}</td>
+            <td>{props.thing.data1}</td>
+            <td>{props.thing.data2}</td>
+            <td>{props.thing.data3}</td>
+            <td>{props.thing.state ? 'yes' : 'no'}</td>
+            <td>{formatTime(props.thing.time)}</td>
+    </tr>;
+};
 
-const rowClass = (row: Thing, _rowIndex: number): string => {
-    if (row.state)
-        return 'state_true';
-    else
-        return 'state_false';
-}
+const _thingKey = (o: Thing): string => {
+    // just a unique value that is the same whenever
+    // all Thing attributes are the same
+    return md5(JSON.stringify(o, Object.keys(o).sort()));
+};
 
 const Things: React.FC<IAppProps> = (props) => {
 
     const [rows, setRows] = React.useState<Thing[]>([]);
     
-    console.log('re-rendering Services')
+    console.log('re-rendering Rows...')
 
     useEffect(() => {
 
@@ -85,12 +75,12 @@ const Things: React.FC<IAppProps> = (props) => {
             if (props.api_url) {
                 const response = await fetch(props.api_url);
                 const rsp_json = await response.json();
-                // console.log(JSON.stringify(rsp_json))
-                setRows(rsp_json.map((t: Thing) => ThingRow(t)));
+                // no check the response is really valid
+                setRows(rsp_json as Thing[]);
                 console.log(
                     "loaded "
                     + rsp_json.length.toString() 
-                    + " from '" + props.api_url + "'");
+                    + " things from '" + props.api_url + "'");
             } else {
                 console.log("props.service_list_api_uri is null: " + props.api_url);
             }
@@ -101,19 +91,14 @@ const Things: React.FC<IAppProps> = (props) => {
 
     }, [props.api_url, props.refresh_frequency_ms]);
 
-    const thing_comparator = (t1: Thing, t2: Thing): number => {
-        // sort by id ... arbitrary, as an example
-        return t1.id.localeCompare(t2.id);
-    }
-
-    return <BootstrapTable
-            keyField='key'
-            data={rows.sort(thing_comparator)}
-            columns={columns} 
-            rowClasses={rowClass}
-            />
-
-}
+    // return <Table striped bordered hover>
+    return <Table bordered hover>
+        <thead><ThingHeader /></thead>
+        <tbody>
+        {rows.map((t) => <ThingRow key={_thingKey(t)} thing={t} />)}
+        </tbody>
+    </Table>;
+};
 
 Things.defaultProps = {
     refresh_frequency_ms: 600000,  // 10 minutes

webapp/src/styles.scss

-table {
-    min-width: 650;
-}
-
-thead {
-    background-color: lightgray;
-}
-
-.state_true {
-    background-color: lightgreen;
-}
-
-.state_false {
-    background-color: red;
-}
+@import "~bootstrap/scss/bootstrap";

webapp/webpack.config.ts

 import path from "path";
-import webpack from "webpack";
+import { Configuration as WebpackConfiguration } from 'webpack';
+import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 
-const config: webpack.Configuration = {
+interface Configuration extends WebpackConfiguration {
+  devServer?: WebpackDevServerConfiguration;
+}
+
+const config: Configuration = {
   entry: "./src/index.tsx",
   module: {
     rules: [
@@ -46,7 +51,7 @@ const config: webpack.Configuration = {
     filename: "bundle.js",
   },
   devServer: {
-    contentBase: path.join(__dirname, "..", "gap_service_editor", "static"),
+    static: path.join(__dirname, "..", "gap_service_editor", "static"),
     compress: true,
     port: 4000,
   },