refactored for clarity

src/utils/dialog-utils.js → src/utils/base-floating-dialog.js

@@ -12,28 +12,15 @@ import DialogTitle from '@mui/material/DialogTitle';
 import Paper from '@mui/material/Paper';
 import Slide from '@mui/material/Slide';
 
-/**
- * This creates a 3D dialog.
- *
- * @param props
- * @returns {JSX.Element}
- * @constructor
- */
-function PaperComponent(props) {
-  return (
-    <Draggable handle="#draggable-dialog-title" cancel={'[class*="MuiDialogContent-root"]'}>
-      <Paper {...props} />
-    </Draggable>
-  );
-}
+import { useLayers } from '@context';
 
-/**
- * This creates an animated transition for the dialog that pops up
- * @type {React.ForwardRefExoticComponent<React.PropsWithoutRef<{}> & React.RefAttributes<any>>}
- */
-const Transition = React.forwardRef(function Transition(props, ref) {
-  return <Slide direction="up" ref={ref} {...props} />;
-});
+// define the properties of this component
+BaseFloatingDialog.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  openDialogImmediately: PropTypes.bool,
+  dialogObject: PropTypes.any
+};
 
 /**
  * This is a component that displays a floating dialog with the content passed
@@ -43,18 +30,25 @@ const Transition = React.forwardRef(function Transition(props, ref) {
  * @param openDialogImmediately: boolean
  * @param dialogObject: {JSX.Element}
  * @returns {JSX.Element}
- * @constructor
  */
 export default function BaseFloatingDialog({ title, description, openDialogImmediately, dialogObject} ) {
-
   // define the dialog open/close session state
   const [open, setOpen] = React.useState(openDialogImmediately);
 
+  const {
+      selectedObservations,
+      setSelectedObservations
+  } = useLayers();
+
   /**
    * the close dialog handler
    */
   const handleClose = () => {
+    // close the dialog
     setOpen(false);
+
+    // remove this item from the selected observations list
+    setSelectedObservations(selectedObservations.filter(item => item.station_name !== title));
   };
 
   /**
@@ -74,9 +68,9 @@ export default function BaseFloatingDialog({ title, description, openDialogImmed
         PaperProps={{ style: { pointerEvents: 'auto'} }}
         sx={{ '.MuiBackdrop-root': { backgroundColor: 'transparent' }}}
       >
-        <DialogTitle sx={{cursor: 'move', backgroundColor: 'lightgray', textAlign: 'center'}} id="draggable-dialog-title"> { title } </DialogTitle>
+        <DialogTitle sx={{cursor: 'move', backgroundColor: 'lightgray', textAlign: 'center'}} id="draggable-dialog-title"> { "Station: " + title } </DialogTitle>
 
-        <DialogContent sx={{backgroundColor: 'lightblue'}}><DialogContentText> { description } </DialogContentText></DialogContent>
+        <DialogContent sx={{backgroundColor: 'lightblue'}}><DialogContentText> { "Location: " + description } </DialogContentText></DialogContent>
 
         <DialogContent sx={{backgroundColor: 'lightgreen'}}>{ dialogObject }</DialogContent>
 
@@ -86,10 +80,25 @@ export default function BaseFloatingDialog({ title, description, openDialogImmed
   );
 };
 
-// define the properties of this component
-BaseFloatingDialog.propTypes = {
-  title: PropTypes.string,
-  description: PropTypes.string,
-  openDialogImmediately: PropTypes.bool,
-  dialogObject: PropTypes.any
-};
+/**
+ * This creates a 3D dialog.
+ *
+ * @param props
+ * @returns {JSX.Element}
+ * @constructor
+ */
+function PaperComponent(props) {
+  return (
+    <Draggable handle="#draggable-dialog-title" cancel={'[class*="MuiDialogContent-root"]'}>
+      <Paper {...props} />
+    </Draggable>
+  );
+}
+
+/**
+ * This creates an animated transition for the dialog that pops up
+ * @type {React.ForwardRefExoticComponent<React.PropsWithoutRef<{}> & React.RefAttributes<any>>}
+ */
+const Transition = React.forwardRef(function Transition(props, ref) {
+  return <Slide direction="up" ref={ref} {...props} />;
+});