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 ? (
             <>