Start React & Material UI update

package.json

@@ -3,23 +3,24 @@
 	"version": "0.1.0",
 	"private": true,
 	"dependencies": {
-    "@material-ui/core": "^4.11.4",
+		"@emotion/react": "^11.9.3",
-    "@material-ui/data-grid": "^4.0.0-alpha.26",
+		"@emotion/styled": "^11.9.3",
-    "@material-ui/icons": "^4.11.2",
+		"@mui/icons-material": "^5.8.3",
-    "@testing-library/jest-dom": "^5.12.0",
+		"@mui/material": "^5.8.3",
-    "@testing-library/react": "^11.2.6",
+		"@mui/x-data-grid": "^5.12.1",
-    "@testing-library/user-event": "^12.8.3",
+		"@testing-library/jest-dom": "^5.16.4",
-    "@types/jest": "^26.0.23",
+		"@testing-library/react": "^13.3.0",
-    "@types/node": "^12.20.11",
+		"@testing-library/user-event": "^13.5.0",
-    "@types/react": "^17.0.4",
+		"@types/jest": "^27.5.2",
-    "@types/react-dom": "^17.0.3",
+		"@types/node": "^16.11.39",
-    "@types/react-router-dom": "^5.1.7",
+		"@types/react": "^18.0.12",
-    "react": "^17.0.2",
+		"@types/react-dom": "^18.0.5",
-    "react-dom": "^17.0.2",
+		"react": "^18.1.0",
-    "react-router-dom": "^5.2.0",
+		"react-dom": "^18.1.0",
-    "react-scripts": "4.0.3",
+		"react-router-dom": "^6.3.0",
-    "typescript": "^4.2.4",
+		"react-scripts": "5.0.1",
-    "web-vitals": "^1.1.1"
+		"typescript": "^4.7.3",
+		"web-vitals": "^2.1.4"
 	},
 	"scripts": {
 		"start": "react-scripts start",

src/App.tsx

@@ -1,14 +1,14 @@
+import { createTheme, ThemeProvider } from "@mui/material";
+import { lightBlue, pink } from "@mui/material/colors";
 import React from "react";
 import "./App.css";
-import { createMuiTheme, ThemeProvider } from "@material-ui/core";
 import { ApplicationDialogsProvider } from "./ui/widgets/DialogsProvider";
-import { lightBlue, pink } from "@material-ui/core/colors";
 import { InitWidget } from "./ui/widgets/InitWidget";
 
 function App() {
-	const darkTheme = createMuiTheme({
+	const darkTheme = createTheme({
 		palette: {
-			type: "dark",
+			mode: "dark",
 			primary: lightBlue,
 			secondary: pink,
 		},

src/ui/accountSettings/GeneralSettings.tsx

@@ -4,7 +4,7 @@
  * @author Pierre Hubert
  */
 
-import { TextField, Button } from "@material-ui/core";
+import { TextField, Button } from "@mui/material";
 import React from "react";
 import { AdminAccount, AccountHelper } from "../../helpers/AccountHelper";
 import { snackbar, matAlert } from "../widgets/DialogsProvider";

src/ui/accountSettings/KeySettingsSection.tsx

@@ -8,9 +8,9 @@ import {
 	TableHead,
 	TableRow,
 	Tooltip,
-} from "@material-ui/core";
+} from "@mui/material";
-import { Delete } from "@material-ui/icons";
+import { Delete } from "@mui/icons-material";
-import LockIcon from "@material-ui/icons/Lock";
+import LockIcon from "@mui/icons-material/Lock";
 import React from "react";
 import { AccountHelper, AdminAccount } from "../../helpers/AccountHelper";
 import { AdminAccountKey, AdminKeyHelper } from "../../helpers/AdminKeyHelper";

src/ui/accountSettings/RoleSettingsSection.tsx

@@ -4,7 +4,7 @@
  * @author Pierre Hubert
  */
 
-import { Checkbox, FormControlLabel, Tooltip } from "@material-ui/core";
+import { Checkbox, FormControlLabel, Tooltip } from "@mui/material";
 import React from "react";
 import { AdminAccount } from "../../helpers/AccountHelper";
 import {

src/ui/accountSettings/SettingsSection.tsx

@@ -1,4 +1,4 @@
-import { Grid } from "@material-ui/core";
+import { Grid } from "@mui/material";
 import React from "react";
 import { CustomCard } from "../widgets/CustomCard";
 

src/ui/routes/AccountLogsRoute.tsx

@@ -6,7 +6,7 @@ import {
 	TableContainer,
 	TableHead,
 	TableRow,
-} from "@material-ui/core";
+} from "@mui/material";
 import React from "react";
 import { AccountHelper, AdminAccount } from "../../helpers/AccountHelper";
 import {

src/ui/routes/AccountSettingsRoute.tsx

@@ -4,7 +4,7 @@
  * @author Pierre Hubert
  */
 
-import { Grid } from "@material-ui/core";
+import { Grid } from "@mui/material";
 import React from "react";
 import { useParams } from "react-router-dom";
 import { AccountHelper, AdminAccount } from "../../helpers/AccountHelper";

src/ui/routes/AccountsListRoute.tsx

@@ -13,9 +13,9 @@ import {
 	TableContainer,
 	TableHead,
 	TableRow,
-} from "@material-ui/core";
+} from "@mui/material";
-import AddIcon from "@material-ui/icons/Add";
+import AddIcon from "@mui/icons-material/Add";
-import SettingsIcon from "@material-ui/icons/Settings";
+import SettingsIcon from "@mui/icons-material/Settings";
 import React from "react";
 import { Link } from "react-router-dom";
 import { AccountHelper, AdminAccount } from "../../helpers/AccountHelper";

src/ui/routes/ComunicUserRoute.tsx

@@ -6,8 +6,8 @@ import {
 	TableBody,
 	TableCell,
 	TableRow,
-} from "@material-ui/core";
+} from "@mui/material";
-import EmailIcon from "@material-ui/icons/Email";
+import EmailIcon from "@mui/icons-material/Email";
 import React from "react";
 import {
 	ComunicUser,
@@ -24,7 +24,7 @@ import {
 } from "../widgets/DialogsProvider";
 import { PageTitle } from "../widgets/PageTitle";
 import { TimestampWidget } from "../widgets/TimestampWidget";
-import LinkIcon from "@material-ui/icons/Link";
+import LinkIcon from "@mui/icons-material/Link";
 import { CopyToClipboard } from "../../utils/ClipboardUtils";
 interface UserProperty {
 	name: string;
@@ -254,7 +254,7 @@ export class ComunicUserRoute extends React.Component<
 							>
 								<Button
 									variant="outlined"
-									color="default"
+									color="secondary"
 									startIcon={<EmailIcon />}
 									style={{
 										width: "100%",
@@ -268,7 +268,7 @@ export class ComunicUserRoute extends React.Component<
 
 								<Button
 									variant="outlined"
-									color="default"
+									color="secondary"
 									startIcon={<LinkIcon />}
 									style={{ width: "100%" }}
 									onClick={this.createPasswordResetLink}

src/ui/routes/LoginRoute.tsx

@@ -17,9 +17,9 @@ import {
 	Paper,
 	TextField,
 	Typography,
-} from "@material-ui/core";
+} from "@mui/material";
-import { ErrorOutline, Lock, VpnKey } from "@material-ui/icons";
+import { ErrorOutline, Lock, VpnKey } from "@mui/icons-material";
-import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
+import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
 import React from "react";
 import { AccountHelper, AuthOptions } from "../../helpers/AccountHelper";
 import { AdminKeyHelper, AuthKey } from "../../helpers/AdminKeyHelper";

src/ui/routes/MainRoute.tsx

@@ -16,19 +16,19 @@ import {
 	Paper,
 	Toolbar,
 	Typography,
-} from "@material-ui/core";
+} from "@mui/material";
-import { Home, Person } from "@material-ui/icons";
+import { Home, Person } from "@mui/icons-material";
-import CloseSharpIcon from "@material-ui/icons/CloseSharp";
+import CloseSharpIcon from "@mui/icons-material/CloseSharp";
-import GroupIcon from "@material-ui/icons/Group";
+import GroupIcon from "@mui/icons-material/Group";
-import HistoryIcon from "@material-ui/icons/History";
+import HistoryIcon from "@mui/icons-material/History";
 import React from "react";
 import {
 	BrowserRouter as Router,
 	Route,
-	Switch,
+	Routes,
-	useHistory,
+	useNavigate,
 	useParams,
-	useRouteMatch,
+	useMatch,
 } from "react-router-dom";
 import { AccountHelper, AdminAccountRole } from "../../helpers/AccountHelper";
 import { AccountLogsRoute } from "./AccountLogsRoute";
@@ -39,55 +39,6 @@ import { HomeRoute } from "./HomeRoute";
 import { NotFoundRoute } from "./NotFoundRoute";
 import { SearchComunicUsersRoute } from "./SearchComunicUsersRoute";
 
-const useStyles = makeStyles((theme) => ({
-	root: {
-		display: "flex",
-	},
-	toolbar: {
-		paddingRight: 24, // keep right padding when drawer closed
-	},
-	toolbarIcon: {
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "flex-end",
-		padding: "0 8px",
-		...theme.mixins.toolbar,
-	},
-	appBar: {
-		zIndex: theme.zIndex.drawer + 1,
-		width: `100%`,
-		color: "white",
-	},
-	menuButton: {
-		marginRight: 36,
-	},
-	menuButtonHidden: {
-		display: "none",
-	},
-	title: {
-		flexGrow: 1,
-	},
-	appBarSpacer: theme.mixins.toolbar,
-	content: {
-		flexGrow: 1,
-		height: "100vh",
-		overflow: "auto",
-	},
-	container: {
-		paddingTop: theme.spacing(4),
-		paddingBottom: theme.spacing(4),
-	},
-	paper: {
-		padding: theme.spacing(2),
-		display: "flex",
-		overflow: "auto",
-		flexDirection: "column",
-	},
-	fixedHeight: {
-		height: 240,
-	},
-}));
-
 function Menu() {
 	return (
 		<div>
@@ -126,14 +77,10 @@ function MainMenuItem(p: {
 	uri: string;
 	needsRole?: AdminAccountRole;
 }) {
-	const history = useHistory();
+	const n = useNavigate();
-	const openMyAccount = () => history.push(p.uri);
+	const openMyAccount = () => n(p.uri);
 
-	const selected =
+	const selected = useMatch(p.uri) != null;
-		useRouteMatch({
-			path: p.uri,
-			exact: true,
-		}) != null;
 
 	// Check if roles are filtered
 	if (p.needsRole) {
@@ -150,8 +97,6 @@ function MainMenuItem(p: {
 }
 
 export function MainRoute() {
-	const classes = useStyles();
-
 	const signOut = () => {
 		AccountHelper.signOut();
 	};
@@ -169,16 +114,20 @@ export function MainRoute() {
 
 				<AppBar
 					position="fixed"
-					className={classes.appBar}
+					style={{
+						zIndex: 1,
+						width: `100%`,
+						color: "white",
+					}}
 					color="primary"
 				>
-					<Toolbar className={classes.toolbar}>
+					<Toolbar style={{ padding: 24 }}>
 						<Typography
 							component="h1"
 							variant="h6"
 							color="inherit"
 							noWrap
-							className={classes.title}
+							style={{ flexGrow: 1 }}
 						>
 							Comunic Console
 						</Typography>
@@ -214,12 +163,12 @@ export function MainRoute() {
 								maxWidth: "1280px",
 							}}
 						>
-							<Switch>
+							<Routes>
-								<Route exact path="/">
+								<Route path="/">
 									<HomeRoute></HomeRoute>
 								</Route>
 
-								<Route exact path="/users">
+								<Route path="/users">
 									<SearchComunicUsersRoute />
 								</Route>
 
@@ -227,7 +176,7 @@ export function MainRoute() {
 									<ComunicUserRouteProxy />
 								</Route>
 
-								<Route exact path="/accounts">
+								<Route path="/accounts">
 									<AccountsListRoute />
 								</Route>
 
@@ -242,7 +191,7 @@ export function MainRoute() {
 								<Route path="*">
 									<NotFoundRoute />
 								</Route>
-							</Switch>
+							</Routes>
 						</div>
 					</div>
 				</div>

src/ui/routes/NotFoundRoute.tsx

@@ -4,7 +4,7 @@
  * @author Pierre Hubert
  */
 
-import { Typography } from "@material-ui/core";
+import { Typography } from "@mui/material";
 
 export function NotFoundRoute() {
 	return (

src/ui/routes/SearchComunicUsersRoute.tsx

@@ -11,9 +11,9 @@ import {
 	Paper,
 	TextField,
 	Typography,
-} from "@material-ui/core";
+} from "@mui/material";
 import React from "react";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import {
 	ComunicUsersHelper,
 	SearchResult,
@@ -134,11 +134,8 @@ export class SearchComunicUsersRoute extends React.Component<
 }
 
 function ResultItem(p: { user: SearchResult }) {
-	const history = useHistory();
+	const n = useNavigate();
-	const openButton = () => {
+	const openButton = () => n("/user/" + p.user.id);
-		history.push("/user/" + p.user.id);
-	};
-
 	return (
 		<ListItem button onClick={openButton}>
 			<Grid container wrap="nowrap" spacing={2}>

src/ui/widgets/AsyncWidget.tsx

@@ -4,7 +4,7 @@
  * @author Pierre Hubert
  */
 
-import { Button, Paper } from "@material-ui/core";
+import { Button, Paper } from "@mui/material";
 import React, { ReactNode } from "react";
 import { CenterCircularProgress } from "./CenterCircularProgress";
 

src/ui/widgets/CenterCircularProgress.tsx

@@ -1,12 +1,16 @@
-import { CircularProgress } from "@material-ui/core";
+import { CircularProgress } from "@mui/material";
 
 export function CenterCircularProgress() {
-   return <div style={{
+	return (
+		<div
+			style={{
 				display: "flex",
 				justifyContent: "center",
 				alignItems: "center",
-       height: "100%"
+				height: "100%",
-    }}>
+			}}
+		>
 			<CircularProgress></CircularProgress>
 		</div>
+	);
 }

src/ui/widgets/CustomCard.tsx

@@ -1,4 +1,4 @@
-import { Divider, Paper, Typography } from "@material-ui/core";
+import { Divider, Paper, Typography } from "@mui/material";
 import React from "react";
 
 export function CustomCard(p: { title: string; children?: React.ReactNode }) {

src/ui/widgets/DialogsProvider.tsx

@@ -14,8 +14,8 @@ import {
 	TextField,
 	Snackbar,
 	IconButton,
-} from "@material-ui/core";
+} from "@mui/material";
-import { Close } from "@material-ui/icons";
+import { Close } from "@mui/icons-material";
 import React, { FormEvent } from "react";
 
 let cache: ApplicationDialogsProvider;
@@ -116,7 +116,7 @@ export class ApplicationDialogsProvider extends React.Component<
 	}
 
 	handleCloseSnackbar(
-		_event: React.SyntheticEvent | React.MouseEvent,
+		_event: React.SyntheticEvent | React.MouseEvent | Event,
 		reason?: string
 	) {
 		if (reason === "clickaway") {
@@ -216,7 +216,7 @@ export class ApplicationDialogsProvider extends React.Component<
 						</DialogContentText>
 					</DialogContent>
 					<DialogActions>
-						<Button onClick={this.handleCloseAlert} color="default">
+						<Button onClick={this.handleCloseAlert} color="primary">
 							OK
 						</Button>
 					</DialogActions>
@@ -265,10 +265,10 @@ export class ApplicationDialogsProvider extends React.Component<
 						</DialogContentText>
 					</DialogContent>
 					<DialogActions>
-						<Button onClick={this.rejectConfirm} color="default">
+						<Button onClick={this.rejectConfirm} color="secondary">
 							Cancel
 						</Button>
-						<Button onClick={this.acceptConfirm} color="default">
+						<Button onClick={this.acceptConfirm} color="secondary">
 							Confirm
 						</Button>
 					</DialogActions>
@@ -305,12 +305,12 @@ export class ApplicationDialogsProvider extends React.Component<
 						</form>
 					</DialogContent>
 					<DialogActions>
-						<Button onClick={this.cancelInput} color="default">
+						<Button onClick={this.cancelInput} color="secondary">
 							Cancel
 						</Button>
 						<Button
 							onClick={this.confirmInput}
-							color="default"
+							color="secondary"
 							disabled={!this.isInputValid}
 						>
 							OK

src/ui/widgets/PageTitle.tsx

@@ -1,4 +1,4 @@
-import { Typography } from "@material-ui/core";
+import { Typography } from "@mui/material";
 
 /**
  * Page title widget

src/ui/widgets/TimestampWidget.tsx

@@ -1,4 +1,4 @@
-import { Tooltip } from "@material-ui/core";
+import { Tooltip } from "@mui/material";
 import React from "react";
 
 /**

tsconfig.json

@@ -1,11 +1,7 @@
 {
 	"compilerOptions": {
 		"target": "es5",
-    "lib": [
+		"lib": ["dom", "dom.iterable", "esnext"],
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
 		"allowJs": true,
 		"skipLibCheck": true,
 		"esModuleInterop": true,
@@ -20,7 +16,5 @@
 		"noEmit": true,
 		"jsx": "react-jsx"
 	},
-  "include": [
+	"include": ["src"]
-    "src"
-  ]
 }