Fix add widget behavior, widget types and view settings button menu item...

client/src/components/Dashboard.jsx

@@ -8,62 +8,127 @@ import DialogPopup from './Canvas/CanvasComponents/DialogPopup.jsx';
 export default function Dashboard() {
   const recipe = useRecipe({ key: "dashboard" });
   const styles = recipe();
-
-  const [darkMode, setDarkMode] = useState(false);
-  const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
-  const [isDelete, setIsDelete] = useState(false);
-  const [originalLayout, setOriginalLayout] = useState([]);
-  const [originalWidgets, setOriginalWidgets] = useState([]);
-  const [view, setView] = useState("mydashboard");
-  const [layout, setLayout] = useState([]);
-  const [widgetArray, setWidgetArray] = useState([]);
   const dialog = useDialog();
+  const [darkMode, setDarkMode] = useState(false);
 
+  const [view, setView] = useState("mydashboard");
+
+  const emptyDash = () => ({
+    layout: [], 
+    widgetArray: [],
+    originalLayout: [],
+    originalWidgets: [],
+    isEditable: false,  
+    isDelete: false,
+  })
+
+  // Add views as needed to initialize widget canvas views 
+  const CANVAS_VIEWS = new Set([ "mydashboard", "gas" ]); 
+
+  // Widget dashboard state
+  const [dashboards, setDashboards] = useState(() => ({
+    mydashboard: emptyDash(),
+    gas: emptyDash(),
+  }));
+
+  const isCanvasView = CANVAS_VIEWS.has(view);
+  const dash = dashboards[view] ?? emptyDash();
+
+  const updateDash = (key, updater) => {
+    setDashboards(prev => ({
+      ...prev,
+      [key]: updater(prev[key] ?? emptyDash()),
+    }));
+  };
+
+  // Widget setter functions
+  const setLayout = (fnOrValue) => {
+    if (!isCanvasView) return; 
+    updateDash(view, s => ({
+      ...s,
+      layout: typeof fnOrValue === "function" ? fnOrValue( s.layout ) : fnOrValue,
+    }));
+  };
+
+  const setWidgetArray = (fnOrValue) => {
+    if (!isCanvasView) return;
+    updateDash(view, s => ({
+      ...s, 
+      widgetArray: typeof fnOrValue === "function" ? fnOrValue(s.widgetArray) : fnOrValue,
+    }));
+  };
+
+  const setIsEditable = (value) => {
+    if (!isCanvasView) return;
+    updateDash(view, s => ({ ...s, isEditable: value }));
+  };
+
+  const setIsDelete = (value) => { 
+    if (!isCanvasView) return;
+    updateDash(view, s => ({ ...s, isDelete: value }));
+  };
+ 
   const beginEditIfNeeded = () => {
-    if ( !isEditable ) {
-      setOriginalLayout(layout);
-      setOriginalWidgets(widgetArray);
-    }
+    if (!isCanvasView) return;
+    updateDash(view, s => {
+      if(s.isEditable) return s; // already editing
+      return {
+        ...s,
+        originalLayout: s.layout,
+        originalWidgets: s.widgetArray,
+      };
+    });
   };
 
   const onCancel = () => {
-    console.log("canceling changes...");
-    console.log(originalWidgets);
-    if (originalLayout.length) { 
-      setLayout(originalLayout.map(item => ({
-        ...item, 
-        static: true
-      })));
-    };
-    setWidgetArray(originalWidgets);
-    setIsEditable(false);
-    setIsDelete(false);
-    setOriginalLayout([]); 
-    setOriginalWidgets([]);
-  }
-  
-  // Prevent navigation while in Edit mode without saving or cancelling
-  const handleViewChange = (nextView) => { 
-    console.log("1. handling view change")
-    if (view === "mydashboard" && isEditable) {
-      console.log("2. currently editing");
+    if (!isCanvasView) return;
+    
+    updateDash(view, s => ({
+      ...s,
+      layout: (s.originalLayout?.length ? s.originalLayout : s.layout).map(it => ({
+        ...it,
+        static: true,
+      })),
+      widgetArray: s.originalWidgets ?? s.widgetArray,
+      isEditable: false,
+      isDelete: false, 
+      originalLayout: [],
+      originalWidgets: [],
+    }));
+  };
+
+  const onLayoutChange = (newLayout) => {
+    setLayout(newLayout);
+  };
+
+  const handleViewChange = (nextView) => {
+    // prevent nav only when current view is a widget canvas AND you're editing 
+    if (CANVAS_VIEWS.has(view) && dash.isEditable) {
       dialog.setOpen(true);
       return;
-
-      // const confirmed = window.confirm(
-      //   "You have unsaved changes. Discard them and continue?"
-      // );
-      // if (!confirmed) return; 
-      // onCancel();
     }
     setView(nextView);
   };
-  
-  const onLayoutChange = (newLayout) => setLayout(newLayout);
 
   // Prop Forwarding
-  const canvasProps = { view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView: handleViewChange, 
-    onCancel, isEditable, setIsEditable, isDelete, setIsDelete, widgetArray, setWidgetArray, originalWidgets, setOriginalWidgets, beginEditIfNeeded
+  const canvasProps = { 
+    view, 
+    onChangeView: handleViewChange, 
+    
+    // active canvas props 
+    layout: dash.layout, 
+    widgetArray: dash.widgetArray, 
+    isEditable: dash.isEditable, 
+    isDelete: dash.isDelete, 
+    
+    // handler functions
+    setLayout, 
+    setWidgetArray, 
+    setIsEditable, 
+    setIsDelete, 
+    beginEditIfNeeded,
+    onCancel,
+    onLayoutChange, 
   };
   const sidebarProps = { view, onChangeView: handleViewChange, darkMode, setDarkMode };
   const headerProps = { onChangeView: handleViewChange };