generalizing its usage better by passing the data key and state data/…

…setter references

src/utils/base-floating-dialog.js

@@ -7,98 +7,91 @@ import CssBaseline from '@mui/material/CssBaseline';
 import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogActions';
-import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 import Paper from '@mui/material/Paper';
 import Slide from '@mui/material/Slide';
 
-import { useLayers } from '@context';
-
 // define the properties of this component
 BaseFloatingDialog.propTypes = {
-  title: PropTypes.string,
-  description: PropTypes.string,
-  openDialogImmediately: PropTypes.bool,
-  dialogObject: PropTypes.any
+    title: PropTypes.string,
+    dialogObject: PropTypes.any,
+    dataKey: PropTypes.any,
+    dataList: PropTypes.any,
+    setDataList: PropTypes.func
 };
 
 /**
- * This is a component that displays a floating dialog with the content passed
+ * This is a component that displays a floating dialog with the content passed.
+ * Note: this component
  *
  * @param title: string
- * @param description: string
- * @param openDialogImmediately: boolean
  * @param dialogObject: {JSX.Element}
- * @returns {JSX.Element}
+ * @param dataKey:
+ * @param dataList:
+ * @param setDataList:
  */
-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));
-  };
+export default function BaseFloatingDialog({ title, dialogObject, dataKey, dataList, setDataList} ) {
+    // define the dialog open/close session state
+    //const [open, setOpen] = React.useState(true);
 
-  /**
-   * configure and render the floating dialog
-   */
-  return (
-    <Fragment>
-      <CssBaseline />
-      <Dialog
-        aria-labelledby="draggable-dialog-title"
-        open={open}
-        onClose={handleClose}
-        PaperComponent={PaperComponent}
-        TransitionComponent={Transition}
-        disableEnforceFocus
-        style={{ pointerEvents: 'none'}}
-        PaperProps={{ style: { pointerEvents: 'auto'} }}
-        sx={{ '.MuiBackdrop-root': { backgroundColor: 'transparent' }}}
-      >
-        <DialogTitle sx={{cursor: 'move', backgroundColor: 'lightgray', textAlign: 'center'}} id="draggable-dialog-title"> { "Station: " + title } </DialogTitle>
+    /**
+    * the close dialog handler
+    */
+    const handleClose = () => {
+        // if there was a data key defined, use it
+        if (dataKey !== undefined) {
+            // remove this item from the data list
+            // TODO: change location_name to an id element added to the data
+            setDataList(dataList.filter(item => item.location_name !== dataKey));
+        }
+    };
 
-        <DialogContent sx={{backgroundColor: 'lightblue'}}><DialogContentText> { "Location: " + description } </DialogContentText></DialogContent>
+    /**
+    * configure and render the floating dialog
+    */
+    return (
+        <Fragment>
+            <CssBaseline />
+                <Dialog
+                    aria-labelledby="draggable-dialog-title"
+                    open={true}
+                    onClose={handleClose}
+                    PaperComponent={PaperComponent}
+                    TransitionComponent={Transition}
+                    disableEnforceFocus
+                    style={{ pointerEvents: 'none'}}
+                    PaperProps={{ style: { pointerEvents: 'auto'} }}
+                    sx={{ '.MuiBackdrop-root': { backgroundColor: 'transparent' }}}
+                >
+                    <DialogTitle sx={{cursor: 'move', backgroundColor: 'lightgray', textAlign: 'center'}} id="draggable-dialog-title"> { title } </DialogTitle>
 
-        <DialogContent sx={{backgroundColor: 'lightgreen'}}>{ dialogObject }</DialogContent>
+                    <DialogContent sx={{backgroundColor: 'lightgreen'}}>{ dialogObject }</DialogContent>
 
-        <DialogActions sx={{backgroundColor: 'lightgray'}}><Button autoFocus onClick={handleClose}> Close </Button></DialogActions>
-      </Dialog>
-    </Fragment>
-  );
+                    <DialogActions sx={{backgroundColor: 'lightgray'}}><Button autoFocus onClick={handleClose}> Close </Button></DialogActions>
+                </Dialog>
+        </Fragment>
+    );
 };
 
 /**
- * This creates a 3D dialog.
- *
- * @param props
- * @returns {JSX.Element}
- * @constructor
- */
+* 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>
-  );
+    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>>}
- */
+* 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} />;
+    return <Slide direction="up" ref={ref} {...props} />;
 });