Feature/modernized toc

.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

@@ -15,33 +15,33 @@
     "github-buttons": "^2.27.0",
     "html-to-image": "^1.11.11",
     "moment": "^2.29.4",
-    "ol": "^9.1.0",
+    "ol": "7.5.1",
     "ol-mapbox-style": "^11.0.3",
     "proj4": "^2.7.5",
     "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",
     "react-masonry-css": "^1.0.16",
+    "react-movable": "^3.2.0",
     "react-responsive-modal": "^6.4.2",
     "react-router-dom": "^6.15.0",
     "react-scripts": "5.0.1",
     "react-select": "^5.7.4",
     "react-slick": "^0.29.0",
-    "react-sortable-hoc": "^2.0.0",
     "react-switch": "^7.0.0",
     "react-table": "^7.8.0",
     "react-table-sticky": "^1.1.3",
-    "react-tabs": "^4.3.0",
+    "react-tabs": "^6.0.2",
     "react-tooltip": "^5.20.0",
     "react-transition-group": "^4.4.5",
     "react-virtualized": "^9.22.5",

src/App.css

@@ -1,5 +1,11 @@
+body {
+  overflow: hidden;
+}
 #root {
   /* width: 100%;
     height: 100%;
     position: absolute; */
 }
+
+#portal-root {
+}

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/components/sc-sidebar.jsx

@@ -54,22 +54,22 @@ const defaultStyles = {
 
 const Sidebar = ({
   children,
-  styles,
+  styles = {},
   rootClassName,
   sidebarClassName,
   contentClassName,
   overlayClassName,
   sidebar,
-  docked,
-  open,
-  transitions,
-  touch,
-  touchHandleWidth,
-  pullRight,
-  shadow,
-  dragToggleDistance,
-  onSetOpen,
-  defaultSidebarWidth,
+  docked = false,
+  open = false,
+  transitions =true,
+  touch = true,
+  touchHandleWidth = 20,
+  pullRight = false,
+  shadow = true,
+  dragToggleDistance = 30,
+  onSetOpen = () => {},
+  defaultSidebarWidth = 0,
   rootId,
   sidebarId,
   contentId,
@@ -328,18 +328,4 @@ Sidebar.propTypes = {
   overlayId: PropTypes.string,
 };
 
-Sidebar.defaultProps = {
-  docked: false,
-  open: false,
-  transitions: true,
-  touch: true,
-  touchHandleWidth: 20,
-  pullRight: false,
-  shadow: true,
-  dragToggleDistance: 30,
-  onSetOpen: () => {},
-  styles: {},
-  defaultSidebarWidth: 0,
-};
-
 export default Sidebar;

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/header/Search.jsx

@@ -838,6 +838,7 @@ const Search = (props) => {
           if (item.type === "Map Layer") type = item.layerGroupName;
           else if (item.type === "Tool" || item.type === "Theme") type = "";
           else type = item.municipality;
+          delete props["key"]; //remove key from props
           return (
             <div key={helpers.getUID()} className={"sc-search-item-mui"} {...props}>
               <div className="sc-search-item-left">

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,36 +7,43 @@ 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) => {
+  const positionXRef = useRef(props.positionX || props.buttonEvent.pageX);
+  const positionYRef = useRef(props.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,
+    zIndex: 0,
+    top: positionYRef.current,
+    left: positionXRef.current,
     backgroundColor: "white",
     width: "180px",
   });
   const container = useRef(null);
+  useEffect(() => {
+    if (props.positionX !== undefined) positionXRef.current = props.positionX;
+    if (props.positionY !== undefined) positionYRef.current = props.positionY;
+    if (props.buttonEvent.pageX !== undefined) positionXRef.current = props.buttonEvent.pageX;
+    if (props.buttonEvent.pageY !== undefined) positionYRef.current = props.buttonEvent.pageY;
+    if (props.isVisible !== undefined) setIsVisible(props.isVisible);
+  }, [props.positionX, props.positionY, props.buttonEvent.pageX, props.buttonEvent.pageY, props.isVisible]);
+
   useEffect(() => {
     isMounted.current = true;
     waitForLoad("settings", Date.now(), 30, () => {
       document.body.addEventListener("click", handleClickAway, true);
     });
-  }, []);
-  useEffect(
-    () => () => {
+    return () => {
       isMounted.current = false;
       cleanup();
-    },
-    []
-  );
+    };
+  }, []);
   useEffect(() => {
     if (isMounted.current === false) return;
     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;
@@ -75,9 +82,13 @@ const FloatingMenu = (props) => {
   };
 
   const getStyle = (callback) => {
+    if (!isVisible || !isMounted.current) {
+      callback({ display: "none" });
+      return;
+    }
     let yOffset = 0;
     let xOffset = 0;
-    let style = null;
+    let styleLocal = null;
     window.requestAnimationFrame(() => {
       if (props.autoY) {
         if (container.current !== undefined && container.current !== null) {
@@ -89,33 +100,34 @@ const FloatingMenu = (props) => {
       }
 
       if (props.styleMode === "right") {
-        xOffset = props.buttonEvent.pageX;
+        xOffset = positionXRef.current;
       } else if (props.styleMode === "left") {
-        xOffset = props.buttonEvent.pageX - 180;
+        xOffset = positionXRef.current - 180;
       } else if (props.autoX) {
-        if (props.buttonEvent.pageX < 180) {
-          xOffset = props.buttonEvent.pageX;
+        if (positionXRef.current < 180) {
+          xOffset = positionXRef.current;
         } else {
-          xOffset = props.buttonEvent.pageX - 180;
+          xOffset = positionXRef.current - 180;
         }
       } else {
-        xOffset = props.buttonEvent.pageX;
+        xOffset = positionXRef.current;
       }
 
       if (props.yOffset !== undefined) yOffset = props.yOffset;
       if (props.xOffset !== undefined) xOffset = props.xOffset;
       let width = props.width !== undefined ? props.width : "180px";
-      style = {
+      styleLocal = {
         position: "absolute",
         zIndex: 1000,
-        top: props.buttonEvent.pageY - yOffset,
+        top: positionYRef.current - yOffset,
         //left: this.state.styleMode === "right" ? this.props.buttonEvent.pageX : this.props.buttonEvent.pageX - 180,
         left: xOffset,
         backgroundColor: "white",
         width: width,
       };
 
-      callback(style);
+      if (callback) callback(styleLocal);
+      else return styleLocal;
     });
   };
 

src/helpers/InfoRow.jsx

@@ -1,6 +1,5 @@
 import React from "react";
 import moment from "moment";
-import * as helpers from "../helpers/helpers";
 import Attachments from "../map/Attachments";
 export const InfoRow = (props) => {
   // CONVERT URL'S TO LINKS
@@ -30,7 +29,7 @@ export const InfoRow = (props) => {
         {props.value}
       </a>
     );
-  } else if (props.value != null && props.value.length >= 8 && moment(props.value, formats, true).isValid()) {
+  } else if (props.value != null && props.value.length >= 8 && moment(props.value, formats, true).isValid() && !label.toUpperCase().includes("NUMBER")) {
     value = moment(props.value).format("YYYY-MM-DD");
   }