From 76ac02d3ce0ed066c8f87c836284dc036b57326f Mon Sep 17 00:00:00 2001 From: Carter Date: Wed, 2 Apr 2025 11:26:31 -0600 Subject: [PATCH] santizing tab order array so that it's never misformatted --- src/bin/BinYards.tsx | 1 + src/common/DraggableTabs.tsx | 45 ++++++++++++++++++++++++++++++++++-- 2 files changed, 44 insertions(+), 2 deletions(-) diff --git a/src/bin/BinYards.tsx b/src/bin/BinYards.tsx index 092c542..920b510 100644 --- a/src/bin/BinYards.tsx +++ b/src/bin/BinYards.tsx @@ -213,6 +213,7 @@ export default function BinYard(props: Props) { useEffect(() => { if (props.yards && props.yardPerms) { + console.log(props.yards) setBinYards(props.yards); setYardPermissions(props.yardPerms); return; diff --git a/src/common/DraggableTabs.tsx b/src/common/DraggableTabs.tsx index a2de42e..ffe0b64 100644 --- a/src/common/DraggableTabs.tsx +++ b/src/common/DraggableTabs.tsx @@ -32,10 +32,51 @@ export default function DraggableTabs(props: DraggableTabsProps) { return storedValue !== null ? JSON.parse(storedValue) : []; }); + const sanitize = (order: any[]) => { + let newOrder = [...order] + // if there's something less than 0, increase everything by one + while (newOrder.some(num => num < 0)) { + // Increase all numbers by 1 + newOrder = newOrder.map(num => num + 1); + } + + // find a skipped index and flatten + while (true) { + // Find min and max values + const min = Math.min(...newOrder); + const max = Math.max(...newOrder); + + // Create a set of all numbers that should be present + const shouldHave = new Set(); + for (let i = min; i <= max; i++) { + shouldHave.add(i); + } + + // Create a set of actual numbers + const actual = new Set(newOrder); + + // Find first missing number + let missing = null; + for (let num of shouldHave) { + if (!actual.has(num)) { + missing = num; + break; + } + } + + // If no numbers are missing, we're done + if (missing === null || missing === undefined) break; + + // Reduce all numbers greater than the missing number by 1 + newOrder = newOrder.map(num => num > missing ? num - 1 : num); + } + return newOrder + } + // save tab order to cache when it changes useEffect(() => { console.log(tabOrder) - localStorage.setItem(cacheKey, JSON.stringify(tabOrder)); + localStorage.setItem(cacheKey, JSON.stringify(sanitize(tabOrder))); }, [tabOrder]); // useEffect(() => { @@ -66,7 +107,7 @@ export default function DraggableTabs(props: DraggableTabsProps) { // Find the missing key const removedIndex = oldKeys.findIndex(key => !newKeys.includes(key)); - setTabOrder(removeAndReduceFirst(tabOrder, removedIndex)) + setTabOrder(removeAndReduceFirst(sanitize(tabOrder), removedIndex)) } else if (tabOrder.length - initialChildren.length === -1) { let newTabOrder = [...tabOrder]