From 041ed395bb9793b834a1af07df1a80a51c6cf835 Mon Sep 17 00:00:00 2001
From: Jeremie Pardou <571533+jrmi@users.noreply.github.com>
Date: Fri, 8 Mar 2024 22:56:47 +0100
Subject: [PATCH] Fix linkedItem perf and bug

---
 src/gameComponents/AdvancedImage/AdvancedImage.jsx |  8 ++++----
 src/gameComponents/CheckerBoard/CheckerBoard.jsx   |  8 ++++----
 src/gameComponents/DieImage/DieImage.jsx           |  3 +--
 src/gameComponents/Generator/Generator.jsx         |  8 +++++---
 src/gameComponents/Image/Image.jsx                 |  8 ++++----
 src/gameComponents/Zone/Zone.jsx                   | 14 +++++++++-----
 src/utils/item.js                                  |  8 ++++++--
 7 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/src/gameComponents/AdvancedImage/AdvancedImage.jsx b/src/gameComponents/AdvancedImage/AdvancedImage.jsx
index 8ee3f1bc..fedddd38 100644
--- a/src/gameComponents/AdvancedImage/AdvancedImage.jsx
+++ b/src/gameComponents/AdvancedImage/AdvancedImage.jsx
@@ -144,8 +144,6 @@ const AdvancedImage = ({
             linkedItems: newLinkedItems,
           };
         }
-
-        return {};
       }, true);
     },
     [currentItemId, getItemList, setState]
@@ -153,12 +151,14 @@ const AdvancedImage = ({
 
   React.useEffect(() => {
     const unregisterList = [];
-    unregisterList.push(register(onPlaceItem));
+    if (currentItemId) {
+      unregisterList.push(register(onPlaceItem));
+    }
 
     return () => {
       unregisterList.forEach((callback) => callback());
     };
-  }, [onPlaceItem, register]);
+  }, [currentItemId, onPlaceItem, register]);
 
   return (
     <Wrapper ref={wrapperRef}>
diff --git a/src/gameComponents/CheckerBoard/CheckerBoard.jsx b/src/gameComponents/CheckerBoard/CheckerBoard.jsx
index fe1c762c..a53b82ea 100644
--- a/src/gameComponents/CheckerBoard/CheckerBoard.jsx
+++ b/src/gameComponents/CheckerBoard/CheckerBoard.jsx
@@ -52,8 +52,6 @@ const CheckerBoard = ({
             linkedItems: newLinkedItems,
           };
         }
-
-        return {};
       }, true);
     },
     [currentItemId, getItemList, setState]
