Updated to React18 (#231)

.env

@@ -0,0 +1,5 @@
+REACT_APP_SECURED="false"
+REACT_APP_TENANT="TENANT_ID"
+REACT_APP_DEFAULT_SCOPE="DEFAULT_SCOPE"
+REACT_APP_CLIENTID="CLIENT_ID"
+REACT_APP_AUTHORITY="AUTHORITY"

Dockerfile

@@ -1,7 +1,7 @@
 #Stage 1
-FROM node:18-alpine
-# Create app directory
-WORKDIR /app
+# FROM node:18-alpine
+# # Create app directory
+# WORKDIR /app
 FROM nginx:1.25.0-alpine
 WORKDIR /usr/share/nginx/html
 RUN rm -rf ./*

package.json

@@ -21,13 +21,13 @@
     "rc-menu": "^9.11.1",
     "rc-slider": "^9.7.5",
     "re-resizable": "^6.9.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-collapsible": "^2.10.0",
     "react-color": "^2.19.3",
     "react-copy-to-clipboard": "^5.0.4",
     "react-datepicker": "^4.16.0",
     "react-device-detect": "^2.2.3",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-ga4": "^2.0.0",
     "react-highlight-words": "^0.20.0",
     "react-icons": "^4.8.0",

src/App.test.js

@@ -1,9 +1,10 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import App from "./App";
 
 it("renders without crashing", () => {
-	const div = document.createElement("div");
-	ReactDOM.render(<App />, div);
-	ReactDOM.unmountComponentAtNode(div);
+  const div = document.createElement("div");
+  const root = createRoot(div); // createRoot(container!) if you use TypeScript
+  root.render(<App />);
+  root.unmount();
 });

src/header/Header.jsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import ReactDOM from "react-dom";
 import "./Header.css";
 import Search from "./Search.jsx";
 import * as helpers from "../helpers/helpers";
@@ -50,7 +49,7 @@ const Header = (props) => {
         </FloatingMenu>
       </Portal>
     );
-    ReactDOM.render(menu, document.getElementById("portal-root"));
+    window.portalRoot.render(menu);
 
     helpers.addAppStat("Header Dot Menu", "Click");
   };

src/helpers/AttributeTable.jsx

@@ -1,17 +1,17 @@
-import React, { Component } from "react";
+import React, { Component, useEffect } from "react";
 import * as helpers from "./helpers";
 import "./AttributeTable.css";
 import { Resizable } from "re-resizable";
 import AttributeTableTabs from "./AttributeTableTabs.jsx";
 import FloatingMenu, { FloatingMenuItem } from "../helpers/FloatingMenu.jsx";
 import { Item as MenuItem } from "rc-menu";
 import Portal from "../helpers/Portal.jsx";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 
 class AttrbuteTable extends Component {
   constructor(props) {
     super(props);
-
+    this.resizable = {};
     this.numRecordsToPull = 200;
     this.state = {
       visible: false,
@@ -44,6 +44,7 @@ class AttrbuteTable extends Component {
 
   resizeFromMap = () => {
     const mapWidth = document.getElementById("map").offsetWidth;
+    if (!this.resizable) return;
     this.resizable.updateSize({
       width: mapWidth,
       height: this.resizable.resizable.offsetHeight,
@@ -195,7 +196,21 @@ class AttrbuteTable extends Component {
         </FloatingMenu>
       </Portal>
     );
-    ReactDOM.render(menu, document.getElementById("portal-root"));
+    const uniqueId = `portal-root-${"attribute-table-header"}}`;
+    const element = document.createElement("div");
+    element.setAttribute("id", uniqueId);
+    document.getElementById("portal-root").appendChild(element);
+    const root = createRoot(document.getElementById(uniqueId));
+    const MenuWithCallback = () => {
+      useEffect(() => {
+        return () => {
+          root.unmount();
+          document.getElementById(uniqueId).remove();
+        };
+      }, []);
+      return menu;
+    };
+    root.render(<MenuWithCallback />);
   };
 
   onRowClick = (evt, item, rowIndex) => {
@@ -217,7 +232,22 @@ class AttrbuteTable extends Component {
         </FloatingMenu>
       </Portal>
     );
-    ReactDOM.render(menu, document.getElementById("portal-root"));
+    const uniqueId = `portal-root-${"attribute-table-row"}`;
+    const element = document.createElement("div");
+    element.setAttribute("id", uniqueId);
+    document.getElementById("portal-root").appendChild(element);
+    const root = createRoot(document.getElementById(uniqueId));
+    const MenuWithCallback = () => {
+      useEffect(() => {
+        return () => {
+          root.unmount();
+          document.getElementById(uniqueId).remove();
+        };
+      }, []);
+      return menu;
+    };
+
+    root.render(<MenuWithCallback />);
   };
 
   onRowMenuItemClick = (key, item, rowIndex) => {

src/helpers/FloatingMenu.jsx

@@ -7,13 +7,16 @@ import { waitForLoad } from "./helpers";
 
 // PROPER USE OF THIS COMPONENT IS TO USE A PORTAL.  HAVE A LOOK AT MyMapsItem FOR AN EXAMPLE.
 const FloatingMenu = (props) => {
+  let { positionX, positionY } = props;
+  if (positionX === undefined) positionX = props.buttonEvent.pageX;
+  if (positionY === undefined) positionY = props.buttonEvent.pageY;
   const isMounted = useRef(false);
   const [isVisible, setIsVisible] = useState(true);
   const [style, setStyle] = useState({
     position: "absolute",
     zIndex: 10000,
-    top: props.buttonEvent.pageY,
-    left: props.buttonEvent.pageX,
+    top: positionY,
+    left: positionX,
     backgroundColor: "white",
     width: "180px",
   });
@@ -36,7 +39,7 @@ const FloatingMenu = (props) => {
     getStyle((newStyle) => {
       setStyle(newStyle);
     });
-  }, [props.autoX, props.autoY, props.buttonEvent.pageX, props.buttonEvent.pageY, props.styleMode]);
+  }, [props.autoX, props.autoY, props.buttonEvent.pageX, props.buttonEvent.pageY, props.styleMode, props.positionX, props.positionY, props.yOffset, props.xOffset, props.width]);
   const cleanup = () => {
     document.body.removeEventListener("click", handleClickAway, true);
     container.current = null;
@@ -89,17 +92,17 @@ const FloatingMenu = (props) => {
       }
 
       if (props.styleMode === "right") {
-        xOffset = props.buttonEvent.pageX;
+        xOffset = positionX;
       } else if (props.styleMode === "left") {
-        xOffset = props.buttonEvent.pageX - 180;
+        xOffset = positionX - 180;
       } else if (props.autoX) {
-        if (props.buttonEvent.pageX < 180) {
-          xOffset = props.buttonEvent.pageX;
+        if (positionX < 180) {
+          xOffset = positionX;
         } else {
-          xOffset = props.buttonEvent.pageX - 180;
+          xOffset = positionX - 180;
         }
       } else {
-        xOffset = props.buttonEvent.pageX;
+        xOffset = positionX;
       }
 
       if (props.yOffset !== undefined) yOffset = props.yOffset;
@@ -108,7 +111,7 @@ const FloatingMenu = (props) => {
       style = {
         position: "absolute",
         zIndex: 1000,
-        top: props.buttonEvent.pageY - yOffset,
+        top: positionY - yOffset,
         //left: this.state.styleMode === "right" ? this.props.buttonEvent.pageX : this.props.buttonEvent.pageX - 180,
         left: xOffset,
         backgroundColor: "white",

src/helpers/ModalWindowR.jsx

@@ -1,28 +1,25 @@
 import React from "react";
-import ReactDOM from "react-dom";
 import Modal from "react-responsive-modal";
 
 export default class ModalWindowR extends React.Component {
-	state = {
-		open: this.props.open ? true : false,
-	};
+  state = {
+    open: this.props.open ? true : false,
+  };
 
-	onOpenModal = () => {
-		this.setState({ open: true });
-	};
+  onOpenModal = () => {
+    this.setState({ open: true });
+  };
 
-	onCloseModal = () => {
-		this.setState({ open: false });
-	};
+  onCloseModal = () => {
+    this.setState({ open: false });
+  };
 
-	render() {
-		const { open } = this.state;
-		return (
-			<Modal open={open} onClose={this.onCloseModal} center container={this.props.container}>
-				<h2>Simple centered modal</h2>
-			</Modal>
-		);
-	}
+  render() {
+    const { open } = this.state;
+    return (
+      <Modal open={open} onClose={this.onCloseModal} center container={this.props.container}>
+        <h2>Simple centered modal</h2>
+      </Modal>
+    );
+  }
 }
-
-//ReactDOM.render(<ModalWindowR />, document.getElementById('root'));