some routes added

client/src/components/Canvas/views/Home.jsx

@@ -1,4 +1,5 @@
 import { HStack, Flex, Tabs } from "@chakra-ui/react";
+import { useState } from "react";
 import MyDashboard from "./HomeTabs/MyDashboard";
 import { SearchBar } from "../CanvasComponents/SearchBar";
 import { SettingsButton } from "../CanvasComponents/SettingsButton";
@@ -13,14 +14,17 @@ import { v4 as uuid } from 'uuid';
 import { CanvasHeaderTabs } from '../CanvasComponents/CanvasHeaderTabs';
 import { DASHBOARD_TABS } from "@/constants/viewKeys";
 
-export default function Home(props) {
-  // deconstructing props
-  const { view, layout, setLayout, setOriginalLayout,  onLayoutChange, onChangeView, onCancel, setOriginalWidgets,
-    isDelete, setIsDelete, beginEditIfNeeded, isEditable, setIsEditable, widgetArray, setWidgetArray } = props;
+export default function Home() {
+  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 [layout, setLayout]                   = useState([]);
+  const [widgetArray, setWidgetArray]         = useState([]);
+
+  function appendWidget(name, w, h, min_w, minh, max_w, max_h) {
+    saveLayoutState(); // Save state before anything else
 
-  function appendWidget(name, w, h, minw, minh, maxw, maxh) {
-    beginEditIfNeeded(); // Save state before anything else
-    
     const newID = uuid();      // could be replaced with something else like guid
     const COLS = 16;
     const W = w ?? 3;
@@ -30,7 +34,7 @@ export default function Home(props) {
       ...widgetArray,
       {i: newID, widget: name }
     ]);
-    // onAddWidget(newID, w, h, minw, minh, maxw, maxh);       // updating array containing info on layout of widgets
+    // onAddWidget(newID, w, h, min_w, minh, max_w, max_h);       // updating array containing info on layout of widgets
     
     setLayout(prev => [
       ...prev,
@@ -40,10 +44,10 @@ export default function Home(props) {
         y: 0,
         w: w, 
         h: h,
-        minW: minw,
+        minW: min_w,
         minH: minh,
-        maxW: maxw,
-        maxH: maxh,
+        maxW: max_w,
+        maxH: max_h,
         static: false,
         resizeHandles: ['se']
       },
@@ -67,7 +71,7 @@ export default function Home(props) {
 
   const onEditWidgets = () => {
     console.log("Start deleting widgets...");
-    beginEditIfNeeded(); // Save state before anything else
+    saveLayoutState(); // Save state before anything else
     setLayout(prevLayout =>
       prevLayout.map(item => ({
         ...item, 
@@ -96,39 +100,52 @@ export default function Home(props) {
     else return;
   }
 
+
+  const saveLayoutState = () => {
+    if ( !isEditable ) {
+      setOriginalLayout(layout);
+      setOriginalWidgets(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([]);
+  }
+
+  const onLayoutChange = (newLayout) => setLayout(newLayout);
+
+
   // Prop Forwarding
-  const MyDashboardProps = { layout, onLayoutChange, isEditable, beginEditIfNeeded, isDelete, DeleteWidget, widgetArray, appendWidget };
+  const MyDashboardProps = { layout, onLayoutChange, isEditable, saveLayoutState, isDelete, DeleteWidget, widgetArray, appendWidget };
   const settingsButtonProps = { onEditWidgets, appendWidget };
   
   return (
-    /* HEADER */
-    <Tabs.Root 
-      width="100%"
-      height="100%"
-      lazyMount 
-      value={ view }
-      variant="line"
-      // Prevent navigation away from 'My Dashboard' while in Edit mode
-      onValueChange={(e) => {
-        const nextView = e.value;
-        onChangeView(nextView); 
-      }}
-    >
-      <Flex 
-        as="header"
-				position="sticky"
-				top="0"
-        zIndex="dropdown" // zIndex: 1100
-				bg="base200"
-        pl={5}
-        pr={2}
-				pt={3}
-        pb={2}
-				align="center"
-				justify="space-between"
-        width="100%"
-      >
-        <CanvasHeaderTabs tabs={DASHBOARD_TABS} />
+    /* SUB HEADER */
+    <Tabs.Root width="100%" height="100%" lazyMount variant="line">
+      <Flex as="header" position="sticky" top="0" zIndex="dropdown" bg="base200" p={5} align="center" justify="space-between" width="100%">
+        {/* TABS */}
+        {/* <CanvasHeaderTabs tabs={DASHBOARD_TABS} />*/} {/* TODO: rename to SubHeaderTabs */}
+        <Tabs.List>
+          {DASHBOARD_TABS.map(({ value, label }) =>
+            <Tabs.Trigger key={value} value={value} fontSize="lg">
+              { label }
+            </Tabs.Trigger>
+          )}
+        </Tabs.List>
+
+        {/* EDIT MODE BUTTONS */}
         <HStack width="258px" justifyContent="flex-end">
           {isEditable ? (
             <>

client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx

@@ -4,7 +4,6 @@ import CustomResizeHandle from '../../CanvasComponents/CustomResizeHandle';
 import FirstWidgetButton from '../../CanvasComponents/FirstWidgetButton';
 
 export default function MyDashboard({layout, onLayoutChange, isEditable, isDelete, DeleteWidget, widgetArray, appendWidget}) {
-  console.log("rendering MyDashboard");
   const recipe = useSlotRecipe({ key: "widget" });
   const styles = recipe(); // using root recipe for widget below
   const ResponsiveGridLayout = WidthProvider(GridLayout); // canvas width now adjusts to window size
@@ -12,9 +11,6 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
   const handleDragStop = () => { document.body.style.userSelect = ""; }; // allow text highlighting all other times
   let merged = [];
 
-  console.log("widgetArray: ", widgetArray);
-  console.log("layout: ", layout);
-
   if (widgetArray.length && layout.length) {
     const widgetMap = new Map(widgetArray.map(item => [item.i, item]));
     merged = layout.map(item => {
@@ -23,7 +19,7 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
         ...widgetMap.get(item.i)
       };
     });
-  };
+  }
 
   // Show large 'Add Widget' button when dashboard is empty
   if ( !layout.length ) {
@@ -36,39 +32,43 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
         bg="gray.150"
         borderRadius="md"
       >
-        <FirstWidgetButton appendWidget={ appendWidget } />  
+        <FirstWidgetButton appendWidget={ appendWidget } />
       </Flex>
     );
   }
 
   // Show responsive grid of widgets 
   return (
-    <chakra.div width="100%">
-      <ResponsiveGridLayout
-        useCSSTransforms={false}  // remove the sliding animation of the widgets
-        className="layout"
-        layout={layout}
-        cols={16} // Total columns in grid
-        rowHeight={30} // Height of a single row in px
-        isBounded={true} // Total width of the grid
-        margin={[15, 5]} // [horizontal, vertical] gap
-        onLayoutChange={onLayoutChange}
-        draggableHandle=".widget-handle" // Make only the header draggable
-        onDragStart={handleDragStart}
-        onDragStop={handleDragStop}
-        position="relative"
-        resizeHandle={<CustomResizeHandle isVisable={isEditable} />}
-      >
-         { merged.map((item) => {
-            const Widget = item.widget;
-            return (
-              <Flex key={item.i} css={styles.root} boxShadow="md" height="100%" >
-                <Widget id={item.i} isEditable={isEditable} isDelete={isDelete} DeleteWidget={DeleteWidget} appendWidget={appendWidget}/>
-              </Flex>
-            );
-          })
-        }
-      </ResponsiveGridLayout>
-    </chakra.div>
+    <ResponsiveGridLayout
+      useCSSTransforms={false}  // remove the sliding animation of the widgets
+      className="layout"
+      layout={layout}
+      cols={16} // Total columns in grid
+      rowHeight={30} // Height of a single row in px
+      isBounded={true} // Total width of the grid
+      margin={[15, 5]} // [horizontal, vertical] gap
+      onLayoutChange={onLayoutChange}
+      draggableHandle=".widget-handle" // Make only the header draggable
+      onDragStart={handleDragStart}
+      onDragStop={handleDragStop}
+      position="relative"
+      resizeHandle={<CustomResizeHandle isVisable={isEditable} />}
+    >
+       { merged.map((item) => {
+          const Widget = item.widget;
+          return (
+            <Flex key={item.i} css={styles.root} boxShadow="md" height="100%" >
+              <Widget
+                id={item.i}
+                isEditable={isEditable}
+                isDelete={isDelete}
+                DeleteWidget={DeleteWidget}
+                appendWidget={appendWidget}
+              />
+            </Flex>
+          );
+        })
+      }
+    </ResponsiveGridLayout>
   );
 }