From 8c8da9e3948f5c3123223cdc09ba7403267ac9c9 Mon Sep 17 00:00:00 2001
From: epodol <34190213+epodol@users.noreply.github.com>
Date: Mon, 31 Oct 2022 13:33:03 -0700
Subject: [PATCH] Remove Alert Dialogs (#155)

* Add TextDialog Component
Add React Hooks ESLint
Clean Code

* Add Delete Node Dialog

* Disable Delete and Unlock Menu Items for Root Node

* Remove Alerts

* Remove Gear

* Fix Double Click Binding

* ESLint Fixes

* Bug Fixes
---
 .eslintrc.js                                  |  13 +-
 .../Dialogs/ConfirmationDialog/index.tsx      |  50 +--
 src/components/Dialogs/TextDialog/index.tsx   |  90 ++++++
 src/pages/ManageMindMaps/index.tsx            |  93 ++++--
 src/pages/MindMap/Bubble.tsx                  |  79 ++++-
 src/pages/MindMap/MindMapSimulation.tsx       | 292 ++++++++++--------
 src/pages/MindMap/index.tsx                   |  10 +-
 .../overlays/BottomBar/KeyBindsDialog.tsx     | 130 +++-----
 .../MindMap/overlays/BottomBar/index.tsx      |   1 +
 .../MindMap/overlays/GenIdeaPanel/index.tsx   |  13 +-
 10 files changed, 465 insertions(+), 306 deletions(-)
 create mode 100644 src/components/Dialogs/TextDialog/index.tsx

diff --git a/.eslintrc.js b/.eslintrc.js
index 6eba46c..7ea603d 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -6,7 +6,14 @@ module.exports = {
     node: true,
   },
   parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint', 'jest', 'jest-dom', 'jsx-a11y', 'prettier'],
+  plugins: [
+    '@typescript-eslint',
+    'jest',
+    'jest-dom',
+    'jsx-a11y',
+    'prettier',
+    'react-hooks',
+  ],
   extends: [
     'airbnb',
     'airbnb-typescript',
@@ -34,6 +41,10 @@ module.exports = {
       2,
       { namedComponents: 'arrow-function' },
     ],
+    'react/prop-types': 'off',
+    'react/require-default-props': 'off',
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
   },
   settings: {
     jest: {
diff --git a/src/components/Dialogs/ConfirmationDialog/index.tsx b/src/components/Dialogs/ConfirmationDialog/index.tsx
index bac90a2..33380cb 100644
--- a/src/components/Dialogs/ConfirmationDialog/index.tsx
+++ b/src/components/Dialogs/ConfirmationDialog/index.tsx
@@ -28,26 +28,36 @@ const ConfirmationDialog = ({
   suggestedAction: 'approve' | 'reject' | undefined;
 }) => (
   <Dialog open={isOpen} onClose={onReject}>
-    <DialogTitle>{title}</DialogTitle>
-    <DialogContent>
-      <DialogContentText>{description}</DialogContentText>
-    </DialogContent>
-    <DialogActions>
-      <Button
-        variant={suggestedAction === 'reject' ? 'contained' : 'text'}
-        onClick={onReject}
-        autoFocus={suggestedAction === 'reject'}
-      >
-        {rejectButtonText}
-      </Button>
-      <Button
-        variant={suggestedAction === 'approve' ? 'contained' : 'text'}
-        onClick={onApprove}
-        autoFocus={suggestedAction === 'approve'}
-      >
-        {approveButtonText}
-      </Button>
-    </DialogActions>
+    <form
+      onSubmit={(e) => {
+        onApprove();
+        onReject();
+        e.preventDefault();
+      }}
+    >
+      <DialogTitle>{title}</DialogTitle>
+      <DialogContent>
+        <DialogContentText>{description}</DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant={suggestedAction === 'reject' ? 'contained' : 'text'}
+          onClick={onReject}
+          type={suggestedAction === 'reject' ? 'submit' : 'button'}
+          autoFocus={suggestedAction === 'reject'}
+        >
+          {rejectButtonText}
+        </Button>
+        <Button
+          variant={suggestedAction === 'approve' ? 'contained' : 'text'}
+          onClick={onApprove}
+          type={suggestedAction === 'approve' ? 'submit' : 'button'}
+          autoFocus={suggestedAction === 'approve'}
+        >
+          {approveButtonText}
+        </Button>
+      </DialogActions>
+    </form>
   </Dialog>
 );
 
diff --git a/src/components/Dialogs/TextDialog/index.tsx b/src/components/Dialogs/TextDialog/index.tsx
new file mode 100644
index 0000000..e034618
--- /dev/null
+++ b/src/components/Dialogs/TextDialog/index.tsx
@@ -0,0 +1,90 @@
+import React, { ReactNode, useEffect, useState } from 'react';
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  TextField,
+  TextFieldProps,
+} from '@mui/material';
+
+const TextDialog = ({
+  isOpen,
+  onApprove,
+  onReject,
+  title,
+  description,
+  approveButtonText,
+  rejectButtonText,
+  suggestedAction,
+  initialValue,
+  updateOnInitialValueChange,
+  textFieldProps,
+}: {
+  isOpen: boolean;
+  onApprove: (value: string) => void;
+  onReject: () => void;
+  title: string;
+  description?: ReactNode;
+  approveButtonText?: string;
+  rejectButtonText?: string;
+  suggestedAction?: 'approve' | 'reject' | undefined;
+  initialValue?: string;
+  updateOnInitialValueChange?: boolean;
+  textFieldProps?: TextFieldProps;
+}) => {
+  const [value, setValue] = useState(initialValue || '');
+
+  useEffect(() => {
+    if (updateOnInitialValueChange && initialValue) setValue(initialValue);
+  }, [initialValue, updateOnInitialValueChange]);
+
+  const onClose = () => {
+    setValue(initialValue || '');
+    onReject();
+  };
+
+  return (
+    <Dialog open={isOpen} onClose={onClose}>
+      <form
+        onSubmit={(e) => {
+          onApprove(value);
+          onClose();
+          e.preventDefault();
+        }}
+      >
+        <DialogTitle>{title}</DialogTitle>
+        <DialogContent>
+          {description && <DialogContentText>{description}</DialogContentText>}
+          <TextField
+            sx={{ m: 2 }}
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            inputProps={{ autoFocus: true }}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...textFieldProps}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button
+            variant={suggestedAction === 'reject' ? 'contained' : 'text'}
+            onClick={() => onClose()}
+            type={suggestedAction === 'reject' ? 'submit' : 'button'}
+          >
+            {rejectButtonText}
+          </Button>
+          <Button
+            variant={suggestedAction === 'approve' ? 'contained' : 'text'}
+            type={suggestedAction === 'approve' ? 'submit' : 'button'}
+          >
+            {approveButtonText}
+          </Button>
+        </DialogActions>
+      </form>
+    </Dialog>
+  );
+};
+
+export default TextDialog;
diff --git a/src/pages/ManageMindMaps/index.tsx b/src/pages/ManageMindMaps/index.tsx
index 07063a2..b2e8016 100644
--- a/src/pages/ManageMindMaps/index.tsx
+++ b/src/pages/ManageMindMaps/index.tsx
@@ -45,6 +45,7 @@ import {
 import { MindMap, RecursivePartial, WithID } from '../../types';
 import ShareDialog from './ShareDialog';
 import ConfirmationDialog from '../../components/Dialogs/ConfirmationDialog';
+import TextDialog from '../../components/Dialogs/TextDialog';
 
 const ManageMindMaps = () => {
   const user = useUser().data;
@@ -82,6 +83,13 @@ const ManageMindMaps = () => {
     }
   ).data as WithID<MindMap>[];
 
+  const [isCreateMindMapDialogOpen, setIsCreateMindMapDialogOpen] =
+    useState<boolean>(false);
+
+  const [isRenameMindMapDialogOpen, setIsRenameMindMapDialogOpen] = useState<
+    null | string
+  >(null);
+
   const createMindMap = (title: string) => {
     const newDocData: MindMap = {
       metadata: {
@@ -110,15 +118,6 @@ const ManageMindMaps = () => {
     });
   };
 
-  const handleCreateMindMap = () => {
-    // eslint-disable-next-line no-alert
-    const title = window.prompt('What would you like to ideate upon?')?.trim();
-    createMindMap(
-      // eslint-disable-next-line
-      title === null || title === '' ? 'Untitled Mind Map' : title!
-    );
-  };
-
   // Snackbar stuff
   interface SnackbarMessage {
     message: string;
@@ -203,11 +202,61 @@ const ManageMindMaps = () => {
           startIcon={<Add />}
           variant="contained"
           onClick={() => {
-            handleCreateMindMap();
+            setIsCreateMindMapDialogOpen(true);
           }}
         >
           New Mind Map
         </Button>
+        <TextDialog
+          approveButtonText="Create"
+          isOpen={isCreateMindMapDialogOpen}
+          onApprove={(title) => createMindMap(title)}
+          onReject={() => {
+            setIsCreateMindMapDialogOpen(false);
+          }}
+          rejectButtonText="Cancel"
+          title="Create Mind Map"
+          suggestedAction="approve"
+          textFieldProps={{
+            label: 'Title',
+          }}
+          initialValue=""
+        />
+        <TextDialog
+          approveButtonText="Rename"
+          isOpen={isRenameMindMapDialogOpen !== null}
+          onApprove={(newTitle) => {
+            const mindmap = mindmaps.find(
+              (m) => m.ID === isRenameMindMapDialogOpen
+            );
+            if (!mindmap) return;
+
+            const updatedDocFields: RecursivePartial<MindMap> = {
+              metadata: {
+                updatedAt: serverTimestamp() as Timestamp,
+                updatedBy: user.uid,
+              },
+              title: newTitle || 'Untitled Mind Map',
+            };
+            setDoc(doc(firestore, 'mindmaps', mindmap.ID), updatedDocFields, {
+              merge: true,
+            });
+          }}
+          onReject={() => {
+            setIsRenameMindMapDialogOpen(null);
+          }}
+          rejectButtonText="Cancel"
+          title="Rename Mind Map"
+          suggestedAction="approve"
+          textFieldProps={{
+            label: 'Title',
+          }}
+          initialValue={
+            mindmaps.find((m) => m.ID === isRenameMindMapDialogOpen)?.title ||
+            ''
+          }
+          updateOnInitialValueChange
+        />
         <br />
         <br />
         <ButtonGroup variant="outlined">
@@ -376,27 +425,7 @@ const ManageMindMaps = () => {
               <IconButton
                 type="button"
                 onClick={() => {
-                  // eslint-disable-next-line no-alert
-                  const newTitle = prompt(
-                    `What would you like to rename ${mindmap.title} to?`,
-                    mindmap.title
-                  );
-                  if (newTitle) {
-                    const updatedDocFields: RecursivePartial<MindMap> = {
-                      metadata: {
-                        updatedAt: serverTimestamp() as Timestamp,
-                        updatedBy: user.uid,
-                      },
-                      title: newTitle,
-                    };
-                    setDoc(
-                      doc(firestore, 'mindmaps', mindmap.ID),
-                      updatedDocFields,
-                      {
-                        merge: true,
-                      }
-                    );
-                  }
+                  setIsRenameMindMapDialogOpen(mindmap.ID);
                 }}
                 aria-label="rename mindmap"
               >
@@ -410,7 +439,7 @@ const ManageMindMaps = () => {
         <div style={{ textAlign: 'center', margin: '1rem' }}>
           <Button
             onClick={() => {
-              handleCreateMindMap();
+              setIsCreateMindMapDialogOpen(true);
             }}
           >
             You don&apos;t have any MindMaps. Create one now!
diff --git a/src/pages/MindMap/Bubble.tsx b/src/pages/MindMap/Bubble.tsx
index ff0812f..ac5afa7 100644
--- a/src/pages/MindMap/Bubble.tsx
+++ b/src/pages/MindMap/Bubble.tsx
@@ -1,6 +1,22 @@
 import React from 'react';
 import { SimulationNodeDatum } from 'd3-force';
-import { Divider, Menu, MenuItem, useTheme } from '@mui/material';
+import {
+  Divider,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import {
+  AddCircle,
+  Edit,
+  Lock,
+  LockOpen,
+  RemoveCircle,
+} from '@mui/icons-material';
+
 import { localNode as nodeType } from '../../types';
 import './MindMap.css';
 
@@ -33,7 +49,6 @@ const Bubble = ({
   downMouseCoords,
   handleAddNode,
   handleDeleteNode,
-  updateNode,
   handleEditNode,
   handleSetNodeLockState,
   locked,
@@ -47,7 +62,6 @@ const Bubble = ({
   downMouseCoords: { x: number; y: number };
   handleAddNode: () => void;
   handleDeleteNode: () => void;
-  updateNode: (oldNode: nodeType, newNode: nodeType) => void;
   handleEditNode: () => void;
   handleSetNodeLockState: (lockState?: boolean) => void;
   locked: boolean;
@@ -64,8 +78,8 @@ const Bubble = ({
     setContextMenu(
       contextMenu === null
         ? {
-            mouseX: event.clientX + 2,
-            mouseY: event.clientY - 6,
+            mouseX: event.clientX,
+            mouseY: event.clientY,
           }
         : // repeated contextmenu when it is already open closes it with Chrome 84 on Ubuntu
           // Other native context menus might behave different.
@@ -188,11 +202,7 @@ const Bubble = ({
           return;
         }
         e.stopPropagation();
-        // eslint-disable-next-line no-alert
-        const newText = prompt('Enter new text', node.text);
-        if (newText) {
-          updateNode(node, { ...node, text: newText });
-        }
+        handleEditNode();
       }}
     >
       <Menu
@@ -204,24 +214,63 @@ const Bubble = ({
             ? { top: contextMenu.mouseY, left: contextMenu.mouseX }
             : undefined
         }
+        PaperProps={{
+          sx: {
+            maxWidth: '100%',
+          },
+        }}
       >
         <MenuItem
           onClick={(e) => {
             handleSetNodeLockState();
             handleInheritedHandles(e, () => {});
           }}
+          disabled={node.id === 0}
         >
-          {!locked ? `Lock Node` : `Unlock Node`}
+          <ListItemIcon>
+            {!locked && !(node.id === 0) ? (
+              <Lock fontSize="small" />
+            ) : (
+              <LockOpen fontSize="small" />
+            )}
+          </ListItemIcon>
+          <ListItemText>
+            {!locked && !(node.id === 0) ? `Lock Bubble` : `Unlock Bubble`}
+          </ListItemText>
+          <Typography variant="body2" color="text.secondary" sx={{ ml: 2 }}>
+            <kbd>Space</kbd>
+          </Typography>
         </MenuItem>
         <Divider />
         <MenuItem onClick={(e) => handleInheritedHandles(e, handleAddNode)}>
-          Add Node
+          <ListItemIcon>
+            <AddCircle fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>Add Bubble</ListItemText>
+          <Typography variant="body2" color="text.secondary" sx={{ ml: 2 }}>
+            <kbd>Ctrl</kbd> + <kbd>Enter</kbd>
+          </Typography>
         </MenuItem>
-        <MenuItem onClick={(e) => handleInheritedHandles(e, handleDeleteNode)}>
-          Delete Node
+        <MenuItem
+          onClick={(e) => handleInheritedHandles(e, handleDeleteNode)}
+          disabled={node.id === 0}
+        >
+          <ListItemIcon>
+            <RemoveCircle fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>Delete Bubble</ListItemText>
+          <Typography variant="body2" color="text.secondary" sx={{ ml: 2 }}>
+            <kbd>Delete</kbd>
+          </Typography>
         </MenuItem>
         <MenuItem onClick={(e) => handleInheritedHandles(e, handleEditNode)}>
-          Edit Node
+          <ListItemIcon>
+            <Edit fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>Edit Bubble</ListItemText>
+          <Typography variant="body2" color="text.secondary" sx={{ ml: 2 }}>
+            <kbd>Shift</kbd> + <kbd>Enter</kbd>
+          </Typography>
         </MenuItem>
       </Menu>
       <circle
diff --git a/src/pages/MindMap/MindMapSimulation.tsx b/src/pages/MindMap/MindMapSimulation.tsx
index 4238116..4669378 100644
--- a/src/pages/MindMap/MindMapSimulation.tsx
+++ b/src/pages/MindMap/MindMapSimulation.tsx
@@ -29,6 +29,8 @@ import BubbleLink from './BubbleLink';
 import { MindMap, node, WithID } from '../../types';
 import Loading from '../../components/Loading';
 import BottomBar from './overlays/BottomBar';
+import ConfirmationDialog from '../../components/Dialogs/ConfirmationDialog';
+import TextDialog from '../../components/Dialogs/TextDialog';
 
 const MindMapSimulationWithTransform = forwardRef(
   (
@@ -36,13 +38,8 @@ const MindMapSimulationWithTransform = forwardRef(
       data,
       dragNodeSelected,
       setDragNodeSelected,
-      // TODO: Implement the following functions: [addNode, deleteNode, updateNode]. Remove relevant eslint-disables when done.
-      // eslint-disable-next-line
       addNode,
-      handleAddNode,
-      // eslint-disable-next-line
       deleteNode,
-      // eslint-disable-next-line
       updateNode,
       selectedNode,
       setSelectedNode,
@@ -53,7 +50,6 @@ const MindMapSimulationWithTransform = forwardRef(
         SetStateAction<(SimulationNodeDatum & node) | undefined>
       >;
       addNode: (node: { parent: number; text: string }) => void;
-      handleAddNode: (parentNode?: SimulationNodeDatum & node) => void;
       deleteNode: (node: node) => void;
       updateNode: (oldNode: node, newNode: node) => void;
       selectedNode: SimulationNodeDatum & node;
@@ -81,6 +77,18 @@ const MindMapSimulationWithTransform = forwardRef(
       [key: number]: boolean;
     }>({});
 
+    const [deleteNodeDialogOpen, setDeleteNodeDialogOpen] = useState<
+      null | number
+    >(null);
+
+    const [editNodeDialogIsOpen, setEditNodeDialogIsOpen] = useState<
+      null | number
+    >(null);
+
+    const [addNodeDialogIsOpen, setAddNodeDialogIsOpen] = useState<
+      null | number
+    >(null);
+
     // UseEffect Lockstate
     useEffect(() => {
       // Find the difference between the lastNodeLockStates and the current nodeLockStates
@@ -119,9 +127,10 @@ const MindMapSimulationWithTransform = forwardRef(
       }
       // Set the lastNodeLockStates to the current nodeLockStates
       lastNodeLockStates.current = nodeLockStates;
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [nodeLockStates, simulation]);
 
-    const checkIfRecursiveChildrenisSelected = (
+    const checkIfRecursiveChildrenIsSelected = (
       nodeTo: (SimulationNodeDatum & node) | undefined,
       nodeFrom: (SimulationNodeDatum & node) | undefined = selectedNode
     ): boolean => {
@@ -132,7 +141,7 @@ const MindMapSimulationWithTransform = forwardRef(
         if (nodeFrom.id === 0) {
           return false;
         }
-        return checkIfRecursiveChildrenisSelected(
+        return checkIfRecursiveChildrenIsSelected(
           nodeTo,
           nodes.find((n) => n.id === nodeFrom.parent)
         );
@@ -140,32 +149,26 @@ const MindMapSimulationWithTransform = forwardRef(
       return false;
     };
 
-    const handleDeleteNode = (nodeToDelete: node) => {
-      // eslint-disable-next-line no-alert
-      if (window.confirm('Are you sure you want to delete this node?')) {
-        // If the node is selected, select the parent
-        // Get the parent node
-        const parentNode = nodes.find((n) => n.id === nodeToDelete.parent);
-        if (!parentNode) {
-          return;
-        }
-        if (selectedNode?.id === nodeToDelete.id) {
-          setSelectedNode(parentNode);
-        }
-        if (checkIfRecursiveChildrenisSelected(nodeToDelete)) {
-          // Set the selected node to the parent of the node to be deleted
-          setSelectedNode(parentNode);
-        }
-        deleteNode(nodeToDelete);
+    const handleDeleteNode = (nodeIDToDelete: number) => {
+      const nodeToDelete = nodes.find((n) => n.id === nodeIDToDelete);
+      if (!nodeToDelete) return;
+      // Get the parent node
+      const parentNode = nodes.find((n) => n.id === nodeToDelete.parent);
+      if (!parentNode) {
+        return;
       }
-    };
-    const handleEditNode = (nodeToEdit: node) => {
-      // eslint-disable-next-line no-alert
-      const newText = prompt('Enter new text', nodeToEdit.text);
-      if (newText) {
-        updateNode(nodeToEdit, { ...nodeToEdit, text: newText });
+      // If the node is selected, select the parent
+      if (selectedNode?.id === nodeToDelete.id) {
+        setSelectedNode(parentNode);
+      }
+      if (checkIfRecursiveChildrenIsSelected(nodeToDelete)) {
+        // Set the selected node to the parent of the node to be deleted
+        setSelectedNode(parentNode);
       }
+      deleteNode(nodeToDelete);
+      setDeleteNodeDialogOpen(null);
     };
+
     const handleMoveSelectionToParent = () => {
       if (selectedNode) {
         // Get the parent of the selected node
@@ -175,6 +178,7 @@ const MindMapSimulationWithTransform = forwardRef(
         }
       }
     };
+
     const handleMoveSelectionToChild = () => {
       if (selectedNode) {
         // Get the children of the selected node
@@ -199,6 +203,7 @@ const MindMapSimulationWithTransform = forwardRef(
         }
       }
     };
+
     const handleMoveSelectionToSibling = (
       direction: 'clockwise' | 'anticlockwise'
     ) => {
@@ -249,16 +254,19 @@ const MindMapSimulationWithTransform = forwardRef(
         }
       }
     };
+
     const handleMoveSelectionToNextSibling = () => {
       if (selectedNode) {
         handleMoveSelectionToSibling('clockwise');
       }
     };
+
     const handleMoveSelectionToPreviousSibling = () => {
       if (selectedNode) {
         handleMoveSelectionToSibling('anticlockwise');
       }
     };
+
     const handleMoveSelectionToRoot = () => {
       // Get the root node
       const root = nodes.find((nodeF) => nodeF.id === 0);
@@ -266,6 +274,7 @@ const MindMapSimulationWithTransform = forwardRef(
         setSelectedNode(root);
       }
     };
+
     const handleToggleNodeLock = (nodeToToggle: node) => {
       setNodeLockStates({
         ...nodeLockStates,
@@ -350,6 +359,7 @@ const MindMapSimulationWithTransform = forwardRef(
         setSimulation(newSimulation);
         newSimulation.restart();
       }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [data.nodes]);
 
     const releaseBubble = () => {
@@ -389,47 +399,33 @@ const MindMapSimulationWithTransform = forwardRef(
         onMouseMove(e);
       },
       handleAddNode() {
-        if (selectedNode) {
-          handleAddNode(selectedNode);
-        }
+        if (selectedNode) setAddNodeDialogIsOpen(selectedNode.id);
       },
       handleDeleteNode() {
-        if (selectedNode) {
-          handleDeleteNode(selectedNode);
-        }
+        if (selectedNode && selectedNode.id !== 0)
+          setDeleteNodeDialogOpen(selectedNode.id);
       },
       handleEditNode() {
-        if (selectedNode) {
-          handleEditNode(selectedNode);
-        }
+        if (selectedNode) setEditNodeDialogIsOpen(selectedNode.id);
       },
       handleMoveSelectionToParent() {
-        if (selectedNode) {
-          handleMoveSelectionToParent();
-        }
+        if (selectedNode) handleMoveSelectionToParent();
       },
       handleMoveSelectionToChild() {
-        if (selectedNode) {
-          handleMoveSelectionToChild();
-        }
+        if (selectedNode) handleMoveSelectionToChild();
       },
       handleMoveSelectionToNextSibling() {
-        if (selectedNode) {
-          handleMoveSelectionToNextSibling();
-        }
+        if (selectedNode) handleMoveSelectionToNextSibling();
       },
       handleMoveSelectionToPreviousSibling() {
-        if (selectedNode) {
-          handleMoveSelectionToPreviousSibling();
-        }
+        if (selectedNode) handleMoveSelectionToPreviousSibling();
       },
       handleMoveSelectionToRoot() {
         handleMoveSelectionToRoot();
       },
       handleToggleNodeLock() {
-        if (selectedNode) {
+        if (selectedNode && selectedNode.id !== 0)
           handleToggleNodeLock(selectedNode);
-        }
       },
       getContext() {
         return context;
@@ -444,66 +440,102 @@ const MindMapSimulationWithTransform = forwardRef(
     let nodeClicked: (SimulationNodeDatum & node) | undefined;
     if (nodes.length > 0)
       return (
-        <svg
-          style={{
-            overflow: 'visible',
-          }}
-          width={1}
-          height={1}
-          onMouseDown={(e) => {
-            // if right click
-            if (e.button === 2) {
-              return;
+        <>
+          <ConfirmationDialog
+            approveButtonText="Delete Node"
+            description="Are you sure you want to delete this node?"
+            isOpen={!(deleteNodeDialogOpen === null)}
+            onApprove={() => {
+              if (deleteNodeDialogOpen) {
+                handleDeleteNode(deleteNodeDialogOpen);
+              }
+            }}
+            onReject={() => {
+              setDeleteNodeDialogOpen(null);
+            }}
+            title="Delete Node"
+            rejectButtonText="Cancel"
+            suggestedAction="approve"
+          />
+          <TextDialog
+            approveButtonText="Edit Node"
+            rejectButtonText="Cancel"
+            title="Edit Node"
+            initialValue={
+              nodes.find((n) => n.id === editNodeDialogIsOpen)?.text
             }
-            const x =
-              (e.clientX - context.state.positionX + mouseDelta.x) /
-              context.state.scale;
-            const y =
-              (e.clientY - context.state.positionY + mouseDelta.y) /
-              context.state.scale;
-            nodeClicked = simulation?.find(x, y, 15);
-            if (!nodeClicked) return;
-            nodeClicked.fx = nodeClicked.x;
-            nodeClicked.fy = nodeClicked.y;
-            setDragNodeSelected(nodeClicked);
-            setMouseDown(true);
-            setDownMouseCoords({ x: e.clientX, y: e.clientY });
-            e.stopPropagation();
-          }}
-          onMouseUp={() => {
-            releaseBubble();
-          }}
-        >
-          {links.map((link) => (
-            <BubbleLink
-              key={link.target}
-              sourceNode={nodes[link.source]}
-              targetNode={nodes[link.target]}
-            />
-          ))}
-          {nodes.map((nodeData) => {
-            const handleAddNodePD = () => {
-              handleAddNode(nodeData);
-            };
-            const handleDeleteNodePD = () => {
-              handleDeleteNode(nodeData);
-            };
-            const handleEditNodePD = () => {
-              handleEditNode(nodeData);
-            };
-            const handleSetNodeLockStatePD = (lockState?: boolean) => {
-              if (nodeData.id === 0) return;
-              if (lockState === undefined) {
-                handleSetNodeLockStatePD(!nodeLockStates[nodeData.id]);
-              } else {
-                // Update the lock state of the node in the nodeLockStates state array
-                setNodeLockStates({
-                  ...nodeLockStates,
-                  [nodeData.id]: lockState,
-                });
+            onApprove={(newText) => {
+              const oldNode = nodes.find((n) => n.id === editNodeDialogIsOpen);
+              if (!oldNode) return;
+              const newNode = { ...oldNode, text: newText };
+              updateNode(oldNode, newNode);
+            }}
+            isOpen={!(editNodeDialogIsOpen === null)}
+            onReject={() => {
+              setEditNodeDialogIsOpen(null);
+            }}
+            updateOnInitialValueChange
+            suggestedAction="approve"
+          />
+          <TextDialog
+            approveButtonText="Add Bubble"
+            rejectButtonText="Cancel"
+            title="Add Bubble"
+            onApprove={(newText) => {
+              if (
+                addNodeDialogIsOpen === null ||
+                nodes.find((n) => n.id === addNodeDialogIsOpen) === undefined
+              )
+                return;
+              addNode({
+                parent: addNodeDialogIsOpen,
+                text: newText || 'New Bubble',
+              });
+            }}
+            isOpen={!(addNodeDialogIsOpen === null)}
+            onReject={() => {
+              setAddNodeDialogIsOpen(null);
+            }}
+            suggestedAction="approve"
+          />
+          <svg
+            style={{
+              overflow: 'visible',
+            }}
+            width={1}
+            height={1}
+            onMouseDown={(e) => {
+              // if right click
+              if (e.button === 2) {
+                return;
               }
-            };
-            return (
+              const x =
+                (e.clientX - context.state.positionX + mouseDelta.x) /
+                context.state.scale;
+              const y =
+                (e.clientY - context.state.positionY + mouseDelta.y) /
+                context.state.scale;
+              nodeClicked = simulation?.find(x, y, 15);
+              if (!nodeClicked) return;
+              nodeClicked.fx = nodeClicked.x;
+              nodeClicked.fy = nodeClicked.y;
+              setDragNodeSelected(nodeClicked);
+              setMouseDown(true);
+              setDownMouseCoords({ x: e.clientX, y: e.clientY });
+              e.stopPropagation();
+            }}
+            onMouseUp={() => {
+              releaseBubble();
+            }}
+          >
+            {links.map((link) => (
+              <BubbleLink
+                key={link.target}
+                sourceNode={nodes[link.source]}
+                targetNode={nodes[link.target]}
+              />
+            ))}
+            {nodes.map((nodeData) => (
               <Bubble
                 key={nodeData.id}
                 node={nodeData}
@@ -513,16 +545,22 @@ const MindMapSimulationWithTransform = forwardRef(
                 mouseDown={mouseDown}
                 setMouseDown={setMouseDown}
                 downMouseCoords={downMouseCoords}
-                handleAddNode={handleAddNodePD}
-                handleDeleteNode={handleDeleteNodePD}
-                updateNode={updateNode}
-                handleEditNode={handleEditNodePD}
-                handleSetNodeLockState={handleSetNodeLockStatePD}
+                handleAddNode={() => setAddNodeDialogIsOpen(nodeData.id)}
+                handleDeleteNode={() => setDeleteNodeDialogOpen(nodeData.id)}
+                handleEditNode={() => setEditNodeDialogIsOpen(nodeData.id)}
+                handleSetNodeLockState={(lockState?: boolean) => {
+                  if (nodeData.id === 0) return;
+                  // Update the lock state of the node in the nodeLockStates state array
+                  setNodeLockStates({
+                    ...nodeLockStates,
+                    [nodeData.id]: lockState ?? !nodeLockStates[nodeData.id],
+                  });
+                }}
                 locked={nodeLockStates[nodeData.id]}
               />
-            );
-          })}
-        </svg>
+            ))}
+          </svg>
+        </>
       );
     return null;
   }
@@ -550,18 +588,9 @@ const MindMapSimulation = ({
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const childRef = useRef<any>();
 
-  const handleAddNode = (parentNode?: SimulationNodeDatum & node) => {
-    if (!parentNode) return;
-    // eslint-disable-next-line no-alert
-    const newText = prompt('Enter new text', '');
-    if (newText) {
-      addNode({ parent: parentNode.id, text: newText });
-    }
-  };
-
   const shortcutHandlers = {
     ADD_NODE: (e?: KeyboardEvent) => {
-      handleAddNode(selectedNode);
+      childRef.current.handleAddNode();
       e?.preventDefault();
     },
     DELETE_NODE: (e?: KeyboardEvent) => {
@@ -654,7 +683,6 @@ const MindMapSimulation = ({
               dragNodeSelected={dragNodeSelected}
               setDragNodeSelected={setDragNodeSelected}
               addNode={addNode}
-              handleAddNode={handleAddNode}
               deleteNode={deleteNode}
               updateNode={updateNode}
               selectedNode={selectedNode}
@@ -665,7 +693,7 @@ const MindMapSimulation = ({
       </div>
       <BottomBar
         data={data}
-        handleAddNode={handleAddNode}
+        handleAddNode={() => childRef.current.handleAddNode()}
         selectedNode={selectedNode}
         resetCanvas={resetCanvas}
       />
diff --git a/src/pages/MindMap/index.tsx b/src/pages/MindMap/index.tsx
index 8f21bda..52d872a 100644
--- a/src/pages/MindMap/index.tsx
+++ b/src/pages/MindMap/index.tsx
@@ -28,7 +28,7 @@ import GenIdeaPanel from './overlays/GenIdeaPanel';
 const keyMap = {
   ADD_NODE: 'ctrl+enter',
   DELETE_NODE: ['del', 'backspace'],
-  EDIT_NODE_TEXT: 'enter',
+  EDIT_NODE_TEXT: 'shift+enter',
   // Not Implemented
   GENERATE_IDEAS: 'ctrl+shift+enter',
   // Not Implemented
@@ -37,8 +37,8 @@ const keyMap = {
   TOGGLE_SETTINGS: 'ctrl+shift+p',
   MOVE_SELECTION_TO_PARENT: ['up', '`'],
   MOVE_SELECTION_TO_CHILD: 'down',
-  MOVE_SELECTION_TO_NEXT_SIBLING: ['right', 'tab'],
-  MOVE_SELECTION_TO_PREVIOUS_SIBLING: ['left', 'shift+tab'],
+  MOVE_SELECTION_TO_NEXT_SIBLING: ['right'],
+  MOVE_SELECTION_TO_PREVIOUS_SIBLING: ['left'],
   MOVE_SELECTION_TO_ROOT: ['0', 'ctrl+up'],
   RESET_VIEW: ['ctrl+0', 'home'],
   LOCK_NODE: ['l', 'ctrl+l', 'space'],
@@ -172,8 +172,6 @@ const MindMap = () => {
     }
   };
 
-  if (!mindmap) return <div>Sorry, I couldn&apos;t find that mindmap.</div>;
-
   const shortcutHandlers = {
     TOGGLE_SETTINGS: () => {
       // eslint-disable-next-line no-console
@@ -184,6 +182,8 @@ const MindMap = () => {
   // Get the mindmap node with id 0, which is the root node
   const rootNode = mindmap.nodes.find((o) => o.id === 0);
 
+  if (!mindmap) throw new Error('Sorry, I couldn&apos;t find that mindmap.');
+
   if (!rootNode) {
     throw new Error('Root node not found!');
   }
diff --git a/src/pages/MindMap/overlays/BottomBar/KeyBindsDialog.tsx b/src/pages/MindMap/overlays/BottomBar/KeyBindsDialog.tsx
index a9ee1ad..5f3f7b0 100644
--- a/src/pages/MindMap/overlays/BottomBar/KeyBindsDialog.tsx
+++ b/src/pages/MindMap/overlays/BottomBar/KeyBindsDialog.tsx
@@ -37,9 +37,6 @@ const KeyBindsDialog = ({
 
   const aboutPanel = (
     <Grid container spacing={2}>
-      <Grid item xs={12}>
-        <Typography variant="h6">About</Typography>
-      </Grid>
       <Grid item xs={12}>
         <Typography variant="body1">
           This is a mind map editor designed and built by Saketh Reddy and Eric
@@ -49,7 +46,13 @@ const KeyBindsDialog = ({
       <Grid item xs={12}>
         <Typography variant="body1">
           This project is open source. You can find the source code on{' '}
-          <a href="https://github.com/SpiritSeal/mindmap">GitHub</a>.
+          <a
+            href="https://github.com/SpiritSeal/mindmap"
+            style={{ color: 'white' }}
+          >
+            GitHub
+          </a>
+          .
         </Typography>
       </Grid>
       <Grid item xs={12}>
@@ -59,6 +62,7 @@ const KeyBindsDialog = ({
             href="mailto:
             support@bubblemap.app
           "
+            style={{ color: 'white' }}
           >
             support@bubblemap.app
           </a>
@@ -96,38 +100,42 @@ const KeyBindsDialog = ({
         <TableBody>
           {mapEntry(
             '<kbd>Ctrl</kbd> + <kbd>Enter</kbd>',
-            'Add Child Node to Selected Node'
+            'Add Bubble to Selected Bubble'
           )}
           {mapEntry(
             // Double space 'or' statements using &nbsp&nbsp
             '<kbd>Delete</kbd>&nbsp&nbspor&nbsp&nbsp<kbd>Backspace</kbd>',
-            'Delete Selected Node'
+            'Delete Selected Bubble'
           )}
           {mapEntry(
-            // Enter -> Edit Node Text
-            '<kbd>Enter</kbd>',
-            'Edit Selected Node Text'
+            '<kbd>Shift</kbd> + <kbd>Enter</kbd>',
+            'Edit Selected Bubble'
           )}
         </TableBody>
         <TableHead>
           <TableRow>
             <TableCell align="center" colSpan={2}>
-              <Typography variant="h6">Node Selection Manipulation</Typography>
+              <Typography variant="h6">
+                Bubble Selection Manipulation
+              </Typography>
             </TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
-          {mapEntry('<kbd>Up</kbd>', 'Select Parent Node')}
-          {mapEntry('<kbd>Down</kbd>', 'Select Child Node')}
+          {mapEntry('<kbd>Up</kbd>', 'Select Parent Bubble')}
+          {mapEntry('<kbd>Down</kbd>', 'Select Child Bubble')}
           {mapEntry(
             '<kbd>Left</kbd>',
-            'Select Next Sibling Node (Counter-Clockwise)'
+            'Select Next Sibling Bubble (Counter-Clockwise)'
+          )}
+          {mapEntry(
+            '<kbd>Right</kbd>',
+            'Select Next Sibling Bubble (Clockwise)'
           )}
-          {mapEntry('<kbd>Right</kbd>', 'Select Next Sibling Node (Clockwise)')}
           {/* 'Move selection to root" is '0' or 'ctrl'+'up */}
           {mapEntry(
             '<kbd>0</kbd>&nbsp&nbspor&nbsp&nbsp<kbd>Ctrl</kbd> + <kbd>Up</kbd>',
-            'Select Root Node'
+            'Select Root Bubble'
           )}
         </TableBody>
         <TableHead>
@@ -139,11 +147,11 @@ const KeyBindsDialog = ({
             </TableCell>
           </TableRow>
         </TableHead>
-        {/* Space, 'l', or 'ctrl+l' map to Lock Node */}
+        {/* Space, 'l', or 'ctrl+l' map to Lock Bubble */}
         <TableBody>
           {mapEntry(
             '<kbd>Space</kbd>&nbsp&nbspor&nbsp&nbsp<kbd>L</kbd>',
-            'Lock Node'
+            'Lock Bubble'
           )}
           {/* Reset Pan and Zoom back to Default */}
           {mapEntry(
@@ -179,25 +187,28 @@ const KeyBindsDialog = ({
         <TableHead>
           <TableRow>
             <TableCell align="center" colSpan={2}>
-              <Typography variant="h6">Mouse-Node Interactions</Typography>
+              <Typography variant="h6">Mouse-Bubble Interactions</Typography>
             </TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
-          {mapEntry('Left Click Node', 'Select Node')}
-          {mapEntry('Drag Node', 'Move Node')}
-          {mapEntry('Right Click Node', 'Open Context Menu')}
+          {mapEntry('Left Click Bubble', 'Select Bubble')}
+          {mapEntry('Drag Bubble', 'Move Bubble')}
+          {mapEntry('Right Click Bubble', 'Open Context Menu')}
           {/* Double Click */}
-          {mapEntry('Double Click Node', 'Edit Node Text')}
+          {mapEntry('Double Click Bubble', 'Edit Bubble Text')}
           {/* Control Click */}
           {mapEntry(
-            '<kbd>Ctrl</kbd> + Left Click Node',
-            'Add Child Node to Selected Node'
+            '<kbd>Ctrl</kbd> + Left Click Bubble',
+            'Add Bubble to Selected Bubble'
           )}
           {/* Shift Click */}
-          {mapEntry('<kbd>Shift</kbd> + Left Click Node', 'Lock Node Position')}
+          {mapEntry(
+            '<kbd>Shift</kbd> + Left Click Bubble',
+            'Lock Bubble Position'
+          )}
           {/* Alt Click */}
-          {mapEntry('<kbd>Alt</kbd> + Left Click Node', 'Delete Node')}
+          {mapEntry('<kbd>Alt</kbd> + Left Click Bubble', 'Delete Bubble')}
         </TableBody>
         {/* Mouse-Canvas Interaction */}
         <TableHead>
@@ -215,73 +226,6 @@ const KeyBindsDialog = ({
     </TableContainer>
   );
 
-  // const mouseShortcutsPanel = (
-  //   // table displaying an icon, the mouse actions, and corresponding shortcuts side by side
-  //   <TableContainer component={Paper}>
-  //     <Table>
-  //       <TableHead>
-  //         <TableRow>
-  //           <TableCell align="center">Icon</TableCell>
-  //           <TableCell align="center">Action</TableCell>
-  //           <TableCell align="center">Effect</TableCell>
-  //         </TableRow>
-  //       </TableHead>
-  //       <TableBody>
-  //         <TableRow>
-  //           <TableCell align="center">
-  //             {/* <DragHandle fontSize={iconSize} /> */}
-  //           </TableCell>
-  //           <TableCell align="center">Left Click Node</TableCell>
-  //           <TableCell align="center">Select Node</TableCell>
-  //         </TableRow>
-  //         <TableRow>
-  //           <TableCell align="center">
-  //             {/* <DragHandle fontSize={iconSize} /> */}
-  //           </TableCell>
-  //           <TableCell align="center">Drag Node</TableCell>
-  //           <TableCell align="center">Move Node</TableCell>
-  //         </TableRow>
-  //         <TableRow>
-  //           <TableCell align="center">
-  //             {/* <DragHandleIcon fontSize={iconSize} /> */}
-  //           </TableCell>
-  //           <TableCell align="center">Right Click Node</TableCell>
-  //           <TableCell align="center">Open Node Menu</TableCell>
-  //         </TableRow>
-  //         <TableRow>
-  //           <TableCell align="center">
-  //             {/* <DragHandleIcon fontSize={iconSize} /> */}
-  //           </TableCell>
-  //           <TableCell align="center">Double Click Node</TableCell>
-  //           <TableCell align="center">Edit Node</TableCell>
-  //         </TableRow>
-  //         <TableRow>
-  //           <TableCell align="center">
-  //             {/* <DragHandleIcon fontSize={iconSize} /> */}
-  //           </TableCell>
-  //           <TableCell align="center">Control + Click Node</TableCell>
-  //           <TableCell align="center">Add Child Node</TableCell>
-  //         </TableRow>
-  //         <TableRow>
-  //           <TableCell align="center">
-  //             {/* <DragHandleIcon fontSize={iconSize} /> */}
-  //           </TableCell>
-  //           <TableCell align="center">Shift + Click Node</TableCell>
-  //           <TableCell align="center">Lock Node</TableCell>
-  //         </TableRow>
-  //         <TableRow>
-  //           <TableCell align="center">
-  //             {/* <DragHandleIcon fontSize={iconSize} /> */}
-  //           </TableCell>
-  //           <TableCell align="center">Alt + Click Node</TableCell>
-  //           <TableCell align="center">Delete Node</TableCell>
-  //         </TableRow>
-  //         {/* End */}
-  //       </TableBody>
-  //     </Table>
-  //   </TableContainer>
-  // );
-
   return (
     <Dialog
       fullWidth
diff --git a/src/pages/MindMap/overlays/BottomBar/index.tsx b/src/pages/MindMap/overlays/BottomBar/index.tsx
index 8a6da3d..0a1f614 100644
--- a/src/pages/MindMap/overlays/BottomBar/index.tsx
+++ b/src/pages/MindMap/overlays/BottomBar/index.tsx
@@ -95,6 +95,7 @@ const BottomBar = ({
         updateTitle(titleRef.current);
       }
     }, 1500);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [title]);
 
   return (
diff --git a/src/pages/MindMap/overlays/GenIdeaPanel/index.tsx b/src/pages/MindMap/overlays/GenIdeaPanel/index.tsx
index 4e87f24..1d47d0d 100644
--- a/src/pages/MindMap/overlays/GenIdeaPanel/index.tsx
+++ b/src/pages/MindMap/overlays/GenIdeaPanel/index.tsx
@@ -5,17 +5,12 @@ import {
   List,
   Divider,
   Fab,
-  ListItemSecondaryAction,
   IconButton,
   ListItem,
   ListItemButton,
   ListItemText,
 } from '@mui/material';
-import {
-  SettingsSuggest,
-  ChevronLeft,
-  ChevronRight,
-} from '@mui/icons-material';
+import { ChevronLeft, ChevronRight } from '@mui/icons-material';
 import { httpsCallable } from 'firebase/functions';
 import { useFunctions } from 'reactfire';
 import { SimulationNodeDatum } from 'd3-force';
@@ -146,6 +141,7 @@ const PersistentDrawerRight = ({
         textCache[selectedNode.id] !== selectedNode.text
       );
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedNode]);
 
   // When the panel is opened, generate ideas for the selected node
@@ -153,6 +149,7 @@ const PersistentDrawerRight = ({
     if (open) {
       generateIdeas(selectedNode.id, selectedNode.text);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);
 
   const handleIdeaClick = (nodeID: number, idea: string) => {
@@ -288,11 +285,11 @@ const PersistentDrawerRight = ({
               }}
             />
             {/* PART ONE */}
-            <ListItemSecondaryAction>
+            {/* <ListItemSecondaryAction>
               <IconButton edge="end" aria-label="settings">
                 <SettingsSuggest />
               </IconButton>
-            </ListItemSecondaryAction>
+            </ListItemSecondaryAction> */}
           </ListItem>
           {gpt3Cache[selectedNode.id]?.map((idea) => (
             <ListItemButton