passing react tests

src/components/VehicleMap/popup.jsx

@@ -1,22 +1,74 @@
 import React from "react";
+import Button from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import MuiDialogTitle from '@material-ui/core/DialogTitle';
+import MuiDialogContent from '@material-ui/core/DialogContent';
+import MuiDialogActions from '@material-ui/core/DialogActions';
+import IconButton from '@material-ui/core/IconButton';
+import CloseIcon from '@material-ui/icons/Close';
+import Typography from '@material-ui/core/Typography';
+
+import useStyles from "../useStyles";
+
+const VehiclePopUp = (props) => {
+    const classes = useStyles();
+    const { vin, online, battery, doors, location, windows, onClose } = props;
 
-const VehiclePopUp = ({ vin, online, doors, location, windows }) => {
-    console.log(location);
     return (
-        <Dialog aria-labelledby="simple-dialog-title" open={true}>
-            <DialogTitle>{vin}</DialogTitle>
-            <p>{online.toString()}</p>
-            {/* {doors != null && (
-                <ul>
-                    {doors.forEach((value, key) => (<li>{key}: {value.toString()}</li>))}
-                </ul>
-            )}
-            <ul>
-                {location != null && location.forEach((value, key) => (<li>{key}: {value.toString()}</li>))}
-            </ul> */}
-        </Dialog>
+        <Dialog
+            fullWidth
+            classes={{ paper: classes.popUp }}
+            open={true}
+            onClose={onClose}
+        >
+            <DialogTitle align="center" onClose={onClose}>{vin}</DialogTitle>
+            <div align="center" className={classes.popUpContent}>
+                <p><b>Connected</b>: {online.toString()}</p>
+                {online && (
+                    <div>
+                        {battery != null && (
+                            <p><b>battery</b>: {battery.percent}%</p>
+                        )}
+                        {doors != null && (
+                            <div>
+                                <h3>Doors</h3>
+                                {Object.entries(doors).map((value) => (<p><b>{value[0]}</b>: {value[1] ? "open" : "closed"}</p>))}
+                            </div>
+                        )}
+                        {windows != null && (
+                            <div>
+                                <h3>Windows</h3>
+                                {Object.entries(windows).map((value) => (<p><b>{value[0]}</b>: {value[1] ? "open" : "closed"}</p>))}
+                            </div>
+                        )}
+                        {location != null && (
+                            <div>
+                                <h3>Location</h3>
+                                {Object.entries(location).map((value) => (<p><b>{value[0]}</b>: {value[1]}</p>))}
+                            </div>
+                        )}
+                    </div>
+                )}
+                {(!online || (battery == null && doors == null && location == null && windows == null)) && (
+                    <p>No vehicle data to display.</p>
+                )}
+            </div>
+        </Dialog >
+    );
+};
+
+const DialogTitle = (props) => {
+    const { children, onClose, ...other } = props;
+    const classes = useStyles();
+    return (
+        <MuiDialogTitle disableTypography className={classes.root} {...other}>
+            <Typography variant="h6">{children}</Typography>
+            {onClose ? (
+                <IconButton aria-label="close" className={classes.closeButton} onClick={onClose}>
+                    <CloseIcon />
+                </IconButton>
+            ) : null}
+        </MuiDialogTitle>
     );
 };