Fixes react-router-dom upgrade. Replaces some deprecated directives.

freifunkMUC · Sep 13, 2023 · 94533cd · 94533cd
1 parent 52ef316
commit 94533cd
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>