fixed tab order logic when tabs are added or removed

src/bin/BinYards.tsx

@@ -235,11 +235,13 @@ export default function BinYard(props: Props) {
     newBinYard.name = addYardName;
     newBinYard.description = addYardDescription;
     newBinYard.owner = user.id();
-    newBinYard.userSort[user.id()] = binYards.length + 1;
     binYardAPI
       .addBinYard(newBinYard)
       .then(_resp => {
-        loadYards();
+        // loadYards();
+        let newYards = [...binYards]
+        newYards.push(newBinYard)
+        setBinYards(newYards)
         setShowAddYard(false);
         openSnackbar("success", "Bin Yard created :)");
       })
@@ -357,50 +359,6 @@ export default function BinYard(props: Props) {
       });
   };
 
-  const moveLeft = (index: number) => {
-    let key = as ? as : user.id();
-    if (binYards[index - 1]) {
-      let left = binYards[index - 1].userSort[key] ?? index - 1;
-      let right = binYards[index].userSort[key] ?? index;
-      let binLeft = binYards[index - 1];
-      let binRight = binYards[index];
-      binLeft.userSort[key] = right;
-      binRight.userSort[key] = left;
-      if (binRight.userSort[key] >= binLeft.userSort[key]) {
-        binLeft.userSort[key] = binRight.userSort[key] + 1;
-      }
-      let leftPromise = binYardAPI.updateBinYard(binLeft.key, binLeft, true);
-      let rightPromise = binYardAPI.updateBinYard(binRight.key, binRight, true);
-      Promise.all([leftPromise, rightPromise]).then((/*[leftResp, rightResp]*/) => {
-        loadYards();
-        if (index === tab - 1) setTab(tab - 1);
-        if (index === tab) setTab(tab + 1);
-      });
-    }
-  };
-
-  const moveRight = (index: number) => {
-    let key = as ? as : user.id();
-    if (binYards[index + 1]) {
-      let left = binYards[index].userSort[key] ?? index;
-      let right = binYards[index + 1].userSort[key] ?? index + 1;
-      let binLeft = binYards[index];
-      let binRight = binYards[index + 1];
-      binLeft.userSort[key] = right;
-      binRight.userSort[key] = left;
-      if (binRight.userSort[key] <= binLeft.userSort[key]) {
-        binRight.userSort[key] = binLeft.userSort[key] - 1;
-      }
-      let leftPromise = binYardAPI.updateBinYard(binLeft.key, binLeft, true);
-      let rightPromise = binYardAPI.updateBinYard(binRight.key, binRight, true);
-      Promise.all([leftPromise, rightPromise]).then((/*[leftResp, rightResp]*/) => {
-        loadYards();
-        if (index === tab - 1) setTab(tab + 1);
-        if (index === tab - 2) setTab(tab - 1);
-      });
-    }
-  };
-
   const openShareDialog = () => {
     setShareDialog(true);
   };
@@ -764,7 +722,8 @@ export default function BinYard(props: Props) {
                 n.name
               )
             }
-            key={index}>
+            key={n.name}
+          >
             <Tab
               classes={{ root: classes.tab, selected: classes.selectedTab }}
               key={index}

src/common/DraggableTabs.tsx

@@ -1,7 +1,7 @@
 import { Tabs, TabsProps } from "@mui/material";
 import { getContextKeys, getContextTypes } from "pbHelpers/Context";
 import { useGlobalState } from "providers";
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useState, useRef, ReactNode } from "react";
 // import AnimatedTabs from "./AnimatedTabs";
 
 interface DraggableTabsProps extends TabsProps {
@@ -15,7 +15,7 @@ export default function DraggableTabs(props: DraggableTabsProps) {
   const [selectedValue, setSelectedValue] = useState<any>(tabsProps.value);
   const initialChildren = React.Children.toArray(children);
   const [hoveredIndex, setHoveredIndex] = useState<number>(-1); // Track hovered tab
-  const tabRefs = useRef<(HTMLDivElement | null)[]>([]); // Refs for each tab
+  const tabRefs = useRef<(string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal)[]>([]); // Refs for each tab
   const [{ as, user }] = useGlobalState()
   
   // cache key should be unique for the context and user
@@ -34,16 +34,49 @@ export default function DraggableTabs(props: DraggableTabsProps) {
 
   // save tab order to cache when it changes
   useEffect(() => {
-    // console.log(initialChildren.length)
+    console.log(tabOrder)
     localStorage.setItem(cacheKey, JSON.stringify(tabOrder));
   }, [tabOrder]);
 
+  // useEffect(() => {
+  //   console.log(initialChildren.length)
+  // }, [initialChildren])
+
+  const getKey = (node: ReactNode): string => {
+    return (React.isValidElement(node) && 'key' in node && typeof node.key === 'string') ? node.key : "";
+  }
+
+  function removeAndReduceFirst(arr: any[], numToRemove: number) {
+    let found = false;
+    return arr.map(num => {
+        if (num === numToRemove && !found) {
+            found = true;
+            return null;  // We'll filter this out later
+        }
+        return num > numToRemove ? num - 1 : num;
+    }).filter(num => num !== null);
+}
+  
   useEffect(() => {
-    const newOrder = initialChildren.map((_, index) => index);
-    if (tabOrder.length < 1) setTabOrder(newOrder);
-    // const oddOnesOut = newOrder.filter(item => !tabOrder.includes(item))
-    // setTabOrder([...oddOnesOut, ...tabOrder])
-    tabRefs.current = new Array(newOrder.length).fill(null); // Initialize refs
+    if (tabOrder.length !== initialChildren.length && initialChildren.length > 0) {
+      if (tabOrder.length - initialChildren.length === 1) {
+        // Extract keys from the nodes
+        const oldKeys = tabRefs.current.map(node => getKey(node));
+        const newKeys = initialChildren.map(node => getKey(node));
+
+        // Find the missing key
+        const removedIndex = oldKeys.findIndex(key => !newKeys.includes(key));
+        setTabOrder(removeAndReduceFirst(tabOrder, removedIndex))
+        
+      } else if (tabOrder.length - initialChildren.length === -1) {
+        let newTabOrder = [...tabOrder]
+        newTabOrder.push(tabOrder.length)
+        setTabOrder(newTabOrder)
+      } else {
+        setTabOrder(initialChildren.map((_, index) => index))
+      }
+    }
+    tabRefs.current = initialChildren; // Initialize refs
   }, [initialChildren.length]);
 
   // Sync selectedValue with propValue if controlled

src/common/ImgIcon.tsx

@@ -1,7 +1,7 @@
-import { Icon } from "@mui/material";
+import { Icon, Theme } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme: Theme) => ({
   icon: {
     display: "flex",           // Ensure flexbox for centering
     justifyContent: "center",  // Center horizontally
@@ -14,6 +14,7 @@ const useStyles = makeStyles(() => ({
     maxWidth: "100%",          // Fit within container width
     width: "auto",             // Maintain aspect ratio
     height: "auto",            // Maintain aspect ratio
+    color: "black"
   },
 }));
 

src/pages/Devices.tsx

@@ -215,8 +215,6 @@ export default function Devices() {
     ).then(resp => {
       let newDevices: Device[] = []
       resp.data.devices.forEach(device => {
-        console.log(device.status)
-        console.log(device.status?.plenum?.overlays)
         if (device.status?.plenum?.temperature) {
           setHasPlenums(true)
         }