Dialog popup works

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

@@ -0,0 +1,33 @@
+import { Dialog, Portal, CloseButton, Button } from "@chakra-ui/react";
+
+export default function DialogPopup({dialog}) {
+  console.log("3. dialog popup")
+  return(
+    <Dialog.RootProvider value={dialog}>
+      <Portal>
+        <Dialog.Backdrop />
+        <Dialog.Positioner>
+          <Dialog.Content>
+            <Dialog.Header>
+              <Dialog.Title>Leave Your Changes Behind?</Dialog.Title>
+            </Dialog.Header>
+            <Dialog.Body>
+              <p>
+                Click 'No' to go back and save your changes before navigating away from MyDashboard.
+              </p>
+            </Dialog.Body>
+            <Dialog.Footer>
+              <Dialog.ActionTrigger asChild>
+                <Button variant="outline">No</Button>
+              </Dialog.ActionTrigger>
+              <Button bg="tomato">Yes</Button>
+            </Dialog.Footer>
+            <Dialog.CloseTrigger asChild>
+              <CloseButton size="sm" />
+            </Dialog.CloseTrigger>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Portal>
+    </Dialog.RootProvider>
+  );
+}

client/src/components/Dashboard.jsx

@@ -34,15 +34,12 @@ export default function Dashboard() {
   
   // Prevent navigation while in Edit mode without saving or cancelling
   const handleViewChange = (nextView) => { 
+    console.log("1. handling view change")
     if (view === "mydashboard" && isEditable) {
-      dialog.open();
+      console.log("2. currently editing");
-      <DialogPopup dialog={dialog}/>
+      dialog.setOpen(true);
-      
+      return;
-      
+
-      
-      
-      
-      
       // const confirmed = window.confirm(
       //   "You have unsaved changes. Discard them and continue?"
       // );
@@ -62,6 +59,8 @@ export default function Dashboard() {
   const headerProps = { onChangeView: handleViewChange };
   
   return (
+    <> 
+      <DialogPopup dialog={dialog} />
       <Grid css={styles}
         templateRows="1fr 11fr"
         // templateColumns="1fr 20fr"
@@ -79,5 +78,6 @@ export default function Dashboard() {
           <Canvas {...canvasProps}/>
         </GridItem>
       </Grid>
+    </>
   );
 }