Fix first widget is now removed upon clicking Cancel

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 };