@@ -61,12 +59,14 @@ const CheckerBoard = ({
 
   React.useEffect(() => {
     const unregisterList = [];
-    unregisterList.push(register(onPlaceItem));
+    if (currentItemId) {
+      unregisterList.push(register(onPlaceItem));
+    }
 
     return () => {
       unregisterList.forEach((callback) => callback());
     };
-  }, [onPlaceItem, register]);
+  }, [currentItemId, onPlaceItem, register]);
 
   return (
     <StyledCheckerBoard
diff --git a/src/gameComponents/DieImage/DieImage.jsx b/src/gameComponents/DieImage/DieImage.jsx
index b3dbc4ac..c4d7ef20 100644
--- a/src/gameComponents/DieImage/DieImage.jsx
+++ b/src/gameComponents/DieImage/DieImage.jsx
@@ -18,13 +18,12 @@ const Dice = ({
 
   React.useEffect(() => {
     const unregisterList = [];
-    if (rollOnMove) {
+    if (id && rollOnMove) {
       const rollOnPlace = (itemIds) => {
         if (itemIds.includes(id)) {
           roll([id]);
         }
       };
-
       unregisterList.push(register(rollOnPlace));
     }
     return () => {
diff --git a/src/gameComponents/Generator/Generator.jsx b/src/gameComponents/Generator/Generator.jsx
index ca7c1c4f..3ffe859a 100644
--- a/src/gameComponents/Generator/Generator.jsx
+++ b/src/gameComponents/Generator/Generator.jsx
@@ -246,13 +246,15 @@ const Generator = ({ color = "#ccc", item, id, currentItemId, setState }) => {
      * Register events callback
      */
     const unregisterList = [];
-    unregisterList.push(registerPlace(onPlaceItem));
-    unregisterList.push(registerDelete(onDeleteItem));
+    if (currentItemId) {
+      unregisterList.push(registerPlace(onPlaceItem));
+      unregisterList.push(registerDelete(onDeleteItem));
+    }
 
     return () => {
       unregisterList.forEach((callback) => callback());
     };
-  }, [registerPlace, registerDelete, onPlaceItem, onDeleteItem]);
+  }, [registerPlace, registerDelete, onPlaceItem, onDeleteItem, currentItemId]);
 
   React.useEffect(() => {
     /**
diff --git a/src/gameComponents/Image/Image.jsx b/src/gameComponents/Image/Image.jsx
index a9feb9da..98f42ee5 100644
--- a/src/gameComponents/Image/Image.jsx
+++ b/src/gameComponents/Image/Image.jsx
@@ -137,8 +137,6 @@ const Image = ({
             linkedItems: newLinkedItems,
           };
         }
-
-        return {};
       }, true);
     },
     [currentItemId, getItemList, setState]
@@ -146,12 +144,14 @@ const Image = ({
 
   React.useEffect(() => {
     const unregisterList = [];
-    unregisterList.push(register(onPlaceItem));
+    if (currentItemId) {
+      unregisterList.push(register(onPlaceItem));
+    }
 
     return () => {
       unregisterList.forEach((callback) => callback());
     };
-  }, [onPlaceItem, register]);
+  }, [currentItemId, onPlaceItem, register]);
 
   return (
     <Wrapper ref={wrapperRef}>
diff --git a/src/gameComponents/Zone/Zone.jsx b/src/gameComponents/Zone/Zone.jsx
index 86b65da6..7b27b13b 100644
--- a/src/gameComponents/Zone/Zone.jsx
+++ b/src/gameComponents/Zone/Zone.jsx
@@ -77,8 +77,6 @@ const Zone = ({
             linkedItems: newLinkedItems,
           };
         }
-
-        return {};
       }, true);
 
       const addedItems = Object.entries(
@@ -106,18 +104,24 @@ const Zone = ({
 
   React.useEffect(() => {
     if (!holdItems && setState) {
-      setState((item) => ({ ...item, linkedItems: [] }));
+      setState((item) => {
+        if (!Array.isArray(item.linkedItems) || item.linkedItems.length > 0) {
+          return { linkedItems: [] };
+        }
+      }, true);
     }
   }, [holdItems, setState]);
 
   React.useEffect(() => {
     const unregisterList = [];
-    unregisterList.push(register(onInsideItem));
+    if (currentItemId) {
+      unregisterList.push(register(onInsideItem));
+    }
 
     return () => {
       unregisterList.forEach((callback) => callback());
     };
-  }, [onInsideItem, onItem, register]);
+  }, [currentItemId, onInsideItem, onItem, register]);
 
   return (
     <ZoneWrapper
diff --git a/src/utils/item.js b/src/utils/item.js
index 246aaea6..a40aec0c 100644
--- a/src/utils/item.js
+++ b/src/utils/item.js
@@ -28,9 +28,13 @@ export const areItemsInside = (
 ) => {
   return Object.fromEntries(
     [...itemIds, ...previousIds].map((itemId) => {
+      const elementToTest = getItemElement(itemId);
+      if (!elementToTest) {
+        return [itemId, { inside: false, added: false, removed: true }];
+      }
       const inside = centerOnly
-        ? isItemCenterInsideElement(getItemElement(itemId), element)
-        : isItemInsideElement(getItemElement(itemId), element);
+        ? isItemCenterInsideElement(elementToTest, element)
+        : isItemInsideElement(elementToTest, element);
 
       return [
         itemId,