Merge pull request #96 from RENCI/checkbox-issues

select all and delete all now work again
RENCI · Feb 28, 2024 · 36ba1cd · 36ba1cd
2 parents 143e33d + 1bf0c15
commit 36ba1cd
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 24 deletions.
diff --git a/lib/custom-ui/components/drawer/layers-list/layer-card.js b/lib/custom-ui/components/drawer/layers-list/layer-card.js
@@ -30,7 +30,8 @@ export const LayerCard = ({
   setCheckedLayers,
   checkedLayers,
   setDisableDelete,
-  setAddHurricaneLayers
+  setAddHurricaneLayers,
+  items
 }) => {
   const {
     activeLayerId,
@@ -43,6 +44,7 @@ export const LayerCard = ({
   } = useLayers();
   const [checked, setChecked] = React.useState(false);
   const [ch, setCh] = React.useState(true);
+  const [alreadyExists, setAlreadyExists] = React.useState(false);
   setAddHurricaneLayers(true);
 
   // convert the product type to a readable layer name
@@ -69,38 +71,52 @@ export const LayerCard = ({
   const currentlyActive = useMemo(() => id === activeLayerId, [activeLayerId]);
 
   useEffect(() => {
-    // if (checkedLayers.includes(layer) == false) {
-    // console.log(layer)
-    // let newArr = checkedLayers.filter((o) => o.id !== id);
-
-    // setCheckedLayers([
-    //   ...newArr,
-    //   {
-    //     id: id,
-    //     delete: handleRemoveLayer,
-    //     checked: checked,
-    //     setChecked: setChecked
-    //   }
-    // ]);
-    if (ch) {
-      console.log(Math.random() + Math.random());
+    const containsLayer = checkedLayers.some(
+      (item) => item.id == layer.uniqueId
+    );
+    if (containsLayer) {
+      setAlreadyExists(true);
+    } else if (ch) {
       setCheckedLayers([
         ...checkedLayers,
         {
-          id: Math.random() + Math.random(),
+          id: layer.uniqueId,
           delete: handleRemoveLayer,
           checked: checked,
           setChecked: setChecked
         }
       ]);
       setCh(false);
-      console.log(checkedLayers);
     }
+  }, []);
 
-    // }
+  // useEffect(() => {
+  //   // if (checkedLayers.includes(layer) == false) {
+  //   // console.log(layer)
+  //   // let newArr = checkedLayers.filter((o) => o.id !== id);
 
-    // handleChange({ target: { checked: false } })
-  }, []);
+  //   // setCheckedLayers([
+  //   //   ...newArr,
+  //   //   {
+  //   //     id: id,
+  //   //     delete: handleRemoveLayer,
+  //   //     checked: checked,
+  //   //     setChecked: setChecked
+  //   //   }
+  //   // ]);
+  //   if (ch) {
+  //     setCheckedLayers([
+  //       ...checkedLayers,
+  //       {
+  //         id: layer.uniqueId,
+  //         delete: handleRemoveLayer,
+  //         checked: checked,
+  //         setChecked: setChecked
+  //       }
+  //     ]);
+  //     setCh(false);
+  //   }
+  // }, []);
 
   // This function removes the layer from the workbench/map and from the context to sync the changes to the UI
   const handleRemoveLayer = () => {
@@ -183,6 +199,10 @@ export const LayerCard = ({
     ]);
   };
 
+  if (alreadyExists) {
+    return null;
+  }
+
   return (
     <Card
       sx={{

diff --git a/lib/custom-ui/components/drawer/layers-list/layers-list.js b/lib/custom-ui/components/drawer/layers-list/layers-list.js
@@ -83,6 +83,7 @@ export const LayersList = ({ viewState, terria }) => {
 
   const handleSelectAll = (e) => {
     console.log(checkedLayers);
+    console.log(viewState.terria.workbench.items);
     if (checked === false) {
       setChecked(true);
       setDisableDelete(false);
@@ -144,7 +145,7 @@ export const LayersList = ({ viewState, terria }) => {
             {...provided.droppableProps}
             ref={provided.innerRef}
           >
-            {/* <div
+            <div
               style={{
                 display: "flex",
                 "justify-content": "start",
@@ -175,13 +176,13 @@ export const LayersList = ({ viewState, terria }) => {
               >
                 <DeleteIcon />
               </Button>
-            </div> */}
+            </div>
             {viewState.terria &&
               viewState.terria.workbench.items.map(
                 (layer, index) =>
                   layer.type !== "csv" && (
                     <Draggable
-                      key={layer.uniqueId + index}
+                      key={layer.uniqueId}
                       draggableId={layer.uniqueId}
                       index={index}
                     >
@@ -210,6 +211,7 @@ export const LayersList = ({ viewState, terria }) => {
                               setCheckedLayers={setCheckedLayers}
                               setDisableDelete={setDisableDelete}
                               setAddHurricaneLayers={setAddHurricaneLayers}
+                              items={viewState.terria.workbench.items}
                             />
                           </div>
                         </div>