mine editor opens

src/common/DelayedTextInput.tsx

@@ -0,0 +1,58 @@
+import { 
+  FilledInputProps, 
+  InputProps, 
+  OutlinedInputProps, 
+  TextField 
+} from "@mui/material";
+import React, { useState } from "react";
+
+interface Props {
+  value: string;
+  onChange: React.Dispatch<React.SetStateAction<string>>;
+  delayMS?: number;
+  variant?: "standard" | "filled" | "outlined" | undefined;
+  title?: string;
+  size?: "small" | "medium" | undefined;
+  inputProps?:
+    | Partial<InputProps>
+    | Partial<FilledInputProps>
+    | Partial<OutlinedInputProps>
+    | undefined;
+  disabled?: boolean;
+}
+
+const DelayedTextField = (props: Props) => {
+  const { value, onChange, delayMS, variant, title, size, inputProps, disabled } = props;
+
+  const delay = delayMS ? delayMS : 1000;
+  const [inputValue, setInputValue] = useState(value);
+  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout>(setTimeout(() => {}, 0));
+
+  //const timeout = useRef(null); //global variable
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    clearTimeout(timeoutId); // Clear previous timeout
+    const newValue = event.target.value;
+    setInputValue(newValue);
+
+    setTimeoutId(
+      setTimeout(() => {
+        onChange(newValue); // Update the value after the delay
+      }, delay)
+    );
+  };
+
+  return (
+    <TextField
+      value={inputValue}
+      variant={variant}
+      title={title}
+      InputProps={inputProps}
+      onChange={e => handleInputChange(e)}
+      size={size}
+      disabled={disabled}
+    />
+  );
+};
+
+export default DelayedTextField;

src/navigation/Router.tsx

@@ -6,6 +6,7 @@ import Header from "app/Header";
 import Logout from "pages/Logout";
 import { ErrorBoundary } from "react-error-boundary";
 import { getWhitelabel } from "services/whiteLabel";
+import Ventilation from "pages/VentEditor";
 
 const DeviceHistory = lazy(() => import("pages/DeviceHistory"));
 const DevicePage = lazy(() => import("pages/Device"));
