From f45aa6991734bfed58e96e7f20719913235d8c98 Mon Sep 17 00:00:00 2001
From: Dave Richer <dave@imexsystems.ca>
Date: Tue, 16 Jul 2024 15:53:56 -0400
Subject: [PATCH] - misc updates / clear stage

Signed-off-by: Dave Richer <dave@imexsystems.ca>
---
 .../components/HeightMemoryWrapper.jsx        | 18 +++++++---------
 .../components/SizeMemoryWrapper.jsx          | 21 +++++++++++--------
 .../trello-board/controllers/Lane.jsx         |  3 ++-
 3 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/client/src/components/production-board-kanban/trello-board/components/HeightMemoryWrapper.jsx b/client/src/components/production-board-kanban/trello-board/components/HeightMemoryWrapper.jsx
index d423276d2..af8544906 100644
--- a/client/src/components/production-board-kanban/trello-board/components/HeightMemoryWrapper.jsx
+++ b/client/src/components/production-board-kanban/trello-board/components/HeightMemoryWrapper.jsx
@@ -1,30 +1,28 @@
 import React, { useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 
-const heightMap = new Map();
-
 /**
  * Height Memory Wrapper
  * @param children
  * @param maxHeight
  * @param setMaxHeight
  * @param override - Override the minHeight style from being set
- * @param key - Unique key to preserve height for items with the same key
- * @returns {Element}
- * @constructor
+ * @param itemKey - Unique key to preserve height for items with the same key
+ * @returns {JSX.Element}
  */
 const HeightMemoryWrapper = ({ children, maxHeight, setMaxHeight, override, itemKey }) => {
   const ref = useRef(null);
+  const heightMapRef = useRef(new Map());
   const [localMaxHeight, setLocalMaxHeight] = useState(maxHeight);
 
   useEffect(() => {
-    const currentRef = ref.current; // Step 1: Capture the current ref value
+    const currentRef = ref.current;
     const updateHeight = () => {
       const currentHeight = currentRef?.firstChild?.clientHeight || 0;
       if (itemKey) {
-        const keyHeight = heightMap.get(itemKey) || 0;
+        const keyHeight = heightMapRef.current.get(itemKey) || 0;
         const newHeight = Math.max(keyHeight, currentHeight);
-        heightMap.set(itemKey, newHeight);
+        heightMapRef.current.set(itemKey, newHeight);
         setLocalMaxHeight(newHeight);
       } else {
         setLocalMaxHeight((prevHeight) => Math.max(prevHeight, currentHeight));
@@ -45,8 +43,8 @@ const HeightMemoryWrapper = ({ children, maxHeight, setMaxHeight, override, item
   }, [itemKey, setMaxHeight]);
 
   useEffect(() => {
-    if (itemKey && heightMap.has(itemKey)) {
-      setLocalMaxHeight(heightMap.get(itemKey));
+    if (itemKey && heightMapRef.current.has(itemKey)) {
+      setLocalMaxHeight(heightMapRef.current.get(itemKey));
     }
   }, [itemKey]);
 
diff --git a/client/src/components/production-board-kanban/trello-board/components/SizeMemoryWrapper.jsx b/client/src/components/production-board-kanban/trello-board/components/SizeMemoryWrapper.jsx
index 377b5d1fd..f0711544f 100644
--- a/client/src/components/production-board-kanban/trello-board/components/SizeMemoryWrapper.jsx
+++ b/client/src/components/production-board-kanban/trello-board/components/SizeMemoryWrapper.jsx
@@ -5,20 +5,13 @@ const SizeMemoryWrapper = ({ children, maxHeight, setMaxHeight, maxWidth, setMax
   const ref = useRef(null);
 
   useEffect(() => {
-    const currentRef = ref.current; // Capture the current ref value
+    const currentRef = ref.current;
 
     const updateSize = () => {
-      // Check if the zoom level is less than 100%
-      if (window.devicePixelRatio < 1) {
-        return; // Do not update width and height
-      }
-
       const currentHeight = currentRef?.firstChild?.clientHeight || 0;
       const currentWidth = currentRef?.firstChild?.clientWidth || 0;
-      // Update height as before
       setMaxHeight((prevHeight) => Math.max(prevHeight, currentHeight));
-      // Update width to decrease when zooming back in
-      setMaxWidth((prevWidth) => Math.max(prevWidth, currentWidth)); // Increase width if current is greater than previous
+      setMaxWidth((prevWidth) => Math.max(prevWidth, currentWidth));
     };
 
     const resizeObserver = new ResizeObserver(updateSize);
@@ -27,10 +20,20 @@ const SizeMemoryWrapper = ({ children, maxHeight, setMaxHeight, maxWidth, setMax
       resizeObserver.observe(currentRef.firstChild);
     }
 
+    const handleLoad = () => {
+      if (window.devicePixelRatio < 1) {
+        return; // Do not update width and height
+      }
+      updateSize();
+    };
+
+    window.addEventListener("load", handleLoad);
+
     return () => {
       if (currentRef?.firstChild) {
         resizeObserver.unobserve(currentRef.firstChild);
       }
+      window.removeEventListener("load", handleLoad);
     };
   }, [setMaxHeight, setMaxWidth]);
 
diff --git a/client/src/components/production-board-kanban/trello-board/controllers/Lane.jsx b/client/src/components/production-board-kanban/trello-board/controllers/Lane.jsx
index dbcefaeeb..493812840 100644
--- a/client/src/components/production-board-kanban/trello-board/controllers/Lane.jsx
+++ b/client/src/components/production-board-kanban/trello-board/controllers/Lane.jsx
@@ -172,7 +172,8 @@ const Lane = ({
           itemKey={objectHash({
             id,
             orientation,
-            cardSettings
+            cardSettings,
+            cardLength: renderedCards?.length
           })}
           maxHeight={maxLaneHeight}
           setMaxHeight={setMaxLaneHeight}