Fix first widget is now removed upon clicking Cancel

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

@@ -13,14 +13,44 @@ import { v4 as uuid } from 'uuid';
 
 export default function Home({...props}) {
   // deconstructing props
-  const { view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView, onCancel, 
+  const { view, layout, setLayout, setOriginalLayout,  onLayoutChange, onChangeView, onCancel, 
-    isDelete, setIsDelete, isEditable, setIsEditable, widgetArray, setWidgetArray } = props;
+    isDelete, setIsDelete, beginEditIfNeeded, isEditable, setIsEditable, widgetArray, setWidgetArray } = props;
+
+  // const onAddWidget = (ID, w, h, minw, minh, maxw, maxh) => {
+  //   setLayout(prev => [
+  //     ...prev,
+  //     {
+  //       i: ID,
+  //       x: (prev.length * 3) % 12,
+  //       y: Infinity,
+  //       w: w, 
+  //       h: h,
+  //       minW: minw,
+  //       minH: minh,
+  //       maxW: maxw,
+  //       maxH: maxh,
+  //       static: false,
+  //       resizeHandles: ['se']
+  //     }
+  //   ]);
+  //   onEditWidgets();
+  // };
+
+  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
+    
+    setWidgetArray([           // updating widget array containing info on the types of widgets
+      ...widgetArray,
+      {i: newID, widget: name }
+    ]);
+    // onAddWidget(newID, w, h, minw, minh, maxw, maxh);       // updating array containing info on layout of widgets
     
-  const onAddWidget = (ID, w, h, minw, minh, maxw, maxh) => {
     setLayout(prev => [
       ...prev,
       {
-        i: ID,
+        i: newID,
         x: (prev.length * 3) % 12,
         y: Infinity,
         w: w, 
@@ -31,18 +61,8 @@ export default function Home({...props}) {
         maxH: maxh,
         static: false,
         resizeHandles: ['se']
-      }
+      },
     ]);
-    onEditWidgets();
-  };
-
-  function appendWidget(name, w, h, minw, minh, maxw, maxh) {
-    const newID = uuid();      // could be replaced with something else like guid
-    setWidgetArray([           // updating widget array containing info on the types of widgets
-      ...widgetArray,
-      {i: newID, widget: name }
-    ]);
-    onAddWidget(newID, w, h, minw, minh, maxw, maxh);       // updating array containing info on layout of widgets
   }
 
   const onEditWidgets = () => {
@@ -70,6 +90,7 @@ export default function Home({...props}) {
     setIsEditable(false);
     setIsDelete(false);
     setOriginalLayout([]); // Clear backup layout
+    setOriginalWidgets([]);
   }
 
   const onDeleteWidgets = () => {
@@ -98,7 +119,7 @@ export default function Home({...props}) {
   }
 
   // Prop Forwarding
-  const MyDashboardProps = { layout, onLayoutChange, isEditable, isDelete, DeleteWidget, widgetArray, appendWidget };
+  const MyDashboardProps = { layout, onLayoutChange, isEditable, beginEditIfNeeded, isDelete, DeleteWidget, widgetArray, appendWidget };
   const settingsButtonProps = { onEditWidgets, onDeleteWidgets, appendWidget };
   
   return (

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

@@ -26,7 +26,7 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
   };
 
   // Show large 'Add Widget' button when dashboard is empty
-  if ( !widgetArray.length ) {
+  if ( !layout.length ) {
     return (
       <Flex
         align="center"

client/src/components/Dashboard.jsx

@@ -12,12 +12,22 @@ export default function Dashboard() {
   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 beginEditIfNeeded = () => {
+    if ( !isEditable ) {
+      // Save deep copies to preserve state
+      setOriginalLayout(structuredClone(layout));
+      setOriginalWidgets(structuredClone(widgetArray));
+      setIsEditable(true);
+      setIsDelete(false);
+    }
+  };
+
   const onCancel = () => {
-    // This is a test comment
     console.log("canceling changes...");
     if (originalLayout.length) { 
       setLayout(originalLayout.map(item => ({
@@ -25,9 +35,11 @@ export default function Dashboard() {
         static: true
       })));
     };
+    setWidgetArray(originalWidgets.length ? originalWidgets : []);
     setIsEditable(false);
     setIsDelete(false);
     setOriginalLayout([]); 
+    setOriginalWidgets([]);
   }
   
   // Prevent navigation while in Edit mode without saving or cancelling
@@ -46,7 +58,7 @@ export default function Dashboard() {
 
   // Prop Forwarding
   const canvasProps = { view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView: handleViewChange, 
-    onCancel, isEditable, setIsEditable, isDelete, setIsDelete, widgetArray, setWidgetArray
+    onCancel, isEditable, setIsEditable, isDelete, setIsDelete, widgetArray, setWidgetArray, setOriginalWidgets, beginEditIfNeeded
   };
   const sidebarProps = { view, onChangeView: handleViewChange, darkMode, setDarkMode };
   const headerProps = { onChangeView: handleViewChange };