Attempt to fix #196 - sticky selector

src/components/Board/Items/useItems.js

@@ -42,7 +42,9 @@ const useItems = () => {
     (items) => {
       setItemMap(
         items.reduce((acc, item) => {
-          acc[item.id] = item;
+          if (item && item.id) {
+            acc[item.id] = item;
+          }
           return acc;
         }, {})
       );

src/components/Board/Selector.js

@@ -34,6 +34,11 @@ const findSelected = (itemMap, rect) => {
     .filter((elem) => {
       const { clientHeight, clientWidth, id } = elem;
       const item = itemMap[id];
+      if (!item) {
+        // Avoid to find item that are not yet removed from DOM
+        console.error(`Missing item ${id}`);
+        return false;
+      }
       return (
         !item.locked &&
         isPointInsideRect({ x: item.x, y: item.y }, rect) &&

src/components/Board/game/atoms.js

@@ -23,7 +23,9 @@ export const AllItemsSelector = selector({
   key: "AllItemsSelector",
   get: ({ get }) => {
     const itemMap = get(ItemMapAtom);
-    return get(ItemListAtom).map((id) => itemMap[id]);
+    return get(ItemListAtom)
+      .map((id) => itemMap[id])
+      .filter((item) => item); // This filter clean the selection of missing items
   },
 });
 

src/hooks/useGame.js

@@ -37,7 +37,7 @@ export const GameProvider = ({ gameId, game, children }) => {
           newGame.availableItems.map((item) => ({ ...item, id: nanoid() }))
         );
       }
-      setItemList(newGame.items);
+      setItemList(newGame.items.filter((item) => item)); // The filter avoid the empty item bug on reload
       setBoardConfig(newGame.board, false);
       setGameLoaded(true);
     },