Adding dialogs instead of window messages

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