From 94533cdef0dd354789e261b22cbcfae95664181c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nico=20Waldisp=C3=BChl?= <nico.waldispuehl@inventage.com>
Date: Wed, 13 Sep 2023 08:07:47 +0200
Subject: [PATCH] Fixes `react-router-dom` upgrade. Replaces some deprecated
 directives.

---
 website/src/App.tsx                     | 10 +++++-----
 website/src/components/AddDevice.tsx    | 15 ++++++++++++++-
 website/src/components/Devices.tsx      |  2 +-
 website/src/components/GetConnected.tsx |  4 ++--
 4 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/website/src/App.tsx b/website/src/App.tsx
index f41b4526..5492d560 100644
--- a/website/src/App.tsx
+++ b/website/src/App.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import Box from '@material-ui/core/Box';
 import Navigation from './components/Navigation';
-import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { observer } from 'mobx-react';
 import { grpc } from './Api';
 import { AppState } from './AppState';
@@ -23,14 +23,14 @@ export const App = observer(class App extends React.Component {
         <CssBaseline />
         <Navigation />
         <Box component="div" m={2}>
-          <Switch>
-            <Route exact path="/" component={YourDevices} />
+          <Routes>
+            <Route path="/" element={<YourDevices />} />
             {AppState.info.isAdmin && (
               <>
-                <Route exact path="/admin/all-devices" component={AllDevices} />
+                <Route path="/admin/all-devices" element={<AllDevices />} />
               </>
             )}
-          </Switch>
+          </Routes>
         </Box>
       </Router>
     );
diff --git a/website/src/components/AddDevice.tsx b/website/src/components/AddDevice.tsx
index cc2098d1..814703ba 100644
--- a/website/src/components/AddDevice.tsx
+++ b/website/src/components/AddDevice.tsx
@@ -141,6 +141,19 @@ export const AddDevice = observer(class AddDevice extends React.Component<Props>
   }
 
   render() {
+
+    const handleClose = (event: any, reason: string) => {
+      if (reason === "backdropClick") {
+        return false;
+      }
+
+      if (reason === "escapeKeyDown") {
+        return false;
+      }
+
+      return true
+    };
+
     return (
       <>
         <Card>
@@ -206,7 +219,7 @@ export const AddDevice = observer(class AddDevice extends React.Component<Props>
             </form>
           </CardContent>
         </Card>
-        <Dialog disableBackdropClick disableEscapeKeyDown maxWidth="xl" open={this.dialogOpen}>
+        <Dialog disableEscapeKeyDown maxWidth="xl" open={this.dialogOpen} onClose={handleClose}>
           <DialogTitle>
             Get Connected
             <Info>
diff --git a/website/src/components/Devices.tsx b/website/src/components/Devices.tsx
index 25597713..681a840e 100644
--- a/website/src/components/Devices.tsx
+++ b/website/src/components/Devices.tsx
@@ -29,7 +29,7 @@ export const Devices = observer(class Devices extends React.Component {
       return <p>loading...</p>;
     }
     return (
-      <Grid container spacing={3} justify="center">
+      <Grid container spacing={3} justifyContent="center">
         <Grid item xs={12}>
           <Grid container spacing={3}>
             {this.devices.current.map((device, i) => (
diff --git a/website/src/components/GetConnected.tsx b/website/src/components/GetConnected.tsx
index dfb52e9f..dc258837 100644
--- a/website/src/components/GetConnected.tsx
+++ b/website/src/components/GetConnected.tsx
@@ -63,7 +63,7 @@ export class GetConnected extends React.Component<Props> {
         </Paper>
 
         <TabPanel for="desktop" value={this.state.currentTab}>
-          <Grid container direction="row" justify="space-around" alignItems="center">
+          <Grid container direction="row" justifyContent="space-around" alignItems="center">
             <List>
               <ListItem>
                 <ListItemText style={{ width: 300 }} primary="1. Install the WireGuard App" />
@@ -96,7 +96,7 @@ export class GetConnected extends React.Component<Props> {
 
         {this.props.showMobile && 
         <TabPanel for="mobile" value={this.state.currentTab}>
-          <Grid container direction="row" justify="space-around" alignItems="center">
+          <Grid container direction="row" justifyContent="space-around" alignItems="center">
             <Grid item>
               <List>
                 <ListItem>