Make tile groups selectable

src/components/map/MapTiles.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Flex, Box, Text, IconButton, Close, Grid } from "theme-ui";
 import SimpleBar from "simplebar-react";
 
@@ -13,16 +13,16 @@ import FilterBar from "../FilterBar";
 import Sortable from "../drag/Sortable";
 import SortableTiles from "../drag/SortableTiles";
 
-import { useDatabase } from "../../contexts/DatabaseContext";
-
 import useResponsiveLayout from "../../hooks/useResponsiveLayout";
 
+import { groupsFromIds, itemsFromGroups } from "../../helpers/select";
+
 function MapTiles({
   maps,
+  mapStates,
   groups,
-  selectedMaps,
-  selectedMapStates,
-  onMapSelect,
+  selectedGroupIds,
+  onTileSelect,
   onMapsRemove,
   onMapsReset,
   onMapAdd,
@@ -33,46 +33,65 @@ function MapTiles({
   search,
   onSearchChange,
   onMapsGroup,
+  databaseDisabled,
 }) {
-  const { databaseStatus } = useDatabase();
   const layout = useResponsiveLayout();
 
-  let hasMapState = false;
-  for (let state of selectedMapStates) {
-    if (
-      Object.values(state.tokens).length > 0 ||
-      Object.values(state.drawShapes).length > 0 ||
-      Object.values(state.fogShapes).length > 0 ||
-      Object.values(state.notes).length > 0
-    ) {
-      hasMapState = true;
-      break;
-    }
-  }
+  const [hasMapState, setHasMapState] = useState(false);
+  const [hasSelectedDefaultMap, setHasSelectedDefaultMap] = useState(false);
 
-  let hasSelectedDefaultMap = selectedMaps.some(
-    (map) => map.type === "default"
-  );
+  useEffect(() => {
+    const selectedGroups = groupsFromIds(selectedGroupIds, groups);
+    const selectedMaps = itemsFromGroups(selectedGroups, maps);
+    const selectedMapStates = itemsFromGroups(
+      selectedGroups,
+      mapStates,
+      true,
+      "mapId"
+    );
+
+    setHasSelectedDefaultMap(
+      selectedMaps.some((map) => map.type === "default")
+    );
+
+    let _hasMapState = false;
+    for (let state of selectedMapStates) {
+      if (
+        Object.values(state.tokens).length > 0 ||
+        Object.values(state.drawShapes).length > 0 ||
+        Object.values(state.fogShapes).length > 0 ||
+        Object.values(state.notes).length > 0
+      ) {
+        _hasMapState = true;
+        break;
+      }
+    }
+
+    setHasMapState(_hasMapState);
+  }, [selectedGroupIds, maps, mapStates, groups]);
 
   function groupToMapTile(group) {
     if (group.type === "item") {
       const map = maps.find((map) => map.id === group.id);
-      const isSelected = selectedMaps.includes(map);
+      const isSelected = selectedGroupIds.includes(group.id);
       return (
         <MapTile
           key={map.id}
           map={map}
           isSelected={isSelected}
-          onMapSelect={onMapSelect}
-          onMapEdit={onMapEdit}
+          onSelect={onTileSelect}
+          onEdit={onMapEdit}
           onDone={onDone}
           canEdit={
-            isSelected && selectMode === "single" && selectedMaps.length === 1
+            isSelected &&
+            selectMode === "single" &&
+            selectedGroupIds.length === 1
           }
           badges={[`${map.grid.size.x}x${map.grid.size.y}`]}
         />
       );
     } else {
+      const isSelected = selectedGroupIds.includes(group.id);
       return (
         <MapTileGroup
           key={group.id}
@@ -80,12 +99,14 @@ function MapTiles({
           maps={group.items.map((item) =>
             maps.find((map) => map.id === item.id)
           )}
+          isSelected={isSelected}
+          onSelect={onTileSelect}
         />
       );
     }
   }
 
-  const multipleSelected = selectedMaps.length > 1;
+  const multipleSelected = selectedGroupIds.length > 1;
 
   return (
     <SortableTiles
@@ -95,7 +116,7 @@ function MapTiles({
     >
       <Box sx={{ position: "relative" }}>
         <FilterBar
-          onFocus={() => onMapSelect()}
+          onFocus={() => onTileSelect()}
           search={search}
           onSearchChange={onSearchChange}
           selectMode={selectMode}
@@ -111,7 +132,7 @@ function MapTiles({
           <Grid
             p={2}
             pb={4}
-            pt={databaseStatus === "disabled" ? 4 : 2}
+            pt={databaseDisabled ? 4 : 2}
             bg="muted"
             sx={{
               borderRadius: "4px",
@@ -120,7 +141,7 @@ function MapTiles({
             }}
             gap={2}
             columns={layout.gridTemplate}
-            onClick={() => onMapSelect()}
+            onClick={() => onTileSelect()}
           >
             {groups.map((group) => (
               <Sortable id={group.id} key={group.id}>
@@ -129,7 +150,7 @@ function MapTiles({
             ))}
           </Grid>
         </SimpleBar>
-        {databaseStatus === "disabled" && (
+        {databaseDisabled && (
           <Box
             sx={{
               position: "absolute",
@@ -148,7 +169,7 @@ function MapTiles({
             </Text>
           </Box>
         )}
-        {selectedMaps.length > 0 && (
+        {selectedGroupIds.length > 0 && (
           <Flex
             sx={{
               position: "absolute",
@@ -162,7 +183,7 @@ function MapTiles({
             <Close
               title="Clear Selection"
               aria-label="Clear Selection"
-              onClick={() => onMapSelect()}
+              onClick={() => onTileSelect()}
             />
             <Flex>
               <IconButton