@@ -133,22 +134,14 @@ export default function Router(props: Props) {
           <Route
             key="Mines page route"
             path="" // "/settings/basic"
-            element={<Mines key={"Bins page"} />}
-          />
-          {/* <Route
-            path="/:binID" // "/settings/basic"
-            element={<Bin />}
-          /> */}
-          {/* <Route
-            path="/:deviceID/components/:componentID" // "/settings/basic"
-            element={<DeviceComponent />}
+            element={<Mines key={"Mines page"} />}
           />
           <Route
-            path="/:deviceID/history" // "/settings/basic"
-            element={<DeviceHistory />}
-          /> */}
+            path="/:mineKey" // "/settings/basic"
+            element={<Ventilation />}
+          />
           <Route
-            path="/:binID/*" // "/settings/basic"
+            path="/:mineKey/*" // "/settings/basic"
             element={<RelativeRoutes />}
           />
         </Routes>

src/pages/Mines.tsx

@@ -1,23 +1,18 @@
-import SmartBreadcrumb from "common/SmartBreadcrumb";
 import classNames from "classnames";
-import React, { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import PageContainer from "./PageContainer";
 import {
   Theme,
   Tooltip,
   Chip,
-  Box,
-  Grid2 as Grid,
-  useTheme,
   Typography,
   Grid2,
 } from "@mui/material";
 import { pond } from "protobuf-ts/pond";
-import { useMineAPI, useMobile } from "hooks";
+import { useMineAPI } from "hooks";
 // import { useHistory } from "react-router";
 import AddMine from "ventilation/AddMine";
 import { Add } from "@mui/icons-material";
-import SearchBar from "common/SearchBar";
 import { makeStyles, withStyles } from "@mui/styles";
 import ResponsiveTable, { Column } from "common/ResponsiveTable";
 import { useNavigate } from "react-router-dom";
@@ -150,7 +145,6 @@ export default function Mines() {
   const renderTitle = () => {
     return (
       <Grid2 container direction={"row"} spacing={1} alignContent={"center"}>
-        {/* <Grid2 sx={{ border: "1px solid blue"}} alignContent={"center"}> */}
         <Typography variant="h5">
            Mines
         </Typography>
@@ -159,9 +153,8 @@ export default function Mines() {
     )
   }
 
-  const onClick = (data: MineRow) => {
-    const url = or(data.mine.settings?.key, "")
-    navigate(url)
+  const onRowClick = (data: MineRow) => {
+    navigate(or(data.mine.settings?.key, ""))
   }
 
   const minesTable = () => {
@@ -178,7 +171,7 @@ export default function Mines() {
         handleRowsPerPageChange={handleRowsPerPageChange}
         hideKeys
         isLoading={isLoading}
-        onRowClick={onClick}
+        onRowClick={onRowClick}
       />
     )
   }

src/ventilation/EditorActions.tsx

@@ -1,5 +1,12 @@
-import { IconButton, ListItemIcon, ListItemText, Menu, MenuItem, Tooltip } from "@material-ui/core";
-import { AccountCircle, MoreVert, Settings } from "@material-ui/icons";
+import { 
+  IconButton, 
+  ListItemIcon, 
+  ListItemText, 
+  Menu, 
+  MenuItem, 
+  Tooltip 
+} from "@mui/material";
+import { AccountCircle, MoreVert, Settings } from "@mui/icons-material";
 import { isOffline } from "utils/environment";
 import { mineScope } from "models";
 import { pond } from "protobuf-ts/pond";
@@ -8,7 +15,7 @@ import ObjectUsers from "user/ObjectUsers";
 import { or } from "utils";
 import EditorSettings from "./EditorSettings";
 import ObjectTeams from "teams/ObjectTeams";
-import ObjectTeamsIcon from "@material-ui/icons/SupervisedUserCircle";
+import ObjectTeamsIcon from "@mui/icons-material/SupervisedUserCircle";
 import { useGlobalState } from "providers";
 
 interface Props {
@@ -37,7 +44,7 @@ export default function EditorActions(props: Props) {
         disableAutoFocusItem>
         {/* Users menu item */}
         {!isOffline() && canManageUsers && (
-          <MenuItem onClick={() => setUserDialog(true)} button dense>
+          <MenuItem onClick={() => setUserDialog(true)} dense>
             <ListItemIcon>
               <AccountCircle />
             </ListItemIcon>
@@ -45,7 +52,7 @@ export default function EditorActions(props: Props) {
           </MenuItem>
         )}
         {!isOffline() && canManageTeams && (
-          <MenuItem onClick={() => setTeamDialog(true)} button dense>
+          <MenuItem onClick={() => setTeamDialog(true)} dense>
             <ListItemIcon>
               <ObjectTeamsIcon />
             </ListItemIcon>

src/ventilation/EditorDrawer.tsx

@@ -1,5 +1,5 @@
-import { createStyles, makeStyles, Theme } from "@material-ui/core";
-import React from "react";
+import { Theme } from "@mui/material";
+import { makeStyles } from "@mui/styles";
 
 const drawer = {
   "&": {
@@ -14,7 +14,7 @@ const drawer = {
 };
 
 const useStyles = makeStyles((theme: Theme) => {
-  return createStyles({
+  return ({
     drawer: {
       ...drawer,
       height: "calc(100% - " + theme.spacing(7) + "px)",

src/ventilation/EditorHeader.tsx

@@ -1,13 +1,11 @@
 import {
-  createStyles,
   Divider,
-  Grid,
+  Grid2 as Grid,
   IconButton,
-  makeStyles,
   Theme,
   Typography,
   useTheme
-} from "@material-ui/core";
+} from "@mui/material";
 import React, { useState } from "react";
 import UndoIcon from "assets/editor/undo.png";
 import RedoIcon from "assets/editor/redo.png";
@@ -17,15 +15,16 @@ import DeleteIcon from "assets/editor/delete.png";
 import { ImgIcon } from "common/ImgIcon";
 import { pond } from "protobuf-ts/pond";
 import { useMineAPI, useSnackbar } from "providers";
-import { Save, CloudDownload } from "@material-ui/icons";
+import { Save, CloudDownload } from "@mui/icons-material";
 import { Placeable } from "./drawable/Placeable";
 import { Component } from "models";
 import EditorActions from "./EditorActions";
 import LoadMine from "./LoadMine";
 import { Sensor } from "./drawable/Sensor";
+import { makeStyles } from "@mui/styles";
 
 const useStyles = makeStyles((theme: Theme) => {
-  return createStyles({
+  return ({
     header: {
       width: "100%",
       height: theme.spacing(7),
@@ -164,7 +163,7 @@ export default function EditorHeader(props: Props) {
 
   return (
     <Grid container className={classes.header}>
-      <Grid item xs className={classes.leftButtons}>
+      <Grid className={classes.leftButtons}>
         <Typography className={classes.leftButtons} variant="h6">
           {mine.name ? mine.name : "No Name"}
         </Typography>
@@ -175,7 +174,7 @@ export default function EditorHeader(props: Props) {
           <CloudDownload />
         </IconButton>
       </Grid>
-      <Grid item xs className={classes.middleButtons}>
+      <Grid className={classes.middleButtons}>
         <div className={classes.middleButtons}>
           <IconButton onClick={undoRef.current ? (undoRef.current as any) : undefined}>
             <ImgIcon src={UndoIcon} />
@@ -197,7 +196,7 @@ export default function EditorHeader(props: Props) {
           </IconButton>
         </div>
       </Grid>
-      <Grid item xs className={classes.rightButtons}>
+      <Grid className={classes.rightButtons}>
         <div className={classes.rightButtons}>
           <EditorActions
             mine={mine}

src/ventilation/EditorSettings.tsx

@@ -1,25 +1,24 @@
 import {
   Button,
-  createStyles,
   Dialog,
   DialogActions,
   DialogContent,
   DialogTitle,
-  makeStyles,
   TextField,
   Theme,
   Typography,
   Tooltip
-} from "@material-ui/core";
+} from "@mui/material";
+import { makeStyles } from "@mui/styles";
 import DeleteButton from "common/DeleteButton";
 import { cloneDeep } from "lodash";
 import { pond } from "protobuf-ts/pond";
 import { useMineAPI, useSnackbar } from "providers";
 import React, { useState } from "react";
-import { useHistory } from "react-router";
+import { useNavigate } from "react-router-dom";
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+const useStyles = makeStyles((theme: Theme) => {
+  return ({
     dialogContent: {
       minHeight: "25vh"
     },
@@ -27,7 +26,7 @@ const useStyles = makeStyles((theme: Theme) =>
       zIndex: theme.zIndex.modal + 1
     }
   })
-);
+});
 
 interface Props {
   open: boolean;
@@ -44,7 +43,7 @@ export default function EditorSettings(props: Props) {
   const classes = useStyles();
   const mineAPI = useMineAPI();
   const snackbar = useSnackbar();
-  const history = useHistory();
+  const navigate = useNavigate()
 
   const updateName = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
     setNameInput(event.currentTarget.value);
@@ -65,7 +64,7 @@ export default function EditorSettings(props: Props) {
         setRemoveDialog(false);
         setOpen(false);
         setMine(pond.MineSettings.create());
-        history.push("/mines");
+        navigate("/mines");
       })
       .catch(err => {
         snackbar.error("Could not delete the mine");

src/ventilation/EditorSidebar.tsx

@@ -1,4 +1,4 @@
-import { createStyles, makeStyles, Theme, Tooltip } from "@material-ui/core";
+import { Theme, Tooltip } from "@mui/material";
 import React, { useState } from "react";
 import FansIcon from "assets/editor/fans.png";
 import FansYellowIcon from "assets/editor/fansYellow.png";
@@ -14,9 +14,10 @@ import DeviceDrawer from "./drawers/DeviceDrawer";
 import { pond } from "protobuf-ts/pond";
 import SensorDrawer from "./drawers/SensorDrawer";
 import { Component } from "models";
+import { makeStyles } from "@mui/styles";
 
 const useStyles = makeStyles((theme: Theme) => {
-  return createStyles({
+  return ({
     sidebar: {
       maxHeight: "auto",
       width: theme.spacing(10),

src/ventilation/LoadMine.tsx

@@ -2,27 +2,26 @@ import {
   Button,
   Card,
   CircularProgress,
-  createStyles,
   DialogActions,
   DialogContent,
   DialogTitle,
   Divider,
   IconButton,
-  makeStyles,
   MenuItem,
   Select,
   Theme,
   Typography
-} from "@material-ui/core";
+} from "@mui/material";
 import { pond } from "protobuf-ts/pond";
 import { useMineAPI, useSnackbar } from "providers";
 import React, { useEffect, useState } from "react";
 import { or } from "utils";
 import { loadPlaceable, Placeable } from "./drawable/Placeable";
-import LeftIcon from "@material-ui/icons/KeyboardArrowLeft";
-import RightIcon from "@material-ui/icons/KeyboardArrowRight";
+import LeftIcon from "@mui/icons-material/KeyboardArrowLeft";
+import RightIcon from "@mui/icons-material/KeyboardArrowRight";
 import ResponsiveDialog from "common/ResponsiveDialog";
 import { useMobile } from "hooks";
+import { makeStyles } from "@mui/styles";
 
 interface Props {
   setMine: (value: React.SetStateAction<pond.MineSettings>) => void;
@@ -34,7 +33,7 @@ interface Props {
 }
 
 const useStyles = makeStyles((theme: Theme) => {
-  return createStyles({
+  return ({
     dialog: {
       //width: theme.spacing(32)
     },

src/ventilation/VentDialog.tsx

@@ -16,8 +16,8 @@ import {
   Select,
   MenuItem,
   useTheme
-} from "@material-ui/core";
-import { Close } from "@material-ui/icons";
+} from "@mui/material";
+import { Close } from "@mui/icons-material";
 import ResponsiveDialog from "common/ResponsiveDialog";
 import { useMobile } from "hooks";
 import { pond } from "protobuf-ts/pond";

src/ventilation/Zoom.tsx

@@ -1,5 +1,5 @@
-import { IconButton, InputAdornment, TextField, useTheme } from "@material-ui/core";
-import { Add, Remove } from "@material-ui/icons";
+import { IconButton, InputAdornment, TextField, useTheme } from "@mui/material";
+import { Add, Remove } from "@mui/icons-material";
 import React from "react";
 
 interface Props {

src/ventilation/drawers/ComponentCards.tsx

@@ -6,16 +6,14 @@ import {
   Box,
   Card,
   CardContent,
+  CardHeader,
   Checkbox,
   CircularProgress,
-  createStyles,
-  Grid,
-  makeStyles,
+  Grid2 as Grid,
   Theme,
   Typography,
   useTheme
-} from "@material-ui/core";
-import CardHeader from "@material-ui/core/CardHeader";
+} from "@mui/material";
 import { getContextKeys, getContextTypes } from "pbHelpers/Context";
 import { pond } from "protobuf-ts/pond";
 import { GetComponentIcon } from "pbHelpers/ComponentType";
@@ -24,7 +22,8 @@ import UnitMeasurementSummary from "component/UnitMeasurementSummary";
 import { UnitMeasurement } from "models/UnitMeasurement";
 import { useGlobalState } from "providers";
 import DelayedTextField from "common/DelayedTextInput";
-import { useHistory } from "react-router";
+import { makeStyles } from "@mui/styles";
+import { useNavigate } from "react-router-dom";
 
 interface Props {
   deviceId: number;
@@ -39,8 +38,8 @@ interface Props {
   types?: string[];
 }
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+const useStyles = makeStyles((theme: Theme) => {
+  return ({
     avatarIcon: {
       width: theme.spacing(3),
       height: theme.spacing(3)
@@ -67,7 +66,7 @@ const useStyles = makeStyles((theme: Theme) =>
       }
     }
   })
-);
+});
 
 export default function ComponentCards(props: Props) {
   const {
@@ -87,7 +86,7 @@ export default function ComponentCards(props: Props) {
   const classes = useStyles();
   const [{ user }] = useGlobalState();
   const theme = useTheme();
-  const history = useHistory();
+  const navigate = useNavigate()
 
   const keys = props.keys ? props.keys : getContextKeys();
   const types = props.types ? props.types : getContextTypes();
@@ -200,13 +199,13 @@ export default function ComponentCards(props: Props) {
                       <Typography
                         className={classes.onHover}
                         onClick={() => {
-                          history.replace(
-                            history.location.pathname +
+                          navigate(
+                            window.location.pathname +
                               "/devices/" +
                               deviceId +
                               "/components/" +
                               component.key()
-                          );
+                          , { replace: true });
                         }}>
                         {component.name()}
                       </Typography>
@@ -252,7 +251,7 @@ export default function ComponentCards(props: Props) {
                               boxShadow: "inset 0px 0px 12px rgba(0,0,0,0.5)",
                               marginTop: i > 0 ? 10 : 0
                             }}>
-                            <Grid item xs={10}>
+                            <Grid size={{ xs: 10 }}>
                               <Grid container direction="column">
                                 <DelayedTextField
                                   value={sensor.nickname}
@@ -277,21 +276,21 @@ export default function ComponentCards(props: Props) {
                                 />
                               </Grid>
                               <Grid container spacing={1}>
-                                <Grid item style={{ marginLeft: 6 }}>
+                                <Grid style={{ marginLeft: 6 }}>
                                   <UnitMeasurementSummary
                                     component={component}
                                     reading={reading}
                                     dense
                                   />
                                 </Grid>
-                                <Grid item>
+                                <Grid >
                                   <Typography variant={"caption"} style={{ fontSize: 12 }}>
                                     {"(" + sensor.x + ", " + sensor.y + ")"}
                                   </Typography>
                                 </Grid>
                               </Grid>
                             </Grid>
-                            <Grid item xs={2}>
+                            <Grid size={{ xs: 2 }}>
                               <Box
                                 display="flex"
                                 justifyContent={"center"}
@@ -346,7 +345,7 @@ export default function ComponentCards(props: Props) {
   }, [deviceId, componentAPI, showMobile, keys, types]);
 
   return (
-    <Grid container direction="row" justify="flex-start" spacing={2}>
+    <Grid container direction="row" justifyContent="flex-start" spacing={2}>
       {firstLoad ? (
         <div
           style={{

src/ventilation/drawers/DeviceDrawer.tsx

@@ -3,27 +3,26 @@ import {
   Card,
   Checkbox,
   CircularProgress,
-  createStyles,
   Divider,
   Grid,
   IconButton,
-  makeStyles,
   MenuItem,
   Select,
   Tab,
   Tabs,
   Theme,
   Typography
-} from "@material-ui/core";
+} from "@mui/material";
 import DeviceIcon from "assets/editor/device.png";
 import React, { useEffect, useState } from "react";
 import { pond } from "protobuf-ts/pond";
 import { useDeviceAPI, useMineAPI } from "hooks";
-import LeftIcon from "@material-ui/icons/KeyboardArrowLeft";
-import RightIcon from "@material-ui/icons/KeyboardArrowRight";
+import LeftIcon from "@mui/icons-material/KeyboardArrowLeft";
+import RightIcon from "@mui/icons-material/KeyboardArrowRight";
+import { makeStyles } from "@mui/styles";
 
 const useStyles = makeStyles((theme: Theme) => {
-  return createStyles({
+  return ({
     topText: {
       //textAlign: "center",
       //alignContent: "center"
@@ -246,7 +245,7 @@ export default function DeviceDrawer(props: Props) {
       <div className={classes.bottom}>
         {offset + 1} - {devices.length + offset} of {total}
         <div className={classes.bottomButtons}>
-          <Grid container justify="center">
+          <Grid container justifyContent="center">
             <IconButton onClick={back} size="small">
               <LeftIcon />
             </IconButton>

src/ventilation/drawers/DuctingDrawer.tsx

@@ -1,17 +1,17 @@
-import { Card, createStyles, Divider, makeStyles, Theme, Typography } from "@material-ui/core";
+import { Card, Divider, Theme, Typography } from "@mui/material";
 import InlineIcon from "assets/editor/inlineCentrifugal.png";
 import FullIcon from "assets/editor/fullCentrifugal.png";
 import LowIcon from "assets/editor/lowCentrifugal.png";
 import Fan1Icon from "assets/editor/fan1.png";
 import Fan2Icon from "assets/editor/fan2.png";
 import Fan3Icon from "assets/editor/fan3.png";
-import AddIcon from "@material-ui/icons/Add";
+import AddIcon from "@mui/icons-material/Add";
 import React from "react";
-import { Block } from "ventilation/drawable/Block";
 import { pond } from "protobuf-ts/pond";
 import { VentShaft } from "ventilation/drawable/VentShaft";
 import { VentCorner } from "ventilation/drawable/VentCorner";
 import { VentTBreak } from "ventilation/drawable/VentTBreak";
+import { makeStyles } from "@mui/styles";
 
 const ducts = [
   {
@@ -41,7 +41,7 @@ const ducts = [
 ];
 
 const useStyles = makeStyles((theme: Theme) => {
-  return createStyles({
+  return ({
     topText: {
       //textAlign: "center",
       //alignContent: "center"

src/ventilation/drawers/FansDrawer.tsx

@@ -1,13 +1,19 @@
-import { Card, createStyles, Divider, makeStyles, Theme, Typography } from "@material-ui/core";
+import { 
+  Card, 
+  Divider, 
+  Theme, 
+  Typography 
+} from "@mui/material";
 import InlineIcon from "assets/editor/inlineCentrifugal.png";
 import FullIcon from "assets/editor/fullCentrifugal.png";
 import LowIcon from "assets/editor/lowCentrifugal.png";
 import Fan1Icon from "assets/editor/fan1.png";
 import Fan2Icon from "assets/editor/fan2.png";
 import Fan3Icon from "assets/editor/fan3.png";
-import AddIcon from "@material-ui/icons/Add";
+import AddIcon from "@mui/icons-material/Add";
 import React from "react";
 import { Fan } from "ventilation/drawable/Fan";
+import { makeStyles } from "@mui/styles";
 
 const fans = [
   {
@@ -37,7 +43,7 @@ const fans = [
 ];
 
 const useStyles = makeStyles((theme: Theme) => {
-  return createStyles({
+  return ({
     topText: {
       //textAlign: "center",
       //alignContent: "center"

src/ventilation/drawers/SensorDrawer.tsx

@@ -1,32 +1,31 @@
 import {
   Collapse,
-  createStyles,
   Divider,
-  Grid,
+  Grid2 as Grid,
   IconButton,
   List,
-  ListItem,
+  ListItemButton,
   ListItemIcon,
   ListItemText,
-  makeStyles,
   MenuItem,
   Select,
   Theme,
   Typography,
   useTheme
-} from "@material-ui/core";
+} from "@mui/material";
 import React, { useState } from "react";
 import { pond } from "protobuf-ts/pond";
-import LeftIcon from "@material-ui/icons/KeyboardArrowLeft";
-import RightIcon from "@material-ui/icons/KeyboardArrowRight";
-import { ExpandLess, ExpandMore } from "@material-ui/icons";
+import LeftIcon from "@mui/icons-material/KeyboardArrowLeft";
+import RightIcon from "@mui/icons-material/KeyboardArrowRight";
+import { ExpandLess, ExpandMore } from "@mui/icons-material";
 import DeviceIcon from "assets/editor/device.png";
 import { ImgIcon } from "common/ImgIcon";
 import ComponentCards from "./ComponentCards";
 import { Component } from "models";
+import { makeStyles } from "@mui/styles";
 
 const useStyles = makeStyles((theme: Theme) => {
-  return createStyles({
+  return ({
     topText: {
       //textAlign: "center",
       //alignContent: "center"
@@ -148,8 +147,7 @@ export default function SensorDrawer(props: Props) {
         {selectedDevices.map((device: pond.Device) => {
           return (
             <React.Fragment key={device.settings?.deviceId}>
-              <ListItem
-                button
+              <ListItemButton
                 onClick={() => {
                   if (device.settings?.deviceId === expanded) {
                     setExpanded(0);
@@ -168,7 +166,7 @@ export default function SensorDrawer(props: Props) {
                   }
                 />
                 {device.settings?.deviceId === expanded ? <ExpandLess /> : <ExpandMore />}
-              </ListItem>
+              </ListItemButton>
               <Collapse in={device.settings?.deviceId === expanded} timeout="auto" unmountOnExit>
                 {device.settings?.deviceId === expanded && (
                   <React.Fragment>
@@ -195,7 +193,7 @@ export default function SensorDrawer(props: Props) {
       <div className={classes.bottom}>
         {offset + 1} - {limit + offset} of {selectedDevices.length}
         <div className={classes.bottomButtons}>
-          <Grid container justify="center">
+          <Grid container justifyContent="center">
             <IconButton onClick={back} size="small">
               <LeftIcon />
             </IconButton>