Adding dialogs instead of window messages

client/src/components/Canvas/CanvasComponents/WidgetMenu.jsx

@@ -10,7 +10,7 @@ export default function WidgetMenu({appendWidget, triggerItem, positioning}) {
           <Menu.Content>
             <Menu.Item 
               value="AlertLevel" 
-              onClick={() => appendWidget(AlertLevel, 4, 7, 4, 7, 4, 7)}  // width and height are passed through here for each widget
+              onClick={() => appendWidget(AlertLevel, 4, 7, 4, 7, 8, 14)}  // width and height are passed through here for each widget
             >
               Alert Level
             </Menu.Item>

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

@@ -33,14 +33,14 @@ export default function Home({...props}) {
         resizeHandles: ['se']
       }
     ]);
-    onEditWidgets();
+    // 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 }
+      {i: newID, widget: name, resizable: true }
     ]);
     onAddWidget(newID, w, h, minw, minh, maxw, maxh);       // updating array containing info on layout of widgets
   }

client/src/components/Dashboard.jsx

@@ -1,8 +1,9 @@
 import Header from './Header/Header.jsx';
 import Sidebar from './Sidebar/Sidebar.jsx';
 import Canvas from './Canvas/Canvas.jsx';
-import { Grid, GridItem, useRecipe, Dialog } from '@chakra-ui/react';
+import { Grid, GridItem, useRecipe, useDialog } from '@chakra-ui/react';
 import { useState } from 'react';
+import DialogPopup from './Canvas/CanvasComponents/DialogPopup.jsx';
 
 export default function Dashboard() {
   const recipe = useRecipe({ key: "dashboard" });
@@ -15,6 +16,7 @@ export default function Dashboard() {
   const [view, setView] = useState("mydashboard");
   const [layout, setLayout] = useState([]);
   const [widgetArray, setWidgetArray] = useState([]);
+  const dialog = useDialog();
 
   const onCancel = () => {
     // This is a test comment
@@ -33,11 +35,19 @@ export default function Dashboard() {
   // Prevent navigation while in Edit mode without saving or cancelling
   const handleViewChange = (nextView) => { 
     if (view === "mydashboard" && isEditable) {
-      const confirmed = window.confirm(
-        "You have unsaved changes. Discard them and continue?"
-      );
-      if (!confirmed) return; 
-      onCancel(); // Discards the layout
+      dialog.open();
+      <DialogPopup dialog={dialog}/>
+      
+      
+      
+      
+      
+      
+      // const confirmed = window.confirm(
+      //   "You have unsaved changes. Discard them and continue?"
+      // );
+      // if (!confirmed) return; 
+      // onCancel();
     }
     setView(nextView);
   };